@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap');

/* FunMe Twin Cities — Facebook-inspired full-width layout */
:root {
    --primary: #1877f2;
    --primary-hover: #166fe5;
    --accent: #f7653b;
    --text: #050505;
    --text-secondary: #65676b;
    --text-tertiary: #8a8d91;
    --bg: #f0f2f5;
    --bg-card: #ffffff;
    --border: #dadde1;
    --border-light: #e4e6eb;
    --radius: 8px;
    --shadow: 0 1px 2px rgba(0,0,0,0.1);
    --shadow-hover: 0 2px 8px rgba(0,0,0,0.15);
    --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-display: 'Source Serif 4', Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-y: scroll; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.42;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ==================== HEADER ==================== */
.site-header {
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 100;
    height: 56px;
    display: flex;
    align-items: center;
}
.header-inner {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}
.logo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.42rem;
    color: var(--primary);
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: -0.04em;
    flex-shrink: 0;
}
.logo strong { font-weight: 800; }
.logo:hover { text-decoration: none; }
.logo i { color: var(--accent); font-size: 1.2rem; }

/* Mobile-only elements — hidden on desktop */
.mobile-stats { display: none; }
.mobile-hot-btn { display: none; }
.mobile-hot-list { display: none; }
.mobile-cal-btn {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.05rem;
    flex-shrink: 0;
    font-family: var(--font);
    transition: background 0.15s;
}
.mobile-cal-btn:hover { background: #e4e6eb; }
.mobile-cal-btn.active { background: #e7f3ff; color: var(--primary); }

/* Mobile calendar dropdown */
.mobile-cal-dropdown {
    display: none;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
    position: relative;
}
.mobile-cal-dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.12;
    background: url('/images/hero.jpg') center 30% / cover no-repeat;
    pointer-events: none;
    z-index: 0;
}
.mobile-cal-dropdown.open {
    max-height: 320px;
}
.mobile-cal-inner {
    padding: 8px 16px 16px;
    max-width: 400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.header-search {
    flex: 1;
    max-width: 480px;
    position: relative;
}
.header-search .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 0.85rem;
}
.header-search input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border: none;
    border-radius: 20px;
    background: var(--bg);
    font-size: 0.94rem;
    font-family: var(--font);
    color: var(--text);
    outline: none;
}
.header-search input::placeholder { color: var(--text-tertiary); }
.header-search input:focus { background: #e4e6eb; }
.search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #aaa;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 50%;
    line-height: 1;
}
.search-clear:hover { color: #666; background: #ddd; }
.search-clear.hidden { display: none; }

/* Autocomplete dropdown */
.ac-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 9999;
    overflow: hidden;
}
.ac-dropdown.hidden { display: none; }
.ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .1s;
    border-bottom: 1px solid #f0f0f0;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.ac-active { background: #f5f6fa; }
.ac-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #fff;
    flex-shrink: 0;
}
.ac-text { flex: 1; min-width: 0; }
.ac-label { font-size: 0.9rem; font-weight: 600; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-sub { font-size: 0.75rem; color: #888; }
.ac-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}
.ac-badge-team { background: #d1fae5; color: #047857; }
.ac-badge-category { background: #ede9fe; color: #7c3aed; }
.ac-badge-venue { background: #dbeafe; color: #2563eb; }
.ac-badge-neighborhood { background: #dcfce7; color: #059669; }
.ac-hint {
    padding: 8px 14px;
    font-size: 0.75rem;
    color: #aaa;
    text-align: center;
    border-top: 1px solid #f0f0f0;
}

/* Hamburger menu button */
.hamburger-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
    font-family: var(--font);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.hamburger-btn:hover { background: #e4e6eb; }

/* Menu overlay */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.menu-overlay.open { opacity: 1; pointer-events: auto; }

/* Slide-out menu */
.slide-menu {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    background: var(--bg-card);
    z-index: 201;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}
.slide-menu.open { right: 0; }

.menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
}
.menu-logo {
    font-size: 1.1rem;
    color: var(--primary);
    font-weight: 700;
    letter-spacing: -0.03em;
}
.menu-logo strong { font-weight: 800; }
.menu-logo i { color: var(--accent); }
.menu-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-close:hover { background: #e4e6eb; }

.menu-links {
    flex: 1;
    padding: 12px 0;
    overflow-y: auto;
}
.menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.15s;
}
.menu-link:hover { background: var(--bg); text-decoration: none; }
.menu-link i { color: var(--text-tertiary); width: 20px; text-align: center; font-size: 0.9rem; }
.menu-link-small { font-size: 0.88rem; color: var(--text-secondary); padding: 10px 20px; }
.menu-link-small i { font-size: 0.82rem; }
.menu-divider { border: none; border-top: 1px solid var(--border-light); margin: 8px 20px; }

.menu-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-light);
    text-align: center;
}
.menu-footer p { font-size: 0.75rem; color: var(--text-tertiary); line-height: 1.5; }

/* Contact modal */
.contact-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
}
.contact-overlay.open { display: flex; }
.contact-modal {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    padding: 24px;
    width: 90%;
    max-width: 440px;
}
.contact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.contact-header h3 {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cf-row { margin-bottom: 12px; }
.cf-row label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 3px; }
.cf-row input, .cf-row textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.92rem;
    font-family: var(--font);
    color: var(--text);
    outline: none;
}
.cf-row input:focus, .cf-row textarea:focus { border-color: var(--primary); }
.cf-row textarea { resize: vertical; }
.cf-submit {
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 6px;
    background: var(--primary);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    margin-top: 4px;
}
.cf-submit:hover { background: var(--primary-hover); }
.cf-success {
    text-align: center;
    padding: 20px 0;
}
.cf-success p { margin-top: 10px; color: var(--text-secondary); }

/* Screen reader only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ==================== MAIN LAYOUT — 3 columns, full width ==================== */
.main-layout {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 0;
    align-items: start;
    min-height: calc(100vh - 56px);
}


/* ==================== SIDEBARS ==================== */
.sidebar {
    position: sticky;
    top: 56px;
    height: fit-content;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px 8px;
    scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.sidebar-brand {
    padding: 0 4px 12px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 12px;
}
.sidebar-heading {
    font-family: var(--font-display);
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.sidebar-tagline {
    display: block;
    font-size: 0.79rem;
    color: var(--text-tertiary);
    line-height: 1.45;
    margin-top: 4px;
    padding-left: 0;
}
.sidebar-left {
    border-right: 1px solid var(--border-light);
    padding-right: 12px;
}
.sidebar-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: -8px;
    right: -4px;
    bottom: 0;
    opacity: 0.12;
    background: url('/images/hero.jpg') center 30% / cover no-repeat;
    border-radius: 8px;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to top, black 30%, transparent 80%);
    -webkit-mask-image: linear-gradient(to top, black 30%, transparent 80%);
}
.sidebar-left > * {
    position: relative;
    z-index: 1;
}
.sidebar-right {
    border-left: 1px solid var(--border-light);
    padding-left: 12px;
}

.sidebar-section {
    background: transparent;
    overflow: visible;
}
.sidebar-title {
    font-size: 1rem;
    font-weight: 700;
    padding: 14px 16px 10px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.02em;
}
.sidebar-title i {
    color: var(--accent);
    font-size: 0.95rem;
}

/* Hot Today list */
.hot-list {
    padding: 0 8px 8px;
}
.hot-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: var(--text);
}
.hot-item:hover {
    background: var(--bg);
    text-decoration: none;
}
.hot-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--border-light);
    flex-shrink: 0;
}
.hot-thumb.no-img {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.hot-info {
    flex: 1;
    min-width: 0;
}
.hot-title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hot-venue {
    font-size: 0.79rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hot-time {
    font-size: 0.74rem;
    color: var(--text-tertiary);
    font-weight: 600;
}
.hot-cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hot-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

/* Sidebar Calendar */
.sidebar-calendar {
    padding: 4px 12px 12px;
}

/* Zip code in header */
.header-zip {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg);
    border-radius: 20px;
    padding: 7px 12px;
    flex-shrink: 0;
}
.header-zip i { color: var(--text-tertiary); font-size: 0.8rem; }
.header-zip input {
    border: none;
    background: none;
    font-size: 0.88rem;
    font-family: var(--font);
    color: var(--text);
    outline: none;
    width: 48px;
}
.header-zip input::placeholder { color: var(--text-tertiary); }
.header-zip.active { background: #e7f3ff; }
.header-zip.active i { color: var(--primary); }
.zip-hint {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    pointer-events: none;
}
.header-zip.active .zip-hint { display: none; }
.header-zip input:focus ~ .zip-hint { display: none; }
.zip-clear {
    border: none;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 0.68rem;
    padding: 2px;
    display: flex;
}
.zip-clear:hover { color: var(--text); }

/* Sidebar legal links */
.sidebar-legal {
    padding: 12px 4px;
    margin-top: auto;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    line-height: 1.8;
}
.sidebar-legal a {
    color: var(--text-tertiary);
}
.sidebar-legal a:hover {
    color: var(--text-secondary);
    text-decoration: underline;
}

/* Submit event button */
.submit-event-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    margin: 8px 0;
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: var(--font);
    transition: all 0.15s;
}
.submit-event-btn:hover {
    background: #e7f3ff;
    color: var(--primary);
    text-decoration: none;
}
.submit-event-btn i {
    font-size: 0.95rem;
}

/* Stats below calendar */
.sidebar-stats {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stat-row {
    font-size: 0.84rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.stat-row i {
    color: var(--text-tertiary);
    width: 16px;
    text-align: center;
    font-size: 0.8rem;
}
.stat-row span {
    font-weight: 700;
    color: var(--text);
}
.cal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 8px;
}
.cal-nav {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-family: var(--font);
    transition: background 0.15s;
}
.cal-nav:hover { background: var(--bg); }
.cal-month {
    flex: 1;
    font-weight: 600;
    font-size: 0.92rem;
    text-align: center;
    color: var(--text);
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}
.cal-day-label {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    padding: 4px 0;
}
.cal-day {
    text-align: center;
    padding: 5px 2px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.12s;
    position: relative;
    color: var(--text);
    font-family: var(--font);
    border: none;
    background: none;
}
.cal-day:hover { background: var(--bg); }
.cal-day.today { font-weight: 700; color: var(--primary); }
.cal-day.selected { background: var(--primary); color: white; font-weight: 700; box-shadow: 0 0 0 2px var(--primary), 0 0 0 4px rgba(24,119,242,0.2); }
.cal-day.has-events::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
}
.cal-day.selected.has-events::after { background: white; }
.cal-day.other-month { color: var(--text-tertiary); opacity: 0.5; }
.cal-day.past { color: var(--text-tertiary); }

/* ==================== FEED COLUMN ==================== */
.feed-column {
    min-width: 0;
    padding: 12px 16px;
}

/* Minneapolis skyline watermark behind calendar sidebar */

/* ==================== WEATHER WIDGET ==================== */
.weather-bar {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 12px;
    overflow: hidden;
    position: relative;
}
/* Weather scene background — skyline + gradient */
.weather-scene {
    position: relative;
    overflow: hidden;
}
.weather-scene::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    transition: background 0.8s ease;
}
.weather-scene::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 42px;
    z-index: 1;
    background: url('/images/mpls-skyline-line.png') bottom center / auto 100% no-repeat;
    transform: scale(1.3, 1.1);
    transform-origin: bottom center;
    opacity: 0.35;
}
.weather-scene[class*="night"]::after,
.weather-scene.wx-scene-storm::after,
.weather-scene.wx-scene-rain::after { opacity: 0.5; filter: invert(1); }
.weather-scene.wx-scene-snow::after { opacity: 0.25; }
/* Day scenes — keep these noticeably lighter than night so the difference reads */
.weather-scene.wx-scene-clear-day::before  { background: linear-gradient(180deg, #60a5fa 0%, #93c5fd 100%); }
.weather-scene.wx-scene-cloudy-day::before { background: linear-gradient(180deg, #94a3b8 0%, #cbd5e1 60%, #e2e8f0 100%); }
.weather-scene.wx-scene-rain-day::before   { background: linear-gradient(180deg, #64748b 0%, #94a3b8 55%, #b8c2d1 100%); }
.weather-scene.wx-scene-snow-day::before   { background: linear-gradient(180deg, #7c8a9e 0%, #a5b3c6 55%, #c4d0de 100%); }
.weather-scene.wx-scene-storm-day::before  { background: linear-gradient(180deg, #475569 0%, #5e6779 55%, #7585a0 100%); }
/* Night scenes — pushed deeper so the day→night step is clearly visible */
.weather-scene.wx-scene-clear-night::before  { background: linear-gradient(180deg, #020617 0%, #0c1220 50%, #172039 100%); }
.weather-scene.wx-scene-cloudy-night::before { background: linear-gradient(180deg, #0f172a 0%, #1e293b 60%, #334155 100%); }
.weather-scene.wx-scene-rain-night::before   { background: linear-gradient(180deg, #0a0f1c 0%, #172039 55%, #243149 100%); }
.weather-scene.wx-scene-snow-night::before   { background: linear-gradient(180deg, #172039 0%, #243149 55%, #374864 100%); }
.weather-scene.wx-scene-storm-night::before  { background: linear-gradient(180deg, #020617 0%, #060a13 50%, #0c1220 100%); }

/* ============ WEATHER FX LAYER ============ */
.weather-fx {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.weather-fx > * { display: none; position: absolute; inset: 0; }

/* SUN — clear day (hidden, sun icon already shown next to temp) */
.wx-scene-clear-day .wx-sun { display: none; }

/* (decorative scene moon removed — selector also matched weather-icon-main.wx-moon
   and was painting a white circle behind the FA crescent icon) */

/* STARS — clear night */
.wx-scene-clear-night .wx-stars {
    display: block;
    background-image:
        radial-gradient(1px 1px at 5% 20%, #fff, transparent),
        radial-gradient(1px 1px at 12% 55%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 22% 30%, #fff, transparent),
        radial-gradient(1px 1px at 30% 15%, #fff, transparent),
        radial-gradient(1px 1px at 38% 45%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 48% 25%, #fff, transparent),
        radial-gradient(1px 1px at 55% 60%, #fff, transparent),
        radial-gradient(1px 1px at 65% 18%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 72% 40%, #fff, transparent),
        radial-gradient(1px 1px at 80% 22%, #fff, transparent),
        radial-gradient(1px 1px at 88% 55%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 94% 28%, #fff, transparent);
    animation: wxTwinkle 3s ease-in-out infinite;
}
@keyframes wxTwinkle {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.35; }
}

/* CLOUDS — cloudy day/night, rain, storm */
.wx-scene-cloudy-day .wx-clouds,
.wx-scene-cloudy-night .wx-clouds,
.wx-scene-rain .wx-clouds,
.wx-scene-storm .wx-clouds {
    display: block;
}
.wx-clouds span {
    position: absolute;
    background: rgba(255,255,255,0.7);
    border-radius: 50%;
    filter: blur(2px);
}
.wx-clouds span:nth-child(1) {
    width: 40px; height: 12px; top: 8px; left: 15%;
    box-shadow: 14px -4px 0 2px rgba(255,255,255,0.7), 28px 2px 0 0 rgba(255,255,255,0.7);
    animation: wxCloudDrift 60s linear infinite;
}
.wx-clouds span:nth-child(2) {
    width: 50px; height: 14px; top: 4px; left: 45%;
    box-shadow: 18px -5px 0 3px rgba(255,255,255,0.75), 36px 1px 0 1px rgba(255,255,255,0.7);
    animation: wxCloudDrift 80s linear infinite -20s;
}
.wx-clouds span:nth-child(3) {
    width: 35px; height: 10px; top: 12px; left: 75%;
    box-shadow: 12px -3px 0 1px rgba(255,255,255,0.7), 22px 2px 0 0 rgba(255,255,255,0.65);
    animation: wxCloudDrift 70s linear infinite -40s;
}
.wx-scene-cloudy-night .wx-clouds span,
.wx-scene-rain .wx-clouds span,
.wx-scene-storm .wx-clouds span { background: rgba(148,163,184,0.6); box-shadow: 14px -4px 0 2px rgba(148,163,184,0.6), 28px 2px 0 0 rgba(148,163,184,0.6); }
@keyframes wxCloudDrift {
    from { transform: translateX(-120%); }
    to { transform: translateX(500%); }
}

/* RAIN — rain & storm
   THREE SVG layers with coprime tile sizes (179, 197, 211) so the combined pattern is non-repeating
   for 179 × 197 × 211 = ~7.4 million pixels of scrolling. The third layer is sparse (7 drops) with
   bright white highlights — these are the "clear" standout drops that catch the light.
   The base layers stay subtle and the highlights add the occasional pop. */
.wx-scene-rain .wx-rain,
.wx-scene-storm .wx-rain {
    display: block;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='179' height='179' viewBox='0 0 179 179'><g stroke='%23ffffff' stroke-linecap='round'><line x1='34' y1='30' x2='34' y2='37' stroke-width='1.3' opacity='0.8'/><line x1='91' y1='62' x2='91' y2='66' stroke-width='1' opacity='0.55'/><line x1='148' y1='44' x2='148' y2='51' stroke-width='1.2' opacity='0.75'/><line x1='17' y1='114' x2='17' y2='118' stroke-width='1' opacity='0.5'/><line x1='73' y1='141' x2='73' y2='149' stroke-width='1.4' opacity='0.85'/><line x1='126' y1='99' x2='126' y2='104' stroke-width='1' opacity='0.6'/><line x1='162' y1='158' x2='162' y2='165' stroke-width='1.2' opacity='0.7'/></g></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='197' height='197' viewBox='0 0 197 197'><g stroke='%23bfdbfe' stroke-linecap='round'><line x1='7' y1='4' x2='7' y2='10' stroke-width='1' opacity='0.7'/><line x1='23' y1='29' x2='23' y2='37' stroke-width='1.1' opacity='0.65'/><line x1='41' y1='12' x2='41' y2='18' stroke-width='0.9' opacity='0.55'/><line x1='58' y1='51' x2='58' y2='59' stroke-width='1' opacity='0.7'/><line x1='73' y1='22' x2='73' y2='27' stroke-width='0.8' opacity='0.5'/><line x1='89' y1='8' x2='89' y2='15' stroke-width='1.1' opacity='0.65'/><line x1='104' y1='44' x2='104' y2='53' stroke-width='1' opacity='0.7'/><line x1='119' y1='19' x2='119' y2='25' stroke-width='0.9' opacity='0.6'/><line x1='133' y1='62' x2='133' y2='69' stroke-width='1' opacity='0.65'/><line x1='148' y1='33' x2='148' y2='41' stroke-width='1.1' opacity='0.7'/><line x1='162' y1='6' x2='162' y2='13' stroke-width='0.8' opacity='0.55'/><line x1='177' y1='49' x2='177' y2='56' stroke-width='1' opacity='0.65'/><line x1='190' y1='24' x2='190' y2='31' stroke-width='0.9' opacity='0.6'/><line x1='13' y1='78' x2='13' y2='85' stroke-width='1' opacity='0.7'/><line x1='32' y1='102' x2='32' y2='110' stroke-width='1.1' opacity='0.65'/><line x1='49' y1='88' x2='49' y2='93' stroke-width='0.8' opacity='0.55'/><line x1='66' y1='121' x2='66' y2='128' stroke-width='1' opacity='0.7'/><line x1='82' y1='95' x2='82' y2='103' stroke-width='1.1' opacity='0.65'/><line x1='99' y1='115' x2='99' y2='122' stroke-width='0.9' opacity='0.6'/><line x1='117' y1='82' x2='117' y2='90' stroke-width='1' opacity='0.7'/><line x1='134' y1='108' x2='134' y2='114' stroke-width='0.9' opacity='0.55'/><line x1='151' y1='91' x2='151' y2='99' stroke-width='1.1' opacity='0.7'/><line x1='169' y1='124' x2='169' y2='131' stroke-width='1' opacity='0.65'/><line x1='184' y1='86' x2='184' y2='92' stroke-width='0.8' opacity='0.55'/><line x1='5' y1='148' x2='5' y2='155' stroke-width='1' opacity='0.7'/><line x1='24' y1='171' x2='24' y2='178' stroke-width='1.1' opacity='0.65'/><line x1='42' y1='159' x2='42' y2='166' stroke-width='0.9' opacity='0.6'/><line x1='59' y1='185' x2='59' y2='192' stroke-width='1' opacity='0.7'/><line x1='77' y1='144' x2='77' y2='151' stroke-width='0.8' opacity='0.55'/><line x1='94' y1='168' x2='94' y2='175' stroke-width='1.1' opacity='0.65'/><line x1='112' y1='180' x2='112' y2='187' stroke-width='1' opacity='0.7'/><line x1='129' y1='149' x2='129' y2='157' stroke-width='0.9' opacity='0.6'/><line x1='146' y1='173' x2='146' y2='180' stroke-width='1' opacity='0.65'/><line x1='163' y1='160' x2='163' y2='167' stroke-width='1.1' opacity='0.7'/><line x1='180' y1='189' x2='180' y2='196' stroke-width='0.8' opacity='0.55'/></g></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='211' height='211' viewBox='0 0 211 211'><g stroke='%23dbeafe' stroke-linecap='round'><line x1='9' y1='15' x2='9' y2='22' stroke-width='0.8' opacity='0.5'/><line x1='27' y1='39' x2='27' y2='44' stroke-width='0.9' opacity='0.55'/><line x1='45' y1='8' x2='45' y2='14' stroke-width='0.8' opacity='0.5'/><line x1='62' y1='27' x2='62' y2='33' stroke-width='1' opacity='0.6'/><line x1='80' y1='52' x2='80' y2='58' stroke-width='0.9' opacity='0.55'/><line x1='97' y1='13' x2='97' y2='19' stroke-width='0.8' opacity='0.5'/><line x1='114' y1='38' x2='114' y2='44' stroke-width='1' opacity='0.6'/><line x1='130' y1='61' x2='130' y2='68' stroke-width='0.9' opacity='0.55'/><line x1='148' y1='22' x2='148' y2='28' stroke-width='0.8' opacity='0.5'/><line x1='165' y1='47' x2='165' y2='53' stroke-width='1' opacity='0.6'/><line x1='184' y1='9' x2='184' y2='15' stroke-width='0.9' opacity='0.55'/><line x1='201' y1='32' x2='201' y2='38' stroke-width='0.8' opacity='0.5'/><line x1='15' y1='75' x2='15' y2='82' stroke-width='0.9' opacity='0.55'/><line x1='34' y1='98' x2='34' y2='105' stroke-width='1' opacity='0.6'/><line x1='51' y1='118' x2='51' y2='124' stroke-width='0.8' opacity='0.5'/><line x1='69' y1='84' x2='69' y2='91' stroke-width='0.9' opacity='0.55'/><line x1='87' y1='106' x2='87' y2='113' stroke-width='0.8' opacity='0.5'/><line x1='104' y1='92' x2='104' y2='99' stroke-width='1' opacity='0.6'/><line x1='123' y1='124' x2='123' y2='131' stroke-width='0.9' opacity='0.55'/><line x1='140' y1='79' x2='140' y2='86' stroke-width='0.8' opacity='0.5'/><line x1='158' y1='102' x2='158' y2='109' stroke-width='0.9' opacity='0.55'/><line x1='177' y1='115' x2='177' y2='122' stroke-width='0.8' opacity='0.5'/><line x1='195' y1='88' x2='195' y2='95' stroke-width='1' opacity='0.6'/><line x1='8' y1='150' x2='8' y2='157' stroke-width='0.9' opacity='0.55'/><line x1='28' y1='178' x2='28' y2='185' stroke-width='0.8' opacity='0.5'/><line x1='47' y1='144' x2='47' y2='151' stroke-width='0.9' opacity='0.55'/><line x1='65' y1='169' x2='65' y2='176' stroke-width='1' opacity='0.6'/><line x1='84' y1='195' x2='84' y2='202' stroke-width='0.8' opacity='0.5'/><line x1='102' y1='158' x2='102' y2='165' stroke-width='0.9' opacity='0.55'/><line x1='120' y1='185' x2='120' y2='192' stroke-width='0.8' opacity='0.5'/><line x1='138' y1='148' x2='138' y2='155' stroke-width='1' opacity='0.6'/><line x1='157' y1='171' x2='157' y2='178' stroke-width='0.9' opacity='0.55'/><line x1='175' y1='196' x2='175' y2='203' stroke-width='0.8' opacity='0.5'/><line x1='193' y1='162' x2='193' y2='169' stroke-width='0.9' opacity='0.55'/></g></svg>");
    background-size: 179px 179px, 197px 197px, 211px 211px;
    background-repeat: repeat, repeat, repeat;
    animation: wxRain 2.0s linear infinite;
    opacity: 0.22;
    will-change: background-position;
}
/* All rain scenes (rain + storm) use the same drop animation; only background differs */
@keyframes wxRain {
    from { background-position: 0 0,        0 0,        0 0; }
    to   { background-position: 0 179px,    0 197px,    0 211px; }
}

/* SNOW — snow scene
   Three SVG layers with coprime tile sizes (181, 199, 223). Varied flake sizes (1.4-3.2px),
   varied opacities, three different drift speeds for parallax (slow, medium, slower bg).
   Snow should look floaty, not fast — animation 9-14s per loop. */
.wx-scene-snow .wx-snow {
    display: block;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='181' height='181' viewBox='0 0 181 181'><g fill='%23ffffff'><circle cx='12' cy='8' r='2.4' opacity='0.95'/><circle cx='38' cy='32' r='1.8' opacity='0.75'/><circle cx='62' cy='14' r='2.8' opacity='1'/><circle cx='89' cy='45' r='2' opacity='0.8'/><circle cx='114' cy='22' r='1.6' opacity='0.65'/><circle cx='138' cy='38' r='2.6' opacity='0.95'/><circle cx='162' cy='12' r='2' opacity='0.8'/><circle cx='24' cy='68' r='1.8' opacity='0.7'/><circle cx='52' cy='82' r='2.4' opacity='0.9'/><circle cx='78' cy='62' r='1.6' opacity='0.65'/><circle cx='104' cy='88' r='2.8' opacity='1'/><circle cx='128' cy='72' r='1.8' opacity='0.75'/><circle cx='155' cy='95' r='2' opacity='0.8'/><circle cx='8' cy='118' r='1.6' opacity='0.65'/><circle cx='35' cy='132' r='2.6' opacity='0.95'/><circle cx='66' cy='108' r='2' opacity='0.8'/><circle cx='92' cy='138' r='1.8' opacity='0.7'/><circle cx='118' cy='115' r='2.4' opacity='0.9'/><circle cx='144' cy='128' r='1.6' opacity='0.65'/><circle cx='170' cy='142' r='2.2' opacity='0.85'/><circle cx='18' cy='158' r='2.6' opacity='0.95'/><circle cx='48' cy='168' r='1.8' opacity='0.7'/><circle cx='75' cy='152' r='2' opacity='0.8'/><circle cx='102' cy='172' r='1.6' opacity='0.65'/><circle cx='130' cy='162' r='2.4' opacity='0.9'/><circle cx='158' cy='175' r='1.8' opacity='0.75'/></g></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='199' height='199' viewBox='0 0 199 199'><g fill='%23ffffff'><circle cx='15' cy='12' r='1.6' opacity='0.6'/><circle cx='42' cy='28' r='1.4' opacity='0.55'/><circle cx='68' cy='8' r='2' opacity='0.7'/><circle cx='92' cy='35' r='1.4' opacity='0.55'/><circle cx='118' cy='18' r='1.8' opacity='0.65'/><circle cx='144' cy='42' r='1.6' opacity='0.6'/><circle cx='168' cy='25' r='1.4' opacity='0.55'/><circle cx='188' cy='9' r='2' opacity='0.7'/><circle cx='8' cy='62' r='1.6' opacity='0.6'/><circle cx='32' cy='82' r='1.8' opacity='0.65'/><circle cx='58' cy='68' r='1.4' opacity='0.55'/><circle cx='85' cy='95' r='1.6' opacity='0.6'/><circle cx='110' cy='75' r='2' opacity='0.7'/><circle cx='134' cy='98' r='1.4' opacity='0.55'/><circle cx='160' cy='80' r='1.8' opacity='0.65'/><circle cx='184' cy='105' r='1.6' opacity='0.6'/><circle cx='12' cy='128' r='1.8' opacity='0.65'/><circle cx='38' cy='148' r='1.6' opacity='0.6'/><circle cx='65' cy='130' r='1.4' opacity='0.55'/><circle cx='90' cy='155' r='2' opacity='0.7'/><circle cx='115' cy='138' r='1.6' opacity='0.6'/><circle cx='142' cy='162' r='1.8' opacity='0.65'/><circle cx='168' cy='148' r='1.4' opacity='0.55'/><circle cx='192' cy='168' r='1.6' opacity='0.6'/><circle cx='25' cy='178' r='1.8' opacity='0.65'/><circle cx='55' cy='188' r='1.4' opacity='0.55'/><circle cx='82' cy='180' r='1.6' opacity='0.6'/><circle cx='108' cy='192' r='2' opacity='0.7'/><circle cx='135' cy='182' r='1.4' opacity='0.55'/><circle cx='162' cy='194' r='1.6' opacity='0.6'/></g></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='223' height='223' viewBox='0 0 223 223'><g fill='%23ffffff'><circle cx='18' cy='15' r='1.2' opacity='0.45'/><circle cx='45' cy='32' r='1' opacity='0.4'/><circle cx='72' cy='10' r='1.2' opacity='0.45'/><circle cx='98' cy='38' r='1.4' opacity='0.5'/><circle cx='125' cy='22' r='1' opacity='0.4'/><circle cx='152' cy='45' r='1.2' opacity='0.45'/><circle cx='178' cy='28' r='1.4' opacity='0.5'/><circle cx='205' cy='18' r='1' opacity='0.4'/><circle cx='12' cy='75' r='1.2' opacity='0.45'/><circle cx='38' cy='95' r='1.4' opacity='0.5'/><circle cx='64' cy='80' r='1' opacity='0.4'/><circle cx='90' cy='102' r='1.2' opacity='0.45'/><circle cx='118' cy='85' r='1.4' opacity='0.5'/><circle cx='145' cy='108' r='1' opacity='0.4'/><circle cx='172' cy='90' r='1.2' opacity='0.45'/><circle cx='198' cy='112' r='1.4' opacity='0.5'/><circle cx='15' cy='148' r='1' opacity='0.4'/><circle cx='42' cy='168' r='1.2' opacity='0.45'/><circle cx='70' cy='152' r='1.4' opacity='0.5'/><circle cx='98' cy='175' r='1' opacity='0.4'/><circle cx='128' cy='158' r='1.2' opacity='0.45'/><circle cx='155' cy='180' r='1.4' opacity='0.5'/><circle cx='182' cy='162' r='1' opacity='0.4'/><circle cx='208' cy='185' r='1.2' opacity='0.45'/><circle cx='25' cy='205' r='1.2' opacity='0.45'/><circle cx='58' cy='195' r='1' opacity='0.4'/><circle cx='88' cy='215' r='1.4' opacity='0.5'/><circle cx='118' cy='200' r='1.2' opacity='0.45'/><circle cx='148' cy='218' r='1' opacity='0.4'/><circle cx='178' cy='208' r='1.4' opacity='0.5'/></g></svg>");
    background-size: 181px 181px, 199px 199px, 223px 223px;
    background-repeat: repeat, repeat, repeat;
    animation: wxSnowFall 12s linear infinite;
    opacity: 0.7;
    will-change: background-position;
}
@keyframes wxSnowFall {
    from { background-position: 0 0,        0 0,        0 0; }
    to   { background-position: 0 181px,    0 199px,    0 223px; }
}

/* LIGHTNING — storm */
.wx-scene-storm .wx-lightning {
    display: block;
    background: rgba(255,255,255,0);
    animation: wxLightning 7s ease-in-out infinite;
}
@keyframes wxLightning {
    0%, 90%, 100% { background: rgba(255,255,255,0); }
    92% { background: rgba(255,255,255,0.5); }
    93% { background: rgba(255,255,255,0); }
    94% { background: rgba(255,255,255,0.7); }
    95% { background: rgba(255,255,255,0); }
}
/* Text color overrides for dark backgrounds */
.weather-scene[class*="night"] .weather-today-temp,
.weather-scene[class*="night"] .weather-today-desc,
.weather-scene[class*="night"] .weather-today-right,
.weather-scene.wx-scene-storm .weather-today-temp,
.weather-scene.wx-scene-storm .weather-today-desc,
.weather-scene.wx-scene-storm .weather-today-right,
.weather-scene.wx-scene-rain .weather-today-temp,
.weather-scene.wx-scene-rain .weather-today-desc,
.weather-scene.wx-scene-rain .weather-today-right { color: #e2e8f0; }
.weather-scene.wx-scene-snow .weather-today-temp,
.weather-scene.wx-scene-snow .weather-today-desc,
.weather-scene.wx-scene-snow .weather-today-right { color: #f1f5f9; }

.weather-today {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
    position: relative;
    z-index: 2;
}
.weather-today:hover { background: rgba(255,255,255,0.1); }
.weather-icon-main {
    font-size: 1.6rem;
    width: 38px;
    text-align: center;
    flex-shrink: 0;
}
.weather-icon-main.wx-sun { color: #f59e0b; }
.weather-icon-main.wx-cloud-sun { color: #94a3b8; }
.weather-icon-main.wx-cloud-moon { color: #64748b; }
.weather-icon-main.wx-cloud { color: #94a3b8; }
.weather-icon-main.wx-rain { color: #3b82f6; }
.weather-icon-main.wx-snow { color: #93c5fd; }
.weather-icon-main.wx-storm { color: #7c3aed; }
/* Moon: rendered as inline SVG showing the actual current lunar phase */
.weather-icon-main.wx-moon {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 4px rgba(241,245,249,0.4));
}
.weather-icon-main.wx-fog { color: #9ca3af; }
.weather-icon-main.wx-wind { color: #64748b; }
.weather-icon-main.wx-ice { color: #67e8f9; }
.weather-today-info { flex: 1; min-width: 0; }
.weather-today-temp {
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
    line-height: 1.2;
}
.weather-today-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.weather-today-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    white-space: nowrap;
}
.weather-today-right i { margin-right: 3px; }
.weather-today-right span { display: flex; align-items: center; gap: 4px; }
.weather-tonight { color: var(--text-secondary); font-weight: 600; }
.weather-expand-icon {
    color: #1c1e21;
    font-size: 0.95rem;
    transition: transform 0.2s, background 0.2s;
    flex-shrink: 0;
    margin-left: 4px;
    background: rgba(255,255,255,0.9);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
}
.weather-today:hover .weather-expand-icon { background: #fff; }
.weather-scene[class*="night"] .weather-expand-icon,
.weather-scene.wx-scene-storm .weather-expand-icon,
.weather-scene.wx-scene-rain .weather-expand-icon { background: rgba(255,255,255,0.95); color: #0f172a; }
.weather-bar.expanded .weather-expand-icon { transform: rotate(180deg); }

/* Alert banner */
.weather-alert {
    background: #fef2f2;
    border-left: 3px solid #ef4444;
    padding: 8px 16px;
    font-size: 0.82rem;
    color: #991b1b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.weather-alert i { color: #ef4444; }

/* Expanded panel */
.weather-detail {
    display: none;
    border-top: 1px solid var(--border-light);
}
.weather-bar.expanded .weather-detail { display: block; }

/* Tab bar */
.weather-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-light);
}
.weather-tab {
    flex: 1;
    padding: 10px 8px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font);
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}
.weather-tab:hover { color: var(--text); background: #f8f9fa; }
.weather-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Tab panels */
.weather-panel { display: none; padding: 12px 16px; }
.weather-panel.active { display: block; }

/* Hourly scroll */
.weather-hourly {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.weather-hour {
    flex-shrink: 0;
    text-align: center;
    padding: 8px 10px;
    border-radius: 8px;
    min-width: 62px;
}
.weather-hour:hover { background: #f8f9fa; }
.weather-hour-time {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    font-weight: 600;
    margin-bottom: 4px;
}
.weather-hour-icon { font-size: 1.1rem; margin-bottom: 4px; }
.weather-hour-temp {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}
.weather-hour-precip {
    font-size: 0.68rem;
    color: #3b82f6;
    margin-top: 2px;
}

/* 7-day list */
.weather-daily-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    gap: 10px;
}
.weather-daily-row:last-child { border-bottom: none; }
.weather-daily-name {
    width: 80px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    flex-shrink: 0;
}
.weather-daily-icon {
    font-size: 1rem;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}
.weather-daily-precip {
    font-size: 0.75rem;
    color: #3b82f6;
    width: 36px;
    flex-shrink: 0;
}
.weather-daily-temps {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
.weather-daily-hi {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    width: 32px;
    text-align: right;
}
.weather-daily-lo {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    width: 32px;
    text-align: right;
}
.weather-daily-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    flex: 1;
    min-width: 60px;
    text-align: right;
}
.weather-temp-bar {
    width: 60px;
    height: 4px;
    background: var(--border-light);
    border-radius: 2px;
    position: relative;
    flex-shrink: 0;
}
.weather-temp-fill {
    position: absolute;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(to right, #3b82f6, #f59e0b);
}

/* NWS attribution */
.weather-credit {
    padding: 8px 16px;
    font-size: 0.72rem;
    color: var(--text-tertiary);
    text-align: right;
    border-top: 1px solid var(--border-light);
}
.weather-credit a { color: var(--text-tertiary); }
.weather-credit a:hover { color: var(--primary); }

/* Loading state */
.weather-loading {
    padding: 16px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.85rem;
}
.weather-loading i { margin-right: 6px; }

/* Date quick-filter bar */
.date-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.date-chip {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.88rem;
    font-weight: 600;
    border: none;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font);
    box-shadow: var(--shadow);
    transition: all 0.15s;
}
.date-chip:hover { background: #e4e6eb; color: var(--text); }
.date-chip.active { background: #e7f3ff; color: var(--primary); }

/* Category chips — WRAPPING not scrolling */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--bg-card);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: var(--shadow);
}
.chip:hover { background: #e4e6eb; color: var(--text); text-decoration: none; }
.chip.active {
    background: var(--primary);
    color: white;
}
.chip i { font-size: 0.78rem; }
.chip .chip-count {
    background: rgba(0,0,0,0.06);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 500;
}
.chip.active .chip-count { background: rgba(255,255,255,0.25); }

/* Filter row — toggle + divider + chips */
.filter-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}
.filter-divider {
    width: 1px;
    height: 28px;
    background: var(--border-light);
    flex-shrink: 0;
    margin-top: 4px;
}

/* Free toggle switch */
.free-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: none;
    border-radius: 20px;
    background: var(--bg-card);
    color: var(--text-tertiary);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: var(--shadow);
    transition: all 0.2s;
}
.free-toggle:hover { color: #42b72a; }
.free-toggle i { font-size: 0.75rem; }
.toggle-switch {
    width: 28px;
    height: 16px;
    background: var(--border);
    border-radius: 8px;
    position: relative;
    transition: background 0.2s;
}
.toggle-knob {
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.free-toggle.active { color: #42b72a; }
.free-toggle.active .toggle-switch { background: #42b72a; }
.free-toggle.active .toggle-knob { left: 14px; }
.chip-kids { color: #0891b2; border-color: #0891b240; }
.chip-kids:hover { background: #ecfeff; color: #0e7490; border-color: #0891b2; }
.chip-kids.active { background: #0891b2; color: white; border-color: #0891b2; }
.chip-sports { color: #16a34a; border-color: #16a34a40; }
.chip-sports:hover { background: #f0fdf4; color: #15803d; border-color: #16a34a; }
.chip-sports.active { background: #16a34a; color: white; border-color: #16a34a; }
.chip-hs { color: #b45309; border-color: #b45309; background: #fffbeb; font-weight: 600; border-style: dashed; }
.chip-hs:hover { background: #fef3c7; color: #92400e; border-color: #b45309; border-style: solid; }
.chip-hs.active { background: #b45309; color: white; border-color: #b45309; border-style: solid; }
.chip-holiday { color: var(--holiday-color, #16a34a); border-color: var(--holiday-color, #16a34a); border-style: dashed; font-weight: 600; }
.chip-holiday:hover { background: #f0fdf4; color: var(--holiday-color, #16a34a); border-color: var(--holiday-color, #16a34a); border-style: solid; }
.chip-holiday.active { background: var(--holiday-color, #16a34a); color: white; border-color: var(--holiday-color, #16a34a); border-style: solid; }

/* More chips toggle */
.filter-bar-more { margin-top: -8px; }
.more-chips-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    margin-bottom: 12px;
    border: none;
    border-radius: 16px;
    background: none;
    color: var(--text-tertiary);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: color 0.15s;
}
.more-chips-btn:hover { color: var(--primary); }
.more-chips-btn i { font-size: 0.65rem; transition: transform 0.2s; }
.more-chips-btn.open i { transform: rotate(180deg); }
.more-chips-btn.open .more-chips-text::before { content: '− Less'; }
.more-chips-btn.open .more-chips-text { font-size: 0; }
.more-chips-btn.open .more-chips-text::before { font-size: 0.82rem; }

/* ==================== EVENT FEED ==================== */
.event-feed {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Date separator — sticky so you always know where you are */
.date-separator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 6px;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
    position: sticky;
    top: 56px;
    z-index: 10;
    background: var(--bg);
    margin: 4px -16px 4px -16px;
    padding-left: 16px;
    padding-right: 16px;
}
.date-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}
.date-separator .day-label {
    color: var(--text);
    font-weight: 600;
    font-size: 0.92rem;
}
.date-separator .day-label .today-label {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.3px;
}
.event-count-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    border-radius: 20px;
    vertical-align: middle;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.event-count-badge i {
    margin-right: 3px;
    font-size: 0.65rem;
}
.date-separator .day-label .tomorrow-label {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary);
}
.date-separator .day-label .day-label-cat {
    font-weight: 800;
    color: var(--accent);
}
.date-separator .now-playing-label {
    color: #42b72a;
}

/* Date tag on each card */
.event-date-tag {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-tertiary);
    background: var(--bg);
    padding: 1px 7px;
    border-radius: 4px;
    white-space: nowrap;
}
.event-date-tag.is-today { color: var(--accent); background: #fff7ed; }
.event-date-tag.is-tomorrow { color: var(--primary); background: #e7f3ff; }

/* ==================== EVENT CARD ==================== */
.event-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    transition: box-shadow 0.2s;
    position: relative;
}
.event-card:hover {
    box-shadow: var(--shadow-hover);
}

/* Card with image — poster fades in from right */
.event-card.has-image:not(.fade-only) {
    background-image: none !important;
}
.event-card.has-image .event-body {
    order: -1;
    flex: 1;
}
.event-card.has-image .event-poster {
    width: 280px;
    min-height: 100px;
    margin: 0;
    margin-left: -80px;
    border-radius: 0;
    box-shadow: none;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to left, black 55%, transparent 100%);
    mask-image: linear-gradient(to left, black 55%, transparent 100%);
}
/* Tall/square images (logos, square photos) — use contain so the whole image is visible.
   The mask is tightened so the fade completes within the image's actual bounds (which sit
   on the right side of the container due to background-position: right center). */
.event-card.has-image .event-poster.poster-tall {
    background-size: contain;
    -webkit-mask-image: linear-gradient(to left, black 45%, transparent 70%);
    mask-image: linear-gradient(to left, black 45%, transparent 70%);
}

/* No-image cards — thin border + category gradient + geometric pattern */
.event-card:not(.has-image) {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: none;
    position: relative;
    overflow: hidden;
}
.event-card:not(.has-image)::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 120px;
    height: 100%;
    opacity: 0.07;
    background: var(--card-accent, #6366f1);
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to left, black 40%, transparent);
    -webkit-mask-image: linear-gradient(to left, black 40%, transparent);
}
.event-card:not(.has-image)::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 80px;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
    background: var(--card-accent, #6366f1);
}
/* Category-specific geometric shapes */
.event-card:not(.has-image)[data-cat="music"]::after { border-radius: 50%; }
.event-card:not(.has-image)[data-cat="sports"]::after { border-radius: 4px; transform: translateY(-50%) rotate(45deg); width: 60px; height: 60px; }
.event-card:not(.has-image)[data-cat="community"]::after { border-radius: 50% 0 50% 0; }
.event-card:not(.has-image)[data-cat="theater"]::after { border-radius: 50% 50% 0 0; width: 70px; height: 50px; }
.event-card:not(.has-image)[data-cat="arts"]::after { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); width: 70px; height: 70px; }
.event-card:not(.has-image)[data-cat="family"]::after { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
.event-card:not(.has-image)[data-cat="food-drink"]::after { border-radius: 50%; width: 50px; height: 50px; box-shadow: 25px -15px 0 0 var(--card-accent, #ef4444); opacity: 0.05; }
.event-card:not(.has-image)[data-cat="comedy"]::after { border-radius: 50%; width: 65px; height: 55px; }
.event-card:not(.has-image)[data-cat="nightlife"]::after { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.event-card:not(.has-image)[data-cat="fitness"]::after { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); width: 70px; height: 70px; }
.event-card:not(.has-image)[data-cat="classical"]::after { border-radius: 50%; border: 3px solid var(--card-accent, #9333ea); background: transparent; opacity: 0.12; }
.event-card:not(.has-image)[data-cat="dance"]::after { border-radius: 0 50% 50% 0; width: 50px; height: 80px; }
.event-card:not(.has-image)[data-cat="festivals"]::after { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.event-card:not(.has-image)[data-cat="outdoors"]::after { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); width: 70px; height: 65px; }
.event-card:not(.has-image)[data-cat="charity"]::after { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* Ensure card content stays above the pattern */
.event-card:not(.has-image) .event-body { position: relative; z-index: 1; }

/* Fade-only images — logo/text backgrounds get heavy overlay, no poster thumbnail */
.event-card.fade-only .event-body {
    background: linear-gradient(to right, rgba(255,255,255,0.99) 60%, rgba(255,255,255,0.95) 80%, rgba(255,255,255,0.85) 100%);
}

/* Poster thumbnail */
.event-poster {
    width: 140px;
    min-height: 120px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    position: relative;
    -webkit-mask-image: linear-gradient(to left, black 50%, transparent 100%);
    mask-image: linear-gradient(to left, black 50%, transparent 100%);
    z-index: 1;
}

/* Card body */
.event-card .event-body {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    position: relative;
    z-index: 2;
}

/* Top row */
.event-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.event-time-badge {
    font-weight: 700;
    font-size: 0.83rem;
    letter-spacing: -0.01em;
    color: var(--text);
}
.event-time-badge small {
    font-weight: 700;
    font-size: 0.68rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.event-time-badge.now-playing {
    background: #42b72a;
    color: #fff;
    font-weight: 700;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Date range */
.event-date-row { margin-bottom: 2px; }
.event-date-range {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.event-date-range i { margin-right: 3px; opacity: 0.7; }

/* Title */
h3.event-title {
    font-size: 1.08rem;
    font-weight: 800;
    margin-bottom: 3px;
    line-height: 1.24;
    letter-spacing: -0.025em;
}
h3.event-title a { color: var(--text); }
h3.event-title a:hover { color: var(--primary); text-decoration: none; }

/* Venue */
.event-venue {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
    font-weight: 500;
}
.event-venue i { margin-right: 4px; color: var(--text-tertiary); font-size: 0.78rem; }
.event-venue .event-neighborhood {
    color: var(--text-tertiary);
    font-size: 0.78rem;
}
.event-venue .event-neighborhood::before {
    content: '·';
    margin: 0 4px;
}

/* Category badge */
.event-cat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.67rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    color: white;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Price */
.event-price {
    font-size: 0.79rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.event-price.free {
    color: #42b72a;
    font-weight: 700;
}

/* Description — 2-line clamp, click to expand */
.event-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 4px;
}
.event-desc.clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
}
.event-desc.expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Expand toggle */
.expand-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    margin-top: 6px;
    border: none;
    background: none;
    padding: 4px 0;
    font-family: var(--font);
}
.expand-toggle:hover { color: var(--primary); }
.expand-toggle i { font-size: 0.68rem; transition: transform 0.3s; }

/* Expanded content */
.event-expanded {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    position: relative;
    z-index: 2;
}
.event-card.expanded .event-expanded {
    max-height: 800px;
    transition: max-height 0.5s ease;
}
.event-expanded-inner {
    border-top: 1px solid var(--border-light);
    padding-top: 10px;
    margin-top: 8px;
}

.detail-row {
    font-size: 0.87rem;
    color: var(--text-secondary);
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.detail-row i {
    width: 16px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.detail-row strong {
    color: var(--text);
    font-weight: 600;
}
.free-text { color: #42b72a; font-weight: 700; }

.expanded-actions {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
}
.action-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.action-link:hover { color: var(--primary); text-decoration: none; }
.action-link.primary { color: var(--primary); }

/* Share links in expanded card */
.share-links {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    background: var(--bg);
    color: var(--text-tertiary);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    font-family: var(--font);
}
.share-btn:hover { color: var(--primary); border-color: var(--primary); background: #e7f3ff; text-decoration: none; }
.action-link i { font-size: 0.76rem; }

/* Copy toast notification */
.copy-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1a1a2e;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.copy-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.copy-toast i { margin-right: 6px; color: #4ade80; }

/* Featured */
.event-card.featured { border-left: 3px solid var(--accent); }
.featured-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--accent);
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Loading & end */
.loading, .end-message {
    text-align: center;
    padding: 24px;
    color: var(--text-tertiary);
    font-size: 0.88rem;
}
.loading i { margin-right: 6px; }
.end-message i { margin-right: 6px; color: #42b72a; }

/* ==================== ADMIN CONTROLS ==================== */
/* Image hover button — small camera icon, top-right of poster */
.admin-img-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.5);
    color: white;
    font-size: 0.7rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.event-card:hover .admin-img-btn { opacity: 1; }
.admin-img-btn:hover { background: var(--primary); }

/* Admin controls inside expanded section */
.admin-expanded {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-light);
}
.admin-exp-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s;
}
.admin-exp-btn:hover { border-color: var(--primary); color: var(--primary); background: #e7f3ff; }
.admin-exp-btn.danger:hover { border-color: #dc2626; color: #dc2626; background: #fef2f2; }
.admin-exp-btn i { font-size: 0.65rem; }
.admin-id { font-size: 0.68rem; color: var(--text-tertiary); margin-left: auto; }

/* Admin edit modal */
.admin-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-modal {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    padding: 20px 24px;
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
}
.admin-modal h3 { font-size: 1.1rem; margin-bottom: 14px; }
.admin-modal label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 3px; color: var(--text); }
.admin-modal input, .admin-modal select, .admin-modal textarea {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 0.9rem; font-family: var(--font); margin-bottom: 10px;
}
.admin-modal textarea { min-height: 60px; resize: vertical; }
.admin-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.admin-modal-actions button {
    padding: 8px 16px; border: none; border-radius: 6px; font-size: 0.88rem;
    font-weight: 600; font-family: var(--font); cursor: pointer;
}
.admin-modal-actions .save { background: var(--primary); color: white; }
.admin-modal-actions .save:hover { background: var(--primary-hover); }
.admin-modal-actions .cancel { background: var(--bg); color: var(--text-secondary); }
.admin-modal-actions .cancel:hover { background: #e4e6eb; }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-secondary);
}
.empty-state i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    color: var(--border);
    display: block;
}
.empty-state h3 { margin-bottom: 6px; color: var(--text); }

/* ==================== TABLET — 2 columns, right sidebar drops ==================== */
@media (max-width: 1100px) {
    .main-layout {
        grid-template-columns: 240px 1fr;
    }
    .sidebar-right {
        display: none;
    }
    /* Show mobile calendar button + dropdown */
    .mobile-cal-btn { display: flex; align-items: center; justify-content: center; }
    .mobile-cal-dropdown { display: block; }
}

/* ==================== SMALL TABLET — single column ==================== */
@media (max-width: 768px) {
    .weather-today { padding: 8px 12px; gap: 8px; }
    .weather-icon-main { font-size: 1.3rem; width: 30px; }
    .weather-today-temp { font-size: 1.05rem; }
    .weather-today-right { font-size: 0.72rem; gap: 1px; }
    .weather-daily-desc { display: none; }
    .weather-daily-name { width: 55px; font-size: 0.8rem; }
    .weather-hour { min-width: 56px; padding: 8px 6px; }
    .main-layout {
        grid-template-columns: 1fr;
        padding: 12px;
    }
    .sidebar-left {
        position: static;
        max-height: none;
    }
    .sidebar-left { display: none; }
    /* Hot list scrolls horizontally */
    .hot-list { display: flex; overflow-x: auto; gap: 0; padding-bottom: 4px; scrollbar-width: none; }
    .hot-list::-webkit-scrollbar { display: none; }
    .hot-item { flex-direction: column; min-width: 110px; text-align: center; gap: 6px; }
    .hot-thumb { width: 52px; height: 52px; }
    .hot-title { white-space: normal; font-size: 0.78rem; }
    .hot-venue { display: none; }
}

/* ==================== PHONE ==================== */
@media (max-width: 640px) {
    .site-header { padding: 0 8px; }
    .logo span { display: none; }
    .logo i { font-size: 1.4rem; }
    .header-zip input { width: 40px; font-size: 0.82rem; }
    .header-zip { padding: 6px 8px; }
    .header-search input { font-size: 16px; padding: 10px 14px 10px 36px; }
    .main-layout { padding: 8px; }

    .date-bar { display: none; }

    /* Mobile stats ticker */
    .mobile-stats {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 6px 0;
        font-size: 0.82rem;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border-light);
        margin-bottom: 6px;
    }
    .mobile-stats i { color: var(--accent); font-size: 0.72rem; }
    .mobile-stats strong { color: var(--text); }
    .mobile-stats-brand { font-size: 0.85rem; color: var(--text); letter-spacing: -0.3px; }
    .mobile-stats-brand strong { color: var(--accent); }
    .mobile-stats-sep { color: var(--accent); }

    .filter-row { flex-wrap: wrap; gap: 6px; }
    .filter-divider { display: none; }
    .filter-bar { display: contents; }
    .chip-hs .fa-star { display: none; }

    /* Mobile Hot Today button */
    .mobile-hot-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.84rem;
        font-weight: 600;
        white-space: nowrap;
        background: var(--bg-card);
        border: none;
        color: #dc2626;
        cursor: pointer;
        box-shadow: var(--shadow);
        font-family: var(--font);
    }
    .mobile-hot-btn:hover { background: #fef2f2; }
    .mobile-hot-btn.active { background: #dc2626; color: white; }
    .mobile-hot-btn i { font-size: 0.78rem; }

    /* Mobile Hot Today inline list */
    .mobile-hot-list {
        display: none;
        flex-direction: column;
        gap: 0;
        background: var(--bg-card);
        border-radius: 12px;
        box-shadow: var(--shadow);
        margin-bottom: 12px;
        overflow: hidden;
        position: relative;
    }
    .mobile-hot-list.open { display: flex; }
    .mobile-hot-list.preview {
        max-height: 180px;
        overflow: hidden;
    }
    .mobile-hot-list.preview::after {
        content: 'See all \25BE';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(transparent, var(--bg-card) 60%);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 8px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-tertiary);
        cursor: pointer;
        pointer-events: none;
    }
    .mobile-hot-list.expanded { max-height: none; }
    .mobile-hot-list.expanded::after { display: none; }
    .mobile-hot-header {
        padding: 8px 12px 4px;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #dc2626;
    }
    .mobile-hot-header i { margin-right: 4px; }
    .mobile-hot-list .hot-item {
        flex-direction: row;
        min-width: 0;
        text-align: left;
        padding: 8px 12px;
        border-bottom: 1px solid var(--border-light);
    }
    .mobile-hot-list .hot-item:last-child { border-bottom: none; }
    .mobile-hot-list .hot-thumb { width: 44px; height: 44px; flex-shrink: 0; }
    .mobile-hot-list .hot-venue { display: block; }

    .event-card .event-body { padding: 10px 12px; }
    h3.event-title { font-size: 0.9rem; }
    .event-card.has-image { background-image: none !important; }
    .event-card.has-image .event-body { background: none; }
    .event-card.has-image .event-poster {
        width: 140px;
        min-height: 90px;
        margin: 0;
        margin-left: -50px;
        border-radius: 0;
        box-shadow: none;
        z-index: 0;
        background-size: cover;
        background-position: center;
        -webkit-mask-image: linear-gradient(to left, black 50%, transparent 100%);
        mask-image: linear-gradient(to left, black 50%, transparent 100%);
    }
    .expanded-actions { flex-wrap: wrap; gap: 10px; }
}

/* Header camera link */
.header-cam-link {
    color: #65676b;
    font-size: 1.05rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 6px;
    border-radius: 50%;
    transition: background 0.2s;
}
.header-cam-link:hover { background: rgba(0,0,0,0.05); color: #e74c3c; }

/* Weather cam bar — bold link to live cams */
.weather-cam-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid #e4e6eb;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.weather-cam-bar:hover { background: #f0f2f5; }
.weather-cam-bar img {
    width: 72px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.08);
}
.weather-cam-info { flex: 1; min-width: 0; }
.weather-cam-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1c1e21;
    display: flex;
    align-items: center;
    gap: 5px;
}
.weather-cam-title i { color: #e74c3c; font-size: 0.75rem; }
.weather-cam-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e74c3c;
    animation: livePulse 1.5s infinite;
    flex-shrink: 0;
}
.weather-cam-sub {
    font-size: 0.7rem;
    color: #65676b;
    margin-top: 1px;
}
.weather-cam-arrow { color: #65676b; font-size: 0.6rem; flex-shrink: 0; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }