/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #000;
    color: #fff;
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Auth Status Indicator - green dot when logged in */
.auth-status {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 999;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.3s ease;
    pointer-events: none;
}

.auth-status.logged-in {
    background: #4CAF50;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.5);
    pointer-events: auto;
    cursor: pointer;
}

/* Language Selector */
.language-selector {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    display: flex;
    gap: 4px;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: 4px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.lang-btn {
    padding: 6px 12px;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.lang-btn:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.lang-btn.active {
    background-color: #fff;
    color: #000;
    font-weight: 600;
}

.lang-btn.active:hover {
    background-color: #f0f0f0;
}

/* Content Type Selector (YouTube/X/All toggle) */
.content-type-selector {
    display: flex;
    gap: 2px;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: 4px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.content-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 28px;
}

.content-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.content-btn:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

.content-btn.active {
    background-color: #fff;
    color: #000;
    font-weight: 600;
}

.content-btn.active svg {
    stroke: #000;
}

.content-btn.active:hover {
    background-color: #f0f0f0;
}

/* Branched Filter Container */
.branched-filter {
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    z-index: 998;
    padding: 8px 16px;
    pointer-events: none;
}

.filter-step {
    pointer-events: auto;
    animation: filterStepFadeIn 0.3s ease;
}

.filter-step-row {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.filter-step-row::-webkit-scrollbar {
    display: none;
}

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

/* Genre Pills */
.genre-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid transparent;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.genre-pill:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.genre-pill:active {
    transform: scale(0.95);
}

.genre-pill.coming-soon {
    opacity: 0.45;
}

.genre-pill-icon {
    display: flex;
    align-items: center;
}

.genre-pill-icon svg {
    width: 16px;
    height: 16px;
}

/* Pulse animation for initial genre pills */
.genre-pill-pulse {
    animation: genrePulse 2s ease-in-out 3;
}

@keyframes genrePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    50% { box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.3); }
}

/* Active state for genre pills (used on collections page) */
.genre-pill.active {
    background: #fff;
    color: #000;
    font-weight: 600;
}

/* Combined Status Pill (tappable back) */
.combined-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 20px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.combined-pill:hover {
    background: #e8e8e8;
}

.combined-pill:active {
    transform: scale(0.95);
}

.combined-pill-back {
    display: flex;
    align-items: center;
    opacity: 0.5;
}

.combined-pill-back svg {
    width: 12px;
    height: 12px;
}

/* Area Pills */
.area-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid transparent;
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.area-pill:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.area-pill:active {
    transform: scale(0.95);
}

.area-pill-count {
    font-size: 11px;
    opacity: 0.8;
}

/* Collection pills row (below combined pill) */
.collection-pills-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: 6px;
    padding-bottom: 4px;
}

.collection-pills-row::-webkit-scrollbar {
    display: none;
}

.collection-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid transparent;
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.collection-pill:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.collection-pill.active {
    background: #fff;
    border-color: #fff;
    color: #000;
    font-weight: 600;
}

.collection-pill-icon {
    display: flex;
    align-items: center;
}

.collection-pill-count {
    font-size: 11px;
    opacity: 0.8;
}

/* Empty Collection State */
.empty-collection {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    color: #aaa;
    font-size: 16px;
    text-align: center;
    padding: 20px;
}

body.has-tab-bar .empty-collection {
    height: calc(100vh - 56px);
}

/* Reels Container - Vertical scroll with snap */
.reels-container {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

body.has-tab-bar .reels-container {
    height: calc(100vh - 56px);
}

.reels-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* Individual reel item */
.reel-item {
    position: relative;
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

body.has-tab-bar .reel-item {
    height: calc(100vh - 56px);
}

/* Video embed container - maintains 9:16 aspect ratio */
.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

/* 9:16 aspect ratio wrapper for vertical videos (YouTube Shorts) */
.video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 56.25vh;
    aspect-ratio: 9 / 16;
    background-color: #000;
    background-size: cover;
    background-position: center;
}

body.has-tab-bar .video-wrapper {
    max-width: calc((100vh - 56px) * 9 / 16);
}

/* YouTube placeholder div (before YT.Player replaces it with iframe) */
.video-container [data-video-type="youtube"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain; /* Prevent stretching */
}

/* X/Twitter embed wrapper - centered in reel slot */
.video-wrapper.x-embed {
    aspect-ratio: auto;
    max-width: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.video-wrapper.x-embed iframe {
    position: relative;
    width: 100%;
    max-width: 550px;
    height: 85%;
    border: none;
    border-radius: 12px;
    background: #000;
}

/* Overlay content */
.reel-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    z-index: 10;
    pointer-events: none;
}

/* Adjust overlay for tab bar clearance */
body.has-tab-bar .reel-overlay {
    padding-bottom: 76px; /* 20px original + 56px tab bar */
}

.reel-overlay > * {
    pointer-events: auto;
}

/* Caption text */
.reel-caption {
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 15px;
    max-width: 80%;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    transition: max-height 0.3s ease, -webkit-line-clamp 0s;
    position: relative;
}

/* Tighten paragraph spacing inside captions */
.reel-caption p {
    margin: 0 0 0.15em 0;
}

.reel-caption p:last-child {
    margin-bottom: 0;
}

/* Lists inside captions */
.reel-caption ul,
.reel-caption ol {
    margin: 0.1em 0;
    padding-left: 1.2em;
}

.reel-caption li {
    margin-bottom: 0.05em;
}

/* Headings inside captions */
.reel-caption h1,
.reel-caption h2,
.reel-caption h3,
.reel-caption h4,
.reel-caption h5,
.reel-caption h6 {
    margin: 0.1em 0 0.05em 0;
    font-size: 1em;
    font-weight: 600;
}

/* "more" indicator for truncated captions */
.reel-caption.truncated::after {
    content: '... more';
    position: absolute;
    bottom: 0;
    right: 0;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.7) 30%);
    padding-left: 20px;
    font-size: 12px;
    opacity: 0.7;
}

/* Expanded caption - 30% height, full width */
.reel-caption.expanded {
    display: block;
    -webkit-line-clamp: unset;
    max-height: 30vh;
    overflow-y: auto;
    max-width: 100%;
    width: 100%;
    padding-right: 8px;
    -webkit-overflow-scrolling: touch;
}

.reel-caption.expanded::after {
    display: none;
}

/* Scrollbar styling for expanded caption */
.reel-caption.expanded::-webkit-scrollbar {
    width: 3px;
}

.reel-caption.expanded::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
}

/* Expanded overlay gradient - adjusted for 30% caption height */
.reel-overlay.caption-expanded {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 40%, transparent 100%);
}

/* Collect button (icon-only bookmark) */
.collect-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
    backdrop-filter: blur(4px);
}

.collect-btn svg {
    flex-shrink: 0;
}

.collect-btn:hover,
.collect-btn:active {
    background-color: rgba(255, 255, 255, 0.25);
    transform: scale(0.95);
}

/* Loading spinner */
.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.loading.hidden {
    display: none;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Food-themed loading animation: spinner ring + cycling food icons */
.food-loader {
    position: relative;
    width: 48px;
    height: 48px;
}

.food-loader-ring {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.food-loader-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
}

.food-loader-icon {
    position: absolute;
    inset: 0;
    width: 22px;
    height: 22px;
    color: rgba(255, 255, 255, 0.85);
    opacity: 0;
    animation: foodIconCycle 4.5s ease-in-out infinite;
}

.food-loader-icon:nth-child(1) { animation-delay: 0s; }
.food-loader-icon:nth-child(2) { animation-delay: 1.5s; }
.food-loader-icon:nth-child(3) { animation-delay: 3s; }

@keyframes foodIconCycle {
    0%, 5%   { opacity: 0; transform: scale(0.7); }
    10%, 28% { opacity: 1; transform: scale(1); }
    33%, 100%{ opacity: 0; transform: scale(0.7); }
}

/* =============================================================================
   Swipe Hint (mobile onboarding)
   ============================================================================= */

.swipe-hint {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 500;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

body.has-tab-bar .swipe-hint {
    bottom: 120px;
}

.swipe-hint.visible {
    opacity: 1;
}

.swipe-hint.hidden {
    opacity: 0;
}

.swipe-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.9);
    animation: bounceUp 1.2s ease-in-out infinite;
}

.swipe-text {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

@keyframes bounceUp {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Collection page styles */
.collection-page {
    width: 100%;
    min-height: 100vh;
    background-color: #000;
    padding: 20px;
}

.collection-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    padding: 20px 0;
}

.back-btn {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

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

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

.collection-header h1 {
    font-size: 24px;
    font-weight: 600;
}

.collection-content {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 20px;
}

.success-message {
    margin-bottom: 40px;
}

.success-icon {
    width: 80px;
    height: 80px;
    background-color: #4CAF50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin: 0 auto 20px;
}

.success-message h2 {
    font-size: 28px;
    margin-bottom: 10px;
}

.success-message p {
    font-size: 16px;
    color: #aaa;
    line-height: 1.5;
}

.collection-actions {
    margin-top: 30px;
}

.btn-primary {
    display: inline-block;
    padding: 14px 32px;
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: #f0f0f0;
    transform: scale(0.98);
}

/* Responsive adjustments */
@media (min-width: 768px) {
    .reel-item {
        max-width: 500px;
        margin: 0 auto;
    }

    .video-container iframe {
        max-width: 500px;
    }
}

/* Welcome Modal Styles - Clean modern card */
.welcome-modal-content {
    max-width: 420px;
    text-align: left;
    background: rgba(20, 20, 22, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    animation: modalSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Hero photo band */
.welcome-hero {
    position: relative;
    height: 168px;
    background-image: url('../assets/welcome-hero.webp');
    background-size: cover;
    background-position: center 30%;
}

.welcome-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(20, 20, 22, 0.25) 0%,
        rgba(20, 20, 22, 0.55) 55%,
        rgba(20, 20, 22, 1) 100%);
}

.welcome-hero-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    text-align: center;
    padding: 0 20px;
}

.welcome-hero-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 8px;
    border-radius: 14px;
    background: linear-gradient(140deg, #7c4dff, #00b4d8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.welcome-hero-text h2 {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.3px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

/* Content panel below the photo */
.welcome-hero-body {
    padding: 4px 24px 24px;
}

.welcome-subtitle {
    text-align: center;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 16px;
}

.welcome-rows {
    margin-bottom: 14px;
}

.welcome-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.welcome-row-ic {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(0, 180, 216, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5fd4ee;
}

.welcome-row-txt {
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.86);
}

.welcome-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12.5px;
    color: #ffd479;
    padding: 10px;
    background: rgba(255, 212, 121, 0.07);
    border: 1px solid rgba(255, 212, 121, 0.15);
    border-radius: 11px;
    margin-bottom: 14px;
}

.welcome-modal-content .auth-btn-primary {
    width: 100%;
    margin-top: 0;
    padding: 15px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient(135deg, #7c4dff, #00b4d8);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 180, 216, 0.3);
    transition: all 0.2s ease;
}

.welcome-modal-content .auth-btn-primary:hover {
    transform: scale(0.99);
}

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

/* Welcome Modal Container (matches campaign-modal pattern) */
.welcome-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
}
.welcome-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}
.welcome-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

/* ── BRANCHING PRODUCT TOUR OVERLAY SYSTEM ─────────────────────── */

/* Step 1: Full-screen confirmation */
.tour-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 9200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    animation: confirmFadeIn 0.5s ease-out;
}
@keyframes confirmFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.tour-confirm-check {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 180, 216, 0.15);
    border: 2px solid rgba(0, 180, 216, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    animation: checkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
@keyframes checkPop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.tour-confirm-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 6px;
    animation: textSlideUp 0.5s ease-out 0.3s both;
}
.tour-confirm-subtitle {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin-bottom: 28px;
    animation: textSlideUp 0.5s ease-out 0.4s both;
}
@keyframes textSlideUp {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}
.tour-confirm-token {
    width: 120px;
    height: 120px;
    animation: cardSlideUp 0.5s ease-out 0.5s both;
}
.tour-confirm-token .venue-token-ring {
    background: linear-gradient(135deg, rgba(0,180,216,0.7), rgba(0,198,251,0.5), rgba(0,180,216,0.7));
    box-shadow: 0 0 20px rgba(0,180,216,0.35), 0 0 40px rgba(0,180,216,0.15);
    animation: confirmTokenGlow 2s ease-in-out infinite alternate;
}
@keyframes confirmTokenGlow {
    0% { box-shadow: 0 0 20px rgba(0,180,216,0.35), 0 0 40px rgba(0,180,216,0.15); }
    100% { box-shadow: 0 0 24px rgba(0,180,216,0.5), 0 0 48px rgba(0,180,216,0.25); }
}
.tour-confirm-token .venue-token-name {
    font-size: 13px;
    max-width: 100px;
}
.tour-confirm-token .venue-token-area {
    font-size: 10px;
    max-width: 95px;
}
.tour-confirm-token .venue-token-overlay {
    border-radius: 0 0 60px 60px;
}
@keyframes cardSlideUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
.tour-confirm-drawer-count {
    margin-top: 24px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.3px;
    animation: textSlideUp 0.5s ease-out 0.7s both;
}
.tour-confirm-continue-btn {
    margin-top: 32px;
    background: rgba(0, 180, 216, 0.15);
    border: 1px solid rgba(0, 180, 216, 0.4);
    color: rgba(0, 180, 216, 0.9);
    border-radius: 12px;
    padding: 12px 36px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    animation: textSlideUp 0.5s ease-out 0.9s both;
}
.tour-confirm-continue-btn:hover {
    background: rgba(0, 180, 216, 0.25);
    border-color: rgba(0, 180, 216, 0.6);
}

/* Step 2: Community tag selection (Persona A only) */
.tour-tag-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 9200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.tour-tag-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 6px;
}
.tour-tag-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    margin-bottom: 24px;
}
.tour-tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 340px;
    margin-bottom: 28px;
}
.tour-tag-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.tour-tag-pill:active { transform: scale(0.95); }
.tour-tag-pill.selected {
    background: rgba(0, 180, 216, 0.18);
    border-color: rgba(0, 180, 216, 0.55);
    color: #00b4d8;
}
.tour-tag-pill.selected .tour-tag-icon svg {
    stroke: #00b4d8;
}
.tour-tag-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.tour-tag-icon svg {
    stroke: rgba(255, 255, 255, 0.55);
    transition: stroke 0.2s;
}
.tour-tag-done-btn {
    background: #00b4d8;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.tour-tag-done-btn:hover { background: #009fc2; }
.tour-tag-skip {
    display: block;
    margin-top: 14px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    text-decoration: none;
}
.tour-tag-skip:hover { color: rgba(255, 255, 255, 0.4); }

/* Spotlight (card tap step — shared by both personas) */
.tour-spotlight {
    position: fixed;
    border-radius: 56px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.76);
    z-index: 9200;
    pointer-events: none;
    transition: left 0.38s cubic-bezier(0.4,0,0.2,1),
                top 0.38s cubic-bezier(0.4,0,0.2,1),
                width 0.38s cubic-bezier(0.4,0,0.2,1),
                height 0.38s cubic-bezier(0.4,0,0.2,1),
                border-radius 0.38s cubic-bezier(0.4,0,0.2,1);
}
.tour-spotlight.rect { border-radius: 14px; }

.tour-tap-ripple {
    position: fixed;
    width: 90px; height: 90px;
    border-radius: 50%;
    border: 2.5px solid rgba(0,180,216,0.75);
    animation: tapRipple 1.4s ease-out infinite;
    z-index: 9202;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
@keyframes tapRipple {
    0%   { transform: translate(-50%,-50%) scale(0.45); opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(1.9); opacity: 0; }
}
.tour-tap-finger {
    position: fixed;
    font-size: 26px;
    z-index: 9203;
    pointer-events: none;
    animation: fingerBounce 1.4s ease-in-out infinite;
    transform: translate(-50%, -50%);
}
@keyframes fingerBounce {
    0%, 100% { transform: translate(-50%,-60%) scale(1); }
    50% { transform: translate(-50%,-60%) scale(1.12); }
}

.tour-tooltip {
    position: fixed;
    background: #1c1c2a;
    border: 1px solid rgba(0,180,216,0.42);
    border-radius: 16px;
    padding: 14px 16px;
    max-width: 276px;
    min-width: 230px;
    z-index: 9210;
    box-shadow: 0 8px 36px rgba(0,0,0,0.65);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.tour-tooltip.arrow-up::before {
    content: '';
    position: absolute;
    width: 0; height: 0;
    border: 9px solid transparent;
    border-bottom-color: rgba(0,180,216,0.42);
    top: -19px;
    left: 26px;
}
.tour-tooltip.arrow-up::after {
    content: '';
    position: absolute;
    width: 0; height: 0;
    border: 8px solid transparent;
    border-bottom-color: #1c1c2a;
    top: -16px;
    left: 27px;
}
.tour-step-badge {
    font-size: 10px;
    color: #00b4d8;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tour-step-dots {
    display: flex; gap: 4px; margin-left: auto;
}
.tour-step-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
}
.tour-step-dot.active { background: #00b4d8; }
.tour-tooltip-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.3;
}
.tour-tooltip-body {
    font-size: 12px;
    color: rgba(255,255,255,0.62);
    line-height: 1.6;
    margin-bottom: 13px;
}
.tour-tooltip-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #00b4d8;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    font-family: inherit;
}
.tour-tooltip-cta:hover { background: #009fc2; }
.tour-tooltip-skip {
    display: block;
    text-align: center;
    margin-top: 9px;
    font-size: 11px;
    color: rgba(255,255,255,0.25);
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}
.tour-tooltip-skip:hover { color: rgba(255,255,255,0.45); }

.tour-actions-glow {
    box-shadow: 0 0 0 2px rgba(0,180,216,0.6), 0 0 22px rgba(0,180,216,0.22) !important;
    border-radius: 12px;
}

/* Step 4A: Homescreen prompt (Persona A) */
.tour-homescreen-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 9200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.tour-homescreen-title {
    font-size: 20px; font-weight: 700; color: #fff;
    text-align: center; margin-bottom: 24px;
}
.tour-homescreen-options {
    max-width: 300px;
    width: 100%;
    margin-bottom: 28px;
}
.tour-homescreen-path {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    margin-bottom: 10px;
    font-size: 14px; color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}
.tour-homescreen-path:last-child { margin-bottom: 0; }
.tour-homescreen-path-icon {
    flex-shrink: 0; margin-top: 2px; color: rgba(255, 255, 255, 0.7);
}
.tour-homescreen-actions {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.tour-homescreen-close-btn {
    background: linear-gradient(135deg, #00b4d8, #0096c7);
    border: none;
    color: #fff; border-radius: 12px;
    padding: 12px 32px; font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: all 0.15s;
    letter-spacing: 0.3px;
}
.tour-homescreen-close-btn:hover { opacity: 0.9; }
.tour-homescreen-dismiss {
    display: block; margin-top: 14px; font-size: 12px;
    color: rgba(255, 255, 255, 0.4); cursor: pointer; text-decoration: none;
}

/* Step 3B: Keep exploring (Persona B) */
.tour-explore-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 9200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.tour-explore-title {
    font-size: 20px; font-weight: 700; color: #fff;
    text-align: center; margin-bottom: 12px;
}
.tour-explore-body {
    font-size: 14px; color: rgba(255, 255, 255, 0.55);
    text-align: center; line-height: 1.7;
    max-width: 280px; margin-bottom: 12px;
}
.tour-explore-emphasis {
    font-size: 13px; color: rgba(0, 180, 216, 0.85);
    text-align: center; margin-bottom: 28px; font-weight: 500;
    max-width: 260px; line-height: 1.5;
}
.tour-explore-visual {
    display: flex; gap: 8px; align-items: flex-end; margin-bottom: 32px;
}
.tour-explore-card {
    width: 52px; height: 52px; border-radius: 50%;
    background: #1c1c2a; border: 2px solid rgba(0, 180, 216, 0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; opacity: 0.4; transition: all 0.3s;
}
.tour-explore-card.current {
    opacity: 1; border-color: rgba(0, 180, 216, 0.7);
    box-shadow: 0 0 16px rgba(0, 180, 216, 0.2);
    overflow: hidden; padding: 0;
}
.tour-explore-token {
    width: 100%; height: 100%;
}
.tour-explore-token .venue-token-ring {
    width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
}
.tour-explore-token .venue-token-photo {
    width: 100%; height: 100%; position: relative;
}
.tour-explore-token .venue-token-photo img {
    width: 100%; height: 100%; object-fit: cover;
}
.tour-explore-token .venue-token-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    padding: 2px 4px; text-align: center;
    border-radius: 0 0 50% 50%;
}
.tour-explore-card.future {
    border-style: dashed; border-color: rgba(255, 255, 255, 0.12); opacity: 0.2;
}
.tour-explore-plus {
    font-size: 20px; color: rgba(255, 255, 255, 0.15);
    margin: 0 4px; align-self: center;
}
.tour-explore-actions {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.tour-explore-feed-btn {
    background: #00b4d8;
    border: none;
    color: #fff; border-radius: 12px;
    padding: 12px 28px; font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.tour-explore-feed-btn:hover { background: #009fc2; }
.tour-explore-stay-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7); border-radius: 12px;
    padding: 10px 28px; font-size: 13px; font-weight: 500;
    cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.tour-explore-stay-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.tour-explore-dismiss {
    display: block; margin-top: 14px; font-size: 10px;
    color: rgba(255, 255, 255, 0.15); cursor: pointer; text-decoration: none;
}

/* Sheet-end modal (appears after card tap CTA for both personas) */
.tour-sheet-end-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 100px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.tour-sheet-end-modal {
    background: #1c1c2a;
    border: 1px solid rgba(0,180,216,0.35);
    border-radius: 16px;
    padding: 20px 24px;
    text-align: center;
    max-width: 280px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.tour-sheet-end-title {
    font-size: 15px; font-weight: 600; color: #fff;
    margin-bottom: 6px;
}
.tour-sheet-end-body {
    font-size: 12px; color: rgba(255,255,255,0.5);
    line-height: 1.5; margin-bottom: 16px;
}
.tour-sheet-end-actions {
    display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.tour-sheet-end-done-btn {
    background: #00b4d8; color: #fff; border: none; border-radius: 10px;
    padding: 10px 24px; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit; width: 100%;
}
.tour-sheet-end-done-btn:hover { background: #009fc2; }
.tour-sheet-end-dismiss {
    font-size: 10px; color: rgba(255,255,255,0.2);
    cursor: pointer; text-decoration: none;
}

/* =============================================================================
   New Onboarding Flow — Persona A (#95)
   ============================================================================= */

/* Shared overlay */
.nf-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 9250;
    display: flex; flex-direction: column;
    align-items: center;
    /* Step 2 content (recognition + 3 venue tokens + bridge + dispatch banner
       + 完了 button) is taller than mobile viewport. justify-content: center
       was clipping the 完了 button below the fold with no way to scroll —
       users got stuck. Switch to flex-start + overflow-y so content scrolls
       naturally from the top. Step 1 is shorter and still appears at top. */
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 24px max(32px, env(safe-area-inset-bottom));
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    animation: nfFadeIn 0.4s ease-out;
}
@keyframes nfFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.nf-hidden { display: none !important; }

/* ── Step 1: Saved + Tags ── */
.nf-s1-check {
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(0, 180, 216, 0.12);
    border: 2px solid rgba(0, 180, 216, 0.4);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    animation: nfCheckPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
@keyframes nfCheckPop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.nf-s1-title { font-size: 20px; font-weight: 700; color: #fff; text-align: center; margin-bottom: 2px; line-height: 1.4; animation: nfSlideUp 0.4s ease-out 0.2s both; }
/* Readability pass: opacity bumped from 0.45 -> 0.65. Earlier value
   washed out against the dark overlay on real phone screens. */
.nf-s1-subtitle { font-size: 14px; color: rgba(255,255,255,0.65); text-align: center; margin-bottom: 20px; animation: nfSlideUp 0.4s ease-out 0.3s both; }
@keyframes nfSlideUp { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }

/* Venue token in Step 1 */
.nf-s1-token { width: 110px; height: 110px; margin-bottom: 20px; animation: nfSlideUp 0.5s ease-out 0.4s both; }
.nf-s1-token .nf-token-ring { width: 100%; height: 100%; }
.nf-token-ring {
    border-radius: 50%; padding: 3px;
    background: linear-gradient(135deg, rgba(0,180,216,0.7), rgba(0,198,251,0.5), rgba(0,180,216,0.7));
    box-shadow: 0 0 20px rgba(0,180,216,0.35), 0 0 40px rgba(0,180,216,0.15);
    animation: nfTokenGlow 2s ease-in-out infinite alternate;
}
@keyframes nfTokenGlow {
    0% { box-shadow: 0 0 20px rgba(0,180,216,0.35), 0 0 40px rgba(0,180,216,0.15); }
    100% { box-shadow: 0 0 24px rgba(0,180,216,0.5), 0 0 48px rgba(0,180,216,0.25); }
}
.nf-token-photo {
    width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
    position: relative;
    /* Soft cyan->purple placeholder so the token never reads blank while
       the catalogue fetch is still in flight (NFC fast-path). */
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.22) 0%, rgba(168, 85, 247, 0.22) 100%), #1a1a2e;
    display: flex; align-items: center; justify-content: center; font-size: 40px;
}
.nf-token-photo img {
    width: 100%; height: 100%; object-fit: cover;
    animation: nfTokenImgFadeIn 220ms ease-out;
}
@keyframes nfTokenImgFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* #211 round 4: skeleton state for tour badge photo when the real image
   hasn't loaded yet (cold-cache only). Replaces the cartoon 🍖 / 🍜
   emoji fallbacks. Applies to both #nfTokenImg (= .nf-token-photo) and
   the .venue-token-photo parent of #tourConfirmTokenImg. */
.nf-token-photo.token-loading,
.venue-token-photo.token-loading {
    background: linear-gradient(135deg, #2a2a3e 0%, #1f1f33 100%);
    animation: tokenLoadingPulse 1.4s ease-in-out infinite;
}
@keyframes tokenLoadingPulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1.0; }
}
.nf-token-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    padding: 4px 6px 6px; text-align: center; border-radius: 0 0 50% 50%;
}
.nf-token-name { display: block; font-size: 10px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; margin: 0 auto; }
.nf-token-area { display: block; font-size: 8px; color: rgba(255,255,255,0.6); max-width: 85px; margin: 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tag section in Step 1 */
.nf-s1-tag-section { animation: nfSlideUp 0.4s ease-out 0.6s both; text-align: center; max-width: 340px; }
.nf-s1-tag-q { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 4px; }
/* Readability pass: 11px/0.3 tested as "almost invisible" on real phones.
   Bumped to 12px / 0.65 to match the subtitle's contrast floor. */
.nf-s1-tag-hint { font-size: 12px; color: rgba(255,255,255,0.65); margin-bottom: 6px; }
.nf-s1-tag-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; }
.nf-tag-pill {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13);
    border-radius: 20px; padding: 7px 13px; font-size: 12px; color: rgba(255,255,255,0.65);
    cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 5px;
    user-select: none; -webkit-tap-highlight-color: transparent; font-family: inherit;
}
.nf-tag-pill:active { transform: scale(0.95); }
/* Tour A redesign (#184): match bottom-sheet pill convention for uniformity.
 * Legend: cyan = community-popular (top 5 by count), purple = user-tagged (mine).
 * Combined state: purple fill + cyan border. Mirrors .venue-tag-pill family. */
.nf-tag-pill.selected {
    background: rgba(168, 85, 247, 0.25);
    border-color: rgba(168, 85, 247, 0.5);
    color: #d4a5ff;
}
.nf-tag-pill.popular {
    background: rgba(0, 212, 255, 0.12);
    border-color: rgba(0, 212, 255, 0.45);
    color: rgba(255, 255, 255, 0.92);
}
.nf-tag-pill.selected.popular {
    background: rgba(168, 85, 247, 0.25);
    border-color: rgba(0, 212, 255, 0.6);
    color: #d4a5ff;
}
.nf-tag-pill .tag-count {
    font-size: 11px;
    opacity: 0.7;
    margin-left: 2px;
}
.nf-tag-pill.popular .tag-count {
    color: #4dd9ff;
    opacity: 1;
    font-weight: 600;
}
.nf-tag-pill.selected.popular .tag-count {
    color: #d4a5ff;
}
.nf-tag-icon { display: flex; align-items: center; width: 14px; height: 14px; flex-shrink: 0; }
.nf-tag-icon svg { stroke: rgba(255,255,255,0.5); transition: stroke 0.2s; }
.nf-tag-pill.selected .nf-tag-icon svg { stroke: #d4a5ff; }
.nf-s1-next-btn {
    background: rgba(0,180,216,0.12); border: 1px solid rgba(0,180,216,0.35);
    color: rgba(0,180,216,0.85); border-radius: 12px; padding: 12px 40px;
    font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit;
    transition: all 0.2s; animation: nfSlideUp 0.4s ease-out 0.8s both;
}
.nf-s1-next-btn:hover { background: rgba(0,180,216,0.2); border-color: rgba(0,180,216,0.55); }

/* ── Tour A redesign (#184) — Step 1 nudge, Step 2 NEW, push pre-prompt, A2HS modal, save toast ── */

/* Step 1: italic nudge below the tag hint. Readability pass: 0.45 -> 0.5. */
.nf-s1-tag-nudge {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    font-style: italic;
    margin-bottom: 14px;
    animation: nfSlideUp 0.4s ease-out 0.5s both;
}

/* Step 2 NEW wrapper */
.step2-new {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    padding: 0 16px;
}

/* TOP recognition block */
.nf-s2new-recognition {
    align-self: stretch;
    text-align: left;
    padding: 0 4px;
}
.nf-s2new-thanks {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 6px;
}
.nf-s2new-recog-body {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
}
.nf-hl-cyan {
    color: #00d9ff;
    font-weight: 700;
}

/* MIDDLE block — venue grid */
.nf-s2new-middle { display: flex; flex-direction: column; align-items: center; gap: 12px; align-self: stretch; }
.nf-s2new-middle-headline {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.78);
    text-align: center;
    line-height: 1.55;
}
.nf-s2new-middle-grid {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    max-width: 360px;
}
/* Readability pass: bumped from 11px / 0.35 -> 12px / 0.55. */
.nf-s2new-middle-hint {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    text-align: center;
}

/* Inline tag pills in the with-tags headline */
.nf-s2new-inline-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    vertical-align: middle;
}
.nf-s2new-inline-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(168, 85, 247, 0.16);
    border: 1px solid rgba(168, 85, 247, 0.32);
    color: #d4a5ff;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.nf-s2new-inline-tag-icon { display: inline-flex; }
.nf-s2new-inline-tag-icon svg { width: 11px; height: 11px; }
.nf-s2new-inline-tag-sep { color: rgba(255,255,255,0.3); font-weight: 600; }

/* Step 2 NEW token grid — re-use .nf-token-item from the lift but at 100px */
.step2-new .nf-token-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: nfTokenAppear 0.35s ease-out both;
}
.step2-new .nf-token-item .nf-token-ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0,217,255,0.55), rgba(168,85,247,0.45));
    padding: 2px;
}
.step2-new .nf-token-item .nf-token-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background: #1a1a2e;
}
.step2-new .nf-token-item .nf-token-photo--gradient {
    background: radial-gradient(circle at 30% 30%, #5a1a4d, #1a0d2e 70%);
}
.step2-new .nf-token-item .nf-token-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 4px 6px 6px;
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
    text-align: center;
}
.step2-new .nf-token-item .nf-token-name {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.step2-new .nf-token-item .nf-token-area {
    display: block;
    font-size: 8.5px;
    color: rgba(255,255,255,0.65);
    line-height: 1.2;
    margin-top: 2px;
}

/* Per-token top-tag chip row (split on ・ → multiple chips per row) */
.nf-token-top-tag-row {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    max-width: 100px;
}
.nf-token-top-tag {
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

/* BRIDGE block — icon + text rows */
.nf-s2new-bridge {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 4px;
}
.nf-s2new-bridge-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.nf-s2new-bridge-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: rgba(0, 217, 255, 0.7);
}
.nf-s2new-bridge-text {
    font-size: 15.5px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.65;
    margin: 0;
}
.nf-s2new-bridge em {
    color: #fff;
    font-weight: 700;
    font-style: normal;
}

/* Inline dispatch banner inside Step 2 — reuse .dispatch-banner; small margin tweak */
.step2-new .dispatch-banner {
    margin: 0;
    width: 100%;
    max-width: 360px;
    align-self: center;
}

/* 完了 button */
.nf-s2new-next-btn {
    background: rgba(0,180,216,0.12);
    border: 1px solid rgba(0,180,216,0.45);
    color: rgba(0,180,216,0.92);
    border-radius: 14px;
    padding: 13px 36px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    margin-top: 4px;
}
.nf-s2new-next-btn:hover { background: rgba(0,180,216,0.2); color: #fff; }

/* ── Mini Bottom Sheet (Step 2 NEW venue token tap → venue detail) ── */
.nf-ms-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 9300; display: flex; align-items: flex-end; justify-content: center;
    animation: nfFadeIn 0.2s ease-out;
}
.nf-ms {
    background: #1c1c2a; border-top: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px 20px 0 0; width: 100%; max-width: 420px;
    max-height: 85vh; overflow-y: auto; padding: 16px 16px 32px;
    animation: nfSheetUp 0.3s ease-out;
}
@keyframes nfSheetUp { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } }
.nf-ms-handle { width: 36px; height: 4px; background: rgba(255,255,255,0.15); border-radius: 2px; margin: 0 auto 12px; }
.nf-ms-video-section { margin-bottom: 14px; }
.nf-hidden { display: none !important; }
.nf-ms-video-carousel { position: relative; width: 100%; overflow: hidden; border-radius: 14px; background: #111; }
.nf-ms-video-track { display: flex; transition: transform 0.3s ease; }
.nf-ms-video-slide { flex: 0 0 100%; aspect-ratio: 9 / 16; max-height: 280px; }
.nf-ms-video-slide iframe { width: 100%; height: 100%; border: none; }
.nf-ms-video-dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.nf-ms-video-dots.single { display: none; }
.nf-ms-video-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); cursor: pointer; transition: background 0.2s; }
.nf-ms-video-dot.active { background: #00b4d8; }
.nf-ms-video-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(0,0,0,0.5); border: none; color: #fff; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2; opacity: 0.6; transition: opacity 0.2s;
}
.nf-ms-video-nav:hover { opacity: 1; }
.nf-ms-video-nav.prev { left: 6px; }
.nf-ms-video-nav.next { right: 6px; }
.nf-ms-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.nf-ms-img { width: 44px; height: 44px; border-radius: 50%; background: #2a2a3e; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; overflow: hidden; border: 2px solid rgba(255,255,255,0.1); }
.nf-ms-info { flex: 1; min-width: 0; }
.nf-ms-name { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-ms-meta { font-size: 11px; color: rgba(255,255,255,0.6); }
.nf-ms-desc { font-size: 12px; color: rgba(255,255,255,0.65); line-height: 1.55; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nf-ms-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.nf-ms-action-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; color: #fff; font-size: 10px; font-weight: 500;
    cursor: pointer; font-family: inherit; transition: all 0.15s; -webkit-tap-highlight-color: transparent;
}
.nf-ms-action-btn:hover { background: rgba(255,255,255,0.1); }
.nf-ms-action-call { border-color: rgba(34,197,94,0.25); }
.nf-ms-action-call svg { stroke: #22c55e; }
.nf-ms-action-taxi { border-color: rgba(245,158,11,0.25); }
.nf-ms-action-taxi svg { stroke: #f59e0b; }
.nf-ms-save-btn {
    width: 100%; background: rgba(0,180,216,0.12); border: 1px solid rgba(0,180,216,0.35);
    color: #00b4d8; border-radius: 12px; padding: 12px; font-size: 14px; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.nf-ms-save-btn:hover { background: rgba(0,180,216,0.2); }
.nf-ms-save-btn.saved { background: rgba(0,180,216,0.2); border-color: rgba(0,180,216,0.5); color: #fff; }

/* ── Save confirmation toast (after 完了) ── */
.nf-save-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1c1c2a;
    border: 1px solid rgba(0,180,216,0.3);
    color: #fff;
    padding: 12px 18px 12px 14px;
    border-radius: 14px;
    z-index: 9500;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 340px;
    width: calc(100% - 32px);
    box-shadow: 0 10px 32px rgba(0,0,0,0.5);
}
.nf-save-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.nf-save-toast-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,180,216,0.15);
    display: flex; align-items: center; justify-content: center;
}
.nf-save-toast-text {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255,255,255,0.9);
}

/* ── Push permission pre-prompt (non-iOS-Safari) ── */
.nf-push-prompt-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9400;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: nfFadeIn 0.2s ease-out;
}
.nf-push-prompt {
    background: #1c1c2a;
    border: 1px solid rgba(0,180,216,0.25);
    border-radius: 18px;
    padding: 28px 24px 20px;
    width: 100%; max-width: 340px;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
    animation: nfTeaserPop 0.25s ease-out;
}
.nf-push-prompt-icon {
    margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
}
.nf-push-prompt-icon svg {
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 0 4px rgba(0, 217, 255, 0.6));
}
.nf-push-prompt-body {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    line-height: 1.5;
    margin-bottom: 10px;
}
.nf-push-prompt-note {
    font-size: 11.5px;
    font-weight: 400;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
    margin-bottom: 20px;
}
.nf-push-prompt-buttons { display: flex; flex-direction: column; gap: 8px; }
.nf-push-prompt-yes {
    background: #00b4d8;
    border: none;
    color: #fff;
    border-radius: 12px;
    padding: 13px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}
.nf-push-prompt-yes:hover { opacity: 0.9; }
.nf-push-prompt-no {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.55);
    padding: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s;
}
.nf-push-prompt-no:hover { color: rgba(255,255,255,0.85); }

/* ── iOS A2HS modal (iOS Safari non-PWA) ── */
.nf-a2hs-prompt-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 9400;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: nfFadeIn 0.2s ease-out;
}
.nf-a2hs-prompt {
    background: #1c1c2a;
    border: 1px solid rgba(0,180,216,0.25);
    border-radius: 18px;
    padding: 24px 22px 18px;
    width: 100%;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
    animation: nfTeaserPop 0.25s ease-out;
    max-height: 90vh;
    overflow-y: auto;
}
.nf-a2hs-prompt-icon {
    margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
}
.nf-a2hs-prompt-icon svg {
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 0 4px rgba(0, 217, 255, 0.6));
}
.nf-a2hs-prompt-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.45;
    margin-bottom: 10px;
}
.nf-a2hs-prompt-body {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,0.72);
    line-height: 1.6;
    margin-bottom: 16px;
}
.nf-a2hs-prompt-steps-header {
    font-size: 11px;
    font-weight: 600;
    color: rgba(0,180,216,0.85);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    margin-bottom: 8px;
}
.nf-a2hs-prompt-steps {
    list-style: none;
    margin: 0 0 18px 0;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
}
.nf-a2hs-prompt-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    padding: 6px 0;
    color: rgba(255,255,255,0.85);
    font-size: 12.5px;
    line-height: 1.5;
}
.nf-a2hs-step-num {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(0,180,216,0.18);
    border: 1px solid rgba(0,180,216,0.35);
    color: #00d9ff;
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.nf-a2hs-step-text { flex: 1; }
.nf-a2hs-inline-share {
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
    color: rgba(0,217,255,0.95);
}
.nf-a2hs-prompt-buttons { display: flex; flex-direction: column; gap: 8px; }
.nf-a2hs-prompt-primary {
    background: #00b4d8;
    border: none;
    color: #fff;
    border-radius: 12px;
    padding: 13px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}
.nf-a2hs-prompt-primary:hover { opacity: 0.9; }
.nf-a2hs-prompt-secondary {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.55);
    padding: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s;
}
.nf-a2hs-prompt-secondary:hover { color: rgba(255,255,255,0.85); }

/* End Tour A redesign block */
/* ── Discover Feed Button (below header) ── */
/* Discovery actions row — 動画でもっと見つける + AIで絞り込む share it 50/50 (#107) */
.discover-feed-row {
    margin-bottom: 4px;
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.discover-feed-btn {
    flex: 1; min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: linear-gradient(135deg, #00b4d8, #0096c7); border: none;
    border-radius: 8px; padding: 6px 12px; color: #fff;
    font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
    transition: all 0.15s; text-decoration: none;
}
.discover-feed-btn:hover { opacity: 0.9; }
/* right half — holds the AI search pill (built by _renderAiPill) */
.ai-pill-slot { flex: 1; min-width: 0; display: flex; }
.ai-pill-slot .ai-pill { width: 100%; justify-content: center; }

/* Batch Preparing Overlay */
.batch-preparing-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 9200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.batch-preparing-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
.batch-preparing-content {
    text-align: center;
    padding: 40px 30px;
    max-width: 320px;
}
.batch-preparing-icon {
    color: #FFB347;
    margin-bottom: 20px;
}
.batch-preparing-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 10px 0;
}
.batch-preparing-body {
    font-size: 14px;
    color: #aaa;
    line-height: 1.6;
    margin: 0 0 28px 0;
}
.batch-preparing-close {
    background: #00b4d8;
    border: none;
    color: #fff;
    padding: 12px 32px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.batch-preparing-close:hover {
    background: #009fc2;
}
.batch-preparing-detail {
    font-size: 0.8rem;
    color: #888;
    margin-top: 8px;
    font-family: monospace;
    letter-spacing: 0.5px;
}

/* Sheet open state for tour (opens bottom sheet behind modal) */
.tour-sheet-open .venue-sheet-overlay {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: none !important;
}
.tour-sheet-open .venue-sheet {
    display: block !important;
    transform: translateY(0) !important;
    pointer-events: none !important;
}

/* Mobile optimization */
@media (max-width: 767px) {
    .auth-status {
        top: 16px;
        left: 16px;
    }

    .language-selector {
        top: 12px;
        padding: 3px;
        gap: 3px;
    }

    .lang-btn {
        padding: 5px 10px;
        font-size: 11px;
    }

    .content-type-selector {
        padding: 3px;
        gap: 2px;
    }

    .content-btn {
        padding: 5px 6px;
        font-size: 10px;
        min-width: 24px;
    }

    .content-btn svg {
        width: 12px;
        height: 12px;
    }

    .branched-filter {
        top: 54px;
        padding: 6px 12px;
    }

    .genre-pill,
    .area-pill {
        padding: 5px 10px;
        font-size: 12px;
    }

    .combined-pill {
        padding: 6px 12px;
        font-size: 12px;
    }

    .collection-pill {
        padding: 6px 12px;
        font-size: 12px;
    }

    .reel-caption {
        font-size: 13px;
        max-width: 85%;
    }

    .collect-btn {
        width: 40px;
        height: 40px;
    }

    .welcome-hero {
        height: 150px;
    }

    .welcome-hero-body {
        padding: 4px 20px 20px;
    }
}

/* Authentication Modal */
.auth-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000; /* Must be higher than venue-sheet (9001) */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.auth-modal.show {
    display: block;
    opacity: 1;
}

.auth-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.auth-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #1a1a1a;
    border-radius: 16px;
    padding: 32px 24px;
    max-width: 440px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
}

.auth-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.auth-modal-close:hover {
    color: #fff;
}

/* Welcome modal close sits over the photo band — needs a backing for contrast */
.welcome-modal-content .auth-modal-close {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    color: #fff;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.welcome-modal-content .auth-modal-close:hover {
    background: rgba(0, 0, 0, 0.65);
}

.auth-modal-content h2 {
    font-size: 24px;
    margin-bottom: 12px;
    font-weight: 600;
}

.auth-modal-message {
    color: #aaa;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 32px;
}

.auth-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-btn {
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.auth-btn-primary {
    background-color: #fff;
    color: #000;
}

.auth-btn-primary:hover {
    background-color: #f0f0f0;
    transform: scale(0.98);
}

.auth-btn-secondary {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.auth-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(0.98);
}

/* Auth iframe container */
.auth-iframe-container {
    display: none;
    width: 100%;
    height: 500px;
    margin-top: 24px;
    border-radius: 8px;
    overflow: hidden;
}

.auth-iframe-container.show {
    display: block;
}

.auth-iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Mobile modal adjustments */
@media (max-width: 767px) {
    .auth-modal-content {
        padding: 28px 20px;
        max-width: 95%;
    }

    .auth-modal-content h2 {
        font-size: 20px;
    }

    .auth-modal-message {
        font-size: 14px;
    }

    .auth-btn {
        padding: 12px 20px;
        font-size: 14px;
    }

    .auth-iframe-container {
        height: 400px;
    }
}

/* =============================================================================
   Auth Form Styles (inline login/register forms inside modal)
   ============================================================================= */

.auth-form {
    text-align: left;
}

.auth-form h2 {
    text-align: center;
    margin-bottom: 20px;
}

.auth-form input:not([type="checkbox"]) {
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s ease;
}
/* Registration inputs with icons need extra left padding — override .auth-form input */
.auth-form .reg-input {
    padding: 13px 14px 13px 42px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 15px;
    margin-bottom: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-form .reg-input[type="password"],
.auth-form .reg-input[type="text"] { padding-right: 44px; }

.auth-form input:not([type="checkbox"]):focus {
    border-color: #fff;
    outline: none;
}
.auth-form .reg-input:focus { border-color: #00b4d8; box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.1); }

.auth-form input:not([type="checkbox"])::placeholder {
    color: #777;
}
.auth-form .reg-input::placeholder { color: rgba(255,255,255,0.25); }

.auth-error {
    color: #ff4444;
    font-size: 13px;
    margin-bottom: 12px;
    min-height: 18px;
    text-align: center;
}

.auth-form .auth-btn {
    width: 100%;
    margin-top: 4px;
}

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

/* Auth button loading state */
.auth-btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.auth-btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Auth success state */
.auth-success-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    animation: fadeIn 0.3s ease;
}

.auth-success-icon {
    width: 48px;
    height: 48px;
    background: #4CAF50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.auth-success-text {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.auth-toggle {
    margin-top: 16px;
    font-size: 14px;
    color: #aaa;
    text-align: center;
}

.auth-toggle a {
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}

.auth-toggle a:hover {
    opacity: 0.8;
}

.auth-forgot-password {
    text-align: right;
    margin: -4px 0 12px 0;
    font-size: 13px;
}

.auth-forgot-password a {
    color: #aaa;
    text-decoration: none;
    cursor: pointer;
}

.auth-forgot-password a:hover {
    color: #fff;
    text-decoration: underline;
}

.auth-forgot-link {
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
}

.auth-forgot-link a {
    color: #aaa;
    text-decoration: none;
    cursor: pointer;
}

.auth-forgot-link a:hover {
    color: #fff;
    text-decoration: underline;
}

.auth-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -4px 0 12px 0;
    font-size: 13px;
}

.auth-login-options a {
    color: #aaa;
    text-decoration: none;
    cursor: pointer;
}

.auth-login-options a:hover {
    color: #fff;
    text-decoration: underline;
}

.auth-remember-me {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #aaa;
    cursor: pointer;
    user-select: none;
}

.auth-remember-me input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #00b4d8;
    cursor: pointer;
}

.auth-form-divider {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    margin: 8px 0 12px;
    text-align: center;
}

/* =============================================================================
   Collect Button - Collected State
   ============================================================================= */

.collect-btn.collected {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.collect-btn.collected:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.collect-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* =============================================================================
   Bottom Tab Bar
   ============================================================================= */

.bottom-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background-color: #1a1a1a;
    border-top: 1px solid #333;
    display: flex;
    z-index: 1000;
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: #666;
    font-size: 10px;
    font-weight: 500;
    transition: color 0.2s ease;
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

.tab-item:hover {
    color: #999;
}

.tab-item.active {
    color: #fff;
}

.tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-icon svg {
    width: 22px;
    height: 22px;
}

.tab-label {
    font-size: 10px;
}

/* Tab bar body adjustments - height calc handles spacing, no padding needed for index page */
body.has-tab-bar {
    padding-bottom: 0;
}

/* =============================================================================
   My Collections Page
   ============================================================================= */

body.collections-body {
    overflow-y: auto;
    position: static;
    min-height: 100vh;
    padding-bottom: 56px;
}

.my-collections-page {
    width: 100%;
    min-height: 100vh;
    background-color: #000;
    padding: 20px;
    max-width: 500px;
    margin: 0 auto;
}

.my-collections-page .collection-header {
    margin-bottom: 20px;
    padding-top: 56px;
}

.my-collections-page .collection-header h1 {
    font-size: 22px;
}

/* Loading state */
.collections-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
}

/* Auth required state */
.collections-auth-required,
.collections-empty {
    text-align: center;
    padding: 60px 20px;
    color: #aaa;
}

.collections-auth-required p,
.collections-empty p {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
}


/* =============================================================================
   Honeycomb Token Grid — Venue Collection Cards
   ============================================================================= */

/* Container: column of honeycomb rows */
.venue-cards-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
}

/* Packed circle container */
.packed-circle-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Load More Button */
.load-more-btn {
    display: block;
    width: auto;
    margin: 16px auto;
    padding: 12px 32px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.load-more-btn:active {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

/* Token wrapper (keeps class name for delegation/scanner compat) */
.venue-card-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Circular token container */
.venue-token {
    position: relative;
    width: 100px;
    height: 100px;
    transition: width 0.3s ease, height 0.3s ease;
}

/* Visit-count size tiers (went + visited N times) — wider gaps between tiers */
.venue-token.visit-tier-1 { width: 108px; height: 108px; }
.venue-token.visit-tier-2 { width: 124px; height: 124px; }
.venue-token.visit-tier-3 { width: 144px; height: 144px; }

/* Overlay border-radius scales with token size */
.venue-token.visit-tier-1 .venue-token-overlay { border-radius: 0 0 54px 54px; }
.venue-token.visit-tier-2 .venue-token-overlay { border-radius: 0 0 62px 62px; }
.venue-token.visit-tier-3 .venue-token-overlay { border-radius: 0 0 72px 72px; }

/* Text max-width scales with token size */
.venue-token.visit-tier-1 .venue-token-name { max-width: 86px; }
.venue-token.visit-tier-1 .venue-token-area { max-width: 81px; }
.venue-token.visit-tier-2 .venue-token-name { max-width: 100px; }
.venue-token.visit-tier-2 .venue-token-area { max-width: 95px; }
.venue-token.visit-tier-3 .venue-token-name { max-width: 118px; }
.venue-token.visit-tier-3 .venue-token-area { max-width: 113px; }

/* Ring (background = colored ring effect) */
.venue-token-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 3px;
    background: rgba(160, 160, 160, 0.5);
    box-sizing: border-box;
    transition: background 0.3s, box-shadow 0.3s;
}

/* Photo circle */
.venue-token-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #333;
    position: relative;
}
.venue-token-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9);
}

/* Placeholder icon when no photo */
.venue-token-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #666;
}

/* Name/area overlay inside circle */
.venue-token-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    border-radius: 0 0 50px 50px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0 8px 8px;
    pointer-events: none;
}
.venue-token-name {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 80px;
}
.venue-token-area {
    font-size: 9px;
    color: rgba(255,255,255,0.7);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75px;
}

/* --- Token ring states --- */

/* "Went" — gold trophy state */
.venue-token-ring.state-went {
    background: linear-gradient(135deg, #d4a017, #b8860b, #d4a017);
    box-shadow: 0 0 8px rgba(212,160,23,0.4), 0 0 20px rgba(212,160,23,0.15);
}
.venue-token-ring.state-went .venue-token-photo img {
    filter: saturate(1.0);
}

/* --- Trophy badge (bottom-right of circle) --- */
.token-trophy-badge {
    display: none;
    align-items: center;
    gap: 2px;
    background: rgba(0,0,0,0.8);
    border: 1.5px solid #d4a017;
    border-radius: 10px;
    padding: 1px 5px;
    height: 16px;
    box-sizing: border-box;
}
.token-trophy-badge svg { color: #d4a017; width: 10px; height: 10px; }
.token-trophy-count { color: #d4a017; font-size: 9px; font-weight: 700; }

/* --- Badge cluster inside circle, near top --- */
.token-badge-cluster {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 3px;
    z-index: 7;
    pointer-events: none;
}

/* --- Icon indicators --- */
.token-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.token-indicator svg { width: 9px; height: 9px; }

.indicator-memo    { background: rgba(0,0,0,0.75); border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); }
.indicator-campaign { background: rgba(0,180,216,0.9); color: #fff; }
.indicator-reservation { }
.indicator-reservation.pending  { background: #a855f7; }
.indicator-reservation.accepted { background: #a855f7; }
.indicator-reservation.ready    { background: #4caf50; }

/* --- AI-picked + NFC highlight on tokens --- */
.venue-card-row.ai-picked .venue-token-ring {
    box-shadow: 0 0 12px 3px rgba(168,85,247,0.5);
}
.venue-card-row.newly-collected .venue-token-ring {
    animation: newCollectPulseToken 2s ease-out;
}
@keyframes newCollectPulseToken {
    0%   { box-shadow: 0 0 0 0 rgba(0,198,251,0.7); }
    50%  { box-shadow: 0 0 0 12px rgba(0,198,251,0.3); }
    100% { box-shadow: 0 0 0 4px rgba(0,198,251,0.5); }
}

/* One-time tap hint tooltip on first token */
.card-tap-hint {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 180, 216, 0.9);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 180, 216, 0.3);
}
.card-tap-hint.visible { opacity: 1; }
.card-tap-hint.hiding { opacity: 0; }

/* --- Badge legend (subtle icon explanations below pills) --- */
.badge-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    padding: 6px 16px 8px;
    opacity: 0.45;
}
.badge-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
}
.badge-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.badge-legend-icon {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* --- Bottom sheet remove button --- */
.venue-sheet-remove-section {
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 12px;
}
.venue-sheet-remove-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid rgba(255,80,80,0.3);
    color: rgba(255,80,80,0.7);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.venue-sheet-remove-btn:active {
    background: rgba(255,80,80,0.1);
    color: rgba(255,80,80,0.9);
}

/* --- Responsive honeycomb breakpoints --- */
@media (max-width: 374px) {
    .venue-token { width: 90px; height: 90px; }
    .venue-token-overlay { border-radius: 0 0 45px 45px; }
    .venue-token-name { max-width: 70px; font-size: 10px; }
    .venue-token-area { max-width: 65px; font-size: 8px; }
    .venue-token.visit-tier-1 { width: 97px; height: 97px; }
    .venue-token.visit-tier-2 { width: 112px; height: 112px; }
    .venue-token.visit-tier-3 { width: 130px; height: 130px; }
    .venue-token.visit-tier-1 .venue-token-overlay { border-radius: 0 0 49px 49px; }
    .venue-token.visit-tier-2 .venue-token-overlay { border-radius: 0 0 56px 56px; }
    .venue-token.visit-tier-3 .venue-token-overlay { border-radius: 0 0 65px 65px; }
}
@media (min-width: 768px) {
    .venue-token { width: 110px; height: 110px; }
    .venue-token-overlay { border-radius: 0 0 55px 55px; }
    .venue-token-name { max-width: 90px; }
    .venue-token-area { max-width: 85px; }
    .venue-token.visit-tier-1 { width: 119px; height: 119px; }
    .venue-token.visit-tier-2 { width: 136px; height: 136px; }
    .venue-token.visit-tier-3 { width: 158px; height: 158px; }
    .venue-token.visit-tier-1 .venue-token-overlay { border-radius: 0 0 60px 60px; }
    .venue-token.visit-tier-2 .venue-token-overlay { border-radius: 0 0 68px 68px; }
    .venue-token.visit-tier-3 .venue-token-overlay { border-radius: 0 0 79px 79px; }
}


/* =============================================================================
   View Mode Toggle + List View
   ============================================================================= */

/* Toggle button in collection header */
.view-mode-toggle {
    margin-left: auto;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.view-mode-toggle:active {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.3);
}

/* =============================================================================
   List View — Old-style rectangular card layout (restored from pre-circle-packing)
   All styles scoped under .venue-cards-list.view-list to avoid circle token conflicts
   ============================================================================= */

/* List view container */
.venue-cards-list.view-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

/* Row wrapper in list mode */
.venue-cards-list.view-list .venue-card-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Main card body */
.venue-cards-list.view-list .venue-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 32px;
    background: #1a1a1a;
    border-radius: 12px;
    position: relative;
    flex: 1;
    min-width: 0;
    transition: background 0.15s ease;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.venue-cards-list.view-list .venue-card:active {
    opacity: 0.8;
    background: #222;
}

/* Remove × button — absolute top-left corner */
.venue-cards-list.view-list .venue-card-remove {
    position: absolute;
    top: 8px;
    left: 8px;
    background: none;
    border: none;
    color: #555;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    transition: color 0.2s ease;
    z-index: 2;
}
.venue-cards-list.view-list .venue-card-remove:hover {
    color: #ff4444;
}

/* Logo — 60×60 square with rounded corners */
.venue-cards-list.view-list .venue-card-logo {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}
.venue-cards-list.view-list .venue-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.venue-cards-list.view-list .venue-card-logo-placeholder {
    font-size: 24px;
    color: #666;
}

/* Info section */
.venue-cards-list.view-list .venue-card-info {
    flex: 1;
    min-width: 0;
}
.venue-cards-list.view-list .venue-card-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.venue-cards-list.view-list .venue-card-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.venue-cards-list.view-list .venue-card-genre,
.venue-cards-list.view-list .venue-card-station,
.venue-cards-list.view-list .venue-card-address {
    font-size: 12px;
    color: #aaa;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Memo pencil indicator */
.venue-cards-list.view-list .venue-card-memo-indicator {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

/* Visit indicator (inline in name row) */
.venue-cards-list.view-list .venue-card-visit-indicator {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    margin-left: 4px;
    flex-shrink: 0;
}
.venue-cards-list.view-list .venue-card-visit-indicator.went {
    color: #f59e0b;
    font-weight: 600;
}

/* Folder pill indicator */
.venue-cards-list.view-list .venue-card-folder {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
    margin-right: 4px;
}
.venue-cards-list.view-list .venue-card-folder-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Campaign badge */
.venue-cards-list.view-list .venue-card-campaign-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(0, 180, 216, 0.15);
    border: 1px solid rgba(0, 180, 216, 0.3);
    border-radius: 10px;
    font-size: 10px;
    color: #00b4d8;
    margin-top: 4px;
}
.venue-cards-list.view-list .venue-card-campaign-badge svg {
    flex-shrink: 0;
}

/* Tag badges */
.venue-cards-list.view-list .venue-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.venue-cards-list.view-list .venue-card-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

/* Chevron (right arrow) */
.venue-cards-list.view-list .venue-card-chevron {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.2);
    margin-left: auto;
    padding-left: 4px;
}

/* AI badge text */
.venue-cards-list.view-list .venue-card .ai-badge {
    display: none;
    position: absolute;
    top: 6px;
    right: 8px;
    padding: 2px 8px;
    background: linear-gradient(135deg, rgba(168,85,247,0.9), rgba(120,60,200,0.9));
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    z-index: 3;
}
.venue-cards-list.view-list .venue-card-row.ai-picked .ai-badge {
    display: block;
}
.venue-cards-list.view-list .venue-card-row.ai-picked .venue-card {
    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.4);
}

/* NFC/QR highlight in list view */
.venue-cards-list.view-list .venue-card-row.newly-collected {
    animation: newCollectPulse 2s ease-out;
    box-shadow: 0 0 0 3px rgba(0, 198, 251, 0.5);
    border-radius: 12px;
}

/* Reservation badge in list view */
.venue-cards-list.view-list .venue-card-reservation-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    margin-top: 4px;
}
.venue-cards-list.view-list .venue-card-reservation-badge.pending {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}
.venue-cards-list.view-list .venue-card-reservation-badge.accepted {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.3);
}
.venue-cards-list.view-list .venue-card-reservation-badge.ready {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

/* List view responsive — mobile */
@media (max-width: 767px) {
    .venue-cards-list.view-list .venue-card {
        padding: 10px 10px 10px 28px;
    }
    .venue-cards-list.view-list .venue-card-logo {
        width: 50px;
        height: 50px;
    }
    .venue-cards-list.view-list .venue-card-name {
        font-size: 14px;
    }
    .venue-cards-list.view-list .venue-card-chevron svg {
        width: 12px;
        height: 12px;
    }
}


/* =============================================================================
   Toast Notification
   ============================================================================= */

.toast-container {
    position: fixed;
    bottom: 80px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 10000;
    pointer-events: none;
}

.toast {
    background: rgba(40, 40, 40, 0.95);
    color: #fff;
    padding: 12px 24px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transform: translateY(20px);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
    max-width: 90%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-icon {
    color: #4CAF50;
    display: flex;
    align-items: center;
}

/* =============================================================================
   Analytics: Reservation Confirmation Modal (Issue #29)
   ============================================================================= */

.analytics-confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9050;
    justify-content: center;
    align-items: center;
}

.analytics-confirm-overlay.active {
    display: flex;
}

.analytics-confirm-card {
    background: #272525;
    border-radius: 16px;
    padding: 28px 24px 20px;
    width: 88%;
    max-width: 320px;
    text-align: center;
    animation: analyticsConfirmFadeIn 0.25s ease-out;
}

@keyframes analyticsConfirmFadeIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.analytics-confirm-subtitle {
    font-size: 12px;
    color: #aaa;
    margin: 0 0 8px;
}

.analytics-confirm-question {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 22px;
}

.analytics-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.analytics-confirm-btn {
    flex: 1;
    padding: 10px 0;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.analytics-confirm-yes {
    background: #00b4d8;
    color: #fff;
}

.analytics-confirm-no {
    background: transparent;
    color: #aaa;
    border: 1px solid #555;
}

/* =============================================================================
   Registration Nudge (Bottom Slide-Up)
   ============================================================================= */

.reg-nudge {
    position: fixed;
    bottom: 68px;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 950;
    background: linear-gradient(145deg, #0d1b2a, #1b2838);
    border: 1px solid rgba(0, 180, 216, 0.25);
    border-radius: 20px;
    padding: 20px 20px 18px;
    width: calc(100% - 20px);
    max-width: 420px;
    box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.6), 0 0 80px rgba(0, 180, 216, 0.1);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.reg-nudge.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.reg-nudge.urgent {
    background: linear-gradient(145deg, #1a1008, #2d1f0e);
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow: 0 -6px 32px rgba(0,0,0,0.6), 0 0 60px rgba(245,158,11,0.12);
}
.reg-nudge.critical {
    background: linear-gradient(145deg, #1a1010, #221616);
    border-color: rgba(200, 80, 80, 0.18);
    box-shadow: 0 -6px 32px rgba(0,0,0,0.6), 0 0 30px rgba(200,80,80,0.05);
}
.reg-nudge-dismiss {
    position: absolute; top: 10px; right: 12px;
    background: none; border: none;
    color: rgba(255,255,255,0.25); cursor: pointer; padding: 4px; line-height: 1;
}
.reg-nudge-dismiss:hover { color: rgba(255,255,255,0.5); }
.reg-nudge-hero {
    display: flex; justify-content: center; margin-bottom: 14px;
}
.reg-nudge-hero-scene {
    width: 76px; height: 76px; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.reg-nudge-hero-scene::before,
.reg-nudge-hero-scene::after {
    content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; opacity: 0;
}
.reg-nudge-hero-scene.normal::before { background: #00b4d8; top: 8px; right: 6px; animation: particleDrift 2.5s ease-out infinite; }
.reg-nudge-hero-scene.normal::after { background: #00b4d8; top: 14px; left: 8px; animation: particleDrift 2.5s ease-out 0.8s infinite; }
.reg-nudge-hero-scene.urgent::before { background: #f59e0b; top: 6px; right: 8px; animation: particleDrift 2s ease-out infinite; }
.reg-nudge-hero-scene.urgent::after { background: #f59e0b; top: 12px; left: 6px; animation: particleDrift 2s ease-out 0.6s infinite; }
.reg-nudge-hero-scene.critical::before { background: #c85050; top: 4px; right: 10px; animation: particleDrift 1.8s ease-out infinite; }
.reg-nudge-hero-scene.critical::after { background: #c85050; top: 10px; left: 10px; animation: particleDrift 1.8s ease-out 0.5s infinite; }
@keyframes particleDrift {
    0% { opacity: 0.7; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(-8px, -18px) scale(0.3); }
}
.reg-nudge-text { text-align: center; margin-bottom: 14px; }
.reg-nudge-headline { font-size: 17px; font-weight: 800; color: #fff; line-height: 1.35; margin-bottom: 5px; }
.reg-nudge-sub { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.3; }
.reg-nudge-countdown-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.reg-nudge-countdown {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 12px;
}
.reg-nudge-countdown.normal { background: rgba(0,180,216,0.12); color: #00b4d8; }
.reg-nudge-countdown.urgent { background: rgba(245,158,11,0.12); color: #f59e0b; }
.reg-nudge-countdown.critical { background: rgba(200,80,80,0.1); color: #c85050; }
.reg-nudge-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; background: linear-gradient(135deg, #00b4d8, #0096b7); color: #fff;
    border: none; padding: 14px 20px; border-radius: 14px;
    font-weight: 700; font-size: 15px; cursor: pointer;
    transition: all 0.2s; box-shadow: 0 4px 16px rgba(0, 180, 216, 0.25);
}
.reg-nudge-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 180, 216, 0.35); }
.reg-nudge-cta:active { transform: translateY(0); }
.reg-nudge-cta svg { flex-shrink: 0; }
.reg-nudge.urgent .reg-nudge-cta {
    background: linear-gradient(135deg, #f59e0b, #d97706); color: #000;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}
.reg-nudge.critical .reg-nudge-cta {
    background: linear-gradient(135deg, #c85050, #b04040);
    box-shadow: 0 4px 16px rgba(200, 80, 80, 0.15);
}

/* =============================================================================
   Slim Login Strip (replaces old register prompt banner)
   ============================================================================= */

.reg-slim-strip {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    transition: background 0.15s;
    margin-bottom: 0;
}
.reg-slim-strip:active { background: rgba(255, 255, 255, 0.1); }
.reg-slim-strip svg { flex-shrink: 0; }

/* =============================================================================
   Registration Wizard (3-Step)
   ============================================================================= */

.reg-progress-bar { display: flex; gap: 6px; margin-bottom: 24px; padding: 0 4px; }
.reg-progress-segment {
    flex: 1; height: 4px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.08); transition: all 0.4s ease; overflow: hidden;
}
.reg-progress-segment.completed { background: #00b4d8; }
.reg-progress-segment.current { background: rgba(0, 180, 216, 0.25); position: relative; }
.reg-progress-segment.current::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 60%; background: #00b4d8; border-radius: 2px;
    animation: progressPulse 1.5s ease-in-out infinite;
}
@keyframes progressPulse { 0%, 100% { width: 40%; } 50% { width: 70%; } }

.reg-step-icon { display: flex; justify-content: center; margin-bottom: 16px; }
.reg-step-icon-circle {
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; position: relative;
}
.reg-step-icon-circle.step1 { background: rgba(0, 180, 216, 0.1); }
.reg-step-icon-circle.step2 { background: rgba(168, 85, 247, 0.1); }
.reg-step-icon-circle.step3 { background: rgba(34, 197, 94, 0.1); }
.reg-step-icon-circle::after {
    content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid transparent;
}
.reg-step-icon-circle.step1::after { border-color: rgba(0, 180, 216, 0.2); }
.reg-step-icon-circle.step2::after { border-color: rgba(168, 85, 247, 0.2); }
.reg-step-icon-circle.step3::after { border-color: rgba(34, 197, 94, 0.2); }

.reg-step-counter {
    text-align: center; font-size: 11px; color: rgba(255,255,255,0.3);
    margin-bottom: 6px; letter-spacing: 1px;
}
.reg-steps-container { position: relative; overflow: hidden; }
.reg-step { display: none; }
.reg-step.active { display: block; animation: stepFadeSlide 0.35s ease; }
@keyframes stepFadeSlide { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
.reg-step.slide-back { animation: stepFadeSlideBack 0.35s ease; }
@keyframes stepFadeSlideBack { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }

.reg-step-title { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 4px; text-align: center; }
.reg-step-subtitle { font-size: 13px; color: rgba(255,255,255,0.4); text-align: center; margin-bottom: 24px; }

.reg-input-wrap { position: relative; margin-bottom: 14px; }
.reg-input-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: rgba(255,255,255,0.25);
}
.reg-input {
    width: 100%; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
    padding: 13px 14px 13px 42px; color: #fff; font-size: 15px;
    outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.reg-input:focus { border-color: #00b4d8; box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.1); }
.reg-input::placeholder { color: rgba(255,255,255,0.25); }

/* Password toggle (registration form) */
.reg-input-wrap .reg-password-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; padding: 4px; cursor: pointer;
    color: rgba(255,255,255,0.35); display: flex; align-items: center;
    transition: color 0.2s;
}
.reg-input-wrap .reg-password-toggle:hover { color: rgba(255,255,255,0.6); }
.reg-input-wrap .reg-input[type="password"] ~ .reg-password-toggle,
.reg-input-wrap .reg-input[type="text"] ~ .reg-password-toggle { }

/* Password toggle (login form) */
.auth-password-wrap {
    position: relative; margin-bottom: 12px;
}
.auth-password-wrap input {
    margin-bottom: 0;
    padding-right: 44px;
}
.auth-password-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; padding: 4px; cursor: pointer;
    color: #777; display: flex; align-items: center;
    transition: color 0.2s;
}
.auth-password-toggle:hover { color: #aaa; }

/* Ensure reg-input has room for eye icon */
.reg-input-wrap .reg-input[type="password"],
.reg-input-wrap .reg-input[type="text"] { padding-right: 44px; }

/* Fade icon when input is focused or has content (fix overlap issue #103) */
.reg-input-wrap:focus-within .reg-input-icon { opacity: 0.1; transition: opacity 0.15s; }
.reg-input-wrap.has-value .reg-input-icon { opacity: 0.1; }

.reg-field-error {
    font-size: 11px; color: #ef4444;
    margin-top: -10px; margin-bottom: 10px; padding-left: 42px; display: none;
}
.reg-field-error.show { display: block; }
.reg-terms-label { display: flex; align-items: flex-start; gap: 10px; margin: 16px 4px 8px; cursor: pointer; }
.reg-terms-checkbox { width: 20px; height: 20px; margin-top: 1px; accent-color: #00b4d8; flex-shrink: 0; }
.reg-terms-text { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; }
.reg-terms-text a { color: #00b4d8; text-decoration: underline; cursor: pointer; }

/* Inline Policy Modal */
.policy-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 10002; display: none; justify-content: center; align-items: center; padding: 24px 16px; }
.policy-modal-overlay.open { display: flex; }
.policy-modal { background: #1e1e1e; border-radius: 16px; max-width: 420px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.policy-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; }
.policy-modal-title { font-size: 16px; font-weight: 600; color: #fff; }
.policy-modal-close { background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; padding: 4px; font-size: 22px; line-height: 1; }
.policy-modal-close:hover { color: #fff; }
.policy-modal-body { padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }
.policy-modal-body h2 { font-size: 15px; margin-bottom: 12px; color: #fff; }
.policy-modal-body h3 { font-size: 13px; margin: 16px 0 8px; color: rgba(255,255,255,0.85); text-align: left; }
.policy-modal-body p, .policy-modal-body li { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 8px; }
.policy-modal-body ol, .policy-modal-body ul { padding-left: 20px; margin-bottom: 12px; }

.reg-nav { display: flex; gap: 10px; margin-top: 12px; }
.reg-nav-back {
    background: none; border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.5); padding: 13px 18px; border-radius: 12px;
    font-size: 14px; cursor: pointer; white-space: nowrap;
    display: flex; align-items: center; gap: 6px; transition: all 0.2s;
}
.reg-nav-back:hover { border-color: rgba(255,255,255,0.25); color: #fff; }
.reg-nav-next, .reg-nav-submit {
    background: linear-gradient(135deg, #00b4d8, #0096b7); border: none; color: #fff;
    padding: 13px 20px; border-radius: 12px; font-size: 15px; font-weight: 600;
    cursor: pointer; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: all 0.2s; box-shadow: 0 4px 12px rgba(0, 180, 216, 0.2);
}
.reg-nav-next:hover, .reg-nav-submit:hover {
    transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 180, 216, 0.3);
}
.reg-nav-submit {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}
.reg-nav-submit:hover { box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3); }

/* =============================================================================
   Homescreen Chip (Video Feed / index.html)
   ============================================================================= */

.homescreen-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    margin-left: 24px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.homescreen-chip:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.25);
}

.homescreen-chip-icon {
    flex-shrink: 0;
    color: #4ade80;
}

.homescreen-chip-icon svg {
    display: block;
}

.homescreen-chip-text {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.homescreen-chip-sep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.homescreen-chip-insta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #E1306C;
    cursor: pointer;
}

.homescreen-chip-insta svg {
    display: block;
}

.homescreen-chip-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.homescreen-chip-dismiss:hover {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
}

/* =============================================================================
   Collection Filter Rows (My Collections Page)
   ============================================================================= */

/* Collections filter container (flat layout with horizontal scroll rows) */
.collections-filter {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Legacy styles (kept for backward compatibility) */
.filter-section {
    margin-bottom: 12px;
}

.filter-label {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    padding-left: 4px;
}

.filter-pills {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.filter-pills::-webkit-scrollbar {
    display: none;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid transparent;
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.filter-pill:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.filter-pill.active {
    background: #fff;
    color: #000;
    font-weight: 600;
}

.filter-pill.filter-pill-ai.active {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    font-weight: 600;
    border: 1px solid rgba(168, 85, 247, 0.4);
}

/* =============================================================================
   Puter.js Disclaimer Modal
   ============================================================================= */

.puter-disclaimer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.puter-disclaimer-modal {
    background: #1a1a2e;
    border-radius: 16px;
    padding: 24px;
    max-width: 360px;
    width: 100%;
    color: #fff;
}

.puter-disclaimer-modal h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
}

.puter-disclaimer-modal p {
    margin: 0 0 20px 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

.puter-disclaimer-buttons {
    display: flex;
    gap: 10px;
}

.puter-disclaimer-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.puter-disclaimer-btn:hover {
    opacity: 0.85;
}

.puter-disclaimer-btn.cancel {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.puter-disclaimer-btn.continue {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
}

/* =============================================================================
   Venue Detail Bottom Sheet
   ============================================================================= */

.venue-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9000;
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.venue-sheet-overlay.active {
    display: block;
    opacity: 1;
}

.venue-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* #173 Round 6: bumped 75vh -> 85vh so the メディア tab fits one row of 9:16 tiles without scrolling */
    max-height: 85vh;
    background: #1a1a2e;
    border-radius: 20px 20px 0 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 9001;
}

.venue-sheet-overlay.active .venue-sheet {
    transform: translateY(0);
}

.venue-sheet-sticky-header {
    flex-shrink: 0;
    position: relative;
    background: #1a1a2e;
    padding: 12px 20px 0;
    border-radius: 20px 20px 0 0;
}

.venue-sheet-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 20px 100px;
}

.venue-sheet-handle {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    margin: 0 auto 16px;
}

.venue-sheet-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.venue-sheet-close:hover {
    color: #fff;
}

.venue-sheet-header {
    margin-bottom: 20px;
}

.venue-sheet-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px 0;
}

.venue-sheet-meta {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

.venue-sheet-section {
    margin-bottom: 20px;
}

.venue-sheet-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 10px 0;
}

/* Tag pills in bottom sheet */
.venue-sheet-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.venue-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.venue-tag-pill:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.venue-tag-pill.active {
    background: rgba(168, 85, 247, 0.25);
    border-color: rgba(168, 85, 247, 0.5);
    color: #d4a5ff;
}

.venue-tag-pill.readonly {
    cursor: default;
}

.venue-tag-pill .tag-icon {
    display: flex;
    align-items: center;
}

.venue-tag-pill .tag-count {
    font-size: 11px;
    opacity: 0.7;
    margin-left: 2px;
}

/* Popular tag — top 5 by community count for this venue */
.venue-tag-pill.popular {
    background: rgba(0, 212, 255, 0.12);
    border-color: rgba(0, 212, 255, 0.45);
    color: rgba(255, 255, 255, 0.92);
}
.venue-tag-pill.popular .tag-count {
    color: #4dd9ff;
    opacity: 1;
    font-weight: 600;
}
/* User's own tag wins on fill; cyan border still signals "this is popular" */
.venue-tag-pill.active.popular {
    background: rgba(168, 85, 247, 0.25);
    border-color: rgba(0, 212, 255, 0.6);
    color: #d4a5ff;
}
.venue-tag-pill.active.popular .tag-count {
    color: #d4a5ff;
}

/* Legend explaining the cyan/purple distinction */
.venue-sheet-tags-legend {
    display: flex;
    gap: 14px;
    font-size: 11px;
    opacity: 0.7;
    margin: 4px 0 8px 0;
}
.venue-sheet-tags-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.venue-sheet-tags-legend .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.venue-sheet-tags-legend .legend-dot-popular { background: #4dd9ff; }
.venue-sheet-tags-legend .legend-dot-mine { background: #d4a5ff; }
/* #173 Round 5 — third legend item for the popular+mine overlap case.
   Cyan core (community) with amber inset ring (your pick) — matches the .venue-tag-pill.popular.active::before dot styling. */
.venue-sheet-tags-legend .legend-dot-both {
    background: #4dd9ff;
    box-shadow: inset 0 0 0 1.5px #fbbf24;
}

.venue-sheet-tags-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 8px;
}

/* Memo section */
.venue-sheet-memo {
    width: 100%;
    min-height: 80px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.venue-sheet-memo:focus {
    border-color: rgba(168, 85, 247, 0.5);
}

.venue-sheet-memo::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.venue-sheet-save-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 20px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.venue-sheet-save-btn:hover {
    opacity: 0.85;
}

.venue-sheet-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Memo section - redesigned header */
.venue-sheet-memo-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.venue-sheet-memo-header h3 {
    margin: 0;
}

.venue-sheet-memo-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

/* Memo template pills */
.memo-template-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.memo-template-pill {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.memo-template-pill:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.4);
    color: rgba(255, 255, 255, 0.85);
}

/* Memo save row */
.memo-save-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Memo disclaimer */
.memo-disclaimer {
    margin: 6px 0 0;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
    line-height: 1.4;
}

/* Memo login prompt (for non-logged-in users) */
.venue-sheet-memo-login-prompt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.venue-sheet-memo-login-prompt:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(168, 85, 247, 0.4);
}

.memo-login-icon {
    display: flex;
    align-items: center;
    opacity: 0.7;
}

.memo-login-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.memo-login-text > span:first-child {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.memo-login-subtext {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}


/* Action Buttons Row */
.venue-sheet-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.venue-action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    transition: background 0.2s;
    cursor: pointer;
}

.venue-action-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.venue-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.venue-action-label {
    font-weight: 500;
    text-align: center;
}

.venue-action-call {
    border-color: rgba(34, 197, 94, 0.3);
}

.venue-action-call:hover {
    background: rgba(34, 197, 94, 0.12);
}

.venue-action-reserve {
    border-color: rgba(59, 130, 246, 0.3);
}

.venue-action-reserve:hover {
    background: rgba(59, 130, 246, 0.12);
}

.venue-action-taxi {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(255, 255, 255, 0.06);
    font-family: inherit;
}

.venue-action-taxi:hover {
    background: rgba(245, 158, 11, 0.12);
}

.venue-action-sameday {
    border-color: rgba(0, 234, 255, 0.35);
    background: rgba(0, 234, 255, 0.06);
    font-family: inherit;
    animation: omakaseGlow 2.5s ease-in-out infinite;
}

@keyframes omakaseGlow {
    0%, 100% { box-shadow: 0 0 4px rgba(0, 234, 255, 0.15); }
    50% { box-shadow: 0 0 12px rgba(0, 234, 255, 0.3), 0 0 4px rgba(0, 234, 255, 0.15); }
}

.venue-action-sameday:hover {
    background: rgba(0, 234, 255, 0.12);
}

.venue-action-sameday .venue-action-icon svg {
    color: #00eaff;
}

.venue-action-sameday.loading {
    position: relative;
    pointer-events: none;
}

.venue-action-sameday.loading .venue-action-icon,
.venue-action-sameday.loading .venue-action-label,
.venue-action-sameday.loading .venue-action-sub,
.venue-action-sameday.loading .venue-action-lock {
    visibility: hidden;
}

.venue-action-sameday.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(20, 184, 166, 0.3);
    border-top-color: #14b8a6;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Sub-label beneath action label (e.g., "No Reservation", "Not Available") */
.venue-action-sub {
    display: none;
    font-size: 9px;
    font-weight: 400;
    text-align: center;
    line-height: 1.2;
    margin-top: 2px;
}

/* Disabled state for action buttons */
.venue-action-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

.venue-action-btn.disabled .venue-action-label {
    text-decoration: line-through;
}

.venue-action-btn.disabled .venue-action-sub {
    display: block;
    color: rgba(255, 100, 100, 0.7);
}

/* Login-required state — button looks ACTIVE, lock is a soft hint */
.venue-action-btn.login-required {
    opacity: 1;
    cursor: pointer;
}

.venue-action-btn.login-required .venue-action-label {
    text-decoration: none;
}

.venue-action-btn.login-required .venue-action-lock {
    display: inline-block;
    margin-left: 3px;
    vertical-align: middle;
    opacity: 0.35;
}

/* Same-Day register modal (guests only) */
.sameday-register-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sameday-register-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.sameday-register-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.sameday-register-content {
    position: relative;
    background: #1a1a1a;
    border-radius: 16px;
    padding: 32px 24px;
    width: 90%;
    max-width: 340px;
    text-align: center;
    color: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.sameday-register-icon {
    color: #14b8a6;
    margin-bottom: 16px;
}

.sameday-register-content h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
}

.sameday-register-content p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0 0 24px;
}

.sameday-register-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: #14b8a6;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 10px;
    transition: background 0.2s ease;
}

.sameday-register-btn:active {
    background: #0d9488;
}

.sameday-register-later {
    display: block;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.sameday-register-later:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Call button "no reservation" hint (still active, informational) */
.venue-action-call .venue-action-sub {
    color: rgba(255, 180, 100, 0.7);
    font-size: 8px;
}

/* Venue Map Section */
.venue-sheet-map-section {
    margin-bottom: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

.venue-sheet-map-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
}

.venue-sheet-map-container {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.venue-sheet-map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.venue-sheet-map-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: rgba(59, 130, 246, 0.9);
    text-decoration: none;
    transition: color 0.2s;
}

.venue-sheet-map-link:hover {
    color: rgba(59, 130, 246, 1);
}

/* Venue Detail Info Section */
.venue-sheet-description {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin-bottom: 8px;
    white-space: pre-line;
}


.venue-sheet-hours {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
}

.venue-sheet-services {
    font-size: 12px;
    color: rgba(168, 85, 247, 0.8);
    font-weight: 500;
    margin-bottom: 6px;
}

.venue-sheet-announcement {
    font-size: 12px;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 8px;
}

/* =============================================================================
   Venue Videos Section (Bottom Sheet)
   ============================================================================= */

.venue-sheet-videos {
    margin-bottom: 16px;
}

.venue-videos-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.venue-videos-trigger:active {
    background: rgba(255, 255, 255, 0.1);
}

.venue-videos-trigger.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.venue-videos-trigger-icon {
    display: flex;
    align-items: center;
    color: #00b4d8;
}

.venue-videos-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: rgba(0, 180, 216, 0.2);
    color: #00b4d8;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.venue-videos-count:empty {
    display: none;
}

.venue-videos-chevron {
    display: flex;
    align-items: center;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.2s ease;
}

.venue-videos-trigger.expanded .venue-videos-chevron {
    transform: rotate(180deg);
}

.venue-videos-content {
    margin-top: 10px;
}

.venue-videos-player-area {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    margin-bottom: 10px;
}

.venue-videos-player-area iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* X/Twitter tweets are tall, not 16:9. When an X tweet is active, drop the
   aspect-ratio padding and let the iframe size to its own content. */
.venue-videos-player-area.x-active {
    padding-bottom: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

.venue-videos-player-area.x-active iframe {
    position: relative;
    height: 500px;
    max-height: 70vh;
    border-radius: 12px;
    background: #15202b;
}

.venue-videos-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.venue-videos-thumbs::-webkit-scrollbar {
    display: none;
}

.venue-videos-loading {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.venue-video-thumb-card {
    flex: 0 0 110px;
    padding: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.venue-video-thumb-card:active {
    transform: scale(0.97);
}

.venue-video-thumb-card.active {
    border-color: #00b4d8;
}

.venue-video-thumb {
    position: relative;
    width: 110px;
    height: 62px; /* ~16:9 */
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
}

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

.venue-video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 2px;
}

.venue-video-x-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.4);
    background: #15202b;
}

.venue-video-caption {
    padding: 5px 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =============================================================================
   AI Search Bar (Dedicated Section Below Ad)
   ============================================================================= */

.ai-search-bar {
    margin: 12px 16px;
    transition: all 0.3s ease;
}

/* Inactive State (Default) */
.ai-search-inactive {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-search-inactive:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(168, 85, 247, 0.6);
}

.ai-search-inactive:active {
    transform: scale(0.98);
}

.ai-search-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.ai-search-placeholder {
    color: rgba(168, 85, 247, 0.9);
    font-size: 14px;
}

/* Active Input State (Expanded with Textarea) */
.ai-search-active {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: #1a1a2e;
    border: 1px solid rgba(168, 85, 247, 0.6);
    border-radius: 20px;
}

.ai-search-active-header {
    display: flex;
    justify-content: flex-end;
}

.ai-search-cancel {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 12px;
    color: #888;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-search-cancel:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.ai-search-input {
    width: 100%;
    min-height: 80px;
    padding: 12px 14px;
    background: #2a2a3e;
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 14px;
    color: #fff;
    font-size: 14px;
    resize: none;
    font-family: inherit;
    line-height: 1.4;
    box-sizing: border-box;
}

.ai-search-input:focus {
    outline: none;
    border-color: rgba(168, 85, 247, 0.6);
}

.ai-search-input::placeholder {
    color: #777;
}

.ai-search-active-footer {
    display: flex;
    justify-content: flex-end;
}

.ai-search-submit {
    padding: 10px 20px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border: none;
    border-radius: 18px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-search-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.ai-search-submit:active {
    transform: translateY(0);
}

/* Loading State */
.ai-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-radius: 24px;
    color: #fff;
    font-size: 14px;
    animation: pulse 1.5s ease-in-out infinite;
}

.ai-search-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Results State */
.ai-search-results {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-radius: 24px;
    color: #fff;
}

.ai-search-query {
    font-weight: 600;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-search-query::before {
    content: '"';
}

.ai-search-query::after {
    content: '"';
}

.ai-search-count {
    opacity: 0.8;
    font-size: 13px;
    flex-shrink: 0;
}

.ai-search-clear {
    margin-left: auto;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 14px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ai-search-clear:hover {
    background: rgba(255, 255, 255, 0.3);
}


/* =============================================================================
   Dispatch Entry Banner (#107 — Variant E: robot dispatch scene)
   Sits where the old AI search bar sat: between the folder bar and filters.
   ============================================================================= */
.dispatch-banner {
    display: flex;
    margin: 12px 8px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #16213a, #1d1838);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dispatch-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}
.dispatch-banner:active {
    transform: translateY(0);
}

/* left visual panel — robot dispatching to shops */
.dispatch-banner .banner-visual {
    flex-shrink: 0;
    width: 124px;
    background:
        radial-gradient(circle at 50% 45%, rgba(0, 180, 216, 0.4), transparent 70%),
        linear-gradient(160deg, #0a4f73, #062c44);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.dispatch-banner .dispatch-scene {
    width: 124px;
    height: 100%;
}

/* the robot icon glows softly */
.dispatch-banner .robot-core {
    filter: drop-shadow(0 0 5px rgba(0, 217, 255, 0.7));
}

/* signal lines flow outward (dash animation) */
.dispatch-banner .signal-line {
    stroke-dasharray: 4 5;
    animation: dispatchFlow 1.3s linear infinite;
}
.dispatch-banner .signal-line.d2 { animation-delay: 0.2s; }
.dispatch-banner .signal-line.d3 { animation-delay: 0.4s; }
.dispatch-banner .signal-line.d4 { animation-delay: 0.6s; }
@keyframes dispatchFlow { to { stroke-dashoffset: -18; } }

/* shop nodes pulse as if "receiving" the ping */
.dispatch-banner .shop-node {
    animation: dispatchShopPulse 1.8s ease-in-out infinite;
}
.dispatch-banner .shop-node.d2 { animation-delay: 0.25s; }
.dispatch-banner .shop-node.d3 { animation-delay: 0.5s; }
.dispatch-banner .shop-node.d4 { animation-delay: 0.75s; }
@keyframes dispatchShopPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

/* right content panel */
.dispatch-banner .banner-content {
    flex: 1;
    padding: 14px 16px 14px 15px;
}
.dispatch-banner .banner-kicker {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #00d9ff;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.dispatch-banner .banner-title {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 5px;
}
.dispatch-banner .banner-desc {
    font-size: 11.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 11px;
}
.dispatch-banner .banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #00b4d8, #0077b6);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 180, 216, 0.35);
}
.dispatch-banner .banner-cta svg {
    width: 15px;
    height: 15px;
}

/* =============================================================================
   AI Search Pill (#107 — sits inline in the genre filter row)
   Matches .genre-pill geometry (padding 6/14, radius 8) but keeps a purple
   identity so it reads as the distinct "smart" filter. Built dynamically in
   _renderGenreFilters().
   ============================================================================= */
.ai-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(168, 85, 247, 0.22));
    border: 1.5px solid rgba(168, 85, 247, 0.5);
    color: rgba(214, 180, 255, 1);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
}
.ai-pill svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
/* results state — query chip + clear ✕ */
.ai-pill.ai-pill-results {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-color: rgba(168, 85, 247, 0.6);
    color: #fff;
}
.ai-pill .ai-pill-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}
/* loading state — inline spinner */
.ai-pill .ai-pill-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* =============================================================================
   AI Search Modal (#107 — the query input, opened by the AI pill)
   ============================================================================= */
.ai-search-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ai-search-modal {
    width: 100%;
    max-width: 420px;
    background: #1a1a2e;
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 18px;
    padding: 16px;
}
.ai-search-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.ai-search-modal-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.ai-search-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 2px;
    display: flex;
}
.ai-search-modal-close:hover {
    color: #fff;
}
.ai-search-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}


/* Mobile adjustments for the dispatch banner + AI search modal */
@media (max-width: 767px) {
    .dispatch-banner {
        margin: 10px 8px;
    }
    .ai-search-input {
        min-height: 70px;
        font-size: 13px;
        padding: 10px 12px;
    }
    .ai-search-submit {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* =============================================================================
   AI Search Inline (Genre Filter Row) - DEPRECATED, kept for backwards compat
   ============================================================================= */

.filter-pill.filter-pill-ai {
    border: 1px solid rgba(168, 85, 247, 0.5);
    color: rgba(168, 85, 247, 0.9);
    background: transparent;
}

.filter-pill.filter-pill-ai:hover {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.ai-inline-input {
    flex: 1;
    padding: 6px 12px;
    background: #2a2a2a;
    border: 1px solid rgba(168, 85, 247, 0.5);
    border-radius: 18px;
    color: #fff;
    font-size: 12px;
    font-family: inherit;
    min-width: 0;
}

.ai-inline-input:focus {
    border-color: #a855f7;
    outline: none;
}

.ai-inline-input::placeholder {
    color: #777;
}

.ai-inline-cancel,
.ai-inline-submit {
    padding: 6px 12px;
    border: none;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.ai-inline-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.ai-inline-cancel:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.ai-inline-submit {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
}

.ai-inline-submit:hover {
    opacity: 0.9;
}

.ai-inline-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-loading-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-radius: 18px;
    color: #fff;
    font-size: 12px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Mobile adjustments for new elements */
@media (max-width: 767px) {
    .my-collections-page {
        padding: 16px;
    }

    .auth-form input:not([type="checkbox"]) {
        padding: 10px 14px;
        font-size: 13px;
    }

    .filter-pill {
        padding: 6px 12px;
        font-size: 12px;
    }

    .ai-inline-input {
        font-size: 11px;
        padding: 5px 10px;
    }

    .ai-inline-cancel,
    .ai-inline-submit {
        font-size: 11px;
        padding: 5px 10px;
    }
}

/* =============================================================================
   Folder Drawer & Modal
   ============================================================================= */

/* Folder trigger button in header */
/* ============================================================ */
/* Filter Row Labels (small section headers above pill rows)     */
/* ============================================================ */

.filter-row-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0 8px;
    margin-bottom: 2px;
}

.filter-row-label-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px;
    margin-bottom: 2px;
}

.filter-row-label-wrap .filter-row-label {
    padding: 0;
    margin-bottom: 0;
}

.filter-row-label-info {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 0;
    min-width: 32px;
    min-height: 32px;
    transition: color 0.2s ease;
}

.filter-row-label-info:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* Folder Info Modal */
.folder-info-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.folder-info-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.folder-info-modal-content {
    position: relative;
    background: #272525;
    border-radius: 16px;
    padding: 24px 20px 20px;
    max-width: 340px;
    width: calc(100% - 48px);
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.folder-info-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.folder-info-modal-close:hover {
    color: #fff;
}

.folder-info-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 16px 0;
}

.folder-info-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.folder-info-section {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.folder-info-section-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.folder-info-section-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    margin: 0;
    padding-top: 6px;
}

.folder-info-example .folder-info-section-text {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

/* ============================================================ */
/* Folder Bar (horizontal chip row above filter pills)           */
/* ============================================================ */

.folder-bar {
    padding: 8px 8px 4px;
    overflow: hidden;
}

.folder-bar-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

.folder-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    flex: 1;
    min-width: 0;
}

.folder-bar-row::-webkit-scrollbar {
    display: none;
}

.folder-bar-hint {
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    opacity: 0.45;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
}

.folder-bar-manage {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: color 0.2s ease;
}

.folder-bar-manage:hover {
    color: #fff;
}

.folder-bar-manage svg {
    width: 18px;
    height: 18px;
}

.folder-bar-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.folder-bar-chip:hover {
    background: rgba(255, 255, 255, 0.15);
}

.folder-bar-chip.active {
    background: #fff;
    color: #000;
    font-weight: 600;
    border-color: #fff;
}

.folder-bar-chip-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ============================================================ */
/* Folder Manage Bottom Sheet                                    */
/* ============================================================ */

.folder-manage-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.folder-manage-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.folder-manage-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a1a1a;
    border-radius: 16px 16px 0 0;
    max-height: 60vh;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 9001;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.folder-manage-sheet.active {
    transform: translateY(0);
}

.folder-manage-handle {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 8px auto;
}

.folder-manage-header {
    padding: 4px 20px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.folder-manage-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.folder-manage-create {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    color: #00b4d8;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: inherit;
}

.folder-manage-create:hover {
    background: rgba(0, 180, 216, 0.05);
}

.folder-manage-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.folder-manage-row-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-flex;
}

.folder-manage-row-name {
    flex: 1;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-manage-row-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-right: 8px;
    flex-shrink: 0;
}

.folder-manage-row-edit,
.folder-manage-row-delete {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    border: none;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.folder-manage-row-edit:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.folder-manage-row-delete {
    color: #E74C3C;
}

.folder-manage-row-delete:hover {
    background: rgba(231, 76, 60, 0.15);
}

.folder-manage-row-arrows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    margin-right: 4px;
}

.folder-manage-row-up,
.folder-manage-row-down {
    width: 24px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    border: none;
    padding: 0;
    transition: all 0.15s ease;
}

.folder-manage-row-up:hover:not(:disabled),
.folder-manage-row-down:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.folder-manage-row-up:disabled,
.folder-manage-row-down:disabled {
    opacity: 0.2;
    cursor: default;
}

.folder-manage-empty {
    padding: 32px 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.folder-manage-empty p {
    margin: 0 0 4px;
    font-size: 14px;
}

.folder-manage-empty-hint {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.3) !important;
}

.folder-manage-body {
    padding-bottom: 20px;
}

/* ============================================================ */
/* Folder Icon Picker (in fullscreen editor)                     */
/* ============================================================ */

.folder-fullscreen-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 8px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.folder-fullscreen-icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0 12px;
}

.folder-icon-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid transparent;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
}

.folder-icon-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.folder-icon-btn.active {
    border-color: #a855f7;
    color: #a855f7;
    background: rgba(168, 85, 247, 0.1);
}

/* ============================================================ */
/* Full-Screen Folder Editor                                     */
/* ============================================================ */

.folder-fullscreen-overlay {
    position: fixed;
    inset: 0;
    background: #111;
    z-index: 10000;
    display: none;
    flex-direction: column;
}

.folder-fullscreen-overlay.active {
    display: flex;
}

.folder-fullscreen {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.folder-fullscreen-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #111;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.folder-fullscreen-header h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    flex: 1;
    text-align: center;
    color: #fff;
}

.folder-fullscreen-back {
    background: transparent;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 4px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.folder-fullscreen-back:active {
    color: #fff;
}

.folder-fullscreen-save {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border: none;
    color: #fff;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-width: 60px;
    text-align: center;
}

.folder-fullscreen-save:disabled {
    opacity: 0.4;
    cursor: default;
}

.folder-fullscreen-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px 16px 100px;
}

.folder-fullscreen-name-section {
    margin-bottom: 24px;
}

.folder-fullscreen-input {
    width: 100%;
    padding: 14px 16px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    font-family: inherit;
    margin-bottom: 14px;
    box-sizing: border-box;
}

.folder-fullscreen-input:focus {
    border-color: #a855f7;
    outline: none;
}

.folder-fullscreen-input::placeholder {
    color: #666;
}

.folder-fullscreen-color-picker {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.folder-color-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}

.folder-color-btn:hover {
    transform: scale(1.15);
}

.folder-color-btn.active {
    border-color: #fff;
    transform: scale(1.15);
}

.folder-fullscreen-venue-section h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #fff;
}

.folder-fullscreen-venue-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 12px;
}

.folder-fullscreen-filters {
    margin-bottom: 12px;
}

.folder-fullscreen-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
}

.folder-fullscreen-filter-row .filter-row-label {
    width: 100%;
    padding: 0;
    margin-bottom: 0;
}

.folder-fullscreen-filter-row::-webkit-scrollbar {
    display: none;
}

.folder-fullscreen-filter-row .genre-pill {
    flex-shrink: 0;
    font-size: 12px;
    padding: 5px 10px;
}

.pill-not-in-folder {
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: rgba(239, 68, 68, 0.7) !important;
}

.pill-not-in-folder.active {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

.folder-fullscreen-venue-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.folder-venue-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.folder-venue-row:active {
    background: rgba(255, 255, 255, 0.06);
}

.folder-venue-row.checked {
    background: rgba(168, 85, 247, 0.1);
}

.folder-venue-checkbox {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: rgba(255, 255, 255, 0.3);
}

.folder-venue-row.checked .folder-venue-checkbox {
    color: #a855f7;
}

.folder-venue-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
}

.folder-venue-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.folder-venue-logo svg {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.3);
}

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

.folder-venue-name {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-venue-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.folder-fullscreen-selected-count {
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    padding: 12px 0;
    min-height: 20px;
}

.folder-fullscreen-delete {
    width: 100%;
    margin-top: 32px;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: 10px;
    color: #ef4444;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.folder-fullscreen-delete:active {
    background: rgba(239, 68, 68, 0.1);
}

/* =============================================================================
   Share Feature
   ============================================================================= */

/* Register + Share split row */
.reg-share-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 12px;
}

.reg-share-row .reg-slim-strip {
    flex: 1;
    margin-bottom: 0;
    min-width: 0;
}

.share-strip-btn {
    flex: 1;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    color: #6ee7b7;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    transition: background 0.15s;
}

.share-strip-btn:active {
    background: rgba(16, 185, 129, 0.15);
}

.share-strip-btn svg {
    flex-shrink: 0;
}

/* Share overlay — green accent overrides (scoped to #shareOverlay) */
#shareOverlay .folder-venue-row.checked {
    background: rgba(16, 185, 129, 0.1);
}

#shareOverlay .folder-venue-row.checked .folder-venue-checkbox {
    color: #10b981;
}

/* Share explainer */
.share-explainer {
    text-align: center;
    margin-bottom: 20px;
}

.share-explainer-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.share-explainer-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.5;
}

/* QR code */
.share-qr-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.share-qr-box {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.share-qr-box.empty {
    opacity: 0.3;
}

.share-qr-box img {
    display: block;
    width: 180px;
    height: 180px;
    image-rendering: pixelated;
}

.share-qr-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}

/* URL display */
.share-url-display {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    word-break: break-all;
    text-align: center;
    line-height: 1.4;
    margin-bottom: 12px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Share action buttons */
.share-actions {
    display: flex;
    gap: 10px;
}

.share-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: opacity 0.2s, transform 0.1s;
}

.share-action-btn:active {
    opacity: 0.8;
    transform: scale(0.98);
}

.share-action-btn:disabled {
    opacity: 0.3;
    pointer-events: none;
}

.share-action-copy {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
}

.share-action-native {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Select All / Deselect All */
.share-select-all-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 4px 0 8px;
}

.share-select-all-btn,
.share-deselect-all-btn {
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.share-select-all-btn {
    color: #10b981;
}

.share-select-all-btn:active {
    background: rgba(16, 185, 129, 0.15);
}

.share-deselect-all-btn {
    color: rgba(255, 255, 255, 0.45);
}

.share-deselect-all-btn:active {
    background: rgba(255, 255, 255, 0.08);
}

/* Folder filter dot inside genre-pill */
.genre-pill .share-folder-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Visit status section in bottom sheet */
.venue-sheet-visit-section {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.visit-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.visit-status-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

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

.visit-btn-went.active {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.5);
    color: #4ade80;
    pointer-events: none;
}

.visit-trophy-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #f59e0b;
    font-size: 13px;
    font-weight: 600;
}

.visit-trophy-count {
    font-size: 12px;
}

.visit-increment-btn {
    padding: 5px 10px;
    border-radius: 14px;
    border: 1px solid rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
}

.visit-increment-btn:active {
    transform: scale(0.95);
    background: rgba(34, 197, 94, 0.25);
}

.visit-decrement-btn {
    padding: 5px 10px;
    border-radius: 14px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
}

.visit-decrement-btn:active {
    transform: scale(0.95);
    background: rgba(239, 68, 68, 0.25);
}

.visit-decrement-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.visit-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
    margin-left: auto;
}

.visit-reset-btn:active {
    transform: scale(0.95);
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* Delete confirmation modal */
.confirm-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1100;
}

.confirm-modal.active {
    opacity: 1;
    visibility: visible;
}

.confirm-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.confirm-modal-content {
    position: relative;
    width: 300px;
    max-width: 85%;
    background: #222;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.confirm-modal-content h3 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px;
}

.confirm-modal-message {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 20px;
    line-height: 1.4;
}

.confirm-modal-actions {
    display: flex;
    gap: 10px;
}

.confirm-modal-cancel,
.confirm-modal-confirm {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
    font-family: inherit;
}

.confirm-modal-cancel {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.confirm-modal-cancel:active {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.confirm-modal-confirm {
    background: #ef4444;
    border: none;
    color: #fff;
}

.confirm-modal-confirm:active {
    opacity: 0.9;
}

/* Folder row in bottom sheet */
.venue-sheet-folder-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    margin-bottom: 12px;
}

.venue-sheet-folder-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.venue-sheet-folder-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.venue-sheet-folder-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
    margin: 0 1px;
}

.venue-sheet-folder-name {
    color: rgba(255, 255, 255, 0.9);
}

.venue-sheet-folder-change {
    font-size: 12px;
    color: #a855f7;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.venue-sheet-folder-change:hover {
    opacity: 0.8;
}

/* Folder prompt modal (on index.html after collect) */
.folder-prompt-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1100;
}

.folder-prompt-modal.active {
    opacity: 1;
    visibility: visible;
}

.folder-prompt-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.folder-prompt-content {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: #1a1a1a;
    border-radius: 20px 20px 0 0;
    padding: 24px 20px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.folder-prompt-modal.active .folder-prompt-content {
    transform: translateY(0);
}

.folder-prompt-header {
    text-align: center;
    margin-bottom: 16px;
}

.folder-prompt-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 50%;
    margin-bottom: 12px;
}

.folder-prompt-checkmark svg {
    color: #fff;
}

.folder-prompt-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px;
}

.folder-prompt-header p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.folder-prompt-hint {
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 16px;
}

.folder-prompt-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
}

.folder-prompt-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.folder-prompt-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.folder-prompt-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.folder-prompt-pill-new {
    border-style: dashed;
    color: rgba(168, 85, 247, 0.9);
    border-color: rgba(168, 85, 247, 0.5);
}

.folder-prompt-pill-new:hover {
    background: rgba(168, 85, 247, 0.1);
    border-color: #a855f7;
}

.folder-prompt-pill.selected {
    background: rgba(168, 85, 247, 0.25);
    border-color: #a855f7;
}

.folder-prompt-done {
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    background: #a855f7;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.folder-prompt-done:hover {
    background: #9333ea;
}

.folder-prompt-skip {
    display: block;
    width: 100%;
    padding: 12px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.folder-prompt-skip:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* Inline folder create (in folder prompt) */
.folder-prompt-create {
    display: none;
    margin-bottom: 16px;
}

.folder-prompt-create.active {
    display: block;
}

.folder-prompt-create-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.folder-prompt-create-input {
    flex: 1;
    padding: 10px 14px;
    background: #222;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
}

.folder-prompt-create-input:focus {
    border-color: #a855f7;
    outline: none;
}

.folder-prompt-create-save {
    padding: 10px 18px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.folder-prompt-create-colors {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.folder-prompt-create-color {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.folder-prompt-create-color.active {
    border-color: #fff;
}

/* =============================================================================
   Bundle Save Modal
   ============================================================================= */

.bundle-save-all-btn {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #00b4d8, #0077b6);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    transition: all 0.2s ease;
}
.bundle-save-all-btn:hover {
    background: linear-gradient(135deg, #0096c7, #005f8a);
}
.bundle-save-all-btn:active {
    transform: scale(0.98);
}
.bundle-save-all-btn svg { flex-shrink: 0; }

.bundle-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.bundle-divider::before,
.bundle-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}
.bundle-divider span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bundle-badge-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 8px 4px 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.bundle-badge-scroll::-webkit-scrollbar { display: none; }

.bundle-badge {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.bundle-badge-circle {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    transition: all 0.2s ease;
}
.bundle-badge-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.bundle-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
}
.bundle-badge-icon svg {
    width: 28px;
    height: 28px;
}

.bundle-badge:not(.checked):not(.already-saved) .bundle-badge-icon {
    opacity: 0.4;
}

.bundle-badge.checked .bundle-badge-circle {
    border-color: #fff;
}
.bundle-badge-check {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    background: #50fa7b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}
.bundle-badge.checked .bundle-badge-check {
    opacity: 1;
    transform: scale(1);
}
.bundle-badge-check svg { color: #1a1a1a; }

.bundle-badge.already-saved {
    pointer-events: none;
}
.bundle-badge.already-saved .bundle-badge-circle {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    opacity: 0.35;
}
.bundle-badge.already-saved .bundle-badge-icon { opacity: 0.2; }

.bundle-badge-name {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bundle-badge.already-saved .bundle-badge-name {
    color: rgba(255, 255, 255, 0.25);
}
.bundle-badge-saved-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.25);
    font-weight: 600;
}

.bundle-save-selected-btn {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #00b4d8, #0077b6);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 8px;
    transition: all 0.2s ease;
    display: none;
}
.bundle-save-selected-btn.visible { display: block; }
.bundle-save-selected-btn:hover {
    background: linear-gradient(135deg, #0096c7, #005f8a);
}

.bundle-all-saved {
    text-align: center;
    padding: 16px 0;
}
.bundle-all-saved-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 16px;
}
.bundle-view-collections-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #00b4d8;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.bundle-view-collections-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Folder Picker Modal (for changing venue folder) */
.folder-picker-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10000; /* Must be higher than venue-sheet (9001) */
}

.folder-picker-modal.active {
    opacity: 1;
    visibility: visible;
}

.folder-picker-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.folder-picker-content {
    position: relative;
    width: 300px;
    max-width: 90%;
    max-height: 70vh;
    background: #222;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
}

.folder-picker-content h3 {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 16px;
    text-align: center;
}

.folder-picker-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 16px;
}

.folder-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.folder-picker-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.folder-picker-item.active {
    background: rgba(168, 85, 247, 0.15);
}

.folder-picker-item-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.folder-picker-item-name {
    flex: 1;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.folder-picker-item-check {
    width: 18px;
    height: 18px;
    color: #a855f7;
    opacity: 0;
}

.folder-picker-item.active .folder-picker-item-check {
    opacity: 1;
}

.folder-picker-cancel {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.folder-picker-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Folder picker - create new folder row */
.folder-picker-create-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    color: rgba(168, 85, 247, 0.9);
    font-size: 14px;
    font-weight: 500;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 4px;
    transition: background 0.2s;
}

.folder-picker-create-row:hover {
    background: rgba(168, 85, 247, 0.1);
}

.folder-picker-create-row svg {
    color: rgba(168, 85, 247, 0.9);
}

/* Folder picker - inline create form */
.folder-picker-inline-create {
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 4px;
}

.folder-picker-inline-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}

.folder-picker-inline-input:focus {
    border-color: rgba(168, 85, 247, 0.5);
}

.folder-picker-inline-colors {
    display: flex;
    gap: 8px;
    margin: 10px 0;
    padding: 0 2px;
}

.folder-picker-color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s, transform 0.2s;
}

.folder-picker-color-dot.active {
    border-color: #fff;
    transform: scale(1.15);
}

.folder-picker-inline-btns {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.folder-picker-inline-cancel {
    flex: 1;
    padding: 7px 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    cursor: pointer;
}

.folder-picker-inline-save {
    flex: 1;
    padding: 7px 0;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.folder-picker-inline-save:disabled {
    opacity: 0.5;
}

/* =============================================================================
   Taxi / Rides Feature
   ============================================================================= */

/* Old taxi row styles removed - taxi now inside action buttons row */

/* Taxi Picker Modal */
.taxi-picker-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10000; /* Must be higher than venue-sheet (9001) */
}

.taxi-picker-modal.active {
    opacity: 1;
    visibility: visible;
}

.taxi-picker-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.taxi-picker-content {
    position: relative;
    width: 320px;
    max-width: 90%;
    max-height: 70vh;
    background: #222;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
}

.taxi-picker-content h3 {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 16px;
    text-align: center;
}

.taxi-picker-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 16px;
}

.taxi-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-bottom: 8px;
}

.taxi-picker-item:last-child {
    margin-bottom: 0;
}

.taxi-picker-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.taxi-picker-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
}

/* Service-specific icon backgrounds - brand colors */
.taxi-picker-item-icon.uber {
    background: #000;
    color: #fff;
    border: 1px solid #333;
}

.taxi-picker-item-icon.go-taxi {
    background: #000;
    color: #fff;
    border: 1px solid #333;
}

.taxi-picker-item-text {
    flex: 1;
}

.taxi-picker-item-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 3px;
}

.taxi-picker-item-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.taxi-picker-cancel {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.taxi-picker-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Taxi picker loading state */
.taxi-picker-loading {
    text-align: center;
    padding: 24px 16px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.taxi-picker-loading .spinner {
    width: 24px;
    height: 24px;
    margin: 0 auto 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* =============================================================================
   Special Collection Pills (curated lists like "Top 10", "Trending")
   ============================================================================= */

.collection-pill.special-collection {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    color: #fff;
}

.collection-pill.special-collection:hover {
    background: linear-gradient(135deg, #7a8ff0 0%, #8a5cb8 100%);
}

.collection-pill.special-collection.active {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a3c92 100%);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.5);
}

/* =============================================================================
   Top Right Controls (Language Selector + Settings Gear)
   ============================================================================= */

.top-right-controls {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-right-controls .language-selector {
    position: static;
    transform: none;
}

/* Settings Gear Button */
.settings-gear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.settings-gear-btn:hover {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
}

.settings-gear-btn:active {
    transform: scale(0.95);
}

.settings-gear-btn svg {
    width: 18px;
    height: 18px;
}

/* =============================================================================
   Settings Drawer
   ============================================================================= */

.settings-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.settings-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.settings-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: #1a1a1a;
    z-index: 2000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.settings-drawer.active {
    transform: translateX(0);
}

.settings-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px;
    border-bottom: 1px solid #333;
}

.settings-drawer-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.settings-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.settings-drawer-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.settings-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.settings-section {
    margin-bottom: 24px;
}

.settings-section h3 {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

/* Settings Links */
.settings-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s ease;
    margin-bottom: 4px;
}

.settings-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

.settings-link-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-link-icon svg {
    width: 18px;
    height: 18px;
}

.settings-link span:not(.settings-link-icon) {
    font-size: 15px;
}

/* Account Section */
.settings-account-section {
    padding-bottom: 16px;
    border-bottom: 1px solid #333;
}

.settings-user-display {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 12px;
}

.settings-user-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #00b4d8, #0077b6);
    border-radius: 50%;
    flex-shrink: 0;
}

.settings-user-icon svg {
    color: #fff;
}

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

.settings-user-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-user-email {
    font-size: 13px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Login Link (Guest) */
.settings-login-link {
    background: linear-gradient(135deg, #00b4d8, #0077b6);
    border: none;
    border-radius: 8px;
    color: #fff !important;
    font-weight: 600;
    cursor: pointer;
}

.settings-login-link:hover {
    background: linear-gradient(135deg, #0096c7, #005f8a) !important;
}

/* Danger Link (Delete Account) */
.settings-link-danger {
    color: #ff6b6b !important;
    background: none;
    border: none;
    cursor: pointer;
}

.settings-link-danger:hover {
    background: rgba(255, 107, 107, 0.1) !important;
}

.settings-link-danger .settings-link-icon svg {
    stroke: #ff6b6b;
}

/* Logout Button (subtle, not danger) */
.settings-logout-btn {
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid #555;
    border-radius: 8px;
    color: #999;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 12px;
}

.settings-logout-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #888;
    color: #fff;
}

/* Password Reset button as settings-link */
#settingsPasswordResetLink {
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
}

/* Password Reset Modal */
.reset-password-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    color: #00b4d8;
}

.reset-password-hint {
    font-size: 14px;
    color: #999;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.reset-password-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #00b4d8;
    background: rgba(0, 180, 216, 0.08);
    padding: 24px 16px;
    border-radius: 12px;
    margin-top: 8px;
    line-height: 1.5;
    text-align: center;
}

.reset-password-success svg {
    flex-shrink: 0;
}

.reset-password-success p {
    font-size: 15px;
    font-weight: 500;
    margin: 0;
}

/* Delete Account Modal */
.delete-account-warning {
    font-size: 14px;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
    padding: 12px;
    border-radius: 8px;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.delete-account-instructions {
    font-size: 14px;
    color: #ccc;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* Mobile adjustments for settings */
@media (max-width: 350px) {
    .settings-drawer {
        width: 100%;
        max-width: 100%;
    }
}

/* =============================================================================
   Policy Pages
   ============================================================================= */

.policy-body {
    overflow-y: auto;
    position: static;
    min-height: 100vh;
}

.policy-page {
    padding-top: 60px;
}

.policy-page .collection-header {
    padding-top: 0;
}

.policy-page .collection-header h1 {
    font-size: 20px;
}

.policy-content {
    text-align: left;
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.policy-content h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 24px 0 12px;
    color: #fff;
}

.policy-content h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0 10px;
    color: #ddd;
}

.policy-content p {
    font-size: 14px;
    line-height: 1.7;
    color: #aaa;
    margin-bottom: 16px;
}

.policy-content ul,
.policy-content ol {
    margin: 12px 0 16px 20px;
    color: #aaa;
}

.policy-content li {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.policy-content a {
    color: #60a5fa;
    text-decoration: none;
}

.policy-content a:hover {
    text-decoration: underline;
}

.policy-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.policy-placeholder p {
    color: #666;
}

/* Policy page language toggle */
.policy-text {
    display: none;
}

.policy-text.lang-en {
    display: block;
}

html[lang="ja"] .policy-text.lang-en {
    display: none;
}

html[lang="ja"] .policy-text.lang-ja {
    display: block;
}

/* Policy content additional styles */
.policy-content h2:first-child {
    margin-top: 0;
}

.policy-content .info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.policy-content .info-table th,
.policy-content .info-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #333;
    font-size: 14px;
    color: #aaa;
}

.policy-content .info-table th {
    color: #ddd;
    font-weight: 500;
    width: 35%;
    white-space: nowrap;
}

.policy-content .article-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 24px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #333;
}

.policy-content .article-intro {
    font-size: 14px;
    line-height: 1.7;
    color: #bbb;
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

/* =============================================================================
   Notification Bell Icon
   ============================================================================= */

.notification-bell-btn {
    position: relative;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.notification-bell-btn:hover {
    color: #fff;
}

.notification-badge {
    position: absolute;
    top: 0;
    right: -2px;
    min-width: 16px;
    height: 16px;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* =============================================================================
   In-App Notification Banner
   ============================================================================= */

.in-app-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8000;
    background: linear-gradient(135deg, #00b4d8, #0096b7);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    animation: bannerSlideDown 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

@keyframes bannerSlideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.in-app-banner-icon {
    flex-shrink: 0;
}

.in-app-banner-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.in-app-banner-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

.in-app-banner-close:hover {
    color: #fff;
}

/* =============================================================================
   Campaign Modal (Spotify-style card)
   ============================================================================= */

.campaign-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9500;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.campaign-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.campaign-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
}

/* Card container */
.campaign-card {
    position: relative;
    z-index: 1;
    width: 88%;
    max-width: 340px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
}

/* Hero image zone */
.campaign-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    background-color: #1a1a2e;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Fallback gradient when image fails */
.campaign-hero.no-image {
    background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
}

/* Gradient scrim over image */
.campaign-hero-scrim {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.5) 40%,
        transparent 100%
    );
    pointer-events: none;
}

/* Text overlay on hero */
.campaign-hero-text {
    position: relative;
    z-index: 1;
    padding: 0 20px 16px;
}

.campaign-slide-venue {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.campaign-deadline-badge {
    display: inline-block;
    font-size: 11px;
    color: #00b4d8;
    margin-bottom: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.campaign-slide-title {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 8px;
}

.campaign-slide-description {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bottom section */
.campaign-bottom {
    background: #111;
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

/* CTA button (pill) */
.campaign-cta-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 999px;
    background: #00b4d8;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.3px;
    transition: background 0.2s ease, transform 0.1s ease;
}

.campaign-cta-btn:active {
    transform: scale(0.98);
    background: #0096b7;
}

/* Progress pills */
.campaign-progress {
    display: flex;
    gap: 6px;
    width: 100%;
}

.campaign-progress-pill {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
    transition: background 0.3s ease;
}

.campaign-progress-pill.visited {
    background: rgba(255, 255, 255, 0.6);
}

.campaign-progress-pill.active {
    background: #00b4d8;
}

/* Swipe hint */
.campaign-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    letter-spacing: 0.5px;
}

.campaign-swipe-hint svg {
    opacity: 0.5;
}

/* Close text button */
.campaign-close-text {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 12px;
    letter-spacing: 0.5px;
}

/* Hero corner close button (✕) — primary dismiss affordance */
.campaign-hero-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    z-index: 3;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
}

.campaign-hero-close:active {
    background: rgba(0, 0, 0, 0.7);
}

/* =============================================================================
   Image Carousel (shared — used by bottom sheet venue campaigns)
   ============================================================================= */

.campaign-img-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campaign-slide-images {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    display: flex;
    scroll-behavior: smooth;
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.campaign-slide-images::-webkit-scrollbar {
    display: none;
}

.campaign-slide-images img {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    scroll-snap-align: start;
    border-radius: 8px;
}

.campaign-image-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.campaign-image-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.campaign-image-dot.active {
    background: #fff;
}

/* =============================================================================
   Notification Drawer
   ============================================================================= */

.notification-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9099;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

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

.notification-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    background: #1a1a1a;
    z-index: 9100;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notification-drawer.active {
    transform: translateX(0);
}

.notification-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.notification-drawer-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.notification-drawer-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 4px;
    display: flex;
}

.notification-drawer-close:hover {
    color: #fff;
}

/* View Campaigns Button (prominent) */
.notification-campaign-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 32px);
    margin: 16px;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #00b4d8, #0077b6);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s ease, opacity 0.2s ease;
}

.notification-campaign-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.notification-campaign-btn svg {
    color: #ffd700;
}

/* UGC Drawer Button */
.ugc-drawer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 32px);
    margin: 8px 16px 0;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,140,50,0.2), rgba(255,80,80,0.1));
    border: 1px solid rgba(255,140,50,0.4);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.ugc-drawer-btn:hover {
    background: linear-gradient(135deg, rgba(255,140,50,0.3), rgba(255,80,80,0.15));
    border-color: rgba(255,140,50,0.6);
}
.ugc-drawer-btn:active { transform: scale(0.98); }
.ugc-drawer-btn svg { color: rgba(255,180,80,0.9); flex-shrink: 0; }
.ugc-drawer-btn-label { flex: 1; text-align: left; }
.ugc-drawer-btn-title { font-size: 13px; font-weight: 700; }
.ugc-drawer-btn-sub { font-size: 9px; color: rgba(255,255,255,0.5); font-weight: 400; margin-top: 1px; }
.ugc-drawer-btn-badge {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 800;
    background: linear-gradient(135deg, #ff8c32, #ff5050);
    color: #fff;
    letter-spacing: 0.5px;
}
.ugc-drawer-btn-shine {
    position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    animation: ugcBtnShine 3s ease infinite;
}
@keyframes ugcBtnShine {
    0% { left: -100%; }
    40%, 100% { left: 150%; }
}

/* Notification List */
.notification-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px 80px;
    -webkit-overflow-scrolling: touch;
}

.notification-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    padding: 40px 0;
}

.notification-item {
    padding: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-left: 3px solid transparent;
}

.notification-item.unread {
    border-left-color: #00b4d8;
    background: rgba(0, 180, 216, 0.08);
}

.notification-item:active {
    background: rgba(255, 255, 255, 0.08);
}

.notification-item-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.notification-campaign-label {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    color: #00b4d8;
    background: rgba(0, 180, 216, 0.15);
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.notification-item-message {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
    margin-bottom: 4px;
}

.notification-item-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}

/* Notification Drawer Tabs */
.notification-tab-bar {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.notification-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.notification-tab.active {
    color: #00b4d8;
    border-bottom-color: #00b4d8;
}

/* Notification Actions Row */
.notification-actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 4px 0 10px;
}

.notification-action-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}

.notification-action-btn:active {
    color: #fff;
}

.notification-action-danger {
    color: rgba(255, 100, 100, 0.6);
}

.notification-action-danger:active {
    color: #ff6464;
}

/* Swipe-to-Delete */
.notification-swipe-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 8px;
    max-height: 200px;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin-bottom 0.3s ease;
}

.notification-delete-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 70px;
    background: #dc3545;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
}

.notification-delete-icon {
    color: #fff;
    display: flex;
    align-items: center;
}

.notification-swipe-content {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    touch-action: pan-y;
    will-change: transform;
}

/* =============================================================================
   Dispatch Hold Cards (in notification drawer reservation tab)
   ============================================================================= */

.dispatch-hold-item {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-left: 3px solid rgba(255, 255, 255, 0.2);
}

.dispatch-hold-item.upcoming {
    border-left-color: #22c55e;
}

.dispatch-hold-item.past {
    border-left-color: rgba(255, 255, 255, 0.15);
    opacity: 0.7;
}

.dispatch-hold-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.dispatch-hold-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.dispatch-hold-item.past .dispatch-hold-badge {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

.dispatch-hold-status {
    font-size: 11px;
    color: #22c55e;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.dispatch-hold-item.past .dispatch-hold-status { color: rgba(255, 255, 255, 0.5); }

.dispatch-hold-venue {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
}

.dispatch-hold-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.dispatch-hold-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}
.dispatch-hold-row svg { color: rgba(255, 255, 255, 0.35); flex-shrink: 0; }

.dispatch-hold-call {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    color: #22c55e;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 8px;
}
.dispatch-hold-call:active { background: rgba(34, 197, 94, 0.2); }

.dispatch-hold-footer {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
}

.dispatch-hold-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
}

/* =============================================================================
   Push Permission Modal
   ============================================================================= */

.push-permission-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.push-permission-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.push-permission-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}

.push-permission-content {
    position: relative;
    background: #1a1a1a;
    border-radius: 16px;
    padding: 32px 24px;
    width: 90%;
    max-width: 340px;
    text-align: center;
    color: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.push-permission-icon {
    color: #00b4d8;
    margin-bottom: 16px;
}

.push-permission-content h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
}

.push-permission-content p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0 0 24px;
}

.push-permission-enable {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: #00b4d8;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 10px;
    transition: background 0.2s ease;
}

.push-permission-enable:active {
    background: #0096b7;
}

.push-permission-later {
    display: block;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.push-permission-later:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* =============================================================================
   Homescreen Guide Modal
   ============================================================================= */
.homescreen-guide-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.homescreen-guide-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}
.homescreen-guide-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
}
.homescreen-guide-content {
    position: relative;
    background: #1a1a1a;
    border-radius: 16px;
    padding: 28px 24px;
    width: 90%;
    max-width: 340px;
    color: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.homescreen-guide-content h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 20px;
    text-align: center;
}
.homescreen-guide-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.homescreen-guide-step:last-child {
    border-bottom: none;
}
.homescreen-guide-step-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #00b4d8;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.homescreen-guide-step-icon {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
}
.homescreen-guide-step-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}
.homescreen-guide-alt {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    margin: 16px 0 18px;
}
.homescreen-guide-close {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: #00b4d8;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}
.homescreen-guide-close:active {
    background: #0096b7;
}

/* =============================================================================
   Venue Bottom Sheet - Campaign Section
   ============================================================================= */

.venue-sheet-campaigns {
    padding: 0 16px;
    margin-bottom: 12px;
}

.venue-sheet-campaigns h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
}

.venue-campaign-card {
    background: rgba(0, 180, 216, 0.08);
    border: 1px solid rgba(0, 180, 216, 0.2);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
}

.venue-campaign-card-deadline {
    display: inline-block;
    background: #1a3a5c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    margin-bottom: 6px;
}

.venue-campaign-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.venue-campaign-card-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 8px;
}

.venue-campaign-cta {
    display: inline-block;
    background: #00b4d8;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.2s ease;
}

.venue-campaign-cta:active {
    background: #0096b7;
}

/* =============================================================================
   Same-Day Reservation Section (Bottom Sheet)
   ============================================================================= */

.venue-sheet-reservation {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
    margin-bottom: 16px;
}

.venue-sheet-reservation > h3 {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 12px 0;
}

/* Section labels (Select a time, Party Size, etc.) */
.reservation-section-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

/* Time slot pills row */
.reservation-slots-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.reservation-slots-row::-webkit-scrollbar {
    display: none;
}

.reservation-slot-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.reservation-slot-pill:hover {
    background: rgba(255, 255, 255, 0.1);
}

.reservation-slot-pill.selected {
    background: rgba(0, 180, 216, 0.15);
    border-color: #00b4d8;
    color: #00b4d8;
}

.reservation-slot-time {
    font-size: 14px;
    font-weight: 600;
}

.reservation-slot-remaining {
    font-size: 10px;
    opacity: 0.6;
}

.reservation-slot-pill.selected .reservation-slot-remaining {
    opacity: 0.8;
}

/* Party size stepper */
.reservation-stepper {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    margin-bottom: 16px;
}

.reservation-stepper-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 18px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.reservation-stepper-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
}

.reservation-stepper-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.reservation-stepper-count {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    min-width: 80px;
    text-align: center;
}

/* Venue questions form */
.reservation-question-field {
    margin-bottom: 12px;
}

.reservation-question-field label {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
}

.reservation-question-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}

.reservation-question-input:focus {
    outline: none;
    border-color: rgba(0, 180, 216, 0.5);
}

/* Cancel policy notice */
.reservation-cancel-policy {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0;
    padding: 10px 12px;
    background: rgba(255, 180, 50, 0.08);
    border: 1px solid rgba(255, 180, 50, 0.15);
    border-radius: 8px;
    font-size: 11px;
    color: rgba(255, 180, 50, 0.75);
    line-height: 1.5;
}

.reservation-cancel-policy svg {
    flex-shrink: 0;
    margin-top: 1px;
}

/* Confirm button */
.reservation-confirm-btn {
    width: 100%;
    padding: 14px;
    background: #00b4d8;
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    margin-top: 8px;
}

.reservation-confirm-btn:hover:not(:disabled) {
    background: #0096b7;
}

.reservation-confirm-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.reservation-confirm-btn.loading {
    position: relative;
    color: transparent;
}

.reservation-confirm-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Reservation loading indicator */
.reservation-loading-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.reservation-loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(20, 184, 166, 0.3);
    border-top-color: #14b8a6;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    flex-shrink: 0;
}

/* No slots available message */
.reservation-no-slots {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.6);
}

.reservation-no-slots p {
    margin: 0 0 8px 0;
}

.reservation-no-slots-hint {
    font-size: 12px;
    opacity: 0.6;
}

/* Error message */
.reservation-error {
    color: #ff6b6b;
    font-size: 13px;
    text-align: center;
    padding: 8px;
    margin-bottom: 8px;
}

/* Success confirmation */
.reservation-success {
    text-align: center;
    padding: 20px 0;
}

.reservation-success-icon {
    margin-bottom: 12px;
}

.reservation-success-title {
    font-size: 18px;
    font-weight: 600;
    color: #00b4d8;
    margin-bottom: 16px;
}

.reservation-code-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}

.reservation-code-value {
    font-size: 32px;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: #fff;
    letter-spacing: 4px;
    margin-bottom: 12px;
}

.reservation-success-detail {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.reservation-success-status {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
}

.reservation-done-btn {
    padding: 10px 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

.reservation-done-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* =============================================================================
   Reservation Status Badges + Status Card
   ============================================================================= */


/* Ready banner emphasis (overrides in-app banner) */
.in-app-banner.reservation-ready-banner {
    background: linear-gradient(135deg, #1b5e20, #2e7d32);
    border-left: 4px solid #4caf50;
}

/* Status card in bottom sheet */
.reservation-status-card {
    background: rgba(0, 180, 216, 0.08);
    border: 1px solid rgba(0, 180, 216, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin: 8px 0;
    text-align: center;
}
.reservation-status-card .status-icon {
    margin-bottom: 8px;
}
.reservation-status-card .status-label {
    font-size: 15px;
    font-weight: 600;
    color: #e0e0e0;
}
.reservation-status-card .status-detail {
    font-size: 12px;
    color: #aaa;
    margin-top: 4px;
}
.reservation-status-card .status-code {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #00b4d8;
    margin: 8px 0;
}

/* =============================================================================
   #173 — Venue Bottom Sheet Redesign (Variant C — Tabbed Detail)
   Layered on top of existing .venue-sheet-* rules. Additive only.
   Sheet structure:
     .venue-sheet (existing, max-height bumped to 85vh)
       .venue-sheet-body
         .venue-sheet-fixed-top   (hero + folder + actions + tab bar — does not scroll)
         .venue-sheet-tab-content (3 tab panels — scrolls)
   ============================================================================= */

/* Fixed-top region groups hero + folder + actions + tabs so they stay anchored */
.venue-sheet-fixed-top {
    flex-shrink: 0;
    background: #1a1a2e;
}

/* Hero photo with bottom-left overlay (replaces old .venue-sheet-header + sticky-header) */
.venue-sheet-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    background: #2a2a3e;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}
.venue-sheet-hero-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.venue-sheet-hero-fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #2a2a3e 0%, #1f1f33 100%);
    display: block;
}
.venue-sheet-hero-img:not([style*="display:none"]) ~ .venue-sheet-hero-fallback {
    display: none;
}
.venue-sheet-hero-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
}
.venue-sheet-hero-handle {
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    background: rgba(255,255,255,0.5);
    border-radius: 2px;
    z-index: 3;
}
.venue-sheet-hero-close {
    position: absolute;
    top: 8px; right: 12px;
    width: 30px; height: 30px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    z-index: 3;
}
.venue-sheet-hero-text {
    position: absolute;
    bottom: 12px; left: 16px; right: 16px;
    z-index: 2;
    pointer-events: none;
    margin: 0; /* override .venue-sheet-header { margin-bottom: 20px } */
}
.venue-sheet-hero-text .venue-sheet-name {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 3px 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.venue-sheet-hero-text .venue-sheet-meta {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    display: inline; /* keep meta + price chips on one line */
}

/* Sun/Moon price chips beside genre·area in the hero meta line */
.hero-price {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: rgba(255,255,255,0.75);
    font-weight: 500;
    margin-left: 6px;
    vertical-align: middle;
}
.hero-price svg { flex-shrink: 0; }
.hero-price-text { font-size: 12px; }

/* Folder row sits between hero and action bar (always-visible above tabs) */
.venue-sheet-fixed-top .venue-sheet-folder-row {
    /* Existing folder-row rules apply — this just confirms it's in the fixed-top now */
    padding: 8px 20px 4px;
}

/* Action bar — preserve all existing .venue-action-* styling; just tighten container spacing */
/* Action bar container — tighter than the legacy 20px bottom margin so the tab bar sits closer */
.venue-sheet-fixed-top .venue-sheet-actions {
    margin: 6px 16px 8px;
    padding: 0;
    gap: 8px;
}

/* #173 — Shrink action buttons to mockup size (~56px tall) while keeping the production card style
   (colored borders per button + rounded corners). The legacy .venue-action-btn uses 12px 8px padding
   + column flex with 4px gap + 11px font, which renders ~80px tall. We tighten to match the mockup. */
.venue-sheet-fixed-top .venue-action-btn {
    padding: 8px 6px;
    gap: 3px;
    font-size: 10px;
}
.venue-sheet-fixed-top .venue-action-btn .venue-action-icon svg {
    width: 18px;
    height: 18px;
}
/* Sub-label (e.g. "ネット予約不可") under reserve button stays compact */
.venue-sheet-fixed-top .venue-action-sub {
    font-size: 9px;
    line-height: 1.2;
    margin-top: 1px;
    opacity: 0.7;
}

/* NOTE: We do NOT add a new glow animation — production already has @keyframes omakaseGlow
   on .venue-action-sameday (line 4179). The .venue-action-primary class is just a no-op
   marker for now in case we want a future modifier without disrupting the existing glow. */
.venue-action-btn.venue-action-primary {
    /* intentionally empty — existing .venue-action-sameday glow already applies */
}

/* Tab bar — 2 or 3 tabs depending on whether メディア is hidden */
.venue-sheet-tabs {
    display: flex;
    height: 44px;
    margin-top: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.venue-sheet-tab {
    flex: 1;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    position: relative;
    padding: 0;
}
.venue-sheet-tab.active { color: #fff; }
.venue-sheet-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    height: 2px;
    background: #00b4d8;
    border-radius: 2px;
    /* Underline % set by data-tab-count below */
}
.venue-sheet-tabs[data-tab-count="3"] .venue-sheet-tab.active::after { left: 30%; right: 30%; }
.venue-sheet-tabs[data-tab-count="2"] .venue-sheet-tab.active::after { left: 35%; right: 35%; }
.venue-sheet-tab[data-tab="media"][hidden],
.venue-sheet-tab[data-tab="media"][style*="display:none"] { display: none; }

/* Tab content area — scrollable */
.venue-sheet-tab-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 40px;
}
.venue-sheet-tab-panel { display: none; padding: 0 20px; }
.venue-sheet-tab-panel.active { display: block; }

/* When the new fixed-top structure is present, force the sheet to a fixed 85vh height.
   The legacy .venue-sheet uses max-height (a ceiling), which lets the sheet shrink to content
   and collapses the new flex layout because the tab-content has nothing to fill.
   By forcing .venue-sheet to height:85vh and making the body fill it via flex, we get:
     - .venue-sheet-fixed-top  → natural height (hero + folder + actions + tabs)
     - .venue-sheet-tab-content → fills remaining vertical space, scrolls
   Trade-off: sheet is always 85vh regardless of content. Matches mockup. */
.venue-sheet:has(.venue-sheet-fixed-top) {
    height: 85vh;
}
.venue-sheet-body:has(.venue-sheet-fixed-top) {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* flex: 1 from the existing rule makes the body fill .venue-sheet, which is now 85vh */
    min-height: 0;
}
.venue-sheet-body:has(.venue-sheet-fixed-top) .venue-sheet-tab-content {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Section title inside tab panels (new — replaces the existing .venue-sheet-section h3 in most cases) */
.venue-sheet-section-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.venue-sheet-section-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 8px;
}
.venue-sheet-section-title-row .venue-sheet-section-title { margin-bottom: 0; }

/* Detail-list rows in 店舗情報 (住所 / 営業時間 / 定休日 / お知らせ) */
.venue-sheet-details .detail-list { display: flex; flex-direction: column; gap: 10px; }
.venue-sheet-details .detail-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 13px;
}
.venue-sheet-details .detail-item svg {
    flex-shrink: 0;
    color: rgba(255,255,255,0.4);
    margin-top: 1px;
}
.venue-sheet-details .detail-label {
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    display: block;
    margin-bottom: 2px;
}
.venue-sheet-details .detail-value {
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
}

/* Legacy services row — kept in DOM so the existing renderer can write to it harmlessly,
   but visually hidden per Round 7 design decision. Element preserved for behavior preservation. */
.venue-sheet-services-legacy { display: none !important; }

/* #173 — Hide the legacy "▷ 動画を見る ▾" expand-trigger button when inside the new tab structure.
   The メディア tab itself is now the gating affordance — tapping it auto-loads the thumbnails via
   the tab-switch handler in _wireSheetTabHandlers(). The trigger element stays in the DOM (the
   renderer writes to its dataset/classes), it just isn't visible. */
.venue-sheet-fixed-top ~ .venue-sheet-tab-content .venue-videos-trigger,
.venue-sheet-body:has(.venue-sheet-fixed-top) .venue-videos-trigger {
    display: none !important;
}

/* When inside the new tab structure, the .venue-videos-content (which is the thumbnail grid
   container) should always be visible inside the メディア tab — no longer hidden until "expand". */
.venue-sheet-body:has(.venue-sheet-fixed-top) #panel-media .venue-videos-content {
    display: block !important;
}

/* 店舗紹介 description: 4-line clamp + もっと見る ▾ toggle */
.venue-description-wrap { position: relative; }
.venue-description {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
.venue-description-wrap:not(.expanded) .venue-description::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 30px;
    background: linear-gradient(180deg, rgba(26,26,46,0) 0%, #1a1a2e 100%);
    pointer-events: none;
}
.venue-description-wrap.expanded .venue-description {
    -webkit-line-clamp: unset;
    display: block;
}
.venue-description-toggle {
    margin-top: 6px;
    background: none;
    border: none;
    color: #00b4d8;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    padding: 4px 0;
}

/* Tag-count nudge badge in みんなの評価 section header */
.venue-tag-count-badge {
    font-size: 10px;
    font-weight: 600;
    color: #fcd34d;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.25);
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0.02em;
    text-transform: none;
}
.venue-tag-count-badge.nudge {
    color: #67e8f9;
    background: rgba(0,180,216,0.1);
    border-color: rgba(0,180,216,0.3);
    animation: nudgePulse173 2.4s ease-in-out infinite;
}
@keyframes nudgePulse173 {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

/* Tag pill overlap (popular AND mine) — cyan fill (community) + amber border + amber dot top-right.
   Declared LAST so it wins specificity over the existing .venue-tag-pill.active.popular rule. */
.venue-tag-pill.popular.active,
.venue-tag-pill.active.popular {
    background: rgba(0,180,216,0.12);
    color: #67e8f9;
    border: 1px solid rgba(245,158,11,0.55);
    position: relative;
}
.venue-tag-pill.popular.active::before,
.venue-tag-pill.active.popular::before {
    content: '';
    position: absolute;
    top: 4px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 4px rgba(245,158,11,0.5);
}

/* Tour-mode glow on hero / venue-sheet — preserve existing tour overrides for the new hero element */
.tour-sheet-open .venue-sheet-hero {
    box-shadow: 0 0 0 2px rgba(0,180,216,0.4), 0 0 24px rgba(0,180,216,0.3);
}