:root {
    --bg-main: #f5f7f5;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --border-color: #e2ebe3;
    --border-hover: #c3d6c6;
    --text-primary: #122218;
    --text-secondary: #526859;
    --text-muted: #8a9e90;
    
    /* Message Bubble Colors (Market Mama Green) */
    --user-bubble-bg: #eaf4ee;
    --user-bubble-text: #0b5032;
    --agent-bubble-bg: #ffffff;
    --agent-bubble-text: #122218;

    --accent-green: #0d5c3a;
    --accent-green-hover: #08432a;
    --accent-light-green: #eaf4ee;
    --accent-green-border: #c4e0ce;
    --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Hide Live Map from desktop and mobile navigation menus for now */
#nav-map, #m-nav-map {
    display: none !important;
}

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

body {
    font-family: var(--font-family);
    background-color: var(--bg-main);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.app-layout {
    display: flex;
    width: 100vw;
    height: 100vh;
    position: relative;
}

/* Sidebar */
.sidebar {
    width: 220px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 14px 10px;
    z-index: 100;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.docked {
    margin-left: -220px;
}

.dock-toggle-btn {
    background: transparent;
    border: none;
    font-size: 1rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.top-dock-btn {
    display: none;
    background: transparent;
    border: none;
    font-size: 1rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    transition: background 0.15s, color 0.15s;
}

.dock-toggle-btn:hover, .top-dock-btn:hover {
    background: #f2f4f7;
    color: var(--text-primary);
}

.sidebar.docked ~ .chat-main .top-dock-btn,
body.sidebar-docked .top-dock-btn {
    display: flex;
}

.brand-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 16px 6px;
    width: 100%;
}

.dock-toggle-btn {
    margin-left: auto;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.brand-logo i {
    color: var(--accent-green);
    font-size: 1.2rem;
}

.mobile-close-btn {
    display: none;
    background: transparent;
    border: none;
    font-size: 1.2rem;
    color: var(--text-secondary);
    cursor: pointer;
}

/* Sidebar OjaLM Model Pill (Clean & Borderless) */
.sidebar-model-card {
    padding: 0 !important;
    margin: 2px 8px 6px !important;
    width: auto !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.model-picker-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 2px 6px !important;
    background: #f0fdf4 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: #166534 !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

.model-picker-dot {
    width: 5px !important;
    height: 5px !important;
    background: #16a34a !important;
    border-radius: 50% !important;
}

#selected-model-text {
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    color: #166534 !important;
    line-height: 1 !important;
}

.sidebar-search {
    background: #f2f4f7;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.sidebar-search i {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.sidebar-search input {
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-primary);
    width: 100%;
}

.shortcut-key {
    font-size: 0.7rem;
    color: var(--text-muted);
    background: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.nav-item i {
    font-size: 0.95rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.nav-earned-badge {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #9333ea, #6b21a8);
    padding: 3px 9px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.35);
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.nav-item:hover .nav-earned-badge {
    background: linear-gradient(135deg, #16a34a, #15803d);
    transform: scale(1.06);
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.4);
}

@keyframes badgeIncrementFlash {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(147, 51, 234, 0.35);
    }
    50% {
        transform: scale(1.15);
        background: linear-gradient(135deg, #16a34a, #15803d);
        box-shadow: 0 0 16px 4px rgba(34, 197, 94, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(147, 51, 234, 0.35);
    }
}

.badge-pulse-glow {
    animation: badgeIncrementFlash 0.8s ease-out;
}

.nav-item:hover, .nav-item.active {
    background: var(--accent-light-green);
    color: var(--accent-green);
}

.nav-item i {
    font-size: 0.95rem;
    width: 18px;
}

/* Sidebar Model Intelligence Card */
.sidebar-model-card {
    padding: 8px 12px;
    margin: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.sidebar-model-card .model-picker-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #15803d;
    cursor: default;
}

.sidebar-model-card .model-picker-dot {
    width: 7px;
    height: 7px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

.history-section {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.section-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 12px 12px 6px 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.history-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s, color 0.15s;
}

.history-link:hover, .history-link.active {
    background: var(--accent-light-green);
    color: var(--accent-green);
}

.history-link i {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.sidebar-user {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.sidebar-user:hover {
    background: #f8f9fa;
    border-radius: 8px;
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eaecf0;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-icon {
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
}

/* Main Chat Container */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-main);
    position: relative;
    overflow: hidden;
}

.top-header {
    height: 60px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    z-index: 10;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.menu-toggle-btn {
    display: none;
    background: transparent;
    border: none;
    font-size: 1.1rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.model-picker-btn {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.model-picker-dot {
    width: 6px;
    height: 6px;
    background-color: var(--accent-green);
    border-radius: 50%;
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 110%;
    left: 0;
    width: 280px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    display: none;
    flex-direction: column;
    gap: 4px;
    z-index: 200;
}

.dropdown-menu.open {
    display: flex;
}

.dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.dropdown-item:hover, .dropdown-item.active {
    background: var(--accent-light-green);
}

.dropdown-item i {
    margin-top: 3px;
    color: var(--accent-green);
}

.dropdown-item .item-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.dropdown-item .item-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.plan-badge {
    background: #f2f4f7;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.plan-badge a {
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
}

.new-chat-action-btn {
    background: var(--accent-green);
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.new-chat-action-btn:hover {
    background: var(--accent-green-hover);
}

/* Page Views */
.page-view {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}

.page-view.active {
    display: flex;
}

.view-container {
    padding: 24px 32px;
    overflow-y: auto;
    flex: 1;
}

.view-header {
    margin-bottom: 24px;
}

.view-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.view-header p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Explore Grid */
.explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.explore-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.explore-card .card-badge {
    display: inline-block;
    background: #edf6ff;
    color: #0256b3;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.explore-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.explore-card .price-highlight {
    font-size: 0.92rem;
    font-weight: 600;
    color: #16a34a;
    margin-bottom: 8px;
}

.explore-card .card-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Library List */
.library-list, .history-full-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.library-item {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.library-item i {
    font-size: 1.2rem;
    color: var(--accent-blue);
}

.library-item .item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.library-item .item-info strong {
    font-size: 0.9rem;
}

.library-item .item-info span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.status-tag {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
}

/* Chat Stream & Hero Welcome */
.chat-stream {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

.hero-welcome {
    max-width: 640px;
    width: 100%;
    margin: auto;
    text-align: center;
    padding: 0 20px;
}

.hero-logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.hero-logo-img {
    height: 54px;
    width: auto;
    object-fit: contain;
    border-radius: 12px;
    filter: drop-shadow(0 4px 14px rgba(21, 128, 61, 0.18));
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-logo-img:hover {
    transform: scale(1.06);
}

.hero-orb-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.orb-canvas-container {
    width: 72px;
    height: 72px;
    position: relative;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.orb-canvas-container:hover {
    transform: scale(1.1);
}

.orb-canvas-container:active {
    transform: scale(0.95);
}

#orb-canvas {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    filter: drop-shadow(0 6px 16px rgba(99, 102, 241, 0.25));
}

.hero-orb:active {
    transform: scale(0.95);
}

@keyframes pulseOrb {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.orb-state-tag {
    font-size: 0.72rem;
    font-weight: 600;
    color: #4338ca;
    background: #e0e7ff;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid #c7d2fe;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.hero-greeting-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.hero-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin: 0;
}

.hero-title-divider {
    color: var(--border-hover);
    font-size: 0.85rem;
    font-weight: 300;
}

.hero-subtitle {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-green);
    margin: 0;
}

.trending-queries {
    margin-top: 24px;
    text-align: center;
}

.trending-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.query-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.query-pill {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.query-pill i {
    font-size: 0.75rem;
    color: var(--accent-blue);
}

.query-pill:hover {
    background: #ebf5ff;
    border-color: #b9ddff;
    color: var(--accent-blue);
}

/* Message Stream Wrappers */
.message-row {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 14px 20px;
}

.message-container {
    max-width: 720px;
    width: 100%;
    display: flex;
    gap: 14px;
}

.user-row {
    justify-content: flex-end;
}

.user-row .message-container {
    justify-content: flex-end;
}

.message-avatar-orb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a5b4fc, #818cf8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: white;
    flex-shrink: 0;
}

.bubble-user {
    background: var(--user-bubble-bg);
    color: var(--user-bubble-text);
    padding: 12px 18px;
    border-radius: 18px;
    border-top-right-radius: 4px;
    max-width: 82%;
    font-size: 0.95rem;
    line-height: 1.55;
    font-weight: 500;
}

.bubble-agent {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--agent-bubble-text);
    padding: 14px 18px;
    border-radius: 18px;
    border-top-left-radius: 4px;
    max-width: 88%;
    font-size: 0.95rem;
    line-height: 1.6;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

/* Prompt Bar */
.prompt-bar-container {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 20px 20px 20px;
}

.prompt-box {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.15s;
}

.prompt-box:focus-within {
    border-color: #a5b4fc;
}

.prompt-input-row textarea {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-primary);
    resize: none;
    max-height: 120px;
}

.prompt-input-row textarea::placeholder {
    color: var(--text-muted);
}

.prompt-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.action-tags {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tag-btn {
    background: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, color 0.15s;
}

.tag-btn.active, .tag-btn:hover {
    background: #ffffff;
    color: var(--text-primary);
    border-color: #d0d5dd;
}

.send-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mic-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    padding: 6px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.mic-btn.recording {
    background: #ef4444 !important;
    color: #ffffff !important;
    animation: micPulse 1.2s infinite alternate;
}

@keyframes micPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    100% { transform: scale(1.15); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

/* ── Chat Image Attachment Preview ── */
.chat-img-preview-container {
    padding: 8px 12px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.img-preview-card {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 4px 28px 4px 6px;
}

.img-preview-card img {
    height: 48px;
    width: 48px;
    object-fit: cover;
    border-radius: 6px;
}

.img-preview-card button {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #ef4444;
    color: #ffffff;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    cursor: pointer;
}

.chat-attached-img {
    max-width: 220px;
    max-height: 180px;
    border-radius: 10px;
    margin-bottom: 8px;
    display: block;
    border: 1px solid rgba(0,0,0,0.1);
}

.send-submit-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-green);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s;
}

.send-submit-btn:hover {
    background: var(--accent-green-hover);
}

.footer-note {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 8px;
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(16, 24, 40, 0.4);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 300;
}

.modal-overlay.open {
    display: flex;
}

.modal-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    padding: 20px 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.modal-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 1.1rem;
    color: var(--text-muted);
    cursor: pointer;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    text-align: center;
}

.stat-box {
    background: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
}

.stat-box .num {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-blue);
}

.stat-box .lbl {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.tier-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.tier-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
}

.tier-card.active {
    border-color: var(--accent-blue);
    background: #edf6ff;
}

.tier-card h4 {
    font-size: 0.95rem;
    font-weight: 700;
}

.tier-card .price {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent-blue);
    margin: 4px 0 10px 0;
}

.tier-card ul {
    list-style: none;
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Typing Indicator */
.typing-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.dot {
    width: 5px;
    height: 5px;
    background: var(--text-secondary);
    border-radius: 50%;
    animation: blink 1.2s infinite ease-in-out;
}

.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.1); }
}

@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 999;
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        pointer-events: none !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.28s;
    }

    .sidebar.open, .sidebar.mobile-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .mobile-close-btn {
        display: block !important;
    }

    .dock-toggle-btn {
        display: none !important;
    }

    .menu-toggle-btn {
        display: block !important;
    }

    .top-dock-btn {
        display: none !important;
    }

    .plan-badge {
        display: none;
    }

    /* Mobile Header Simplification */
    .top-header {
        height: 50px;
        padding: 0 14px;
    }

    .model-picker-btn {
        font-size: 0.78rem;
        padding: 4px 10px;
    }

    .new-chat-action-btn {
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
        font-size: 0.9rem;
    }

    .new-chat-action-btn span {
        display: none;
    }

    /* Mobile Hero Screen Scale */
    .hero-orb {
        width: 34px;
        height: 34px;
    }

    .hero-greeting-row {
        gap: 4px;
        margin-bottom: 10px;
    }

    .hero-title {
        font-size: 1.05rem;
    }

    .hero-title-divider {
        font-size: 0.75rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }

    .query-pills {
        gap: 6px;
    }

    .query-pill {
        font-size: 0.78rem;
        padding: 6px 12px;
    }

    /* Mobile Input Box Polish (Clean Reference 3 Style) */
    .prompt-bar-container {
        padding: 0 10px 10px 10px;
    }

    .prompt-box {
        padding: 8px 12px;
        border-radius: 20px;
        gap: 6px;
    }

    .prompt-input-row textarea {
        font-size: 0.9rem;
    }

    .action-tags {
        gap: 4px;
        overflow-x: auto;
    }

    .tag-btn {
        padding: 4px 8px;
        font-size: 0.72rem;
    }

    /* Message Bubbles Mobile Scale */
    .message-row {
        padding: 10px 12px;
    }

    .bubble-user, .bubble-agent {
        max-width: 90%;
        font-size: 0.88rem;
        padding: 10px 14px;
    }

    .view-container {
        padding: 16px;
    }
}

/* Market Pulse & New Page Layouts */
.section-block {
    margin-bottom: 24px;
}

.block-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pulse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.pulse-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-icon {
    font-size: 1.6rem;
}

.card-info {
    display: flex;
    flex-direction: column;
}

.card-info .label {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.card-info .val {
    font-size: 1rem;
    font-weight: 700;
}

.card-info .trend.up {
    color: #16a34a;
    font-size: 0.75rem;
    font-weight: 600;
}

.card-info .trend.down {
    color: #dc2626;
    font-size: 0.75rem;
    font-weight: 600;
}

.two-col-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.feed-box, .ai-rec-box, .report-form-box, .leaderboard-box {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px;
}

.feed-box h3, .ai-rec-box h3, .report-form-box h3, .leaderboard-box h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.feed-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border-color);
}

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

.dot.green {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    margin-top: 6px;
}

.dot.orange {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f97316;
    margin-top: 6px;
}

.feed-item strong {
    display: block;
    font-size: 0.85rem;
}

.feed-item span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.ai-rec-box {
    background: #eaf4ee;
    border-color: #c4e0ce;
}

.ai-rec-box .badge {
    background: #0d5c3a;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 8px;
}

.ai-rec-box p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 8px 0 16px 0;
}

.green-btn {
    background: var(--accent-green);
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.green-btn:hover {
    background: var(--accent-green-hover);
}

/* Map View */
.map-interactive-container {
    width: 100%;
    height: 480px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    position: relative;
    background: #edf4ef;
}

.map-canvas-mock {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 20px 20px;
}

.map-pin {
    position: absolute;
    cursor: pointer;
    transition: transform 0.2s;
}

.map-pin:hover {
    transform: scale(1.08);
    z-index: 50;
}

.pin-card {
    background: #ffffff;
    border: 1px solid var(--accent-green-border);
    border-radius: 10px;
    padding: 8px 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}

.pin-card strong {
    font-size: 0.85rem;
    color: var(--accent-green);
}

.pin-card span {
    font-size: 0.78rem;
    font-weight: 600;
}

.pin-card small {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.pin-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-green);
    border: 2px solid #ffffff;
    margin: 4px auto 0 auto;
    box-shadow: 0 0 8px rgba(13, 92, 58, 0.4);
}

.pin-kano { top: 20%; left: 55%; }
.pin-lagos { top: 65%; left: 25%; }
.pin-ibadan { top: 58%; left: 30%; }
.pin-enugu { top: 68%; left: 60%; }

/* Agent Reporter Hub */
#page-agent {
    padding: 0;
}

.agent-banner {
    background: linear-gradient(135deg, #0d5c3a, #15803d);
    color: #ffffff;
    padding: 24px;
    border-radius: 16px;
}

.reporter-banner h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.form-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-group select, .form-group input {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-family: inherit;
    font-size: 0.88rem;
}

.leader-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.leader-item .rank {
    font-weight: 700;
    color: var(--accent-green);
}

/* Market Mama Hero Banner Card (Ref Image 2) */
.hero-banner-card {
    background: linear-gradient(135deg, #0d5c3a, #15803d);
    color: #ffffff;
    border-radius: 20px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(13, 92, 58, 0.15);
}

.banner-content h1 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.banner-content p {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 6px 0 16px 0;
}

.quick-action-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.q-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.15s;
}

.q-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Chips Row */
.search-chips-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.chips-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.chips-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chip-btn {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.chip-btn:hover {
    background: var(--accent-light-green);
    border-color: var(--accent-green-border);
    color: var(--accent-green);
}

/* Market Snapshot Section */
.snapshot-section {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 12px;
}

.snapshot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.snapshot-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.04em;
    white-space: nowrap;
    margin: 0;
}

.snapshot-header span {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

#snap-location {
    transition: opacity 0.16s ease;
}

#snap-location.fade-out {
    opacity: 0.2;
}

.snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.snap-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.snap-card:hover {
    border-color: var(--accent-green-border);
    background: #fcfdfe;
    transform: translateY(-1px);
}

.snap-icon { font-size: 1.15rem; }

.snap-info strong {
    font-size: 0.74rem;
    display: block;
    color: var(--text-secondary);
}

.snap-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    transition: color 0.4s;
}

.snap-trend.up  { color: #16a34a; font-size: 0.7rem; font-weight: 600; }
.snap-trend.down { color: #dc2626; font-size: 0.7rem; font-weight: 600; }
.snap-trend.flat { color: var(--text-muted); font-size: 0.7rem; }

/* Live badge */
.snap-location {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.snap-live-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    color: #16a34a;
    font-weight: 600;
}

.snap-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    animation: livePulse 1.6s ease-in-out infinite;
}

/* Price flash on update */
@keyframes flashGreen {
    0%   { color: #16a34a; font-weight: 800; }
    50%  { color: #15803d; }
    100% { color: var(--text-primary); font-weight: 700; }
}

@keyframes flashRed {
    0%   { color: #dc2626; font-weight: 800; }
    50%  { color: #b91c1c; }
    100% { color: var(--text-primary); font-weight: 700; }
}

@keyframes cardPulseUp {
    0% {
        transform: scale(1);
        border-color: #16a34a;
        box-shadow: 0 0 10px rgba(22, 163, 74, 0.35);
        background: #f0fdf4;
    }
    50% {
        transform: scale(1.03);
        border-color: #16a34a;
        box-shadow: 0 0 14px rgba(22, 163, 74, 0.45);
        background: #dcfce7;
    }
    100% {
        transform: scale(1);
        border-color: var(--border-color);
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);
        background: #ffffff;
    }
}

@keyframes cardPulseDown {
    0% {
        transform: scale(1);
        border-color: #dc2626;
        box-shadow: 0 0 10px rgba(220, 38, 38, 0.35);
        background: #fef2f2;
    }
    50% {
        transform: scale(1.03);
        border-color: #dc2626;
        box-shadow: 0 0 14px rgba(220, 38, 38, 0.45);
        background: #fee2e2;
    }
    100% {
        transform: scale(1);
        border-color: var(--border-color);
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);
        background: #ffffff;
    }
}

.snap-card.pulse-up {
    animation: cardPulseUp 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.snap-card.pulse-down {
    animation: cardPulseDown 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.snap-price.flash-up   { animation: flashGreen 0.85s ease; }
.snap-price.flash-down { animation: flashRed 0.85s ease; }

@media (max-width: 768px) {
    .snapshot-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Feature Cards Grid (Ref Image 2) */
.feature-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.f-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}

.f-card:hover {
    border-color: var(--accent-green);
    transform: translateY(-2px);
}

.f-icon {
    font-size: 1.6rem;
    margin-bottom: 4px;
}

.f-card h4 {
    font-size: 0.9rem;
    font-weight: 700;
}

.f-card p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    flex: 1;
}

.f-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-green);
    margin-top: 8px;
}

/* Prices & Commodity Detail Page */
.commodity-detail-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.commodity-header-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
}

.c-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.c-icon { font-size: 2.2rem; }

.c-title-row h2 { font-size: 1.3rem; font-weight: 700; }
.c-sub { font-size: 0.8rem; color: var(--text-secondary); }

.watchlist-btn {
    margin-left: auto;
    background: #ffffff;
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
}

.c-price-box {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.price-range {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-green);
}

.price-badge.green {
    background: #d1fae5;
    color: #065f46;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}

.chart-mock-svg {
    background: #f8fcf9;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-top: 10px;
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 8px;
}

.insights-card, .reports-box {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
}

.insight-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

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

.report-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.report-item strong { font-size: 0.85rem; display: block; }
.report-item small { font-size: 0.75rem; color: var(--text-muted); }
.report-val { font-weight: 700; font-size: 0.9rem; }

/* Full Live Map View Layout (Ref Image 1 & 3) */
.map-view-layout {
    display: flex;
    width: 100%;
    height: calc(100vh - 60px);
    overflow: hidden;
}

.map-sidebar-panel {
    width: 320px;
    background: #ffffff;
    border-right: 1px solid var(--border-color);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}

.m-panel-header h3 { font-size: 1.1rem; font-weight: 700; }
.live-pill { font-size: 0.75rem; color: #16a34a; font-weight: 600; }
.m-panel-header p { font-size: 0.8rem; color: var(--text-secondary); margin: 6px 0 14px 0; }

.share-price-btn {
    width: 100%;
    background: var(--accent-green);
    color: #ffffff;
    border: none;
    padding: 10px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.product-select-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.p-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 0.85rem;
    cursor: pointer;
}

.p-item.active, .p-item:hover {
    background: var(--accent-light-green);
    border-color: var(--accent-green-border);
    color: var(--accent-green);
    font-weight: 600;
}

.m-filter-group select {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 8px;
    font-size: 0.82rem;
}

.map-main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #e5efe7;
}

.map-top-bar {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    z-index: 20;
}

.map-toggle-group {
    background: #ffffff;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.m-btn {
    background: transparent;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.m-btn.active {
    background: var(--accent-green);
    color: #ffffff;
}

.supply-legend {
    background: #ffffff;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 0.78rem;
    display: flex;
    gap: 10px;
    align-items: center;
}

.nigeria-map-graphic {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: radial-gradient(#a3c2ac 1.5px, transparent 1.5px);
    background-size: 24px 24px;
}

.map-city-pin {
    position: absolute;
    background: #ffffff;
    border: 1px solid var(--accent-green-border);
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.15s;
}

.map-city-pin:hover { transform: scale(1.1); z-index: 100; }
.pin-title { font-size: 0.72rem; color: var(--text-secondary); }
.pin-price { font-size: 0.85rem; color: var(--accent-green); }
.pin-trend { font-size: 0.68rem; font-weight: 600; }

.pin-sokoto { top: 15%; left: 30%; }
.pin-katsina { top: 22%; left: 42%; }
.pin-kano { top: 24%; left: 52%; }
.pin-maiduguri { top: 26%; left: 65%; }
.pin-zaria { top: 32%; left: 32%; }
.pin-kaduna { top: 36%; left: 44%; }
.pin-minna { top: 42%; left: 36%; }
.pin-jos { top: 44%; left: 50%; }
.pin-yola { top: 44%; left: 66%; }
.pin-lagos { top: 70%; left: 24%; }
.pin-enugu { top: 66%; left: 40%; }
.pin-ph { top: 78%; left: 37%; }

/* Verified Vendors Cards Grid */
.vendors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.vendor-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    gap: 14px;
    align-items: center;
}

.v-img-box {
    width: 64px;
    min-width: 64px;
    height: 64px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.v-img-box img {
    display: none;
}

.v-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.v-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ecfdf5;
    color: #166534;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 8px;
    border-radius: 999px;
    width: fit-content;
}

.v-details h3 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
    color: #0f172a;
}

.v-location {
    font-size: 0.78rem;
    color: #4b5563;
    margin: 0;
    line-height: 1.4;
}

.v-rating {
    font-size: 0.8rem;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
}

.v-rating i {
    color: #f59e0b;
    font-size: 0.85rem;
}

.v-meta {
    font-size: 0.8rem;
    color: #6b7280;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.v-review,
.v-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.v-review {
    color: #111827;
    font-weight: 700;
}

.v-category {
    color: #4b5563;
    font-weight: 600;
}

.v-category::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #d1d5db;
    display: inline-block;
}

/* Reporter Gold Banner (Ref Image 3 Screen 8) */
.reporter-gold-banner {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #ffffff;
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.r-badge-icon { font-size: 2.4rem; }

.submit-report-btn {
    margin-left: auto;
    background: #ffffff;
    color: #d97706;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    cursor: pointer;
}

.agent-stat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.s-card {
    background: #f8fcf9;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.s-card .lbl { font-size: 0.72rem; color: var(--text-secondary); }
.s-card .val { font-size: 1.1rem; font-weight: 700; margin-top: 4px; }
.s-card .val.green { color: var(--accent-green); }

/* Mobile Bottom Navigation Bar (Ref Image 1 & 3 Bottom Nav) */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #ffffff;
    border-top: 1px solid var(--border-color);
    z-index: 300;
    justify-content: space-around;
    align-items: center;
}

.m-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
}

.m-nav-item i { font-size: 1.1rem; }

.m-nav-item.active {
    color: var(--accent-green);
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }

    body:not(.not-home-page) .mobile-bottom-nav {
        display: none;
    }

    .chat-main {
        padding-bottom: 60px;
    }

    body:not(.not-home-page) .chat-main {
        padding-bottom: 0;
    }

    .commodity-detail-layout, .two-col-grid {
        grid-template-columns: 1fr;
    }

    .map-view-layout {
        flex-direction: column;
        height: auto;
    }

    .map-sidebar-panel {
        width: 100%;
    }

    .map-interactive-container {
        height: 360px;
    }
}

/* ── Header Meta Bar: Tight Weather + Notifications Capsule ── */
.header-meta-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Weather location capsule: hide on non-home pages */
body.not-home-page .weather-pill-container {
    display: none !important;
}

.weather-location-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.weather-location-pill:hover {
    border-color: var(--accent-green-border);
    background: #fcfdfe;
}

.pill-loc {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
}

.pill-loc i {
    color: var(--accent-green);
    font-size: 0.75rem;
}

.pill-divider {
    color: var(--border-hover);
    font-size: 0.7rem;
}

.pill-weather-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.pill-temp {
    font-weight: 700;
    color: var(--text-primary);
}

.pill-clock {
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 500;
}

.notif-btn {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.82rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    transition: border-color 0.15s, color 0.15s;
}

.notif-btn:hover {
    border-color: var(--accent-green-border);
    color: var(--accent-green);
}

.notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #dc2626;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 15px;
    height: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #ffffff;
    padding: 0 3px;
}

/* Weather Details Popover Card */
.weather-popover-card {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 270px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    display: none;
    flex-direction: column;
    gap: 12px;
    z-index: 350;
}

.weather-popover-card.open {
    display: flex;
}

.w-pop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.w-pop-header h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
}

.w-pop-header span {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* ── Global Modal Overlay & Dialog Container ── */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(6px) !important;
    z-index: 10000 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.modal-card {
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ── Header Popovers & Interactive Cards ── */
.weather-location-pill {
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s ease, background 0.15s ease;
}

.weather-location-pill:hover {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}

.weather-popover-card {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    display: none;
    flex-direction: column;
    gap: 12px;
    animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.weather-popover-card.open {
    display: flex !important;
}

.notif-popover-card {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
    z-index: 11001;
    display: none;
    flex-direction: column;
    animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.notif-popover-card.open {
    display: flex !important;
}

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

.w-pop-big-icon {
    font-size: 1.8rem;
}

.w-pop-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    background: #f8fcf9;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.w-metric {
    display: flex;
    flex-direction: column;
}

.w-metric .lbl {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.w-metric strong {
    font-size: 0.85rem;
    color: var(--accent-green);
}

.w-pop-cities {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.w-pop-cities span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.w-city-btns {
    display: flex;
    gap: 6px;
}

.w-city-btn {
    flex: 1;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.w-city-btn:hover, .w-city-btn.active {
    background: var(--accent-light-green);
    border-color: var(--accent-green-border);
    color: var(--accent-green);
}

/* Market Snapshot Horizontal Ticker Slide */
.snapshot-section {
    width: 100%;
    margin-top: 20px;
}

.snapshot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 4px;
}

.snapshot-header h3 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

.snap-location {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-left: 4px;
}

.snap-live-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.snap-live-dot {
    width: 6px;
    height: 6px;
    background-color: #22c55e;
    border-radius: 50%;
    animation: gentlePulse 4s ease-in-out infinite;
}

@keyframes gentlePulse {
    0%, 100% { opacity: 0.9; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.9); }
}

.snapshot-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 2px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    cursor: grab;
}

.snapshot-grid.dragging {
    cursor: grabbing;
}

.snapshot-grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.snap-card {
    flex: 0 0 auto;
    min-width: 125px;
    max-width: 150px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.snap-card:hover {
    transform: translateY(-1px);
    border-color: #86efac;
    box-shadow: 0 3px 8px rgba(22, 163, 74, 0.08);
}

.snap-icon {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.snap-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.snap-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.snap-info strong {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snap-price {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
}

.snap-trend {
    font-size: 0.68rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.snap-trend.up {
    color: #16a34a;
}

.snap-trend.down {
    color: #dc2626;
}

/* Notification Popover Card — Matching Reference Designs (81cffef... & a143de9...) */
.notif-popover-wrapper {
    position: relative;
}

.notif-popover-card {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 340px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #eef1f4;
    display: none;
    flex-direction: column;
    z-index: 11001;
    overflow: hidden;
    animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
    .notif-popover-card {
        position: fixed;
        top: 60px;
        right: 12px;
        left: auto;
        width: min(92vw, 360px);
        max-width: 360px;
        z-index: 11001;
    }
}

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

.notif-popover-card.open {
    display: flex;
}

.notif-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px 16px;
}

.notif-popover-header h3 {
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f172a;
}

.mark-all-read-link {
    background: transparent;
    border: none;
    font-size: 0.78rem;
    font-weight: 600;
    color: #15803d;
    cursor: pointer;
    transition: color 0.15s;
}

.mark-all-read-link:hover {
    color: #166534;
    text-decoration: underline;
}

.notif-popover-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    border-bottom: 1px solid #f1f5f9;
}

.tab-list {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pop-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 0 8px 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s, border-color 0.15s;
}

.pop-tab:hover, .pop-tab.active {
    color: #122218;
    border-bottom-color: #16a34a;
}

.tab-badge {
    background: #16a34a;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
}

.pop-tab-gear {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 4px;
    transition: color 0.15s;
}

.pop-tab-gear:hover {
    color: #122218;
}

.notif-popover-body {
    max-height: 380px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.notif-popover-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.notif-row-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #f8fafc;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

.notif-row-item:hover {
    background: #f8fafc;
}

.notif-row-item.unread {
    background: #ffffff;
}

.notif-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.notif-avatar-img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e2e8f0;
}

.notif-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    position: absolute;
    bottom: 0px;
    right: 0px;
    border: 2px solid #ffffff;
}

.notif-status-dot.active { background: #22c55e; }
.notif-status-dot.unread-purple { background: #16a34a; }

.notif-row-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.notif-row-text {
    font-size: 0.84rem;
    color: #334155;
    line-height: 1.4;
}

.notif-row-text strong {
    color: #0f172a;
    font-weight: 700;
}

.notif-row-meta {
    font-size: 0.74rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.notif-tag-pill {
    font-weight: 600;
    color: #64748b;
}

.notif-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.btn-notif-secondary {
    background: #f1f5f9;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-notif-secondary:hover {
    background: #e2e8f0;
}

.btn-notif-primary {
    background: #15803d;
    border: none;
    border-radius: 8px;
    padding: 6px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-notif-primary:hover {
    background: #166534;
}

.notif-attachment-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #475569;
    margin-top: 4px;
}

.notif-popover-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    font-size: 0.75rem;
    color: #94a3b8;
}

.nav-hint kbd {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 0.7rem;
}

.manage-notif-link {
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.manage-notif-link:hover {
    color: #0f172a;
}

.snap-trend.flat {
    color: #64748b;
}

/* ── Full Profile Page View Layout (#page-profile) ── */
.profile-page-container {
    padding: 28px 36px;
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
    overflow-y: auto;
    flex: 1;
}

.profile-page-banner {
    background: linear-gradient(135deg, #15803d, #166534);
    color: #ffffff;
    border-radius: 20px;
    padding: 28px 32px;
    box-shadow: 0 12px 32px rgba(21, 128, 61, 0.18);
    margin-bottom: 24px;
}

.banner-top-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 600;
    color: #bbf7d0;
    margin-bottom: 20px;
}

.active-status-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.prof-logout-btn {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, color 0.15s;
}

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

.live-dot {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    box-shadow: 0 0 8px #4ade80;
}

.profile-hero-content {
    display: flex;
    align-items: center;
    gap: 24px;
}

.profile-avatar-box {
    position: relative;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
}

.hero-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ffffff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.profile-hero-text h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-loc {
    font-size: 0.9rem;
    color: #dcfce7;
    margin-top: 4px;
}

.hero-desc {
    font-size: 0.84rem;
    color: #f0fdf4;
    opacity: 0.92;
    margin-top: 6px;
    max-width: 600px;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.prof-stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.prof-stat-card.green-highlight {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.stat-lbl {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.stat-val {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 6px;
}

.stat-val.green {
    color: #15803d;
}

.stat-sub {
    font-size: 0.74rem;
    color: #94a3b8;
    margin-top: 4px;
}

.stat-btn-action {
    margin-top: 10px;
    background: #15803d;
    color: #ffffff;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.stat-btn-action:hover {
    background: #166534;
}

.profile-tab-header {
    display: flex;
    gap: 16px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 24px;
}

.prof-page-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 4px 14px 4px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -2px;
}

.prof-page-tab.active, .prof-page-tab:hover {
    color: #15803d;
    border-bottom-color: #15803d;
}

.activity-feed-card, .alertgraph-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.activity-feed-card h3, .alertgraph-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.activity-feed-card h3 i, .alertgraph-card h3 i {
    color: #15803d;
}
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(6px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeInModal 0.2s ease-out;
}

.modal-overlay.open {
    display: flex;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.profile-dashboard-card {
    background: #ffffff;
    width: 100%;
    max-width: 620px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
}

.profile-banner-header {
    background: linear-gradient(135deg, #15803d, #166534);
    color: #ffffff;
    padding: 20px 24px 24px 24px;
}

.banner-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 600;
    color: #bbf7d0;
    margin-bottom: 16px;
}

.modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #ffffff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: background 0.15s;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.profile-hero-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-avatar-wrapper {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.avatar-verified-check {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: #16a34a;
    color: #ffffff;
    border: 2px solid #ffffff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}

.profile-identity-info h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tier-pill {
    background: rgba(255, 255, 255, 0.2);
    color: #f0fdf4;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
}

.profile-location {
    font-size: 0.8rem;
    color: #dcfce7;
    margin-top: 2px;
}

.profile-bio {
    font-size: 0.78rem;
    color: #f0fdf4;
    opacity: 0.9;
    margin-top: 4px;
}

.profile-dash-body {
    padding: 20px 24px;
}

.profile-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.pm-stat-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
}

.pm-stat-card.green-glow {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.pm-lbl {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
}

.pm-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 4px;
}

.pm-val.green {
    color: #15803d;
}

.pm-sub {
    font-size: 0.68rem;
    color: #94a3b8;
    margin-top: 2px;
}

.pm-action-btn {
    margin-top: 6px;
    background: #15803d;
    color: #ffffff;
    border: none;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.pm-action-btn:hover {
    background: #166534;
}

.profile-tab-nav {
    display: flex;
    gap: 12px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

.prof-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 4px 10px 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.prof-tab-btn.active, .prof-tab-btn:hover {
    color: #15803d;
    border-bottom-color: #15803d;
}

.activity-feed-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.act-feed-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
}

.act-icon {
    font-size: 1.1rem;
}

.act-icon.green { color: #16a34a; }
.act-icon.purple { color: #8b5cf6; }

.act-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.act-info strong {
    font-size: 0.82rem;
    color: #0f172a;
}

.act-info span {
    font-size: 0.74rem;
    color: #64748b;
}

.act-time {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 500;
}

.alertgraph-settings-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ag-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
}

.ag-setting-row strong {
    font-size: 0.84rem;
    color: #0f172a;
    display: block;
}

.ag-setting-row p {
    font-size: 0.74rem;
    color: #64748b;
    margin-top: 2px;
}

.ag-toggle-switch {
    width: 18px;
    height: 18px;
    accent-color: #15803d;
    cursor: pointer;
}

.payout-bank-card {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bank-details-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bank-icon {
    font-size: 1.6rem;
    color: #15803d;
}

.bank-details-row strong {
    font-size: 0.9rem;
    color: #0f172a;
}

.bank-details-row p {
    font-size: 0.78rem;
    color: #475569;
}

.bank-verified-tag {
    margin-left: auto;
    background: #16a34a;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}

.payout-action-box p {
    font-size: 0.78rem;
    color: #475569;
    margin-bottom: 8px;
}

.cashout-now-btn {
    width: 100%;
    background: #15803d;
    color: #ffffff;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s;
}

.cashout-now-btn:hover {
    background: #166534;
}

/* ── Mobile Bottom Navigation Bar Layout ── */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    border-top: 1px solid #e2e8f0;
    z-index: 900;
    align-items: center;
    justify-content: space-around;
    padding: 0 4px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
}

.m-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    flex: 1;
    height: 100%;
    color: #64748b;
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 600;
    transition: color 0.15s ease;
}

.m-nav-item i {
    font-size: 0.95rem;
}

.m-nav-item.active, .m-nav-item:hover {
    color: #15803d;
}

.m-nav-badge {
    position: absolute;
    top: 3px;
    right: 50%;
    transform: translateX(14px);
    font-size: 0.6rem;
    font-weight: 700;
    color: #ffffff;
    padding: 1px 5px;
    border-radius: 8px;
    line-height: 1.1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.m-nav-badge.green-badge {
    background: #15803d;
}

.m-nav-badge.purple-badge {
    background: linear-gradient(135deg, #9333ea, #6b21a8);
}

/* ── Popular Search Chips Row Layout ── */
.search-chips-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 20px 0;
    width: 100%;
    overflow: hidden;
}

.chips-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
}

.chips-container {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 0;
}

.chips-container::-webkit-scrollbar {
    display: none;
}

.chip-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 4px 10px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    flex-shrink: 0;
}

.chip-btn:hover {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }
    body:not(.not-home-page) .mobile-bottom-nav {
        display: none !important;
    }
    .pill-clock-divider,
    .pill-clock {
        display: none !important;
    }
    .search-chips-row {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        margin: 10px 0 14px 0;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .search-chips-row::-webkit-scrollbar {
        display: none;
    }
    .chips-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 5px;
        flex-shrink: 0;
    }
    .chip-btn {
        padding: 3px 8px;
        font-size: 0.7rem;
        border-radius: 12px;
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ── Clean Sign In Button (No Gradient, No WhatsApp Icon) ── */
.wa-auth-btn, .sign-in-btn {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.wa-auth-btn:hover, .sign-in-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.wa-auth-card {
    max-width: 380px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.wa-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.wa-card-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}

.wa-card-header p {
    font-size: 0.76rem;
    color: #64748b;
    margin-top: 2px;
}

.wa-open-btn {
    width: 100%;
    background: #15803d;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s;
}

.wa-open-btn:hover {
    background: #166534;
}
/* Hero Logo Replacement for Orb */
.hero-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.hero-logo-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.08));
    transition: transform 0.3s ease;
}

.hero-logo-img:hover {
    transform: scale(1.05);
}

/* ── Market Scouts Directory & Dashboard (Refactored for Extreme Compactness) ── */
.scout-page-container {
    padding: 16px 24px;
    background: #f8fafc;
}

.scout-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.scout-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.scout-star-badge {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #15803d;
    color: #ffffff;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(21, 128, 61, 0.25);
    flex-shrink: 0;
}

.scout-title-group h2 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.2;
}

.scout-title-group p {
    font-size: 0.76rem;
    color: #64748b;
    margin: 2px 0 0 0;
}

.scout-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-compact-outline {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s;
}

.btn-compact-outline:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.btn-compact-primary {
    background: #15803d;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(21, 128, 61, 0.2);
    transition: background 0.15s;
}

.btn-compact-primary:hover {
    background: #166534;
}

/* 5 KPI Summary Grid */
.scout-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.scout-kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    border-left: 3px solid #cbd5e1;
}

/* Per-card accent colours — Total Agents */
.scout-kpi-card:nth-child(1) { border-left-color: #6366f1; }
.scout-kpi-card:nth-child(1) .kpi-val { color: #4f46e5; }

/* Active */
.scout-kpi-card:nth-child(2) { border-left-color: #16a34a; }
.scout-kpi-card:nth-child(2) .kpi-val { color: #15803d; }

/* Reports */
.scout-kpi-card:nth-child(3) { border-left-color: #2563eb; }
.scout-kpi-card:nth-child(3) .kpi-val { color: #1d4ed8; }

/* MarketPoints */
.scout-kpi-card:nth-child(4) { border-left-color: #d97706; }
.scout-kpi-card:nth-child(4) .kpi-val { color: #b45309; }

/* Avg. Trust Score */
.scout-kpi-card:nth-child(5) { border-left-color: #0d9488; }
.scout-kpi-card:nth-child(5) .kpi-val { color: #0f766e; }

.kpi-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.kpi-lbl {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
}

.kpi-icon-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.68rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kpi-icon-circle.green-bg  { background: #dcfce7; color: #15803d; }
.kpi-icon-circle.blue-bg   { background: #dbeafe; color: #1d4ed8; }
.kpi-icon-circle.red-bg    { background: #ffe4e6; color: #e11d48; }
.kpi-icon-circle.teal-bg   { background: #ccfbf1; color: #0d9488; }
.kpi-icon-circle.yellow-bg { background: #fef9c3; color: #b45309; }
.kpi-icon-circle.indigo-bg { background: #e0e7ff; color: #4338ca; }

.kpi-val {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    display: block;
    line-height: 1.25;
}

.kpi-sub {
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
}

.kpi-sub.green { color: #16a34a; }
.kpi-sub small { font-size: 0.68rem; font-weight: 400; color: #94a3b8; }

/* Filter Bar */
.scout-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.search-input-box {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-box i {
    position: absolute;
    left: 10px;
    color: #94a3b8;
    font-size: 0.75rem;
}

.search-input-box input {
    width: 100%;
    padding: 6px 12px 6px 28px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.78rem;
    background: #ffffff;
    color: #0f172a;
    outline: none;
}

.search-input-box input:focus {
    border-color: #15803d;
}

.scout-select {
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.78rem;
    background: #ffffff;
    color: #334155;
    font-weight: 500;
    cursor: pointer;
    outline: none;
}

.view-mode-toggle {
    display: flex;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.vm-btn {
    padding: 5px 10px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.78rem;
    cursor: pointer;
}

.vm-btn.active {
    background: #15803d;
    color: #ffffff;
}

/* Tight Scouts Data Table */
.scout-table-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    margin-bottom: 14px;
}

.scout-data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.78rem;
}

.scout-data-table thead th {
    background: #f8fafc;
    padding: 8px 12px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e2e8f0;
}

.scout-data-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.scout-data-table tbody tr:last-child td {
    border-bottom: none;
}

.scout-data-table tbody tr:hover {
    background: #f8fafc;
}

.scout-user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.scout-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Level badge on avatar corner — like a Twitter verification badge */
.scout-avatar-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.scout-lvl-dot {
    position: absolute;
    bottom: -2px;
    right: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.45rem;
    border: 1.5px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    z-index: 1;
    cursor: default;
}

.scout-lvl-dot.lvl-captain  { background: #7e22ce; color: #fff; }
.scout-lvl-dot.lvl-senior   { background: #1d4ed8; color: #fff; }
.scout-lvl-dot.lvl-scout    { background: #15803d; color: #fff; }
.scout-lvl-dot.lvl-explorer { background: #c2410c; color: #fff; }

/* Status presence dot — top-left of avatar */
.scout-status-dot {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    z-index: 2;
}

.scout-status-dot.dot-active {
    background: #22c55e;
    animation: pulse-green 2s infinite;
}

.scout-status-dot.dot-inactive {
    background: #94a3b8;
}

@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
    50%       { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}

.scout-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
    display: block;
    line-height: 1.2;
}

.scout-meta {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 400;
}

/* Scout Level Badges */
.scout-lvl-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
}

.lvl-captain { background: #f3e8ff; color: #7e22ce; }
.lvl-senior { background: #dbeafe; color: #1d4ed8; }
.lvl-scout { background: #dcfce7; color: #15803d; }
.lvl-explorer { background: #ffedd5; color: #c2410c; }

.scout-markets-text {
    font-size: 0.76rem;
    color: #334155;
    font-weight: 500;
}

.scout-stat-num {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
}

/* Trust Score Pill */
.trust-score-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 6px;
}

.score-excellent { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.score-great { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.score-good { background: #fefce8; color: #a16207; border: 1px solid #fef08a; }
.score-fair { background: #fff7ed; color: #c2410c; border: 1px solid #ffedd5; }

.scout-earning-val {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
}

/* Status Badges */
.scout-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.status-active { background: #dcfce7; color: #15803d; }
.status-inactive { background: #f1f5f9; color: #64748b; }

.table-action-btns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.tbl-act-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: background 0.15s, color 0.15s;
}

.tbl-act-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* Table Footer & Pagination */
.scout-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    font-size: 0.72rem;
    color: #64748b;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 3px;
}

.pg-btn {
    padding: 3px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

.pg-btn.active {
    background: #15803d;
    color: #ffffff;
    border-color: #15803d;
}

/* Bottom Feature Banner Card */
.why-scout-card {
    background: #faf8f5;
    border: 1px solid #f1f0eb;
    border-radius: 12px;
    padding: 14px 18px;
}

.why-scout-card h3 {
    font-size: 0.9rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px 0;
}

.why-scout-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.why-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #f3eef8;
    padding: 8px 10px;
    border-radius: 8px;
}

.why-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.why-item strong {
    font-size: 0.74rem;
    font-weight: 700;
    color: #0f172a;
    display: block;
    line-height: 1.2;
}

.why-item p {
    font-size: 0.68rem;
    color: #64748b;
    margin: 2px 0 0 0;
    line-height: 1.3;
}

.why-scout-footer {
    text-align: center;
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
    border-top: 1px solid #eae6df;
    padding-top: 8px;
    margin-top: 6px;
}

/* Responsive adjustments for mobile view */
@media (max-width: 768px) {
    .scout-kpi-row, .why-scout-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .scout-filter-bar {
        flex-wrap: wrap;
    }
    .scout-data-table {
        display: block;
        overflow-x: auto;
    }
}

/* ── Invite Market Scouts Referral Modal ── */
.invite-referral-card {
    max-width: 380px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.referral-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ref-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ref-icon-badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.referral-modal-header h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.referral-modal-header p {
    font-size: 0.75rem;
    color: #64748b;
    margin: 2px 0 0 0;
}

.ref-perk-banner {
    background: #faf8f5;
    border: 1px solid #f1f0eb;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.gift-emoji {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.ref-perk-banner strong {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f172a;
    display: block;
}

.ref-perk-banner p {
    font-size: 0.72rem;
    color: #64748b;
    margin: 2px 0 0 0;
    line-height: 1.3;
}

.ref-link-group {
    margin-bottom: 14px;
}

.ref-link-group label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 6px;
}

.ref-link-box {
    display: flex;
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}

.ref-link-box input {
    flex: 1;
    border: none;
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #15803d;
    outline: none;
    background: transparent;
}

.ref-copy-btn {
    background: #15803d;
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.ref-copy-btn:hover {
    background: #166534;
}

.wa-share-btn {
    width: 100%;
    background: #25d366;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s;
}

.wa-share-btn:hover {
    background: #128c7e;
}

/* ── Agent Details Modal & Payment Status Badges ── */
.agent-details-card {
    max-width: 440px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
    position: relative;
}

.adm-profile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
}

.adm-avatar-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.adm-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

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

.adm-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.adm-name-row h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.adm-status-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

.adm-status-badge.active {
    background: #dcfce7;
    color: #15803d;
}

.adm-status-badge.inactive {
    background: #fee2e2;
    color: #dc2626;
}

.adm-phone-id {
    font-size: 0.76rem;
    color: #64748b;
    margin: 2px 0 4px;
    font-weight: 600;
}

.adm-level-tag {
    font-size: 0.7rem;
    font-weight: 700;
    color: #15803d;
    background: #f0fdf4;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #bbf7d0;
}

.adm-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.adm-metric-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
}

.adm-metric-box span {
    font-size: 0.65rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    display: block;
}

.adm-metric-box strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin-top: 2px;
    display: block;
}

.adm-metric-box strong.green {
    color: #15803d;
}

.adm-detail-rows {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.adm-info-row {
    margin-bottom: 8px;
}

.adm-info-row:last-child {
    margin-bottom: 0;
}

.adm-info-row label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 5px;
}

.adm-info-row p {
    font-size: 0.8rem;
    font-weight: 600;
    color: #0f172a;
    margin: 3px 0 0;
}

.adm-actions {
    display: flex;
    gap: 8px;
}

.adm-btn {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.adm-btn.wa {
    background: #25d366;
    color: #ffffff;
}

.adm-btn.secondary {
    background: #f1f5f9;
    color: #475569;
}

/* Payment Status Badges for Table & Modal */
.pay-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.pay-status-badge.released {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.pay-status-badge.pending {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.pay-status-badge.cancelled {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

/* ── Redesigned Profile Dashboard (Desktop & Mobile - First Spec) ── */
#page-profile {
    overflow-y: auto !important;
    height: 100%;
}

.profile-page-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px 24px 40px;
}

/* Cover Banner & Hero (Ref Image 1 & 3) */
.prof-redesign-hero {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 12px;
    padding: 18px 20px;
    box-shadow: none;
}

.prof-gradient-cover {
    display: none !important;
}

.prof-hero-body {
    padding: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    margin-top: 0;
}

.prof-avatar-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.prof-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    box-shadow: none;
}

.prof-verified-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: #2563eb;
    color: #ffffff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    border: 2px solid #ffffff;
    box-shadow: none;
}

.prof-user-info {
    flex: 1;
    margin-bottom: 0;
}

.prof-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.prof-name-row h1 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin: 0;
}

.prof-status-pill {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.prof-badge-pill {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

.prof-user-sub {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 4px;
    margin-bottom: 0;
}

.prof-hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.btn-prof-primary {
    background: #0f172a;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.btn-prof-primary:hover {
    background: #1e293b;
}

.btn-prof-outline {
    background: #ffffff;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.btn-prof-outline:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #94a3b8;
}

.btn-prof-icon-only {
    width: 36px;
    height: 36px;
    background: #ffffff;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.btn-prof-icon-only:hover {
    background: #fef2f2;
    color: #ef4444;
    border-color: #fca5a5;
}

/* 4 Ultra-Compact Pill Stats Row (Ref Images 2 & 3) */
.prof-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.prof-pill-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: none;
    transition: transform 0.15s ease;
}

.prof-pill-card:hover {
    transform: translateY(-2px);
    box-shadow: none;
}

.prof-pill-card.highlight-green {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.prof-pill-card.highlight-amber {
    background: #fffbeb;
    border-color: #fef08a;
}

.p-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.p-card-lbl {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #64748b;
    text-transform: uppercase;
}

.p-icon {
    font-size: 0.9rem;
}

.p-icon.green { color: #16a34a; }
.p-icon.amber { color: #d97706; }
.p-icon.blue { color: #2563eb; }
.p-icon.teal { color: #0d9488; }

.p-card-val {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

.p-card-val.green { color: #15803d; }
.p-card-val.amber { color: #d97706; }

.p-card-sub {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 2px;
    display: block;
}

/* Tab Bar Navigation (Ref Image 1) */
.prof-tab-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 14px;
    padding-bottom: 2px;
}

.prof-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.prof-tab-btn:hover {
    color: #0f172a;
}

.prof-tab-btn.active {
    color: #0f172a;
    border-bottom-color: #0f172a;
    font-weight: 700;
}

/* Settings Card & Section Rows (Ref Image 1) */
.prof-settings-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    box-shadow: none;
}

.settings-section {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
    padding: 6px 0;
}

.settings-left h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.settings-left p {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.35;
    margin: 0;
}

.settings-right {
    width: 100%;
}

.settings-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 12px 0;
}

.form-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.form-field input {
    width: 100%;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.88rem;
    color: #0f172a;
    font-weight: 500;
    outline: none;
    transition: border-color 0.15s ease;
}

.form-field input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-field.margin-top {
    margin-top: 14px;
}

/* Avatar Upload Dropzone */
.avatar-upload-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.15s ease;
}

.avatar-upload-dropzone:hover {
    border-color: #2563eb;
    background: #eff6ff;
}

.upload-icon {
    font-size: 1.6rem;
    color: #64748b;
    margin-bottom: 8px;
    display: block;
}

.avatar-upload-dropzone strong {
    display: block;
    font-size: 0.86rem;
    color: #0f172a;
}

.avatar-upload-dropzone span {
    font-size: 0.74rem;
    color: #94a3b8;
    margin-top: 4px;
    display: block;
}

/* Bank Pill Card */
.bank-pill-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bank-pill-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bank-badge-icon {
    font-size: 1.2rem;
    color: #059669;
    background: #dcfce7;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bank-pill-left strong {
    display: block;
    font-size: 0.88rem;
    color: #0f172a;
}

.bank-pill-left p {
    font-size: 0.78rem;
    color: #64748b;
    margin: 2px 0 0;
}

.bank-tag-verified {
    background: #dcfce7;
    color: #15803d;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.cashout-now-btn {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 20px;
    background: #16a34a;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cashout-now-btn:hover {
    background: #15803d;
}

.cashout-now-btn:disabled {
    opacity: 0.85;
    cursor: not-allowed;
}

.tbl-ask-mama-btn {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.tbl-ask-mama-btn:hover {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

.tbl-ask-mama-btn i {
    color: #2563eb;
    font-size: 0.75rem;
}

.tbl-ask-mama-btn:hover i {
    color: #60a5fa;
}

/* Custom iOS-Style Toggle Switches for Alert Preferences */
.ag-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}

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

.ag-setting-row strong {
    display: block;
    font-size: 0.9rem;
    color: #0f172a;
}

.ag-setting-row p {
    font-size: 0.78rem;
    color: #64748b;
    margin: 2px 0 0;
}

.ag-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.ag-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ag-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.25s ease;
    border-radius: 24px;
}

.ag-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.25s ease;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.ag-switch input:checked + .ag-slider {
    background-color: #16a34a;
}

.ag-switch input:checked + .ag-slider:before {
    transform: translateX(20px);
}

/* Mobile Responsiveness (Ref Images 1 & 2) */
@media (max-width: 768px) {
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        z-index: 9999 !important;
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    }

    .sidebar.open, .sidebar.mobile-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .profile-page-container {
        padding: 12px 10px 60px;
    }

    .prof-redesign-hero {
        padding: 0;
        border-radius: 18px;
        overflow: hidden;
        margin-bottom: 12px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
    }

    .prof-cover-banner {
        display: block !important;
        height: 48px;
        background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #e0f2fe 100%);
        width: 100%;
        border-bottom: 1px solid #bae6fd;
    }

    .prof-hero-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 12px 12px;
        margin-top: -32px;
    }

    .prof-avatar-wrapper {
        width: 64px;
        height: 64px;
    }

    .prof-avatar-img {
        border: 3px solid #ffffff;
        box-shadow: 0 3px 10px rgba(14, 165, 233, 0.15);
    }

    .prof-user-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .prof-name-row {
        justify-content: center;
        margin-top: 6px;
        gap: 6px;
    }

    .prof-name-row h1 {
        font-size: 1.25rem;
    }

    .prof-user-sub {
        font-size: 0.76rem;
        margin-top: 3px;
    }

    .prof-hero-actions {
        width: 100%;
        margin-top: 12px;
        justify-content: center;
    }

    .btn-prof-primary, .btn-prof-outline {
        flex: 1;
        justify-content: center;
        padding: 8px 12px;
        font-size: 0.78rem;
        border-radius: 10px;
    }

    /* Ultra-Tight 4-Column Stat Capsule Strip (Ref Images 1 & 2) */
    .prof-stats-row {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0 !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 6px 2px !important;
        margin-bottom: 8px !important;
        box-shadow: none !important;
    }

    .prof-pill-card {
        background: transparent !important;
        border: none !important;
        border-right: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        padding: 2px 2px !important;
        text-align: center !important;
        border-radius: 0 !important;
    }

    .prof-pill-card:last-child {
        border-right: none !important;
    }

    .p-card-header {
        justify-content: center !important;
        margin: 0 !important;
    }

    .p-card-lbl {
        font-size: 0.54rem !important;
        color: #64748b !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px !important;
        white-space: nowrap !important;
        margin: 0 !important;
        text-transform: uppercase !important;
        line-height: 1 !important;
    }

    .p-card-val {
        font-size: 0.85rem !important;
        font-weight: 800 !important;
        display: block !important;
        margin-top: 2px !important;
        line-height: 1.1 !important;
    }

    .p-card-sub, .p-card-header i {
        display: none !important;
    }

    /* Ultra-Compact Mobile Agents Page Header */
    .scout-header-row {
        margin-bottom: 6px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .scout-title-group h2 {
        font-size: 0.9rem !important;
        margin: 0 !important;
    }

    .scout-title-group p,
    .scout-star-badge {
        display: none !important;
    }

    /* Show markets header on mobile, hide only verbose copy */
    .markets-page-header {
        display: block !important;
        padding-bottom: 10px !important;
    }

    .markets-page-header p {
        display: none !important;
    }

    .markets-page-header .market-filter-pill-row {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
    }

    .markets-page-header .market-filter-intro {
        font-size: 0.82rem;
        color: #475569;
        margin-bottom: 8px;
    }

    /* 2-column vendor grid on mobile */
    .vendors-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .vendor-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 10px !important;
        gap: 6px !important;
    }

    .v-img-placeholder {
        font-size: 1.6rem !important;
    }

    .v-details h3 {
        font-size: 0.78rem !important;
        margin: 2px 0 2px 0 !important;
    }

    .v-location {
        font-size: 0.68rem !important;
    }

    .v-rating {
        font-size: 0.66rem !important;
    }

    #invite-scouts-btn {
        padding: 4px 10px !important;
        font-size: 0.72rem !important;
        border-radius: 8px !important;
    }

    /* Ultra-Tight 5-Column Agents KPI Stat Capsule Strip */
    .scout-kpi-row {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 0 !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 6px 2px !important;
        margin-bottom: 8px !important;
        box-shadow: none !important;
    }

    .scout-kpi-card {
        background: transparent !important;
        border: none !important;
        border-right: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        padding: 2px 2px !important;
        text-align: center !important;
        border-radius: 0 !important;
    }

    .scout-kpi-card:last-child {
        border-right: none !important;
    }

    .scout-kpi-card .kpi-meta {
        justify-content: center !important;
        margin: 0 !important;
    }

    .scout-kpi-card .kpi-lbl {
        font-size: 0.42rem !important;
        color: #64748b !important;
        font-weight: 700 !important;
        letter-spacing: 0px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        margin: 0 !important;
        text-transform: uppercase !important;
        line-height: 1 !important;
        display: block !important;
    }

    .scout-kpi-card .kpi-val {
        font-size: 0.78rem !important;
        font-weight: 800 !important;
        display: block !important;
        margin-top: 2px !important;
        line-height: 1.1 !important;
    }

    .scout-kpi-card .kpi-sub,
    .scout-kpi-card .kpi-icon-circle {
        display: none !important;
    }

    /* Ultra-Compact Segmented Mobile Tab Bar */
    .prof-tab-bar {
        background: #f1f5f9;
        border-radius: 10px;
        padding: 2px;
        display: flex;
        gap: 2px;
        overflow-x: auto;
        scrollbar-width: none;
        border: 1px solid #e2e8f0;
        margin-bottom: 8px;
    }

    .prof-tab-bar::-webkit-scrollbar {
        display: none;
    }

    .prof-tab-btn {
        padding: 5px 8px;
        font-size: 0.71rem;
        border-radius: 7px;
        white-space: nowrap;
        font-weight: 600;
        border: none;
        background: transparent;
        color: #64748b;
        gap: 4px;
    }

    .prof-tab-btn i {
        font-size: 0.68rem;
    }

    .prof-tab-btn.active {
        background: #2563eb;
        color: #ffffff;
        box-shadow: 0 1px 4px rgba(37, 99, 235, 0.2);
    }

    /* Ultra-Compact Profile Tables & Cards */
    .prof-settings-card, .prof-pane-card, .prof-table-card {
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        padding: 10px;
        margin-bottom: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Hide redundant tab pane section titles & subtext on mobile */
    .prof-settings-card h3,
    .prof-settings-card > div > div > h3,
    .prof-settings-card > div > div > p,
    .settings-left {
        display: none !important;
    }

    .settings-section {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin-bottom: 8px !important;
    }

    .settings-right {
        width: 100% !important;
    }

    /* Mobile Table Cells Hyper-Compact */
    .prof-table-card table th,
    .prof-table-card table td,
    .ag-history-table th,
    .ag-history-table td {
        padding: 6px 4px !important;
        font-size: 0.72rem !important;
        white-space: nowrap;
    }

    .savings-tag-badge {
        padding: 2px 5px !important;
        font-size: 0.65rem !important;
    }

    .tbl-ask-mama-btn {
        padding: 3px 6px !important;
        font-size: 0.66rem !important;
        border-radius: 5px !important;
    }

    .settings-section {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .form-row-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Modal Overlay Global Fixed Popup Container ── */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.modal-overlay.open,
.modal-overlay.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ── Live Interactive Market Map Page (Ref Images 1 & 2) ── */
#page-map {
    height: 100%;
    overflow: hidden;
}

.map-page-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 16px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Leaflet Custom Map Marker Styles ── */
.leaflet-map-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    z-index: 1;
}

.leaflet-marker-parent {
    background: transparent !important;
    border: none !important;
}

.leaflet-custom-marker {
    background: #ffffff;
    border: 1.5px solid #16a34a;
    border-radius: 20px;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.leaflet-custom-marker:hover {
    transform: scale(1.12);
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35);
    z-index: 999;
}

.l-marker-icon {
    font-size: 1.05rem;
}

.l-marker-pill strong {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    white-space: nowrap;
}

.l-marker-price {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    color: #16a34a;
    line-height: 1.1;
    white-space: nowrap;
}

/* Nearby list items */
.nearby-market-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.nearby-market-item:hover {
    background: #f1f5f9;
}

.nmi-icon {
    font-size: 1.1rem;
    margin-right: 8px;
}

.nmi-info {
    flex: 1;
}

.nmi-info strong {
    display: block;
    font-size: 0.78rem;
    color: #0f172a;
}

.nmi-info span {
    font-size: 0.7rem;
    color: #64748b;
}

.nmi-price {
    text-align: right;
}

.nmi-price strong {
    display: block;
    font-size: 0.82rem;
    color: #16a34a;
    font-weight: 800;
}

.nmi-price small {
    font-size: 0.68rem;
    color: #94a3b8;
}

/* Top Floating Header Bar */
.map-top-header-bar {
    display: grid;
    grid-template-columns: 240px 1fr 140px;
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}

.mth-location-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 8px 14px;
}

.mth-loc-icon {
    font-size: 1.1rem;
    color: #16a34a;
}

.mth-lbl {
    display: block;
    font-size: 0.68rem;
    color: #64748b;
    font-weight: 600;
}

.mth-val {
    display: block;
    font-size: 0.85rem;
    font-weight: 800;
    color: #0f172a;
}

.mth-center-search {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 4px 6px 4px 16px;
}

.mth-center-search .search-icon {
    color: #94a3b8;
    font-size: 0.95rem;
    margin-right: 10px;
}

.mth-center-search input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 0.86rem;
    font-weight: 500;
    color: #0f172a;
}

.mth-filter-btn {
    width: 36px;
    height: 36px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.mth-filter-btn:hover {
    background: #f1f5f9;
}

.mth-right-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.mth-icon-btn {
    width: 40px;
    height: 40px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    color: #475569;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mth-user-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Category Filter Pills */
.map-category-pills-row,
.market-filter-pill-row {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.map-pill-btn,
.market-pill-btn {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.map-pill-btn.active,
.map-pill-btn:hover,
.market-pill-btn.active,
.market-pill-btn:hover {
    background: #15803d;
    color: #ffffff;
    border-color: #15803d;
}

.market-pill-btn {
    min-width: auto;
}

/* Map Canvas Container */
.map-canvas-wrapper {
    position: relative;
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
    min-height: 480px;
}

.map-vector-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e5e7eb;
    background-image: 
        radial-gradient(#cbd5e1 1.5px, transparent 1.5px),
        linear-gradient(to right, #e2e8f0 1px, transparent 1px),
        linear-gradient(to bottom, #e2e8f0 1px, transparent 1px);
    background-size: 30px 30px, 60px 60px, 60px 60px;
}

/* Interactive Pins */
.map-pin-item {
    position: absolute;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.2s ease;
}

.map-pin-item:hover, .map-pin-item.active {
    transform: scale(1.08);
    z-index: 20;
}

.pin-badge-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.map-pin-item.active .pin-badge-box {
    border-color: #16a34a;
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.25);
}

.pin-icon {
    font-size: 1.1rem;
}

.pin-txt-group strong {
    display: block;
    font-size: 0.78rem;
    color: #0f172a;
    line-height: 1.2;
}

.pin-txt-group small.green {
    font-size: 0.72rem;
    font-weight: 800;
    color: #16a34a;
}

.pin-pulse-dot {
    width: 12px;
    height: 12px;
    background: #16a34a;
    border: 2px solid #ffffff;
    border-radius: 50%;
    margin: 4px auto 0;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.25);
}

/* Floating Controls Right Side */
.map-floating-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 30;
}

.mfc-btn {
    width: 42px;
    height: 42px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    color: #334155;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: background 0.15s ease;
}

.mfc-btn:hover {
    background: #f8fafc;
    color: #0f172a;
}

/* Floating Featured Market Sheet Card Overlay (Ref Images 1 & 2) */
.map-featured-sheet-card {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 380px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
    z-index: 40;
    transition: all 0.25s ease;
}

.sheet-drag-handle {
    width: 40px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 4px;
    margin: 8px auto 0;
    display: none;
}

.mfc-cover-wrapper {
    position: relative;
    height: 160px;
}

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

.mfc-status-tag.open {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dot-green {
    width: 7px;
    height: 7px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
}

.mfc-fav-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    color: #475569;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mfc-body {
    padding: 16px;
}

.mfc-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.mfc-title-row h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.2;
}

.mfc-sub {
    font-size: 0.76rem;
    color: #64748b;
    margin-top: 4px;
}

.mfc-price-box {
    text-align: right;
    flex-shrink: 0;
}

.mfc-price-box strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: #16a34a;
}

.mfc-price-box small {
    display: block;
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 600;
}

.mfc-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.74rem;
    color: #475569;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.mfc-actions-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 8px;
}

.mfc-btn-primary {
    background: #0f172a;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.mfc-btn-outline {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Mobile Responsive Specs (Ref Image 2 Bottom Sheet Drawer) */
@media (max-width: 768px) {
    .map-top-header-bar {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mth-right-actions {
        display: none;
    }

    .map-featured-sheet-card {
        width: calc(100% - 24px);
        left: 12px;
        bottom: 12px;
    }

    .sheet-drag-handle {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   MamaPrice map redesign
   Full-bleed map surface with a ride-hailing-style search stack and bottom
   sheet. This intentionally overrides the older desktop map treatment above.
   -------------------------------------------------------------------------- */
:root {
    --map-ink: #363236;
    --map-orange: #f7b558;
    --map-green: #a5d48c;
    --map-paper: #fbfbf8;
    --map-muted: #7f8582;
}

body.map-page-active .top-header {
    display: none;
}

body.map-page-active .chat-main {
    background: var(--map-paper);
}

.map-page-container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    align-self: stretch;
    overflow: hidden;
}

.map-page-container > .map-top-header-bar,
.map-page-container > .map-category-pills-row,
.map-page-container > .map-canvas-wrapper {
    display: none !important;
}

.map-redesign-layer {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--map-paper);
    color: var(--map-ink);
}

.map-redesign-header {
    position: absolute;
    z-index: 70;
    top: 18px;
    left: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    pointer-events: none;
}

.map-header-left,
.map-header-search-bar,
.map-top-actions {
    pointer-events: auto;
}

.map-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.map-header-location-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 99px;
    box-shadow: none;
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
}

.map-header-location-tag i {
    color: #16a34a;
    font-size: 0.95rem;
}

/* Desktop Central Floating Search Bar */
.map-header-search-bar {
    flex: 0 1 240px;
    max-width: 250px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 99px;
    box-shadow: none;
    font-size: 0.78rem;
    color: #64748b;
    transition: border-color 0.15s ease;
}

.map-header-search-bar:hover {
    border-color: #16a34a;
    box-shadow: none;
}

.map-header-search-bar .search-icon {
    color: #16a34a;
    font-size: 1rem;
}

.map-header-search-bar span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 6px;
    font-weight: 500;
}

.map-header-search-bar .search-kbd {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 3px 7px;
    border-radius: 6px;
    flex-shrink: 0;
}

.map-mobile-search-btn {
    display: none;
}

@media (max-width: 768px) {
    .map-redesign-header {
        top: 12px;
        left: 12px;
        right: 12px;
        gap: 8px;
    }

    .map-header-search-bar {
        display: none !important;
    }

    .map-mobile-search-btn {
        display: inline-flex !important;
    }

    .map-header-location-tag span {
        font-size: 0.75rem;
    }
}

.map-top-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.map-round-btn,
.map-profile-btn {
    position: relative;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
    font-size: 0.85rem;
}

.map-profile-btn {
    background: #0f172a;
    color: #ffffff;
    border: none;
    font-size: 0.7rem;
    font-weight: 800;
}

/* ── Leaflet Custom Map Marker Popup Card (Ref Image Spec) ── */
.custom-leaflet-popup-wrapper .leaflet-popup-content-wrapper {
    padding: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16) !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
}

.custom-leaflet-popup-wrapper .leaflet-popup-content {
    margin: 0 !important;
    line-height: 1.4 !important;
    width: 270px !important;
}

.custom-leaflet-popup-wrapper .leaflet-popup-tip-container {
    display: none !important;
}

.map-popup-card {
    width: 100%;
    background: #ffffff;
    font-family: inherit;
}

.mpc-cover-box {
    position: relative;
    width: 100%;
    height: 125px;
    overflow: hidden;
    background: #f1f5f9;
}

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

.mpc-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 99px;
}

.mpc-content {
    padding: 12px 14px;
}

.mpc-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 2px;
}

.mpc-price {
    font-size: 1.05rem;
    font-weight: 800;
    color: #16a34a;
}

.mpc-item {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 600;
}

.mpc-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f172a;
    margin: 2px 0 4px;
    line-height: 1.2;
}

.mpc-address {
    font-size: 0.72rem;
    color: #64748b;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #475569;
    font-weight: 600;
    margin-bottom: 10px;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
}

.mpc-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.mpc-btn-primary, .mpc-btn-outline {
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
}

.mpc-btn-primary {
    background: #0f172a;
    color: #ffffff;
}

.mpc-btn-outline {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #0f172a;
}

/* ── Bottom Cards Carousel (Matching Reference Image) ── */
.map-cards-carousel {
    position: absolute;
    z-index: 50;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
}

.map-cards-carousel::-webkit-scrollbar {
    display: none;
}

.mcc-card {
    flex: 0 0 240px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.mcc-card:hover, .mcc-card.active {
    transform: translateY(-2px);
    border-color: #16a34a;
}

.mcc-img-box {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
}

.mcc-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mcc-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 0.75rem;
}

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

.mcc-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
}

.mcc-price-row strong {
    font-size: 0.85rem;
    font-weight: 800;
    color: #16a34a;
}

.mcc-price-row span {
    font-size: 0.65rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcc-info h4 {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f172a;
    margin: 2px 0 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcc-info p {
    font-size: 0.68rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-profile-btn {
    background: var(--map-ink);
    color: #ffffff;
    border: 3px solid rgba(255, 255, 255, 0.86);
    font-size: 0.68rem;
    font-weight: 800;
}

.map-alert-dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 6px;
    height: 6px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    background: #e7816b;
}

.map-redesign-search-stack {
    position: absolute;
    z-index: 60;
    top: 82px;
    left: 24px;
    width: min(520px, calc(100% - 48px));
}

.map-search-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 15px;
    border: 1px solid rgba(54, 50, 54, 0.09);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 32px rgba(54, 50, 54, 0.11);
    backdrop-filter: blur(16px);
}

.map-search-route {
    width: 13px;
    height: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 13px;
}

.map-route-node {
    width: 9px;
    height: 9px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--map-ink);
}

.map-route-node.pickup {
    background: var(--map-green);
}

.map-route-node.destination {
    background: var(--map-orange);
}

.map-route-stem {
    width: 2px;
    flex: 1;
    margin: 2px 0;
    border-left: 2px dotted #b0b4ae;
}

.map-search-copy {
    flex: 1;
    min-width: 0;
}

.map-search-copy span,
.map-search-copy strong {
    display: block;
}

.map-search-copy span {
    color: var(--map-muted);
    font-size: 0.68rem;
    font-weight: 600;
}

.map-search-copy strong {
    margin-top: 3px;
    overflow: hidden;
    color: var(--map-ink);
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-search-action {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 0;
    border-radius: 13px;
    background: var(--map-ink);
    color: #ffffff;
    cursor: pointer;
}

.map-redesign-pills {
    gap: 7px;
    margin: 10px 0 0;
    padding: 2px 1px 5px;
    scrollbar-width: none;
}

.map-redesign-pills::-webkit-scrollbar {
    display: none;
}

.map-redesign-pills .map-pill-btn {
    border-color: rgba(54, 50, 54, 0.1);
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.9);
    color: #5c625f;
    box-shadow: 0 5px 14px rgba(54, 50, 54, 0.06);
    font-size: 0.68rem;
}

.map-redesign-pills .map-pill-btn.active,
.map-redesign-pills .map-pill-btn:hover {
    border-color: var(--map-ink);
    background: var(--map-ink);
    color: #ffffff;
}

.map-redesign-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#leaflet-map-canvas, .leaflet-map-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #e4ebe4;
}

/* Custom Interactive Leaflet Market Pin Badges */
.custom-market-pin-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.94);
    padding: 5px 11px 5px 8px;
    border-radius: 20px;
    border: 2px solid var(--accent-green);
    box-shadow: 0 4px 18px rgba(13, 92, 58, 0.22);
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s, box-shadow 0.2s;
    backdrop-filter: blur(10px);
}

.custom-market-pin-badge:hover,
.custom-market-pin-badge.active-pin {
    transform: scale(1.14);
    border-color: #f59e0b;
    background: #ffffff;
    box-shadow: 0 6px 22px rgba(245, 158, 11, 0.4);
    z-index: 1000 !important;
}

.custom-market-pin-badge .pin-emoji-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.custom-market-pin-badge .pin-text-block {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.custom-market-pin-badge .pin-text-block strong {
    font-size: 0.74rem;
    color: #122218;
    font-weight: 700;
}

.custom-market-pin-badge .pin-text-block span {
    font-size: 0.7rem;
    color: #15803d;
    font-weight: 800;
}

.map-search-input-wrapper {
    flex: 1;
    min-width: 0;
}

.map-search-input-wrapper input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
}

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


.map-river,
.map-road,
.map-park,
.map-route-line {
    position: absolute;
    pointer-events: none;
}

.map-river {
    z-index: 0;
    top: 61%;
    left: -18%;
    width: 138%;
    height: 18%;
    border-top: 6px solid rgba(255, 255, 255, 0.65);
    border-bottom: 3px solid rgba(141, 194, 199, 0.42);
    border-radius: 48% 52% 42% 58%;
    background: #b8dfe4;
    opacity: 0.86;
    transform: rotate(-12deg);
}

.map-road {
    z-index: 1;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    background: rgba(213, 219, 212, 0.62);
    box-shadow: 0 0 0 1px rgba(172, 181, 174, 0.3);
}

.road-one { width: 120%; height: 30px; top: 19%; left: -12%; transform: rotate(13deg); }
.road-two { width: 108%; height: 24px; top: 46%; left: -8%; transform: rotate(-24deg); }
.road-three { width: 105%; height: 22px; top: 75%; left: 9%; transform: rotate(21deg); }
.road-four { width: 24px; height: 120%; top: -8%; left: 28%; transform: rotate(19deg); }
.road-five { width: 21px; height: 120%; top: -8%; left: 61%; transform: rotate(-11deg); }
.road-six { width: 17px; height: 116%; top: -7%; left: 80%; transform: rotate(32deg); }

.map-park {
    z-index: 0;
    border-radius: 42% 58% 60% 40%;
    background: rgba(165, 212, 140, 0.42);
    transform: rotate(-17deg);
}

.park-one { width: 19%; height: 18%; top: 25%; left: 9%; }
.park-two { width: 22%; height: 14%; top: 67%; left: 74%; transform: rotate(18deg); }

.map-map-labels {
    position: absolute;
    inset: 0;
    z-index: 2;
    color: rgba(54, 50, 54, 0.38);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    pointer-events: none;
    text-transform: uppercase;
}

.map-map-labels span { position: absolute; }
.label-one { top: 17%; left: 54%; font-size: 0.72rem; }
.label-two { top: 37%; left: 66%; transform: rotate(-11deg); text-transform: none; letter-spacing: 0; }
.label-three { top: 28%; left: 28%; }
.label-four { top: 53%; left: 73%; }
.label-five { top: 76%; left: 39%; transform: rotate(21deg); text-transform: none; letter-spacing: 0; }

.map-route-line {
    z-index: 5;
    top: 54%;
    left: 36%;
    width: 22%;
    border-top: 3px dashed var(--map-orange);
    transform: rotate(-22deg);
    transform-origin: left center;
}

.map-user-location {
    position: absolute;
    z-index: 14;
    top: 56%;
    left: 35%;
    width: 38px;
    height: 38px;
}

.map-user-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(247, 181, 88, 0.22);
    animation: mapPulse 2.2s infinite ease-out;
}

.map-user-arrow {
    position: absolute;
    inset: 8px;
    display: grid;
    place-items: center;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: var(--map-ink);
    color: var(--map-orange);
    box-shadow: 0 4px 12px rgba(54, 50, 54, 0.22);
    font-size: 0.72rem;
}

@keyframes mapPulse {
    0% { transform: scale(0.75); opacity: 0.75; }
    70%, 100% { transform: scale(1.7); opacity: 0; }
}

.map-pin-item {
    position: absolute;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.map-pin-item:hover,
.map-pin-item.active {
    z-index: 30;
    transform: translate(-50%, -50%) scale(1.08);
}

.map-pin-item.is-hidden { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.75); }

.map-pin-dot {
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: var(--map-ink);
    color: var(--map-orange);
    box-shadow: 0 4px 14px rgba(54, 50, 54, 0.25);
    cursor: pointer;
    font-size: 0.76rem;
}

.map-pin-item:not(.active) .map-pin-dot { background: #ffffff; color: var(--map-ink); border-color: var(--map-green); }
.map-pin-item.active .map-pin-dot { border-color: var(--map-orange); box-shadow: 0 0 0 5px rgba(247, 181, 88, 0.22), 0 7px 16px rgba(54, 50, 54, 0.22); }
.map-pin-small .map-pin-dot { width: 31px; height: 31px; flex-basis: 31px; font-size: 0.65rem; }

.map-pin-label {
    min-width: 110px;
    padding: 7px 9px;
    border: 1px solid rgba(54, 50, 54, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 5px 14px rgba(54, 50, 54, 0.1);
    backdrop-filter: blur(8px);
}

.map-pin-label strong,
.map-pin-label span { display: block; }
.map-pin-label strong { color: var(--map-ink); font-size: 0.66rem; white-space: nowrap; }
.map-pin-label span { margin-top: 2px; color: #668368; font-size: 0.62rem; font-weight: 800; }

.map-live-badge {
    position: absolute;
    z-index: 45;
    top: 18px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid rgba(54, 50, 54, 0.08);
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.84);
    color: #6c756e;
    box-shadow: 0 7px 18px rgba(54, 50, 54, 0.07);
    font-size: 0.62rem;
    backdrop-filter: blur(12px);
}

.map-live-badge strong { color: #668e60; font-size: 0.58rem; letter-spacing: 0.08em; }
.map-live-pulse { width: 7px; height: 7px; border-radius: 50%; background: #7dc06d; box-shadow: 0 0 0 4px rgba(125, 192, 109, 0.15); }

.map-redesign-controls {
    top: 18px;
    right: 24px;
    gap: 8px;
    z-index: 48;
}

.map-redesign-controls .mfc-btn {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(54, 50, 54, 0.08);
    background: rgba(255, 255, 255, 0.9);
    color: var(--map-ink);
    box-shadow: 0 7px 18px rgba(54, 50, 54, 0.1);
    backdrop-filter: blur(10px);
}

.map-redesign-controls .mfc-btn.active,
.map-redesign-controls .mfc-btn:hover { background: var(--map-ink); color: var(--map-orange); }
.map-zoom-group { display: flex; flex-direction: column; overflow: hidden; border-radius: 50px; }
.map-zoom-group .mfc-btn { border-radius: 0; }
.map-zoom-group .mfc-btn + .mfc-btn { border-top: 0; }

/* ── Mobile View Back Button ── */
.map-mobile-back-btn {
    display: none;
    width: 36px;
    height: 36px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    color: #0f172a;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 8px;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.map-mobile-back-btn:hover {
    background: #f1f5f9;
}

@media (max-width: 768px) {
    .map-mobile-back-btn {
        display: inline-flex;
    }
}

/* ── Search & Category Filter Modal Overlay ── */
.map-search-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 16px 20px;
}

.map-search-modal-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    width: 100%;
    max-width: 580px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    animation: modalSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.msm-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #f1f5f9;
}

.msm-input-box {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 10px 14px;
    flex: 1;
}

.msm-search-icon {
    color: #16a34a;
    font-size: 1rem;
    margin-right: 10px;
}

.msm-input-box input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
}

.msm-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    color: #475569;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.msm-close-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.msm-body {
    padding: 18px;
}

.msm-section-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.map-modal-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.msm-quick-results {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.msm-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.msm-result-item:hover {
    background: #f1f5f9;
    border-color: #16a34a;
}

.map-bottom-sheet {
    position: absolute;
    z-index: 55;
    left: 24px;
    bottom: 24px;
    width: min(480px, calc(100% - 48px));
    max-height: calc(100% - 172px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 9px 18px 17px;
    border: 1px solid rgba(54, 50, 54, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 46px rgba(54, 50, 54, 0.19);
    scrollbar-width: none;
    display: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.map-bottom-sheet.open {
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.map-bottom-sheet::-webkit-scrollbar { display: none; }
.sheet-drag-handle { display: block; width: 100%; height: 17px; border: 0; background: transparent; cursor: pointer; }
.sheet-drag-handle span { display: block; width: 38px; height: 4px; margin: 0 auto; border-radius: 10px; background: #d5d9d3; }
.map-sheet-grabber-copy { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; color: #929791; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.map-sheet-collapse-btn { width: 25px; height: 25px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #f2f3ef; color: #6b716c; cursor: pointer; }
.map-sheet-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.map-status-row { display: flex; align-items: center; gap: 6px; color: #6c9765; font-size: 0.66rem; font-weight: 800; }
.map-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #73bc68; box-shadow: 0 0 0 4px rgba(115, 188, 104, 0.15); }
.map-updated { color: #a4aaa2; font-size: 0.59rem; font-weight: 600; }
.map-sheet-title-block h2 { margin: 6px 0 3px; color: var(--map-ink); font-size: 1.16rem; line-height: 1.15; letter-spacing: -0.04em; }
.map-sheet-title-block p { color: #858c85; font-size: 0.69rem; }
.map-sheet-title-block p i { margin-right: 3px; color: #9da69d; }
.map-favorite-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #e3e5df; border-radius: 50%; background: #ffffff; color: #6f766f; cursor: pointer; }
.map-favorite-btn.active { background: #fff4df; border-color: #f7b558; color: #c8852c; }

.map-sheet-metrics { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 7px; margin: 15px 0 13px; }
.map-sheet-metrics > div { min-width: 0; padding: 10px 9px; border-radius: 13px; background: #f6f7f3; }
.map-sheet-metrics span, .map-sheet-metrics small { display: block; }
.map-sheet-metrics span { overflow: hidden; color: #929991; font-size: 0.59rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.map-sheet-metrics strong { display: block; margin: 3px 0 1px; color: var(--map-ink); font-size: 0.82rem; white-space: nowrap; }
.map-sheet-metrics small { overflow: hidden; color: #a1a8a0; font-size: 0.57rem; text-overflow: ellipsis; white-space: nowrap; }
.map-sheet-metrics strong i { color: var(--map-orange); font-size: 0.72rem; }
.map-sheet-actions { display: grid; grid-template-columns: 1.15fr 1fr; gap: 7px; }
.map-sheet-actions .mfc-btn-primary, .map-sheet-actions .mfc-btn-outline { min-height: 40px; padding: 8px 10px; border-radius: 12px; font-size: 0.7rem; }
.map-sheet-actions .mfc-btn-primary { border: 0; background: var(--map-ink); color: #ffffff; }
.map-sheet-actions .mfc-btn-outline { border: 1px solid #e0e3dd; background: #ffffff; color: var(--map-ink); }
.map-sheet-actions button:hover { transform: translateY(-1px); }
.map-nearby-header { display: flex; align-items: center; justify-content: space-between; margin: 17px 0 7px; }
.map-nearby-header strong { color: var(--map-ink); font-size: 0.76rem; }
.map-nearby-header button { border: 0; background: transparent; color: #7d9b73; cursor: pointer; font-size: 0.64rem; font-weight: 800; }
.map-nearby-list { display: grid; gap: 6px; }
.map-nearby-item { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 7px 0; border: 0; border-top: 1px solid #eff1ed; background: transparent; text-align: left; cursor: pointer; }
.nearby-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; color: var(--map-ink); background: #edf4e9; font-size: 0.7rem; }
.nearby-icon.building { background: #fff2dd; }
.map-nearby-item strong, .map-nearby-item small { display: block; }
.map-nearby-item strong { color: var(--map-ink); font-size: 0.65rem; }
.map-nearby-item small { margin-top: 2px; color: #a0a69f; font-size: 0.58rem; }
.map-nearby-item b { color: #6c9365; font-size: 0.63rem; white-space: nowrap; }
.map-bottom-sheet.is-collapsed { max-height: 112px; overflow: hidden; }
.map-bottom-sheet.is-collapsed .map-sheet-metrics, .map-bottom-sheet.is-collapsed .map-sheet-actions, .map-bottom-sheet.is-collapsed .map-nearby-header, .map-bottom-sheet.is-collapsed .map-nearby-list { display: none; }
.map-bottom-sheet.is-collapsed .map-sheet-collapse-btn i { transform: rotate(180deg); }

@media (max-width: 768px) {
    body.map-page-active .sidebar { display: none; }
    body.map-page-active .mobile-bottom-nav { z-index: 1200; }
    .map-redesign-layer { min-height: 100dvh; }
    .map-redesign-header { top: max(12px, env(safe-area-inset-top)); left: 14px; right: 14px; }
    .map-brand-lockup { padding: 6px 10px 6px 6px; border-radius: 15px; }
    .map-brand-mark { width: 31px; height: 31px; border-radius: 11px; }
    .map-brand-kicker { font-size: 0.52rem; }
    .map-brand-lockup strong { font-size: 0.7rem; }
    .map-round-btn, .map-profile-btn { width: 38px; height: 38px; }
    .map-redesign-search-stack { top: 72px; left: 14px; width: calc(100% - 28px); }
    .map-search-card { padding: 10px 10px 10px 13px; border-radius: 16px; }
    .map-search-copy span { font-size: 0.63rem; }
    .map-search-copy strong { font-size: 0.8rem; }
    .map-search-action { width: 35px; height: 35px; flex-basis: 35px; border-radius: 11px; }
    .map-redesign-pills { margin-top: 8px; overflow-x: auto; }
    .map-redesign-pills .map-pill-btn { padding: 7px 10px; font-size: 0.63rem; }
    .map-live-badge { top: 165px; right: 14px; padding: 6px 9px; font-size: 0.57rem; }
    .map-redesign-controls { top: 205px; right: 14px; gap: 7px; }
    .map-redesign-controls .mfc-btn { width: 38px; height: 38px; }
    .map-map-labels { font-size: 0.55rem; }
    .map-pin-label { display: none; }
    .map-pin-item.active .map-pin-label { display: block; position: absolute; top: 42px; left: -36px; min-width: 98px; padding: 6px 8px; }
    .map-pin-dot { width: 35px; height: 35px; flex-basis: 35px; }
    .map-route-line { left: 35%; width: 28%; }
    body.map-page-active .mobile-bottom-nav { height: 58px; border-top: 0; background: rgba(255, 255, 255, 0.96); box-shadow: 0 -8px 22px rgba(54, 50, 54, 0.08); }
    body.map-page-active .m-nav-item { color: #9a9e99; font-size: 0.6rem; }
    body.map-page-active .m-nav-item i { font-size: 1rem; }
    body.map-page-active .m-nav-item.active { color: var(--map-ink); }
    body.map-page-active .m-nav-badge { display: none; }
    .map-bottom-sheet { left: 0; bottom: 58px; width: 100%; height: min(42vh, 360px); max-height: min(70vh, 520px); padding: 8px 18px max(17px, env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; }
    .map-sheet-title-block h2 { font-size: 1.05rem; }
    .map-sheet-title-block p { max-width: 280px; line-height: 1.35; }
    .map-sheet-metrics { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 13px; }
    .map-sheet-metrics > div { min-width: 0; padding: 9px 7px; }
    .map-sheet-metrics span { font-size: 0.54rem; }
    .map-sheet-metrics strong { font-size: 0.73rem; }
    .map-sheet-metrics small { font-size: 0.52rem; }
    .map-sheet-actions { width: 100%; min-width: 0; }
    .map-sheet-actions > * { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .map-sheet-actions .mfc-btn-primary, .map-sheet-actions .mfc-btn-outline { min-width: 0; padding-left: 8px; padding-right: 8px; font-size: 0.63rem; }
    .map-nearby-header { margin-top: 14px; }
}

@media (min-width: 769px) {
    .map-bottom-sheet.is-collapsed { max-height: 112px; }
}

/* ── Structural 2-Column Map Layout (Integrated Right Menu Sidebar) ── */
.map-redesign-canvas {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.map-left-area {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.map-right-sidebar {
    width: 340px;
    height: 100%;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    border-left: 1px solid #cbd5e1;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    z-index: 20;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .map-live-badge {
        right: 24px !important;
        left: auto !important;
    }

    .map-redesign-controls {
        right: 24px !important;
        left: auto !important;
        top: 72px !important;
    }
}

.mls-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
}

.mls-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.mls-kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.62rem;
    font-weight: 800;
    color: #16a34a;
    letter-spacing: 0.05em;
}

.mls-live-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
    animation: liveDotPulse 1.8s infinite ease-in-out;
}

@keyframes liveDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
}

.mls-title-row h3 {
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f172a;
    margin: 2px 0 0;
}

.mls-count-badge {
    font-size: 0.68rem;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    padding: 3px 9px;
    border-radius: 99px;
}

.mls-filter-mini-pills {
    display: flex;
    gap: 6px;
}

.mls-pill {
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mls-pill.active, .mls-pill:hover {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

.mls-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: none;
}

.mls-body::-webkit-scrollbar {
    display: none;
}

.mls-item {
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.mls-item:hover, .mls-item.active {
    transform: translateX(-2px);
    border-color: #16a34a;
    background: #f8fafc;
}

.mls-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mls-item-icon {
    font-size: 1.2rem;
}

.mls-item-info strong {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.15;
}

.mls-item-info span {
    display: block;
    font-size: 0.68rem;
    color: #64748b;
}

.mls-item-right {
    text-align: right;
}

.mls-item-price {
    display: block;
    font-size: 0.85rem;
    font-weight: 800;
    color: #16a34a;
    transition: color 0.3s ease;
}

.mls-item-trend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    font-size: 0.65rem;
    font-weight: 700;
}

.mls-item-trend.up { color: #16a34a; }
.mls-item-trend.down { color: #dc2626; }

/* ── Live Flash Pulse Animation on Price Change ── */
.price-pulse-up {
    animation: pulseFlashGreen 1.2s ease-out;
}

.price-pulse-down {
    animation: pulseFlashRed 1.2s ease-out;
}

@keyframes pulseFlashGreen {
    0% { background: #dcfce7; border-color: #16a34a; transform: scale(1.03); }
    50% { background: #bbf7d0; }
    100% { background: #ffffff; transform: scale(1); }
}

@keyframes pulseFlashRed {
    0% { background: #fee2e2; border-color: #dc2626; transform: scale(1.03); }
    50% { background: #fca5a5; }
    100% { background: #ffffff; transform: scale(1); }
}

@media (max-width: 768px) {
    .map-right-sidebar {
        display: none !important;
    }
}

/* ── Sidebar Market Detail Inspector View ── */
.mls-detail-header {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
}

.mls-back-btn {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease;
}

.mls-back-btn:hover {
    background: #e2e8f0;
}

.mls-detail-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
}

.mls-detail-body::-webkit-scrollbar {
    display: none;
}

.mls-cover-box {
    position: relative;
    width: 100%;
    height: 140px;
    background: #f1f5f9;
    overflow: hidden;
}

.mls-cover-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mls-status-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 99px;
}

.mls-detail-content {
    padding: 16px;
}

.mls-detail-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
}

.mls-detail-addr {
    font-size: 0.76rem;
    color: #64748b;
    margin-bottom: 14px;
}

.mls-price-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.mls-pc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mls-pc-label {
    font-size: 0.68rem;
    color: #64748b;
    font-weight: 600;
    display: block;
}

.mls-pc-price {
    font-size: 1.35rem;
    font-weight: 900;
    color: #16a34a;
    margin: 2px 0 0;
}

.mls-pc-sub {
    font-size: 0.72rem;
    color: #475569;
    font-weight: 600;
}

.mls-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.mls-stat-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
}

.mls-stat-box span {
    display: block;
    font-size: 0.65rem;
    color: #64748b;
}

.mls-stat-box strong {
    font-size: 0.88rem;
    color: #0f172a;
    font-weight: 800;
}

.mls-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 18px;
}

.mls-btn-primary, .mls-btn-outline {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
}

.mls-btn-primary {
    background: #0f172a;
    color: #ffffff;
}

.mls-btn-primary:hover {
    background: #1e293b;
}

.mls-btn-outline {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
}

.mls-nearby-section h4 {
    font-size: 0.8rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 8px;
}

.mls-nearby-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mls-nearby-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
}

.mls-nearby-item:hover {
    border-color: #16a34a;
}

.mni-icon { font-size: 1.1rem; margin-right: 8px; }
.mni-info strong { display: block; font-size: 0.76rem; color: #0f172a; }
.mni-info span { display: block; font-size: 0.66rem; color: #64748b; }
.mni-price { font-size: 0.8rem; color: #16a34a; font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════════════════
   ELEVATED SUBTLE MICRO-ANIMATIONS & INTERACTIVE MOTION SYSTEM (v2.0)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Global Easing & Smooth Transition Defaults ── */
button, 
.nav-item, 
.m-nav-item, 
.card, 
.market-card, 
.price-card, 
.modal-card, 
.popover-card,
.scout-card,
.btn-prof-primary,
.sign-in-btn,
.new-chat-action-btn,
.tag-btn,
.auth-tab-btn,
.mls-nearby-item {
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Interactive Hover Micro-Lifts & Shadows ── */
button:hover,
.btn-prof-primary:hover,
.new-chat-action-btn:hover,
.sign-in-btn:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 18px -4px rgba(21, 128, 61, 0.2);
}

button:active,
.btn-prof-primary:active,
.new-chat-action-btn:active,
.sign-in-btn:active {
    transform: translateY(0.5px) scale(0.98);
}

/* ── Button Icon Nudge on Hover ── */
button:hover i,
.btn-prof-primary:hover i,
.new-chat-action-btn:hover i {
    transform: scale(1.12);
    transition: transform 0.2s ease;
}

/* ── Navigation Item Subtle Lift & Accent ── */
.nav-item {
    position: relative;
    overflow: hidden;
}

.nav-item:hover i {
    transform: scale(1.15) translateY(-1px);
    color: #15803d;
    transition: transform 0.2s ease, color 0.2s ease;
}

.nav-item.active {
    background: #f0fdf4;
    color: #15803d;
    font-weight: 700;
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 4px;
    background: #15803d;
    border-radius: 0 4px 4px 0;
    animation: barSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes barSlideIn {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

/* ── Page View Transition (Fluid Fade & Slide) ── */
.page-view.active {
    animation: pageViewEntrance 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ── Modal Entrance Animation ── */
.modal-overlay.open .modal-card {
    animation: modalPopEntrance 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPopEntrance {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ── Live Status Dot Breathing Pulse ── */
.live-dot,
.map-status-dot,
.scout-status-dot.dot-active {
    animation: softLivePulse 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes softLivePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4);
    }
    50% {
        transform: scale(1.12);
        opacity: 0.85;
        box-shadow: 0 0 0 5px rgba(22, 163, 74, 0);
    }
}

/* ── Card Lift & Border Glow ── */
.card:hover,
.market-card:hover,
.price-card:hover,
.mls-nearby-item:hover {
    transform: translateY(-2.5px);
    border-color: #cbd5e1;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
}

/* ── Table Row Soft Hover Highlight ── */
table tbody tr {
    transition: background 0.15s ease;
}

table tbody tr:hover {
    background: #f8fafc;
}

/* ── Interactive Badge Subtle Shimmer ── */
.nav-earned-badge,
.m-nav-badge,
.prof-badge-icon {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-earned-badge:hover,
.m-nav-badge:hover {
    transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRICES & TRENDS PAGE ULTRA-COMPACT REDESIGN SYSTEM (Tight & Sleek v2.0)
   ═══════════════════════════════════════════════════════════════════════════ */

.prices-redesign-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── 1. Breadcrumbs Row ── */
.prices-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0;
}

.prices-breadcrumbs i {
    font-size: 0.6rem;
    color: #94a3b8;
}

.prices-breadcrumbs .active {
    color: #0f172a;
    font-weight: 700;
}

/* ── 2. Top Grid: Hero Card & Recent Reports ── */
.prices-top-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.prices-hero-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr 230px;
    gap: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.02);
}

.ph-title-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.ph-icon-box {
    font-size: 1.5rem;
    line-height: 1;
    padding: 6px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #f1f5f9;
}

.ph-name-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ph-name-wrap h2 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.verified-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    font-size: 0.65rem;
    font-weight: 700;
}

.ph-sub {
    font-size: 0.72rem;
    color: #64748b;
    margin: 2px 0 0;
}

.ph-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ph-btn-outline {
    padding: 5px 10px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ph-btn-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #64748b;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ph-stats-box {
    background: #fafafa;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 10px 12px;
}

.ph-stats-lbl {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
}

.ph-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 2px 0 6px;
}

.ph-main-price {
    font-size: 1.65rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.ph-trend-badge.green {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #15803d;
    font-weight: 700;
    font-size: 0.75rem;
}

.ph-meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.72rem;
    color: #64748b;
    border-top: 1px solid #e2e8f0;
    padding-top: 6px;
}

.ph-meta-row strong {
    color: #0f172a;
}

/* AI Recommendation Card Banner */
.prices-ai-recommendation-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 12px 14px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ai-rec-header {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 800;
    color: #15803d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 3px;
}

.prices-ai-recommendation-card h3 {
    font-size: 1.15rem;
    font-weight: 900;
    color: #14532d;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.prices-ai-recommendation-card p {
    font-size: 0.72rem;
    color: #166534;
    margin: 0 0 6px;
    line-height: 1.3;
    max-width: 82%;
}

.ai-rec-link {
    font-size: 0.68rem;
    font-weight: 700;
    color: #15803d;
    text-decoration: underline;
}

.ai-rec-mascot {
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-size: 2.2rem;
    opacity: 0.9;
}

/* Recent Verified Reports Column - Clean Redesign */
.prices-reports-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.pr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.pr-header h3 {
    font-size: 0.9rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pr-view-all {
    font-size: 0.75rem;
    font-weight: 700;
    color: #15803d;
    text-decoration: none;
    transition: color 0.15s;
}

.pr-view-all:hover {
    color: #166534;
    text-decoration: underline;
}

.pr-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pr-item {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    background: #fafafa;
    transition: all 0.2s ease;
}

.pr-item:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.pr-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.pr-left-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.pr-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.pr-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #15803d;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pr-avatar.alt1 { background: #0284c7; }
.pr-avatar.alt2 { background: #d97706; }
.pr-avatar.alt3 { background: #7c3aed; }
.pr-avatar.alt4 { background: #059669; }

.pr-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pr-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pr-prod-tag {
    font-size: 0.68rem;
    font-weight: 700;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
}

.pr-market-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr-sub-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    color: #64748b;
}

.pr-agent-by {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pr-mini-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #15803d;
    color: #ffffff;
    font-size: 0.5rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pr-mini-avatar.alt1 { background: #0284c7; }
.pr-mini-avatar.alt2 { background: #d97706; }
.pr-mini-avatar.alt3 { background: #7c3aed; }
.pr-mini-avatar.alt4 { background: #059669; }

.pr-time-inline {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #16a34a;
}

.pr-price-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 2px;
}

.pr-val {
    font-size: 0.88rem;
    font-weight: 800;
    color: #15803d;
    background: #f0fdf4;
    padding: 3px 8px;
    border-radius: 8px;
    border: 1px solid #dcfce7;
}

.pr-date-lbl {
    font-size: 0.65rem;
    color: #94a3b8;
}

.pr-item-latest {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    border-left: 4px solid #16a34a !important;
}


@keyframes alertRowPulse {
    0%, 100% {
        background: rgba(34, 197, 94, 0.05);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.2);
    }
    50% {
        background: rgba(34, 197, 94, 0.14);
        box-shadow: 0 0 10px 2px rgba(34, 197, 94, 0.25);
    }
}

.pr-avatar-wrap {
    position: relative;
    display: inline-block;
}

.avatar-pulse-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    background-color: #22c55e;
    border: 2px solid #ffffff;
    border-radius: 50%;
    animation: avatarDotPulse 1.5s infinite ease-out;
}

@keyframes avatarDotPulse {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.9);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);
    }
    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.pulse-beacon {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #22c55e;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
    animation: beaconFlash 1.2s infinite alternate ease-in-out;
}

@keyframes beaconFlash {
    from { opacity: 0.3; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1.25); box-shadow: 0 0 6px #22c55e; }
}

.pr-badge-new {
    font-size: 0.58rem;
    font-weight: 800;
    color: #15803d;
    background: #dcfce7;
    border: 1px solid #86efac;
    padding: 1px 5px;
    border-radius: 99px;
    letter-spacing: 0.05em;
    animation: badgePulse 2s infinite ease-in-out;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.08); background: #bbf7d0; opacity: 1; }
}

/* ── 3. 4-KPI Metrics Summary Row ── */
.prices-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.pk-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
}

.pk-lbl {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pk-lbl.emerald { color: #059669; }
.pk-lbl.green { color: #15803d; }
.pk-lbl.red { color: #dc2626; }
.pk-lbl.purple { color: #7c3aed; }
.pk-lbl.blue { color: #0284c7; }

.pk-val {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 2px 0 1px;
}

.pk-val.emerald { color: #059669; }
.pk-val.green { color: #15803d; }
.pk-val.red { color: #dc2626; }
.pk-val.purple { color: #7c3aed; }
.pk-val.blue { color: #0284c7; }

.pk-sub {
    font-size: 0.7rem;
    font-weight: 600;
    color: #475569;
}

.pk-time {
    font-size: 0.62rem;
    color: #94a3b8;
    margin-top: 1px;
}

/* ── 4. Price Trend Chart & Map Grid ── */
.prices-chart-map-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.prices-chart-card, .prices-map-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.02);
}

.pcc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 6px;
}

.pcc-header h3 {
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.pcc-time-pills {
    display: flex;
    gap: 3px;
    background: #f1f5f9;
    padding: 2px;
    border-radius: 6px;
    overflow-x: auto;
    max-width: 100%;
}

.pcc-pill {
    padding: 4px 9px;
    font-size: 0.68rem;
    font-weight: 700;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.pcc-pill:hover {
    color: #0f172a;
}

.pcc-pill.active {
    background: #ffffff;
    color: #15803d;
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.pcc-graph-area {
    position: relative;
    margin-bottom: 8px;
    touch-action: pan-y;
    overflow: visible;
}

.pcc-tooltip-box {
    position: absolute;
    top: 6px;
    left: 32%;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(4px);
    border: 1px solid #cbd5e1;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.68rem;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: left 0.15s ease-out, opacity 0.2s ease, visibility 0.2s ease;
    transform: translateX(-50%);
    white-space: nowrap;
}

.pcc-tooltip-box.visible {
    opacity: 1;
    visibility: visible;
}

#pcc-guide-line,
#pcc-guide-dot {
    opacity: 0;
    transition: opacity 0.2s ease;
}

#pcc-guide-line.visible,
#pcc-guide-dot.visible {
    opacity: 1;
}


.pcc-tooltip-header {
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 2px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 2px;
}

.pcc-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #475569;
}

.pcc-tooltip-row.green strong { color: #15803d; }
.pcc-tooltip-row.red strong { color: #dc2626; }

.pcc-svg {
    width: 100%;
    height: auto;
    min-height: 140px;
    max-height: 200px;
    display: block;
}

.pcc-svg path {
    transition: d 0.4s ease, stroke 0.3s ease;
    vector-effect: non-scaling-stroke;
}

.pcc-svg line, .pcc-svg circle {
    transition: cx 0.15s ease-out, cy 0.15s ease-out;
}

.svg-axis-lbl {
    font-size: 9px;
    fill: #94a3b8;
    font-weight: 600;
}

.pcc-x-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: #64748b;
    padding: 0 20px 0 35px;
    margin-top: 4px;
    gap: 4px;
}

.pcc-x-labels span {
    cursor: pointer;
    transition: color 0.15s;
}

.pcc-x-labels span:hover {
    color: #0f172a;
}

.pcc-x-labels .active {
    font-weight: 800;
    color: #15803d;
}

.pcc-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 0.7rem;
    color: #475569;
    font-weight: 600;
    margin-top: 6px;
    border-top: 1px solid #f1f5f9;
    padding-top: 6px;
}

.legend-line {
    display: inline-block;
    width: 14px;
    height: 3px;
    vertical-align: middle;
    margin-right: 4px;
}

.legend-line.solid-green { background: #15803d; }
.legend-line.dotted-green { background: #86efac; }
.legend-line.dotted-red { background: #ef4444; }

/* Map Card */
.pmc-select {
    padding: 3px 6px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    font-size: 0.7rem;
    font-weight: 700;
    color: #334155;
    background: #ffffff;
}

.pmc-map-canvas {
    height: 165px;
    background: #f8fafc;
    border-radius: 10px;
    position: relative;
    border: 1px solid #f1f5f9;
    overflow: hidden;
}

.map-price-pin {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}

.pin-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #15803d;
    box-shadow: 0 0 0 2px rgba(21, 128, 61, 0.2);
}

.pin-dot.red { background: #dc2626; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2); }
.pin-dot.green { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.3); }

.pin-tag {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 0.62rem;
    color: #0f172a;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    white-space: nowrap;
}

.pin-tag.green { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.pin-tag.red { border-color: #fecaca; background: #fef2f2; color: #991b1b; }

.pmc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.68rem;
    color: #64748b;
    margin-top: 6px;
}

.pmc-gradient-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.64rem;
    font-weight: 700;
}

.pmc-bar {
    width: 50px;
    height: 5px;
    border-radius: 4px;
    background: linear-gradient(to right, #16a34a, #eab308, #dc2626);
}

/* ── 5. Where to Buy Today Section ── */
.where-to-buy-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.02);
}

.wtb-header h3 {
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.wtb-header p {
    font-size: 0.72rem;
    color: #64748b;
    margin: 1px 0 10px;
}

.wtb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.wtb-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.wtb-img-wrap {
    height: 65px;
    background: #f8fafc;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wtb-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    border-radius: 14px;
    font-size: 0.62rem;
    font-weight: 800;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.wtb-badge.green { color: #15803d; border: 1px solid #bbf7d0; }
.wtb-badge.blue { color: #0284c7; border: 1px solid #bae6fd; }
.wtb-badge.yellow { color: #d97706; border: 1px solid #fef08a; }

.wtb-img-bg {
    font-size: 2rem;
}

.wtb-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wtb-body h4 {
    font-size: 0.82rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
}

.wtb-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
}

.wtb-price-row strong {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.wtb-save-badge {
    padding: 1px 5px;
    background: #f0fdf4;
    color: #15803d;
    font-weight: 700;
    font-size: 0.65rem;
    border-radius: 4px;
}

.wtb-dist-sub {
    font-size: 0.68rem;
    color: #64748b;
}

.wtb-meta {
    font-size: 0.68rem;
    color: #64748b;
    margin-bottom: 2px;
}

.wtb-confidence {
    font-size: 0.68rem;
    color: #475569;
    margin-bottom: 8px;
}

.wtb-confidence .green-text {
    color: #15803d;
    font-weight: 700;
}

.wtb-btn {
    width: 100%;
    padding: 6px;
    background: #15803d;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: auto;
}

/* ── 6. 3-Column Intelligence & Prediction Row ── */
.prices-intelligence-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.02);
}

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

.pi-header h3 {
    font-size: 0.85rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.pi-body-text {
    font-size: 0.72rem;
    color: #334155;
    line-height: 1.35;
    margin-bottom: 6px;
}

.pi-callout {
    background: #f0fdf4;
    border: 1px dashed #bbf7d0;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #15803d;
    margin-bottom: 8px;
}

.pi-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.68rem;
    color: #64748b;
    margin-top: auto;
}

.pi-pepper-icon {
    font-size: 1.1rem;
}

/* Market Intelligence List */
.mi-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mi-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: #475569;
}

.mi-pill {
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.65rem;
}

.mi-pill.green { background: #f0fdf4; color: #15803d; }
.mi-pill.yellow { background: #fefce8; color: #ca8a04; }
.mi-text.green { color: #15803d; font-weight: 700; }

/* Price Prediction BETA */
.beta-pill {
    background: #f0fdf4;
    color: #15803d;
    font-size: 0.58rem;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 800;
}

.pp-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.pp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
}

.pp-row strong {
    font-size: 0.72rem;
    color: #0f172a;
}

.pp-val-box {
    text-align: right;
}

.pp-val-box strong {
    font-size: 0.82rem;
    display: block;
}

.pp-val-box small {
    display: block;
    font-size: 0.6rem;
    color: #94a3b8;
}

.pp-alert-btn {
    width: 100%;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    margin-top: auto;
}

/* ── 7. Bottom Grid: Verified Photos & Set Alert ── */
.prices-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 310px;
    gap: 12px;
}

.photos-card, .set-alert-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.02);
}

.photos-header, .sac-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.photos-header h3, .sac-header h3 {
    font-size: 0.85rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.photos-header a {
    font-size: 0.7rem;
    font-weight: 700;
    color: #15803d;
    text-decoration: none;
}

.sac-header p {
    font-size: 0.68rem;
    color: #64748b;
    margin: 1px 0 0;
}

.photos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.photo-item {
    height: 75px;
    border-radius: 10px;
    background: #f1f5f9;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.photo-item.photo1 { background: #fee2e2 url('https://images.unsplash.com/photo-1586201375761-83865001e31c?w=300&auto=format&fit=crop&q=80') center/cover; }
.photo-item.photo2 { background: #fef3c7 url('https://images.unsplash.com/photo-1592924357228-91a4daadcfea?w=300&auto=format&fit=crop&q=80') center/cover; }
.photo-item.photo3 { background: #dcfce7 url('https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=300&auto=format&fit=crop&q=80') center/cover; }
.photo-item.photo4 { background: #e0e7ff url('https://images.unsplash.com/photo-1620706857370-e1b9770e8bb1?w=300&auto=format&fit=crop&q=80') center/cover; }

.photo-overlay {
    width: 100%;
    padding: 4px 6px;
    background: linear-gradient(to top, rgba(15,23,42,0.85) 0%, transparent 100%);
    color: #ffffff;
}

.photo-overlay strong { display: block; font-size: 0.68rem; }
.photo-overlay span { display: block; font-size: 0.58rem; color: #cbd5e1; }

.sac-pills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 8px 0 10px;
}

.sac-pill {
    padding: 4px 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}

.sac-pill:hover {
    border-color: #15803d;
    color: #15803d;
    background: #f0fdf4;
}

.sac-action-btn {
    width: 100%;
    padding: 8px;
    background: #15803d;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Transient Toast Notification Layer */
.toast-region {
    position: fixed;
    top: 76px;
    right: 24px;
    width: min(380px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100000;
    pointer-events: none;
}

.toast-notification {
    --toast-accent: #15803d;
    --toast-surface: #f0fdf4;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 36px 15px 13px;
    overflow: hidden;
    color: #1e293b;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--toast-accent);
    border-radius: 13px;
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.16), 0 3px 8px rgba(15, 23, 42, 0.06);
    pointer-events: auto;
    animation: toastEnter 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.toast-price { --toast-accent: #15803d; --toast-surface: #f0fdf4; }
.toast-inbox { --toast-accent: #2563eb; --toast-surface: #eff6ff; }
.toast-success { --toast-accent: #16a34a; --toast-surface: #f0fdf4; }
.toast-error { --toast-accent: #dc2626; --toast-surface: #fef2f2; }
.toast-info { --toast-accent: #64748b; --toast-surface: #f8fafc; }

.toast-notification.is-leaving {
    animation: toastExit 0.22s ease-in both;
}

.toast-icon {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    color: var(--toast-accent);
    background: var(--toast-surface);
    border-radius: 9px;
    font-size: 0.9rem;
}

.toast-content {
    min-width: 0;
    padding-top: 1px;
}

.toast-kicker {
    margin-bottom: 3px;
    color: var(--toast-accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.toast-message {
    color: #334155;
    font-size: 0.79rem;
    line-height: 1.42;
}

.toast-message strong {
    color: #0f172a;
    font-weight: 800;
}

.toast-dismiss {
    position: absolute;
    top: 9px;
    right: 9px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #94a3b8;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.72rem;
}

.toast-dismiss:hover {
    color: #334155;
    background: #f1f5f9;
}

.toast-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--toast-accent);
    transform-origin: left center;
    animation: toastProgress 6.5s linear both;
}

@keyframes toastEnter {
    from { opacity: 0; transform: translate3d(24px, 0, 0) scale(0.98); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes toastExit {
    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    to { opacity: 0; transform: translate3d(20px, 0, 0) scale(0.98); }
}

@keyframes toastProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (max-width: 768px) {
    .toast-region {
        top: 64px;
        right: 16px;
        left: 16px;
        width: auto;
    }
}

@media (max-width: 768px) {
    .prices-redesign-container {
        padding: 10px 12px 24px;
    }

    .prices-top-grid,
    .prices-chart-map-grid,
    .wtb-grid,
    .prices-intelligence-row,
    .prices-bottom-grid {
        grid-template-columns: 1fr;
    }

    .prices-kpi-row,
    #page-prices .prices-kpi-row {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
    }

    .pk-card,
    #page-prices .prices-kpi-row .pk-card {
        padding: 5px 6px !important;
        border-radius: 8px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .pk-lbl {
        font-size: 0.52rem !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .pk-val {
        font-size: 0.85rem !important;
        font-weight: 800 !important;
        margin: 1px 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .pk-sub {
        font-size: 0.56rem !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .pk-time {
        font-size: 0.50rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    .prices-hero-card {
        grid-template-columns: 1fr;
    }

    .prices-hero-card,
    .prices-reports-card,
    .prices-chart-card,
    .prices-map-card,
    .where-to-buy-section,
    .pi-card,
    .photos-card,
    .set-alert-card {
        padding: 12px;
    }

    .prices-ai-recommendation-card {
        min-width: 0;
        order: 2;
    }

    .ph-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .ph-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }

    .ph-actions button {
        flex: 1 1 46%;
        min-width: 0;
    }

    .pr-item {
        flex-wrap: wrap;
        gap: 8px;
        align-items: flex-start;
    }

    .pr-avatar-col {
        min-width: 0;
        flex: 1 1 100%;
    }

    .pr-avatar-col strong {
        font-size: 0.78rem;
    }

    .pcc-tooltip-box {
        left: 8px;
        right: 8px;
        width: auto;
        max-width: calc(100% - 16px);
    }

    .pcc-x-labels {
        padding: 0 10px;
        gap: 4px;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .pcc-legend {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pmc-map-canvas {
        height: 200px;
    }

    .pmc-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .pin-tag {
        font-size: 0.58rem;
    }

    .wtb-body h4,
    .wtb-price-row strong {
        font-size: 0.95rem;
    }

    .wtb-btn {
        padding: 10px;
    }
}

/* Additional dedicated prices mobile layout for phones and small tablets */
@media (max-width: 1024px) {
    #page-prices .view-container {
        padding: 10px 12px 20px;
    }

    #page-prices .prices-redesign-container {
        gap: 14px;
    }

    #page-prices .prices-top-grid,
    #page-prices .prices-chart-map-grid,
    #page-prices .wtb-grid,
    #page-prices .prices-intelligence-row,
    #page-prices .prices-bottom-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }


    #page-prices .prices-hero-card,
    #page-prices .prices-reports-card,
    #page-prices .prices-chart-card,
    #page-prices .prices-map-card,
    #page-prices .where-to-buy-section,
    #page-prices .pi-card,
    #page-prices .photos-card,
    #page-prices .set-alert-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    #page-prices .prices-hero-card {
        grid-template-columns: 1fr !important;
    }

    #page-prices .prices-ai-recommendation-card {
        order: 2;
        margin-top: 10px;
    }

    #page-prices .ph-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    #page-prices .ph-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }

    #page-prices .ph-actions button {
        flex: 1 1 48%;
        min-width: 0;
    }

    #page-prices .prices-kpi-row .pk-card {
        padding: 12px;
    }

    #page-prices .pcc-tooltip-box {
        left: 8px;
        right: 8px;
        width: auto;
        max-width: calc(100% - 16px);
        position: relative;
    }

    #page-prices .pcc-x-labels {
        padding: 0 10px;
        gap: 4px;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #page-prices .pmc-map-canvas {
        height: 220px;
    }

    #page-prices .pmc-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    #page-prices .pin-tag {
        font-size: 0.58rem;
    }

    #page-prices .wtb-card {
        min-height: 140px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   🎡 MAMAPRICE REWARDS & SPIN-TO-WIN STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.rewards-page-container {
    padding: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.rewards-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #052e16 0%, #15803d 100%);
    border-radius: 16px;
    padding: 24px 30px;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(21, 128, 61, 0.2);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.rewards-hero-header .rh-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.rewards-hero-header h2 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.rewards-hero-header p {
    font-size: 0.9rem;
    color: #dcfce7;
    max-width: 550px;
}

.spin-counter-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 12px 20px;
    border-radius: 14px;
    backdrop-filter: blur(10px);
}

.spin-counter-icon {
    font-size: 2rem;
}

.spin-label {
    display: block;
    font-size: 0.75rem;
    color: #bbf7d0;
    font-weight: 600;
}

.spin-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
}

/* Progress & Tracker Bar */
.rewards-progress-card {
    background: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.rpc-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.88rem;
}

.rpc-bar-outer {
    width: 100%;
    height: 10px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.rpc-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, #16a34a, #eab308);
    border-radius: 10px;
    transition: width 0.4s ease;
}

/* Main Wheel Stage */
.wheel-stage-card {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 30px;
    background: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 18px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.wheel-container-wrapper {
    position: relative;
    width: 380px;
    height: 380px;
    margin: 0 auto;
}

.wheel-pointer {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 24px solid #ef4444;
    z-index: 20;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

#rewards-wheel-canvas {
    border-radius: 50%;
    box-shadow: 0 8px 30px rgba(21, 128, 61, 0.15);
}

.wheel-center-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: linear-gradient(135deg, #15803d, #166534);
    color: #ffffff;
    border: 4px solid #ffffff;
    font-weight: 900;
    font-size: 0.95rem;
    letter-spacing: 1px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wheel-center-btn:hover {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 6px 20px rgba(21, 128, 61, 0.4);
}

.wheel-prizes-preview h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 14px;
}

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

.prize-pill {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s;
}

.prize-pill:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* How to Earn Grid */
.earn-spins-section {
    margin-bottom: 25px;
}

.earn-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.earn-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.earn-card:hover {
    transform: translateY(-2px);
    border-color: #15803d;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.earn-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.earn-icon-box.green { background: #dcfce7; color: #15803d; }
.earn-icon-box.purple { background: #f3e8ff; color: #7c3aed; }
.earn-icon-box.gold { background: #fef3c7; color: #d97706; }
.earn-icon-box.blue { background: #dbeafe; color: #2563eb; }

.earn-card h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.earn-card p {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 2px;
}

.earn-badge {
    align-self: flex-start;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
}

/* Reward Wallet & History Tabs */
.rewards-wallet-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.rw-tabs-nav {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.rw-tab-btn {
    background: none;
    border: none;
    font-size: 0.9rem;
    font-weight: 700;
    color: #64748b;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.15s, background 0.15s;
}

.rw-tab-btn.active {
    background: #f0fdf4;
    color: #15803d;
}

.vouchers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.voucher-item-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.voucher-item-card:hover {
    border-color: #15803d;
    box-shadow: 0 4px 12px rgba(21, 128, 61, 0.1);
}

.vc-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.vc-icon { font-size: 1.5rem; }

.vc-status-badge {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
}

.vc-status-badge.available { background: #dcfce7; color: #15803d; }

.vc-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
}

.vc-partner { font-size: 0.8rem; color: #475569; margin: 4px 0; }
.vc-location { font-size: 0.75rem; color: #64748b; margin-bottom: 12px; }

.vc-code-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px dashed #cbd5e1;
}

.vc-code-row code { font-weight: 800; color: #0f172a; font-size: 0.82rem; }

.vc-claim-btn {
    background: #15803d;
    color: #ffffff;
    border: none;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

/* History Table */
.rw-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.rw-history-table th, .rw-history-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
}

.rw-history-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
}

.status-pill {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
}

.status-pill.available { background: #dcfce7; color: #15803d; }
.status-pill.redeemed { background: #e0f2fe; color: #0284c7; }
.status-pill.cancelled { background: #f1f5f9; color: #64748b; }

/* Admin Rewards Layout */
.admin-rewards-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 25px;
}

.form-group-row {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.form-group-row .fg {
    flex: 1;
}

.fg label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 4px;
}

.fg input, .fg select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.82rem;
    outline: none;
}

.analytics-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.metric-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 12px;
    border-radius: 10px;
}

.m-lbl { display: block; font-size: 0.75rem; color: #64748b; font-weight: 600; }
.m-val { font-size: 1.3rem; font-weight: 800; color: #0f172a; margin-top: 4px; display: block; }
.m-val.green { color: #15803d; }

/* Compact Widgets on Home & Agent */
.home-rewards-banner, .agent-rewards-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    padding: 14px 20px;
    margin: 15px 0 20px 0;
}

.hr-left, .arc-left { display: flex; align-items: center; gap: 14px; }
.hr-icon-ring, .arc-badge { font-size: 1.8rem; }

.hr-title, .arc-info h3 { font-size: 0.95rem; font-weight: 800; color: #0f172a; }
.hr-sub, .arc-info p { font-size: 0.82rem; color: #475569; }

.hr-spin-btn, .arc-btn {
    background: #15803d;
    color: #ffffff;
    border: none;
    padding: 9px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(21, 128, 61, 0.2);
}

/* Modals */
.celebration-card, .voucher-modal-card {
    max-width: 420px;
    text-align: center;
    padding: 24px;
}

.win-icon-wrapper { font-size: 3.5rem; margin-bottom: 6px; }
.win-tag { background: #dcfce7; color: #15803d; font-weight: 800; font-size: 0.72rem; padding: 4px 10px; border-radius: 20px; }

.win-code-box {
    background: #f8fafc;
    border: 1px dashed #15803d;
    padding: 12px;
    border-radius: 10px;
    margin: 15px 0;
}

.code-lbl { display: block; font-size: 0.7rem; color: #64748b; font-weight: 700; }
.code-val { font-size: 1.3rem; font-weight: 900; color: #15803d; letter-spacing: 1px; }

.modal-actions-row { display: flex; gap: 10px; justify-content: center; margin-top: 15px; }

.vd-qr-stage { margin: 15px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vd-code-display { font-size: 1.2rem; font-weight: 900; color: #0f172a; letter-spacing: 1px; }
.vd-location { font-size: 0.8rem; color: #64748b; }
.vd-instructions { text-align: left; background: #f8fafc; padding: 12px; border-radius: 10px; font-size: 0.8rem; color: #334155; }
.vd-instructions ol { padding-left: 18px; margin-top: 4px; }

/* Responsive adjustments */
@media (max-width: 900px) {
    .wheel-stage-card { grid-template-columns: 1fr; }
    .earn-grid { grid-template-columns: repeat(2, 1fr); }
    .vouchers-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-rewards-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .wheel-container-wrapper { width: 320px; height: 320px; }
    #rewards-wheel-canvas { width: 320px; height: 320px; }
    .earn-grid { grid-template-columns: 1fr; }
    .vouchers-grid { grid-template-columns: 1fr; }
    .rewards-hero-header { flex-direction: column; align-items: flex-start; gap: 15px; }
}

/* Spin Wheel Image Asset Styling */
.hsb-logo-img {
    height: 22px;
    width: 22px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}

.nav-spin-icon-img {
    height: 20px;
    width: 20px;
    object-fit: contain;
    margin-right: 4px;
    vertical-align: middle;
}

.wheel-stage-header {
    text-align: center;
    margin-bottom: 12px;
}

.wheel-stage-logo-img {
    max-height: 85px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.12));
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wheel-stage-logo-img:hover {
    transform: scale(1.04) rotate(-2deg);
}

.qa-icon-img {
    height: 24px;
    width: 24px;
    object-fit: contain;
}

/* Compact Header Spin & Win Trigger Button */
.header-spin-btn {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    padding: 5px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: #15803d;
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
    box-shadow: 0 2px 6px rgba(21, 128, 61, 0.08);
    flex-shrink: 0;
}

.header-spin-btn:hover {
    transform: translateY(-1px);
    background: #dcfce7;
    border-color: #86efac;
}

.hsb-icon {
    font-size: 1rem;
    line-height: 1;
}

.hsb-text {
    display: inline-block;
}

@media (max-width: 480px) {
    .hsb-text {
        display: none;
    }
    .header-spin-btn {
        padding: 5px 8px;
    }
}

.hsb-badge {
    background: #15803d;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    line-height: 1;
}

#page-rewards {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.rewards-page-container {
    padding: 16px;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.rewards-balance-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
    width: 100%;
    box-sizing: border-box;
}

.balance-pill-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.15s, border-color 0.15s;
}

.balance-pill-card:hover {
    transform: translateY(-2px);
    border-color: #15803d;
}

.balance-pill-card.green {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.bp-icon { font-size: 1.4rem; flex-shrink: 0; }

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

.bp-label {
    display: block;
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-val {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-val i { font-size: 0.7rem; color: #94a3b8; }

/* Responsive Main Layout Container */
.rewards-main-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 860px) {
    .rewards-main-layout {
        display: grid;
        grid-template-columns: 380px 1fr;
        gap: 22px;
        align-items: start;
    }
}

.rewards-left-column, .rewards-right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Quick Action Icon Grid (4 Cards) */
.quick-actions-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.qa-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 6px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.qa-item:hover {
    transform: translateY(-2px);
    border-color: #15803d;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.qa-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.qa-icon-box.green-tint { background: #dcfce7; }
.qa-icon-box.pink-tint { background: #fce7f3; }
.qa-icon-box.yellow-tint { background: #fef3c7; }
.qa-icon-box.teal-tint { background: #ccfbf1; }

.qa-item span {
    font-size: 0.75rem;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Wheel Stage Container & Fluid Scaling */
.wheel-stage-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 16px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.wheel-container-wrapper {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#rewards-wheel-canvas {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    display: block;
}

.wheel-prizes-preview {
    margin-top: 16px;
    width: 100%;
    box-sizing: border-box;
}

.wheel-prizes-preview h4 {
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 10px;
    text-align: center;
}

.prizes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}

.prize-pill {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #334155;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    box-sizing: border-box;
}

/* Refer & Earn Milestone Card (Light Theme Commerce Style) */
.refer-earn-card {
    background: #ffffff;
    border: 1px solid #bbf7d0;
    border-radius: 16px;
    padding: 18px;
    color: #0f172a;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 14px rgba(21, 128, 61, 0.05);
}

.rec-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.rec-header h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}

.rec-header p {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 2px;
}

.rec-more-btn {
    background: none;
    border: none;
    color: #15803d;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

.rec-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
    width: 100%;
    box-sizing: border-box;
}

.rec-cash-badge {
    width: 100%;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    box-sizing: border-box;
}

.rec-cash-val {
    display: block;
    font-size: 1.3rem;
    font-weight: 900;
    color: #15803d;
}

.rec-cash-lbl {
    font-size: 0.72rem;
    color: #166534;
    font-weight: 600;
}

.rec-milestones-track {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 14px 10px 0 10px;
    box-sizing: border-box;
}

.rec-progress-line {
    position: absolute;
    top: 26px;
    left: 12%;
    right: 12%;
    height: 4px;
    background: #e2e8f0;
    z-index: 1;
}

.rec-fill-line {
    height: 100%;
    background: linear-gradient(90deg, #15803d, #22c55e);
    border-radius: 3px;
}

.milestone-step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.m-reward-tag {
    font-size: 0.7rem;
    font-weight: 800;
    color: #475569;
    margin-bottom: 3px;
}

.m-node {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f8fafc;
    border: 2px solid #cbd5e1;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
}

.milestone-step.reached .m-node {
    background: #15803d;
    border-color: #15803d;
    color: #ffffff;
}

.m-label {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 3px;
    white-space: nowrap;
}

.rec-invite-btn {
    width: 100%;
    padding: 11px;
    background: linear-gradient(135deg, #15803d, #0f5128);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.88rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(21, 128, 61, 0.2);
}

/* Daily Bonus Card */
.daily-bonus-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    width: 100%;
    box-sizing: border-box;
}

.dbc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.dbc-header h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}

.dbc-timer-capsule {
    background: #0f172a;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.task-list-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.task-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
    width: 100%;
    box-sizing: border-box;
}

.task-row:last-child { border-bottom: none; padding-bottom: 0; }

.task-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.task-icon-box.purple { background: #f3e8ff; color: #7c3aed; }
.task-icon-box.blue { background: #dbeafe; color: #2563eb; }
.task-icon-box.green { background: #dcfce7; color: #15803d; }

.task-info { flex: 1; min-width: 0; }
.task-info h4 { font-size: 0.85rem; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-info p { font-size: 0.72rem; color: #64748b; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.task-action-btn {
    background: #f1f5f9;
    color: #15803d;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    padding: 4px 16px;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* Redeem Promo Code Card */
.promo-code-card {
    background: #ffffff;
    border: 1px solid #bbf7d0;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 14px rgba(21, 128, 61, 0.05);
}

.pcc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.pcc-icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.pcc-info h4 {
    font-size: 0.98rem;
    font-weight: 800;
    color: #0f172a;
}

.pcc-info p {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 2px;
}

.pcc-info code {
    background: #f1f5f9;
    color: #15803d;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.72rem;
}

.promo-input-row {
    display: flex;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.promo-input-row input {
    flex: 1;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.promo-input-row input:focus {
    border-color: #15803d;
    background: #ffffff;
}

.apply-promo-btn {
    background: #15803d;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.apply-promo-btn:hover {
    background: #0f5128;
}

/* My Coupons Section & Light Ticket Cutout Cards */
.my-coupons-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

.mc-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.mc-header-row h3 { font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.mc-help-icon { font-size: 1.05rem; color: #64748b; cursor: pointer; }

.coupons-tabs-bar {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 8px;
    margin-bottom: 16px;
    width: 100%;
    box-sizing: border-box;
}

.c-tab-btn {
    background: none;
    border: none;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.c-tab-btn.active {
    color: #15803d;
}

.c-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 3px;
    background: #15803d;
    border-radius: 3px;
}

.coupons-list-stage {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 900px) {
    .coupons-list-stage {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

/* Light Theme Realistic Ticket Card Layout with Side Cutout Notches */
.ticket-coupon-card {
    display: flex;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.ticket-coupon-card:hover {
    transform: translateY(-2px);
    border-color: #15803d;
}

.ticket-coupon-card.expired, .ticket-coupon-card.used {
    background: #f8fafc;
    opacity: 0.85;
}

.ticket-left {
    flex: 1;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.ticket-icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f3e8ff;
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ticket-info { min-width: 0; flex: 1; }
.ticket-info h4 { font-size: 0.9rem; font-weight: 800; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-info p { font-size: 0.75rem; color: #64748b; margin: 2px 0 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-info .valid-date { font-size: 0.7rem; color: #94a3b8; display: block; }

.ticket-right-stub {
    width: 96px;
    flex-shrink: 0;
    background: #f8fafc;
    border-left: 2px dashed #cbd5e1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    position: relative;
}

.ticket-right-stub .stub-val {
    font-size: 1.15rem;
    font-weight: 900;
    color: #15803d;
    margin-bottom: 4px;
}

.ticket-coupon-card.expired .stub-val { color: #94a3b8; }

.ticket-right-stub .stub-btn {
    background: #15803d;
    color: #ffffff;
    border: none;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
}

.ticket-coupon-card.expired .stub-btn {
    background: #e2e8f0;
    color: #64748b;
}

/* Semi-Circle Notches for Ticket Cutout Effect */
.ticket-notch-top {
    position: absolute;
    top: -8px;
    right: 90px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    z-index: 5;
}

.ticket-notch-bottom {
    position: absolute;
    bottom: -8px;
    right: 90px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    z-index: 5;
}

/* Empty Coupons View (Ref Image 3) */
.empty-coupons-view {
    text-align: center;
    padding: 40px 20px;
    grid-column: 1 / -1;
}

.empty-clipboard-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 12px auto;
}

.empty-coupons-view h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
}

.empty-coupons-view p {
    font-size: 0.8rem;
    color: #64748b;
    max-width: 280px;
    margin: 0 auto 16px auto;
}

.get-coupon-btn {
    background: #15803d;
    color: #ffffff;
    border: none;
    padding: 9px 26px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Social Share Drawer Modal (Ref Image 2) */
.share-sheet-card {
    max-width: 400px;
    padding: 24px;
    text-align: center;
    width: 90%;
}

.share-invite-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.share-app-icon { font-size: 2.2rem; margin-bottom: 6px; }

.copy-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 10px;
}

.share-url-text { font-size: 0.75rem; color: #475569; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.copy-btn { background: none; border: none; font-size: 1.05rem; color: #15803d; cursor: pointer; }

.share-divider {
    position: relative;
    text-align: center;
    margin: 16px 0;
}

.share-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e2e8f0;
}

.share-divider span {
    position: relative;
    background: #ffffff;
    padding: 0 10px;
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 700;
}

.social-share-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.social-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.social-btn i {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #ffffff;
}

.social-btn.whatsapp i { background: #22c55e; }
.social-btn.facebook i { background: #2563eb; }
.social-btn.sms i { background: #84cc16; }
.social-btn.telegram i { background: #0284c7; }

.social-btn span { font-size: 0.72rem; font-weight: 700; color: #334155; }

/* Mobile Portrait Optimizations */
@media (max-width: 480px) {
    .rewards-page-container { padding: 8px; }
    .mrh-balance-row { grid-template-columns: 1fr 1fr; gap: 6px; }
    .balance-pill-card { padding: 8px 6px; }
    .bp-val { font-size: 0.8rem; }
    .rec-body { flex-direction: column; align-items: stretch; }
    .rec-milestones-track { margin-top: 6px; }
}