:root {
    --bg: #1a1a2e;
    --bg-card: rgba(0, 0, 0, 0.35);
    --bg-card-hover: rgba(0, 0, 0, 0.45);
    --text: #f0f0f5;
    --text-secondary: #8888a0;
    --accent: #ff6b35;
    --accent-hover: #ff8555;
    --accent-glow: rgba(255, 107, 53, 0.3);
    --blue: #4a9eff;
    --green: #34d399;
    --red: #ef4444;
    --yellow: #fbbf24;
    --border: #2a2a3e;
    --radius: 16px;
    --radius-sm: 10px;
    --nav-height: 70px;
}

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

/* ===== PULL TO REFRESH (CYCLIST) ===== */
.ptr-indicator {
    height: 0;
    opacity: 0;
    overflow: hidden;
    background: transparent;
    position: relative;
}

.ptr-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.ptr-road {
    position: absolute;
    bottom: 4px;
    left: 16px;
    right: 16px;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.ptr-cyclist {
    position: absolute;
    bottom: 5px;
    left: 0;
    transition: none;
}

.ptr-cyclist.ptr-exit {
    transition: left 0.5s ease-in;
}

.ptr-wheel-back,
.ptr-wheel-front {
    /* wheel rotation set dynamically via JS */
}

@keyframes ptrWheelSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ptr-indicator.ptr-loading .ptr-wheel-back,
.ptr-indicator.ptr-loading .ptr-wheel-front {
    animation: ptrWheelSpin 0.4s linear infinite;
}

html {
    background: var(--bg);
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    padding-top: env(safe-area-inset-top);
}

#app {
    max-width: 430px;
    margin: 0 auto;
    padding-bottom: calc(var(--nav-height) + 20px);
    min-height: 100vh;
    position: relative;
}
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: url('bg-cyclist.png') no-repeat center center;
    background-size: cover;
    opacity: 0.035;
    pointer-events: none;
    z-index: 0;
}

.page { display: none; padding: 20px 16px; animation: fadeIn 0.3s ease; position: relative; }
.page.active { display: block; }

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

/* ===== BRAND / HEADER ===== */
.page-header { text-align: center; margin-bottom: 24px; padding-top: 10px; position: relative; }
.page-header:has(.brand) { text-align: left; }

.page-header-with-logo { padding-top: 6px; }

.page-logo {
    position: absolute;
    top: 10px;
    left: 0;
    cursor: pointer;
    filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.3));
    transition: transform 0.2s;
}
.page-logo:hover { transform: scale(1.1); }

.brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin-bottom: 4px;
    position: relative;
}

.brand-logo {
    flex-shrink: 0;
    filter: drop-shadow(0 0 12px rgba(255, 107, 53, 0.35));
    cursor: pointer;
    position: relative;
}

.brand-logo svg {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.brand-logo .logo-smiley {
    position: absolute;
    top: 0;
    left: 0;
}

.brand-logo.animating .logo-wheel {
    opacity: 0;
    transform: scale(0.5) rotate(180deg);
}

.brand-logo.animating .logo-smiley {
    opacity: 1;
    transform: scale(1.1);
}

.brand-logo.animating-back .logo-wheel {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.brand-logo.animating-back .logo-smiley {
    opacity: 0;
    transform: scale(0.5);
}

.brand-text { text-align: left; }

.app-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -1px;
    background: linear-gradient(135deg, #ff6b35 0%, #ffad85 50%, #ff6b35 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s ease-in-out infinite;
    line-height: 1.1;
}

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

/* Hamburger menu button */
.btn-hamburger {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    height: 40px;
    width: 40px;
    transition: opacity 0.2s;
}
.btn-hamburger:hover { opacity: 0.8; }
.btn-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 1px;
    opacity: 0.7;
}

/* App dropdown menu */
.app-menu {
    position: absolute;
    top: 48px;
    right: 0;
    z-index: 50;
    background: #1e1e30;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 0;
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    display: none;
    animation: menuIn 0.15s ease;
}
.app-menu.active { display: block; }

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

.app-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}
.app-menu-item:hover {
    background: rgba(255,255,255,0.05);
}
.app-menu-item:active {
    background: rgba(255,255,255,0.08);
}
.app-menu-disconnect {
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 4px;
    padding-top: 12px;
    color: var(--text-secondary);
    opacity: 0.7;
}
.strava-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(252, 76, 2, 0.3);
    border-top-color: #FC4C02;
    border-radius: 50%;
    animation: stravaSpin 0.6s linear infinite;
}
@keyframes stravaSpin {
    to { transform: rotate(360deg); }
}
.app-menu-disconnect:hover {
    color: var(--red);
    opacity: 1;
}
.app-menu-icon {
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.app-menu-label {
    flex: 1;
}

.app-tagline {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 2px;
}

/* ===== FUN MESSAGE ===== */
.fun-message {
    text-align: center;
    padding: 4px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.5s ease;
    min-height: 38px;
}

.fun-message.reveal {
    animation: funReveal 1.2s ease forwards;
    color: var(--green);
    cursor: pointer;
}

@keyframes funReveal {
    0% { color: var(--text-secondary); transform: scale(1); }
    40% { color: var(--green); transform: scale(1.08); }
    100% { color: var(--green); transform: scale(1); }
}

.fun-dots {
    display: inline-block;
    animation: dotPulse 1.5s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.fun-message.reveal .fun-dots {
    display: none;
}

.app-subtitle { color: var(--text-secondary); font-size: 14px; margin-top: 4px; }
.page-title { font-size: 28px; font-weight: 700; }

.modal-buttons-stacked {
    flex-direction: column;
    gap: 8px;
}

/* ===== RIDE PHASE: ACTIVE (full screen timer) ===== */
.ride-phase { }

.ride-active-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 40px);
    height: calc(100dvh - 40px);
    text-align: center;
    gap: 0;
    overflow: hidden;
    position: relative;
}

.save-location-wrap {
    position: relative;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-save-location {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    background: #222240;
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text);
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    z-index: 2;
}

.btn-save-location:active {
    transform: scale(0.92);
}

.save-location-pill {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 20px 0 40px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0 21px 21px 0;
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
}

.save-location-pill.show {
    animation: pill-reveal 7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes pill-reveal {
    0%   { max-width: 0; opacity: 0; padding-right: 0; }
    5%   { opacity: 1; }
    12%  { max-width: 180px; padding-right: 20px; opacity: 1; }
    85%  { max-width: 180px; padding-right: 20px; opacity: 1; }
    100% { max-width: 0; padding-right: 0; opacity: 0; }
}

/* Wind compass */
.ride-wind-compass {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.ride-compass-ring {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: radial-gradient(circle, rgba(255,107,53,0.08) 0%, transparent 70%);
}

.ride-compass-arrow {
    width: 64px;
    height: 64px;
    transition: transform 0.15s linear;
    overflow: visible;
}

/* Wind streaks: speed/distance driven by CSS vars set in JS */
.ride-compass-arrow {
    --wind-duration: 1.8s;
    --wind-travel: -30px;
    --wind-opacity: 0.5;
    --wind-scale: 0.5;
    --wind-wobble: 4px;
}

.wind-streak {
    animation: windStreak var(--wind-duration) ease-in-out infinite;
    transform-origin: center;
}

/* Alternating wobble directions for natural drift */
.ws1  { animation-delay: 0s; animation-name: windStreakL; }
.ws2  { animation-delay: 0.4s; }
.ws3  { animation-delay: 0.8s; animation-name: windStreakL; }
.ws4  { animation-delay: 0.15s; }
.ws5  { animation-delay: 0.55s; animation-name: windStreakL; }
.ws6  { animation-delay: 0.95s; }
.ws7  { animation-delay: 0.3s; animation-name: windStreakL; }
.ws8  { animation-delay: 0.1s; }
.ws9  { animation-delay: 0.5s; animation-name: windStreakL; }
.ws10 { animation-delay: 0.85s; }
.ws11 { animation-delay: 0.2s; animation-name: windStreakL; }
.ws12 { animation-delay: 0.05s; }
.ws13 { animation-delay: 0.45s; animation-name: windStreakL; }
.ws14 { animation-delay: 0.7s; }
.ws15 { animation-delay: 1.0s; animation-name: windStreakL; }
.ws16 { animation-delay: 0.25s; }
.ws17 { animation-delay: 0.65s; animation-name: windStreakL; }
.ws18 { animation-delay: 0.9s; }
.ws19 { animation-delay: 0.35s; animation-name: windStreakL; }
.ws20 { animation-delay: 0.2s; }
.ws21 { animation-delay: 0.6s; animation-name: windStreakL; }
.ws22 { animation-delay: 0.75s; }
.ws23 { animation-delay: 0.1s; animation-name: windStreakL; }
.ws24 { animation-delay: 0.48s; }
.ws25 { animation-delay: 0.82s; animation-name: windStreakL; }

/* Right drift */
@keyframes windStreak {
    0%   { transform: translateY(0) translateX(0) scaleY(var(--wind-scale)); opacity: 0; }
    8%   { opacity: var(--wind-opacity); }
    40%  { transform: translateY(calc(var(--wind-travel) * 0.4)) translateX(var(--wind-wobble)) scaleY(var(--wind-scale)); opacity: calc(var(--wind-opacity) * 0.6); }
    80%  { opacity: 0; }
    100% { transform: translateY(var(--wind-travel)) translateX(calc(var(--wind-wobble) * 0.5)) scaleY(var(--wind-scale)); opacity: 0; }
}
/* Left drift */
@keyframes windStreakL {
    0%   { transform: translateY(0) translateX(0) scaleY(var(--wind-scale)); opacity: 0; }
    8%   { opacity: var(--wind-opacity); }
    40%  { transform: translateY(calc(var(--wind-travel) * 0.4)) translateX(calc(var(--wind-wobble) * -1)) scaleY(var(--wind-scale)); opacity: calc(var(--wind-opacity) * 0.6); }
    80%  { opacity: 0; }
    100% { transform: translateY(var(--wind-travel)) translateX(calc(var(--wind-wobble) * -0.5)) scaleY(var(--wind-scale)); opacity: 0; }
}

.ride-compass-info {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 8px;
}

.ride-compass-speed {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.ride-compass-unit {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.ride-compass-dir {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    margin-left: 4px;
}

.ride-wind-bar {
    width: 110px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    margin-top: 8px;
    overflow: hidden;
}

.ride-wind-bar-fill {
    height: 100%;
    border-radius: 2px;
    width: 0%;
    transition: width 0.5s ease, background 0.5s ease;
}

.ride-active-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    position: relative;
    width: 100%;
    max-width: 280px;
}

.ride-active-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ride-active-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--green);
    animation: pulse-dot 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.ride-active-label {
    font-size: 28px;
    font-weight: 700;
    color: var(--green);
}

.ride-active-location {
    font-size: 18px;
    color: rgba(52, 211, 153, 0.5);
}

.ride-active-timer {
    font-variant-numeric: tabular-nums;
    font-size: 64px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 32px;
}

/* Chart hour range buttons */
.ride-chart-hours {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 10px;
}

.ride-hour-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.3);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.ride-hour-btn.active {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.6);
}

/* Forecast chart carousel */
.ride-chart-carousel {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 28px;
}

.ride-chart-viewport {
    overflow: hidden;
}

.ride-chart-track {
    display: flex;
    transition: transform 0.3s ease;
}

.ride-chart-slide {
    flex: 0 0 100%;
    min-width: 0;
    padding: 0 4px;
    box-sizing: border-box;
}

.ride-chart-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    min-height: 22px;
}

.ride-chart-dot {
    height: 6px;
    width: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    cursor: pointer;
    font-size: 0;
    color: transparent;
    transition: all 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
}

.ride-chart-dot.active {
    height: 22px;
    width: auto;
    border-radius: 11px;
    background: rgba(255,255,255,0.1);
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    padding: 0 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ride-location {
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
    margin: 8px 0 16px;
}
.ride-location:empty { display: none; }

/* Tap pill overlay (HTML, lives outside overflow:hidden viewport) */
.chart-tap-pill {
    position: absolute;
    z-index: 10;
    display: none;
    background: rgba(15,15,25,0.88);
    color: white;
    font-size: 9px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.3px;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
}

/* Chart SVG & labels (shared by all slides) */
#ride-rain-svg,
#ride-sun-svg,
#ride-temp-svg {
    width: 100%;
    height: 70px;
    display: block;
    overflow: visible;
}

.ride-rain-labels,
.ride-sun-labels,
.ride-temp-labels {
    position: relative;
    height: 16px;
    margin-top: 4px;
    font-size: 10px;
    color: var(--text-secondary);
    opacity: 0.5;
}

.ride-rain-labels span,
.ride-sun-labels span,
.ride-temp-labels span {
    position: absolute;
    transform: translateX(-50%);
}

.ride-rain-label-now {
    color: var(--accent);
    opacity: 1;
    font-weight: 600;
}

.rain-now-pulse {
    animation: rainNowPulse 2s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

@keyframes rainNowPulse {
    0%, 100% { r: 7; opacity: 0.18; }
    50% { r: 10; opacity: 0.06; }
}


.btn-end-ride {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 280px;
    padding: 18px 32px;
    background: linear-gradient(135deg, var(--accent), #e85d2a);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    margin-bottom: 12px;
}

.btn-end-ride svg {
    flex-shrink: 0;
}

.btn-end-ride:hover { transform: translateY(-1px); box-shadow: 0 6px 24px var(--accent-glow); }
.btn-end-ride:active { transform: translateY(0); }

.ride-end-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 280px;
    margin-bottom: 12px;
}

.ride-end-row .btn-end-ride {
    margin-bottom: 0;
    flex: 1;
}

.btn-cancel-ride {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 56px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    padding: 0;
    flex-shrink: 0;
}

.btn-cancel-ride:active { opacity: 0.8; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
    50% { opacity: 0.7; box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
}

/* ===== RIDE PHASE: FEEDBACK (rate your ride) ===== */
.ride-status-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.ride-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--green);
}

.ride-status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--green);
}

.ride-timer-summary {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
    color: var(--green);
    opacity: 0.8;
    margin-left: 2px;
}

/* ===== WEATHER ===== */
.weather-card {
    position: relative;
    background: var(--bg-card); border-radius: var(--radius);
    padding: 24px; border: 1px solid var(--border); margin-bottom: 20px;
}
/* Best day to ride on weather card */
.weather-card.best-rank-1 { --snake-color: #ffd700; }
.weather-card.best-rank-2 { --snake-color: #c0c0c0; }
.weather-card.best-rank-3 { --snake-color: #cd7f32; }
.weather-card.has-best-day {
    padding-top: 22px;
    margin-top: 20px;
}
.weather-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px; text-align: center; }

/* Location fallback UI */
.btn-location-allow {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 14px; margin-bottom: 8px;
    background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm);
    font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.btn-location-allow:hover { opacity: 0.9; }
.btn-location-allow:active { transform: scale(0.97); }

.btn-location-search-toggle {
    background: none; border: none; color: var(--text-secondary); font-family: inherit;
    font-size: 13px; cursor: pointer; text-decoration: underline; padding: 6px;
    transition: color 0.2s;
}
.btn-location-search-toggle:hover { color: var(--text); }

.location-search-wrap {
    display: flex; gap: 8px; width: 100%;
}
.location-search-input {
    flex: 1; padding: 12px 14px; background: rgba(255,255,255,0.06);
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); font-family: inherit; font-size: 15px; outline: none;
    transition: border-color 0.2s;
}
.location-search-input:focus { border-color: var(--accent); }
.location-search-input::placeholder { color: var(--text-secondary); opacity: 0.6; }

.btn-location-search {
    padding: 12px 16px; background: var(--accent); border: none; border-radius: var(--radius-sm);
    font-size: 18px; cursor: pointer; transition: opacity 0.2s;
}
.btn-location-search:hover { opacity: 0.85; }

.location-search-results {
    display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 8px;
}
.location-result-item {
    width: 100%; padding: 12px 14px; text-align: left;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); font-family: inherit; font-size: 13px; cursor: pointer; transition: all 0.2s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.location-result-item:hover { background: rgba(255,255,255,0.08); border-color: var(--accent); }
.spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.weather-main { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 20px; }
.weather-icon { font-size: 56px; line-height: 1; }
.temp-value { font-size: 56px; font-weight: 800; letter-spacing: -2px; }
.temp-unit { font-size: 24px; color: var(--text-secondary); font-weight: 500; }
.weather-details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.weather-detail { background: rgba(255,255,255,0.04); border-radius: var(--radius-sm); padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.weather-detail-clickable { cursor: pointer; transition: all 0.2s; }
.weather-detail-clickable:hover { background: rgba(255,255,255,0.08); }
.weather-detail-clickable:active { transform: scale(0.96); }
.weather-detail-clickable::after { content: '›'; position: absolute; top: 6px; right: 8px; font-size: 14px; color: var(--text-secondary); opacity: 0.5; }

.weather-card-title { margin-bottom: 16px; font-size: 16px; color: var(--text); }

.notification-setting {
    margin-top: 16px;
    padding: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.notification-setting-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.notification-setting-label {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}
.notification-hours-toggle {
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    color: var(--text);
    transition: color 0.2s;
}
.notification-hours-toggle:hover { color: var(--accent); }

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    transition: all 0.3s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: all 0.3s;
}
.toggle-switch.active .toggle-slider {
    background: var(--accent);
}
.toggle-switch.active .toggle-slider::before {
    transform: translateX(20px);
    background: white;
}
.weather-day-toggle, .weather-time-toggle {
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.2s;
}
.weather-day-toggle:hover, .weather-time-toggle:hover { color: var(--accent); }

.time-picker-subtitle {
    margin: -12px 0 0;
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
}
.time-picker-duration-toggle {
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.2s;
}
.time-picker-duration-toggle:hover { color: var(--accent); }

.duration-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 16px;
}
.duration-picker-option {
    padding: 12px 0;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.duration-picker-option:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text);
    border-color: var(--accent);
}
.duration-picker-option.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.time-picker-info-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}
.time-picker-info-btn:hover { color: var(--accent); }

.time-picker-info-list {
    margin: 12px 0 0;
    padding-left: 6px;
    list-style: none;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.8;
}
.time-picker-info-note {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.7;
    text-align: center;
}

.time-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 16px;
}
.time-picker-hour {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0 6px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.time-picker-hour:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text);
    border-color: var(--accent);
}
.time-picker-hour.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}
.time-picker-hour.suggested {
    border-color: var(--accent);
}
.time-picker-hour.suggested.active {
    border-color: white;
}
.time-picker-badge {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    line-height: 1;
}
.time-picker-hour.active .time-picker-badge {
    color: rgba(255,255,255,0.8);
}

.wind-direction { font-size: 13px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
.wind-arrow { display: inline-block; font-size: 16px; line-height: 1; transition: transform 0.3s; }
.detail-icon { font-size: 18px; }
.detail-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.detail-value { font-size: 15px; font-weight: 600; }
.weather-summary {
    margin-bottom: 16px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.03);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.weather-warnings {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    gap: 6px;
    z-index: 3;
    white-space: nowrap;
}
.weather-warnings .weather-warning-pill {
    font-size: 10px;
    padding: 2px 8px;
    cursor: pointer;
    background: #1a1a2c;
}
.weather-warnings:empty { display: none; }
.weather-warning-pill {
    display: inline-block;
    padding: 4px 14px;
    border: 1.5px solid var(--red);
    border-radius: 20px;
    background: var(--bg-card);
    color: var(--red);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.weather-warning-pill[onclick] { cursor: pointer; }
.weather-warning-pill.warning-blue {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}
.weather-warning-pill.warning-yellow {
    border-color: var(--yellow);
    color: var(--yellow);
}
.weather-warning-pill.warning-orange {
    border-color: var(--accent);
    color: var(--accent);
}
.weather-warning-pill.warning-red {
    border-color: var(--red);
    color: var(--red);
}
.warning-detail-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
}

.warning-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.warning-legend-title {
    width: 100%;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    opacity: 0.6;
    margin-bottom: 2px;
}

.warning-legend .weather-warning-pill {
    font-size: 10px;
    padding: 2px 8px;
    opacity: 0.7;
}
.weather-summary b {
    color: var(--text);
    font-weight: 600;
}
.weather-summary-duration {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-style: dotted;
    cursor: pointer;
    color: inherit;
    font-weight: 600;
    transition: opacity 0.2s;
}
.weather-summary-duration:hover { opacity: 0.7; }
.weather-summary:empty { display: none; }
.weather-best-time {
    text-align: center;
    margin-top: 16px;
}
.weather-best-time:empty { display: none; }
.best-time-info-btn {
    display: inline-block;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.best-time-info-btn:hover { opacity: 1; }
.weather-summary-best {
    display: inline-block;
    padding: 8px 14px;
    border: 1.5px solid var(--accent);
    border-radius: 20px;
    color: var(--accent);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}
.weather-summary-nobest {
    display: inline-block;
    padding: 8px 16px;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
}

.weather-location {
    text-align: center; color: var(--text-secondary); font-size: 13px; margin-top: 16px;
    cursor: pointer; transition: color 0.2s; border-radius: var(--radius-sm); padding: 6px 8px;
}
.weather-location:hover { color: var(--text); }
.weather-location.editing { cursor: default; }
.weather-location.editing:hover { color: var(--text-secondary); }

.btn-location-gps {
    display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 10px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--accent); font-size: 13px; cursor: pointer; transition: background 0.2s;
    margin-bottom: 6px;
}
.btn-location-gps:hover { background: var(--bg-hover); }

.location-edit-hint {
    font-size: 11px; opacity: 0.4; transition: opacity 0.2s; margin-left: 2px;
}
.weather-location:hover .location-edit-hint { opacity: 0.8; }

.location-search-inline { margin-bottom: 6px; }

/* ===== SUGGESTION CARD ===== */
.suggestion-card { background: var(--bg-card); border-radius: var(--radius); padding: 20px; border: 1px solid var(--border); margin-bottom: 24px; }
.section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; text-align: center; }

.gear-advisor-subtitle { font-size: 12px; color: var(--text-secondary); opacity: 0.5; text-align: center; margin: -10px 0 16px; }

.suggestion-zone { margin-bottom: 16px; }
.suggestion-zone:last-child { margin-bottom: 0; }
.suggestion-zone-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-left: 4px; }
.suggestion-zone-icon { font-size: 18px; }
.suggestion-zone-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); }

.confidence-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.confidence-badge { cursor: pointer; transition: all 0.3s ease; }
.confidence-expanded { animation: confPop 0.4s ease; }
@keyframes confPop {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.confidence-high { background: rgba(52, 211, 153, 0.12); color: var(--green); }
.confidence-mid { background: rgba(251, 191, 36, 0.12); color: var(--yellow); }
.confidence-low { background: rgba(136, 136, 160, 0.12); color: var(--text-secondary); }

.suggestion-items-list { display: flex; flex-direction: column; gap: 6px; }

.suggestion-item-card { position: relative; background: rgba(255,255,255,0.04); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; transition: all 0.2s; user-select: none; }
.suggestion-item-card:hover { background: rgba(255,255,255,0.07); }
.suggestion-item-card:active { transform: scale(0.98); }
.suggestion-item-card.accepted { border-color: var(--green); background: rgba(52, 211, 153, 0.08); }
.suggestion-item-card.extra-item { border-style: dashed; border-color: var(--blue); background: rgba(74, 158, 255, 0.06); }
.suggestion-item-card.extra-item.accepted { border-style: solid; border-color: var(--green); background: rgba(52, 211, 153, 0.08); }

.suggestion-checkmark { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); display: none; align-items: center; justify-content: center; font-size: 12px; color: white; box-shadow: 0 2px 8px rgba(52, 211, 153, 0.4); animation: checkPop 0.25s ease; }
.suggestion-item-card.accepted .suggestion-checkmark { display: flex; }
@keyframes checkPop { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

.suggestion-item-top { display: flex; align-items: center; justify-content: space-between; }
.suggestion-item-name { font-size: 15px; font-weight: 600; color: var(--text); }
.suggestion-item-toggle { font-size: 12px; color: var(--text-secondary); transition: transform 0.2s; }
.suggestion-item-toggle.expanded { transform: rotate(180deg); }

.suggestion-item-details { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.suggestion-item-details.visible { display: block; }
.suggestion-detail-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.suggestion-detail-label { color: var(--text-secondary); min-width: 90px; }
.suggestion-detail-value { font-weight: 600; }
.detail-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.detail-badge.yes { background: rgba(52, 211, 153, 0.15); color: var(--green); }
.detail-badge.no { background: rgba(255,255,255,0.06); color: var(--text-secondary); }

.suggestion-add-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; border: 1.5px dashed var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.suggestion-add-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(255, 107, 53, 0.06); }
.suggestion-add-icon { font-size: 16px; font-weight: 700; }
.suggestion-layer-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 2px; padding-left: 2px; font-weight: 500; }

/* ===== NO ITEM CARD ===== */
.no-item-card {
    background: rgba(255, 255, 255, 0.02);
    border-style: dashed;
    border-color: var(--text-secondary);
}
.no-item-card.accepted {
    border-color: var(--green);
    border-style: solid;
    background: rgba(52, 211, 153, 0.06);
}
.no-item-card .suggestion-item-name {
    color: var(--text-secondary);
    font-weight: 500;
}
.no-item-card.accepted .suggestion-item-name {
    color: var(--text);
}

.picker-no-item {
    border-color: var(--text-secondary);
    border-style: dashed;
    background: rgba(255, 255, 255, 0.02);
}
.picker-no-item:hover {
    border-color: var(--green);
    background: rgba(52, 211, 153, 0.06);
}
.picker-no-item .picker-item-name {
    color: var(--text-secondary);
}

/* ===== AI SUGGESTION BADGE ===== */
.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.15), rgba(255, 154, 108, 0.15));
    color: var(--accent);
    border: 1px solid rgba(255, 107, 53, 0.25);
    margin-left: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

.ai-badge-icon {
    font-size: 10px;
    line-height: 1;
}

/* ===== LET'S RIDE BUTTON ===== */
.btn-ride-row { display: flex; gap: 10px; align-items: stretch; }
.btn-ride { display: flex; align-items: center; justify-content: center; gap: 12px; flex: 1; padding: 20px; background: linear-gradient(135deg, var(--accent), #e85d2a); color: white; border: none; border-radius: var(--radius); font-size: 22px; font-weight: 800; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 24px var(--accent-glow); letter-spacing: 0.5px; font-family: inherit; }
.btn-ride:hover { transform: translateY(-2px); box-shadow: 0 8px 32px var(--accent-glow); }
.btn-ride:active { transform: translateY(0); }
.btn-ride-icon { font-size: 28px; }
.btn-lock-gear { display: flex; align-items: center; justify-content: center; width: 52px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; flex-shrink: 0; }
.btn-lock-gear:hover { background: rgba(255,255,255,0.1); }
.btn-lock-gear.locked { background: rgba(52,211,153,0.1); border-color: var(--green); color: var(--green); }
.btn-lock-gear.locked.lock-warning { background: rgba(239,68,68,0.1); border-color: var(--red); color: var(--red); }

/* ===== ACTIVITY OVERLAY ===== */
body.overlay-open,
body:has(.modal-overlay.active) {
    overflow: hidden;
}

.activity-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    animation: slideUp 0.35s ease;
}
.activity-overlay.ride-active-phase {
    overflow: hidden;
}

.activity-overlay.active {
    display: block;
}

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

@keyframes slideDown {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(100%); }
}

.activity-overlay.closing {
    animation: slideDown 0.3s ease forwards;
}

.activity-overlay-content {
    max-width: 430px;
    margin: 0 auto;
    padding: 20px 16px;
    padding-bottom: 40px;
}

/* ===== BODY FIGURE ===== */
.body-figure { display: flex; justify-content: center; margin: 4px 0 10px; }
.body-svg { width: 160px; height: auto; }
.body-part {
    fill: rgba(42, 42, 62, 0.8);
    stroke: var(--border);
    stroke-width: 1.5;
    cursor: pointer;
    transition: fill 0.4s ease, stroke 0.4s ease, filter 0.4s ease;
    stroke-linejoin: round;
}
.body-part:hover { fill: rgba(255, 255, 255, 0.08); }
.body-part.cold { fill: rgba(74, 158, 255, 0.2); stroke: var(--blue); filter: drop-shadow(0 0 6px rgba(74, 158, 255, 0.3)); }
.body-part.good { fill: rgba(52, 211, 153, 0.2); stroke: var(--green); filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.3)); }
.body-part.warm { fill: rgba(248, 113, 113, 0.2); stroke: var(--red); filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.3)); }
.body-connector { fill: rgba(42, 42, 62, 0.8); stroke: none; }
.body-label { fill: var(--text-secondary); font-size: 13px; text-anchor: middle; font-family: 'Inter', sans-serif; pointer-events: none; opacity: 0.6; }
.body-label-small { font-size: 10px; }
.body-label-tiny { font-size: 8px; letter-spacing: 0.5px; text-transform: uppercase; }

/* ===== FEEDBACK ===== */
.feedback-controls { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.feedback-zone { background: #1a1a2c; border-radius: var(--radius-sm); padding: 14px; border: 1px solid var(--border); }
.feedback-zone-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.feedback-buttons { display: flex; gap: 8px; }
.fb-btn { flex: 1; padding: 10px 6px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.fb-btn:active { transform: scale(0.95); }
.fb-btn.fb-cold.active { border-color: var(--blue); background: rgba(74, 158, 255, 0.15); color: var(--blue); }
.fb-btn.fb-good.active { border-color: var(--green); background: rgba(52, 211, 153, 0.15); color: var(--green); }
.fb-btn.fb-warm.active { border-color: var(--red); background: rgba(248, 113, 113, 0.15); color: var(--red); }
.btn-save-feedback { width: 100%; padding: 16px; background: linear-gradient(135deg, var(--green), #2ab085); color: white; border: none; border-radius: var(--radius); font-size: 17px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.btn-save-feedback:hover { transform: translateY(-1px); }
.btn-save-feedback:active { transform: translateY(0); }

/* ===== NOTES SECTION ===== */
.notes-section {
    margin-bottom: 20px;
}

.notes-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
}

.notes-textarea {
    width: 100%;
    min-height: 100px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

.notes-textarea:focus {
    border-color: var(--accent);
}

.notes-textarea::placeholder {
    color: var(--text-secondary);
}

/* ===== ITEM DESCRIPTION ===== */
.item-description-input {
    width: 100%;
    min-height: 60px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}
.item-description-input:focus { border-color: var(--accent); }
.item-description-input::placeholder { color: var(--text-secondary); }

.wardrobe-item-description {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== WARDROBE ===== */
.wardrobe-add-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border: 1.5px dashed var(--accent);
    border-radius: var(--radius-sm);
    color: var(--accent);
    cursor: pointer;
    transition: background 0.2s;
    opacity: 0.7;
}
.wardrobe-add-item:hover { background: rgba(255, 107, 53, 0.1); opacity: 1; }
.wardrobe-add-icon { font-size: 20px; font-weight: 700; width: 44px; text-align: center; flex-shrink: 0; }
.wardrobe-add-text { font-size: 14px; font-weight: 600; }
.wardrobe-section { margin-bottom: 20px; }
.wardrobe-category-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; padding-left: 4px; }
.wardrobe-items { display: flex; flex-direction: column; gap: 8px; }

.wardrobe-item {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 12px 14px; display: flex; align-items: center; gap: 12px;
    transition: background 0.2s; cursor: pointer;
}
.wardrobe-item:hover { background: var(--bg-card-hover); }

.wardrobe-item-photo {
    width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
    border: 1px solid var(--border); flex-shrink: 0;
}
.wardrobe-item-photo-placeholder {
    width: 44px; height: 44px; border-radius: 8px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}

.wardrobe-item-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.wardrobe-item-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wardrobe-item-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.wardrobe-tag { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.wardrobe-tag.waterproof { background: rgba(74, 158, 255, 0.15); color: var(--blue); }
.wardrobe-tag.windproof { background: rgba(251, 191, 36, 0.15); color: var(--yellow); }

.wardrobe-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.wardrobe-edit, .wardrobe-delete {
    background: none; border: none; color: rgba(255,255,255,0.45);
    font-size: 18px; cursor: pointer; padding: 4px 6px; border-radius: 8px; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.wardrobe-edit:hover { color: var(--accent); background: rgba(255, 107, 53, 0.1); }
.wardrobe-delete:hover { color: var(--red); background: rgba(248, 113, 113, 0.1); }
.wardrobe-empty { color: var(--text-secondary); font-size: 13px; font-style: italic; padding: 8px 4px; }

/* ===== PHOTO UPLOAD ===== */
.photo-upload-area {
    width: 100%; height: 120px; border: 2px dashed var(--border); border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all 0.2s; overflow: hidden; position: relative;
}
.photo-upload-area:hover { border-color: var(--accent); background: rgba(255, 107, 53, 0.04); }
.photo-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.photo-placeholder-icon { font-size: 28px; }
.photo-placeholder-text { font-size: 13px; color: var(--text-secondary); }
.photo-preview { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius-sm) - 2px); }
.photo-remove-btn {
    width: 100%; margin-top: 8px; padding: 8px; background: rgba(248, 113, 113, 0.1);
    color: var(--red); border: none; border-radius: var(--radius-sm); font-size: 13px;
    font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.photo-remove-btn:hover { background: rgba(248, 113, 113, 0.2); }

/* ===== MODAL ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; overflow: hidden; }
.modal-overlay.active { display: flex; }
.modal { position: relative; background: #1a1a2c; border-radius: var(--radius); padding: 28px 24px; width: 100%; max-width: 380px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; border: 1px solid var(--border); animation: modalIn 0.3s ease; }
.modal-scrollable { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; min-height: 0; }
.modal-small { max-width: 340px; }
@keyframes modalIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; text-align: center; flex-shrink: 0; }
.modal-description { font-size: 14px; color: var(--text-secondary); text-align: center; margin-bottom: 20px; line-height: 1.5; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.form-group input, .form-group select { width: 100%; padding: 12px 14px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 15px; font-family: inherit; outline: none; transition: border-color 0.2s; }
.form-group input:focus, .form-group select:focus { border-color: var(--accent); }
.form-group select { cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238888a0' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.form-group select option { background: #1a1a2c; color: var(--text); }
.modal-buttons { display: flex; gap: 10px; margin-top: 24px; flex-shrink: 0; }
.btn-cancel, .btn-confirm { flex: 1; padding: 12px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; border: none; transition: all 0.2s; }
.btn-cancel { background: rgba(255,255,255,0.06); color: var(--text); }
.btn-cancel:hover { background: rgba(255,255,255,0.1); }
.btn-confirm { background: var(--accent); color: white; }
.btn-confirm:hover { background: var(--accent-hover); }
.btn-danger { background: var(--red); }
.btn-danger:hover { background: #ef4444; }

/* Picker */
.picker-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; transition: all 0.2s; }
.picker-item:hover { background: rgba(255,255,255,0.08); border-color: var(--accent); }
.picker-item-info { display: flex; flex-direction: column; gap: 4px; }
.picker-item-name { font-size: 15px; font-weight: 600; }
.picker-item-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.picker-item-add { color: var(--accent); font-size: 20px; font-weight: 700; }
.picker-empty { color: var(--text-secondary); text-align: center; padding: 20px; font-size: 14px; }
.picker-add-new { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-top: 4px; background: rgba(99, 102, 241, 0.08); border: 1px dashed rgba(99, 102, 241, 0.3); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; }
.picker-add-new:hover { background: rgba(99, 102, 241, 0.15); border-color: var(--accent); }
.picker-add-new-icon { color: var(--accent); font-size: 18px; font-weight: 700; line-height: 1; }
.picker-add-new-text { color: var(--accent); font-size: 14px; font-weight: 600; }

/* ===== NAV ===== */
.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; height: var(--nav-height); background: rgba(14, 14, 22, 0.95); backdrop-filter: blur(20px); border-top: 1px solid var(--border); display: flex; z-index: 100; transition: transform 0.3s ease; }
.bottom-nav.hidden { transform: translateX(-50%) translateY(100%); }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: none; border: none; color: var(--text-secondary); cursor: pointer; transition: color 0.2s, opacity 0.2s; font-family: inherit; }
.nav-item.active { color: var(--accent); }
.nav-item.nav-disabled { opacity: 0.3; cursor: not-allowed; }
.nav-icon { font-size: 24px; }
.nav-label { font-size: 11px; font-weight: 600; letter-spacing: 0.3px; }

/* ===== RIDES TAB PILLS ===== */
.rides-tab-pills {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 20px;
}

.rides-tab-pill {
    padding: 7px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.rides-tab-badge {
    display: none;
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--red);
    color: white;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.rides-tab-badge.visible {
    display: block;
}

.rides-tab-pill.active {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: var(--text);
}

.rides-planned-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    opacity: 0.6;
}

/* ===== COMPLETION CHART ===== */
.completion-chart-container {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 0 0 12px 0;
    overflow: visible;
}
.completion-chart-header {
    padding: 12px 16px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.completion-chart-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.completion-chart-info-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--text-secondary);
    background: none;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.6;
    transition: opacity 0.2s;
    flex-shrink: 0;
}
.completion-chart-info-btn:active {
    opacity: 1;
}
.completion-chart-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.completion-chart-viewport::-webkit-scrollbar {
    display: none;
}
#completion-chart-canvas {
    display: block;
}
.completion-chart-pill {
    display: none;
    position: absolute;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    background: #1a1a2e;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
    pointer-events: none;
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.completion-chart-pill.visible {
    display: block;
}

/* ===== PLANNED CALENDAR ===== */
.planned-day-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 8px;
}

.planned-day-card.week-start {
    margin-top: 20px;
    border-top: 2px solid rgba(255,255,255,0.15);
}

.planned-day-card.week-start::before {
    content: '';
    display: block;
    width: 40px;
    height: 0;
}

.planned-day-card.is-today {
    background: rgba(255,255,255,0.04);
}

/* Apple Calendar-style "now" line on today card */
.today-now-line {
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 4;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 1px;
    overflow: visible;
}
.today-now-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--now-pct, 50) * 1%);
    height: 100%;
    background: var(--accent);
    border-radius: 1px;
    transition: width 60s linear;
}
.today-now-line::after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(var(--now-pct, 50) * 1%);
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px var(--accent), 0 0 12px rgba(255, 149, 0, 0.3);
    transition: left 60s linear;
}

/* Best day to ride — snake streak on border */
.planned-day-card.best-rank-1 { --snake-color: #ffd700; }
.planned-day-card.best-rank-2 { --snake-color: #c0c0c0; }
.planned-day-card.best-rank-3 { --snake-color: #cd7f32; }

@property --snake-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.snake-glow {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    padding: 2px;
    background: conic-gradient(
        from var(--snake-angle),
        transparent 0%,
        transparent 85%,
        var(--snake-color) 92%,
        var(--snake-color) 95%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    animation: snakeTravel 12s linear infinite;
}

@keyframes snakeTravel {
    0%    { --snake-angle: 25deg;   opacity: 0; }
    2%    { --snake-angle: 25deg;   opacity: 0.8; }
    25%   { --snake-angle: 385deg; opacity: 0.8; }
    28%   { --snake-angle: 385deg; opacity: 0; }
    100%  { --snake-angle: 385deg; opacity: 0; }
}

.planned-day-card.past-day {
    opacity: 0.4;
    padding: 10px 16px;
}

.planned-day-card.past-day .planned-day-header {
    margin-bottom: 4px;
}

.planned-day-card.past-day .planned-activity-row {
    margin-top: 4px;
}

.planned-day-card.past-day .planned-activity-btn {
    pointer-events: auto;
    cursor: pointer;
}

.past-days-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.past-days-toggle:active {
    transform: scale(0.98);
}

.past-days-toggle-icon {
    font-size: 10px;
    opacity: 0.6;
}

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

.planned-day-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    text-transform: capitalize;
}

.planned-day-card.is-today .planned-day-name {
    color: var(--accent);
}

.planned-day-date {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Best day pill — centered on top edge of card */
.planned-best-day-pill {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
    border: 1.5px solid #ffd700;
    background: #1a1a2c;
    color: #ffd700;
}

.planned-best-day-pill.best-day-medal-1 {
    border-color: #ffd700;
    color: #ffd700;
}
.planned-best-day-pill.best-day-medal-2 {
    border-color: #c0c0c0;
    color: #c0c0c0;
}
.planned-best-day-pill.best-day-medal-3 {
    border-color: #cd7f32;
    color: #cd7f32;
}

.planned-day-card.has-best-day {
    padding-top: 40px;
    margin-top: 28px;
}
.planned-day-card.has-best-day .today-now-line {
    top: 24px;
}

.planned-day-weather {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}

.planned-weather-icon {
    font-size: 18px;
}

.planned-weather-temp {
    font-weight: 600;
    color: var(--text);
}

.planned-weather-feels {
    font-weight: 400;
    opacity: 0.5;
}

.planned-weather-detail {
    opacity: 0.6;
    font-size: 11px;
}

.planned-day-warnings {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    gap: 6px;
    z-index: 3;
    white-space: nowrap;
}
.planned-day-card.is-today .planned-day-warnings {
    top: 20px;
}
.planned-day-card.is-today.has-best-day .planned-day-warnings {
    top: 44px;
}

.planned-day-warnings .weather-warning-pill[data-count] {
    cursor: pointer;
}

.planned-day-warnings .weather-warning-pill {
    font-size: 10px;
    padding: 2px 8px;
}

.planned-activity-row {
    display: flex;
    gap: 10px;
    padding-bottom: 20px;
}

.planned-activity-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    font-size: 18px;
    overflow: visible;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.planned-activity-btn:active {
    transform: scale(0.9);
}

.planned-activity-btn.active:active,
.planned-activity-btn.completed:active {
    transform: scale(0.95);
}

.planned-activity-btn.active {
    border-width: 2px;
    transform: scale(1.05);
}

/* Per-activity colors when active */
.planned-activity-btn.active[data-activity="cycling-outdoor"] {
    background: rgba(255, 107, 53, 0.18);
    border-color: #ff6b35;
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.25);
}

.planned-activity-btn.active[data-activity="cycling-indoor"] {
    background: rgba(168, 85, 247, 0.18);
    border-color: #a855f7;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.25);
}

.planned-activity-btn.active[data-activity="running"] {
    background: rgba(74, 158, 255, 0.18);
    border-color: #4a9eff;
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.25);
}

.planned-activity-btn.active[data-activity="swimming"] {
    background: rgba(34, 211, 238, 0.18);
    border-color: #22d3ee;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.25);
}

.planned-activity-btn.active[data-activity="walking"] {
    background: rgba(102, 187, 106, 0.18);
    border-color: #66bb6a;
    box-shadow: 0 0 10px rgba(102, 187, 106, 0.25);
}

.planned-activity-btn.active[data-activity="strength"] {
    background: rgba(251, 113, 133, 0.18);
    border-color: #fb7185;
    box-shadow: 0 0 10px rgba(251, 113, 133, 0.25);
}

/* Completed + planned: checkmark + circle */
.planned-activity-btn.completed.active {
    border-width: 2px;
    transform: scale(1.05);
}
/* Completed without planned: checkmark only, no circle border */
.planned-activity-btn.completed:not(.active) {
    transform: scale(1.05);
    border-color: transparent;
    box-shadow: none;
}

/* Active label shown below button when planned */
.planned-activity-btn .planned-act-label {
    display: none;
}

.planned-activity-btn.active .planned-act-label,
.planned-activity-btn.completed .planned-act-label {
    display: block;
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.planned-activity-btn.active[data-activity="cycling-outdoor"] .planned-act-label { color: #ff6b35; }
.planned-activity-btn.active[data-activity="cycling-indoor"] .planned-act-label { color: #a855f7; }
.planned-activity-btn.active[data-activity="running"] .planned-act-label { color: #4a9eff; }
.planned-activity-btn.active[data-activity="swimming"] .planned-act-label { color: #22d3ee; }
.planned-activity-btn.active[data-activity="walking"] .planned-act-label { color: #66bb6a; }
.planned-activity-btn.active[data-activity="strength"] .planned-act-label { color: #fb7185; }
/* Completed without active (auto-detected rides) — use sport colors too */
/* Completed without planned: subtle sport-colored background, no border circle */
.planned-activity-btn.completed[data-activity="cycling-outdoor"]:not(.active) { background: rgba(255, 107, 53, 0.15); border-color: transparent; box-shadow: none; }
.planned-activity-btn.completed[data-activity="cycling-indoor"]:not(.active) { background: rgba(168, 85, 247, 0.15); border-color: transparent; box-shadow: none; }
.planned-activity-btn.completed[data-activity="running"]:not(.active) { background: rgba(74, 158, 255, 0.15); border-color: transparent; box-shadow: none; }
.planned-activity-btn.completed[data-activity="swimming"]:not(.active) { background: rgba(34, 211, 238, 0.15); border-color: transparent; box-shadow: none; }
.planned-activity-btn.completed[data-activity="walking"]:not(.active) { background: rgba(102, 187, 106, 0.15); border-color: transparent; box-shadow: none; }
.planned-activity-btn.completed[data-activity="strength"]:not(.active) { background: rgba(251, 113, 133, 0.15); border-color: transparent; box-shadow: none; }

.planned-activity-btn.completed[data-activity="cycling-outdoor"]:not(.active) .planned-act-label { color: #ff6b35; }
.planned-activity-btn.completed[data-activity="cycling-indoor"]:not(.active) .planned-act-label { color: #a855f7; }
.planned-activity-btn.completed[data-activity="running"]:not(.active) .planned-act-label { color: #4a9eff; }
.planned-activity-btn.completed[data-activity="swimming"]:not(.active) .planned-act-label { color: #22d3ee; }
.planned-activity-btn.completed[data-activity="walking"]:not(.active) .planned-act-label { color: #66bb6a; }
.planned-activity-btn.completed[data-activity="strength"]:not(.active) .planned-act-label { color: #fb7185; }

/* Day note input */
.planned-day-note {
    display: none;
    margin-top: 2px;
}

.planned-day-note.visible {
    display: block;
}

.planned-note-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary);
    font-size: 13px;
    padding: 6px 0;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
    resize: none;
    overflow: hidden;
    line-height: 1.4;
}

.planned-note-input::placeholder {
    color: rgba(255,255,255,0.2);
}

.planned-note-input:focus {
    border-color: rgba(255,255,255,0.25);
    color: var(--text);
}

.planned-note-input:not(:placeholder-shown) {
    color: var(--text);
}

.planned-act-icon {
    font-size: 18px;
    line-height: 1;
}


.planned-act-check {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--green);
    color: white;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.planned-act-check.strava-check {
    background: #FC4C02;
    padding: 0 3px;
    width: auto;
    height: 14px;
    border-radius: 3px;
}
.strava-text-badge {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 8px;
    font-weight: 800;
    color: white;
    letter-spacing: 0.5px;
    line-height: 14px;
}
.strava-text-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: #FC4C02;
    letter-spacing: 0.5px;
}
/* Strava-synced: only show border if also planned (active) */
.planned-activity-btn.strava-synced.active {
    border-color: rgba(252, 76, 2, 0.5);
}
.planned-activity-btn.strava-synced:not(.active) {
    border-color: transparent;
}

/* ===== STRAVA STATS IN RIDE CARDS ===== */
.ride-strava-stats {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    margin: 4px 0 2px;
    background: rgba(252, 76, 2, 0.08);
    border-radius: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(252, 76, 2, 0.15);
}
.ride-strava-stats .strava-text-label {
    flex-shrink: 0;
    margin-top: 1px;
}
.strava-stats-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.4;
}
.strava-stats-line2 {
    opacity: 0.7;
    font-size: 11px;
}
.ride-strava-link {
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.ride-strava-link:active {
    background: rgba(252, 76, 2, 0.15);
    border-color: rgba(252, 76, 2, 0.4);
}
.ride-strava-only {
    border-left: 3px solid #FC4C02;
}
.strava-add-feedback-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin: 8px 0;
    background: rgba(252, 76, 2, 0.1);
    border: 1px solid rgba(252, 76, 2, 0.3);
    border-radius: 10px;
    color: #FC4C02;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s;
}
.strava-add-feedback-btn:hover,
.strava-add-feedback-btn:active {
    background: rgba(252, 76, 2, 0.2);
}

/* Strava gear selection phase */
#ride-phase-strava-gear .page-header {
    padding-bottom: 8px;
}
#strava-gear-container {
    padding: 0 4px;
}
#strava-gear-container .suggestion-zone {
    margin-bottom: 12px;
}
.strava-gear-continue-btn {
    margin-top: 16px !important;
    background: #FC4C02 !important;
    color: white !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border: none !important;
}

/* Strava Benefits Modal */
.strava-benefits-title { display: flex; align-items: center; justify-content: center; }
.strava-benefits-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 4px; }
.strava-benefit-item { display: flex; gap: 12px; align-items: flex-start; text-align: left; }
.strava-benefit-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.strava-benefit-text { display: flex; flex-direction: column; gap: 2px; }
.strava-benefit-label { font-size: 14px; font-weight: 700; color: var(--text); }
.strava-benefit-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; }
.strava-benefits-connect-btn { background: #FC4C02 !important; }
.strava-benefits-connect-btn:hover { background: #e04400 !important; }

/* Rides activity type filter */
.rides-activity-filter {
    display: flex;
    gap: 6px;
    padding: 0 4px;
    margin-bottom: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.rides-activity-filter::-webkit-scrollbar { display: none; }
.rides-activity-filter:empty { display: none; }
.ride-filter-pill {
    padding: 5px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.ride-filter-pill.active {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.25);
    color: var(--text);
}
.ride-filter-pill .ride-filter-count {
    font-size: 10px;
    opacity: 0.5;
    margin-left: 3px;
}

/* ===== RIDES STATS ===== */
.rides-stats {
    margin-bottom: 24px;
}
.stats-carousel {
    overflow: hidden;
    width: 100%;
}
.stats-carousel-track {
    display: flex;
    will-change: transform;
    width: 100%;
}
.stats-carousel-slide {
    display: flex;
    gap: 12px;
    width: 100%;
    min-width: 100%;
    flex-shrink: 0;
    height: 90px;
}
.stats-carousel-slide > * {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
}
.stats-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding-top: 10px;
}
.stats-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-secondary);
    opacity: 0.25;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}
.stats-dot.active {
    opacity: 0.7;
    transform: scale(1.3);
}

/* Stat card flip */
.stat-flip {
    perspective: 800px;
    cursor: pointer;
    min-width: 0;
    position: relative;
}
.stat-flip-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
    position: relative;
}
.stat-flip.flipped .stat-flip-inner {
    transform: rotateY(180deg);
}
.stat-flip-front,
.stat-flip-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    margin: 0;
}
.stat-flip-back {
    transform: rotateY(180deg);
}
.stat-back-text {
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-secondary);
    padding: 4px;
}
.stat-flip-hint {
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 10px;
    line-height: 1;
    color: var(--text-secondary);
    opacity: 0.3;
}
.stat-info-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--border);
    font-size: 9px;
    font-weight: 700;
    font-style: italic;
    color: var(--text-secondary);
    opacity: 0.4;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: Georgia, serif;
}

/* Stat thermometer widget */
.stat-thermo-widget {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 4px;
    justify-content: center;
}
.stat-thermo-end { font-size: 11px; }
.stat-thermo-bar {
    position: relative;
    width: 70px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--blue), var(--green) 50%, var(--red));
}
.stat-thermo-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

.rides-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 10px;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
}
.stat-flip-front.rides-stat-card,
.stat-flip-back.rides-stat-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.rides-stat-card.stat-active {
    border-color: rgba(52, 211, 153, 0.3);
    background: linear-gradient(135deg, var(--bg-card), rgba(52, 211, 153, 0.04));
}
.rides-stat-card.stat-best {
    border-color: rgba(52, 211, 153, 0.3);
    background: linear-gradient(135deg, var(--bg-card), rgba(52, 211, 153, 0.04));
}
.rides-stat-card.stat-worst {
    border-color: rgba(248, 113, 113, 0.25);
    background: linear-gradient(135deg, var(--bg-card), rgba(248, 113, 113, 0.04));
}

.rides-stat-icon {
    font-size: 18px;
    margin-bottom: 2px;
    line-height: 1;
}

.rides-stat-icon-smiley {
    color: var(--green);
    display: flex;
    justify-content: center;
}
.rides-stat-icon-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 18px;
    margin-bottom: 4px;
    line-height: 1;
}
.rides-stat-icon-row span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.rides-stat-value {
    font-size: 22px;
    font-weight: 900;
    font-family: 'Outfit', 'Inter', sans-serif;
    color: var(--text);
    line-height: 1.2;
}

.stat-active .rides-stat-value {
    background: linear-gradient(135deg, var(--green), #6ee7b7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rides-stat-sublabel {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: -2px;
}
.rides-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* ===== RIDES HISTORY ===== */
.rides-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.rides-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.rides-empty-sub {
    font-size: 13px;
    margin-top: 8px;
    opacity: 0.7;
}

.ride-history-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    padding-top: 18px;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease;
    cursor: pointer;
    transition: border-color 0.2s;
}
.ride-history-card:hover { border-color: rgba(255,255,255,0.15); }

.ride-perfect {
    border-color: rgba(52, 211, 153, 0.4);
    background: linear-gradient(135deg, var(--bg-card), rgba(52, 211, 153, 0.06));
}
.ride-perfect:hover { border-color: rgba(52, 211, 153, 0.6); }
/* Comfort badge (perfect ride) — centered on top border */
.ride-comfort-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
    background: var(--bg-card);
    border: 1px solid rgba(52, 211, 153, 0.4);
    border-radius: 20px;
    padding: 3px 14px 3px 10px;
    width: fit-content;
    margin: -30px auto 10px;
    position: relative;
    z-index: 1;
}
.ride-comfort-smiley {
    flex-shrink: 0;
}

/* Comfort thermometer (non-perfect ride) */
.ride-comfort-thermo {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: -28px auto 10px;
    padding: 3px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    position: relative;
    z-index: 1;
}
.ride-thermo-label {
    font-size: 12px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.ride-thermo-bar {
    position: relative;
    width: 80px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--blue), var(--green) 50%, var(--red));
    overflow: visible;
}
.ride-thermo-track {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    opacity: 0.3;
}
.ride-thermo-indicator {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text);
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
    transition: left 0.3s ease;
}

.ride-history-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.ride-title-text { }
.ride-title-edit {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--text-secondary);
    opacity: 0.35;
    transition: opacity 0.2s;
    flex-shrink: 0;
    line-height: 0;
}
.ride-title-edit:hover { opacity: 0.7; }
.ride-title-input {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 2px 8px;
    outline: none;
    font-family: inherit;
}

.ride-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ride-history-expandable {
    display: none;
    margin-top: 12px;
}
.ride-history-expandable.visible { display: block; }

.ride-expand-hint {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.5;
    margin-top: 4px;
}

/* Zone-grouped details (feedback + clothing + shop per zone) */
.ride-zone-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.ride-zone-group {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
}
.ride-zone-group.cold { border-color: rgba(74, 158, 255, 0.2); background: rgba(74, 158, 255, 0.04); }
.ride-zone-group.warm { border-color: rgba(248, 113, 113, 0.2); background: rgba(248, 113, 113, 0.04); }
.ride-zone-group.good { border-color: rgba(52, 211, 153, 0.15); background: rgba(52, 211, 153, 0.03); }
.ride-zone-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}
.ride-zone-icon { font-size: 13px; }
.ride-zone-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
}
.ride-zone-status { font-size: 11px; font-weight: 600; }
.ride-zone-status.cold { color: var(--blue); }
.ride-zone-status.good { color: var(--green); }
.ride-zone-status.warm { color: var(--red); }
.ride-zone-clothing {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.3;
}
.ride-zone-shop {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    margin-top: 4px;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.ride-zone-shop:hover { opacity: 1; }

.ride-history-date {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    min-width: 0;
    flex: 1;
}
.ride-history-location {
    display: inline-block;
    white-space: nowrap;
}

.ride-history-temp {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 400;
}

.ride-history-weather {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    font-size: 11px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.ride-history-weather-label {
    color: var(--text-secondary);
    opacity: 0.45;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ride-history-weather-item {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ride-history-precip {
    width: 100%;
    margin-top: -2px;
}

/* Saved location pins */
.ride-history-pins {
    margin-top: 12px;
}

.ride-history-pins-label {
    color: var(--text-secondary);
    opacity: 0.5;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ride-pins-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ride-pins-grid.scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ride-pins-grid.scroll::-webkit-scrollbar { display: none; }
.ride-pins-grid.scroll .ride-pin-tile {
    width: 100px;
    min-width: 100px;
    flex-shrink: 0;
}

.ride-pin-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.ride-pin-tile:active {
    background: rgba(255,255,255,0.1);
}

.ride-pin-tile-top {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
}

.ride-pin-tile-time {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    opacity: 0.6;
}

.ride-pin-tile-label {
    font-size: 10px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
}

.ride-pin-pencil {
    position: absolute;
    top: 6px;
    right: 6px;
    opacity: 0.3;
    color: var(--text-secondary);
    cursor: pointer;
}

.ride-pin-pencil:active {
    opacity: 0.8;
}

.pin-title-input {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    margin: 12px 0 4px;
    box-sizing: border-box;
}

.pin-title-input:focus {
    border-color: var(--accent);
}

.pin-title-input::placeholder {
    color: rgba(255,255,255,0.25);
}

/* Unseen ride dot */
.ride-history-card { position: relative; }
.ride-unseen-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
    background: var(--red);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.5);
}

/* Nav badge */
.nav-icon { position: relative; }
.nav-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    width: 8px;
    height: 8px;
    background: var(--red);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.5);
}

/* Wardrobe suggestion */
#wardrobe-suggestion {
    background: var(--bg-card);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
}
.wardrobe-suggestion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.wardrobe-suggestion-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
}
.wardrobe-suggestion-zone {
    font-size: 11px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.06);
    padding: 2px 8px;
    border-radius: 20px;
}
.wardrobe-suggestion-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}
.wardrobe-suggestion-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 8px;
}
.wardrobe-suggestion-tags {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.ride-shop-links {
    display: flex;
    gap: 6px;
}
.ride-shop-link {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: all 0.2s;
}
.ride-shop-link:hover { color: var(--accent); border-color: var(--accent); }
#wardrobe-suggestion .ride-shop-links {
    margin-top: 2px;
}

.affiliate-disclaimer {
    text-align: center;
    font-size: 10px;
    color: var(--text-secondary);
    opacity: 0.5;
    padding: 16px 0 0;
}

.app-copyright {
    text-align: center;
    font-size: 10px;
    color: var(--text-secondary);
    opacity: 0.3;
    padding: 24px 0 0;
}

.ride-history-notes {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.ride-history-notes-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.ride-history-notes-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ===== RIDE DELETE BUTTON ===== */
.ride-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: var(--radius-sm);
    color: var(--red);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.ride-delete-btn:hover {
    background: rgba(248, 113, 113, 0.16);
    border-color: rgba(248, 113, 113, 0.4);
}

/* ===== EDIT RIDE ===== */
.ride-edit-btn {
    position: absolute;
    top: 10px;
    right: 28px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    opacity: 0.3;
    padding: 6px;
    z-index: 2;
    transition: opacity 0.2s;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ride-edit-btn:hover { opacity: 0.7; }

.edit-section {
    margin-bottom: 20px;
}
.edit-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.edit-rain-levels {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.edit-rain-level {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    min-width: 56px;
}
.edit-rain-level .edit-rain-icon { font-size: 16px; }
.edit-rain-level .edit-rain-name { font-size: 10px; font-weight: 500; }
.edit-rain-level.active {
    background: rgba(96, 165, 250, 0.12);
    border-color: var(--accent);
    color: var(--text);
}
.edit-rain-level:hover { background: rgba(255,255,255,0.08); }

.edit-zone {
    margin-bottom: 12px;
}
.edit-zone-header {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-secondary);
}
.edit-zone-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.edit-zone-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 20px;
    font-size: 11px;
    color: var(--text);
}
.edit-item-remove {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 10px;
    padding: 0 2px;
    opacity: 0.5;
    transition: opacity 0.2s;
    line-height: 1;
}
.edit-item-remove:hover { opacity: 1; color: var(--red); }

.edit-zone-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px dashed rgba(255,255,255,0.15);
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.edit-zone-add:hover { background: rgba(255,255,255,0.1); color: var(--text); }

.edit-item-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: var(--radius-sm);
}
.edit-picker-item {
    padding: 4px 10px;
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.edit-picker-item:hover { background: rgba(96,165,250,0.15); border-color: var(--accent); }
.edit-picker-empty {
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.5;
    font-style: italic;
}

/* ===== SUGGESTION ZONE EMPTY / UNSURE ===== */
.suggestion-zone-empty, .suggestion-zone-unsure {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
    padding: 8px 4px;
    text-align: center;
}
.suggestion-zone-unsure {
    background: rgba(255, 193, 7, 0.08);
    border: 1px dashed rgba(255, 193, 7, 0.3);
    border-radius: var(--radius-sm);
    padding: 12px;
    font-style: normal;
}

/* ===== FORECAST ===== */
.forecast-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.forecast-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-wrap: wrap;
}
.forecast-label {
    display: none;
    width: 100%;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 6px;
    font-weight: 500;
}
.forecast-row.show-label .forecast-label {
    display: block;
}

.forecast-time {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 50px;
}

.forecast-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.forecast-bar-wrap {
    flex: 1;
    margin: 0 12px;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}

.forecast-bar {
    height: 100%;
    border-radius: 3px;
    background: var(--accent);
    transition: width 0.5s ease;
}

.forecast-bar.bar-blue { background: var(--blue); }
.forecast-bar.bar-green { background: var(--green); }

/* ===== BACKUP ===== */
.backup-stats {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.backup-stat {
    flex: 1;
    min-width: 80px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    text-align: center;
}

.backup-stat-value {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 2px;
}

.backup-stat-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.backup-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
}

.backup-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: all 0.2s;
}

.backup-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--accent);
}

.backup-btn-icon { font-size: 24px; flex-shrink: 0; }

.backup-btn-text { display: flex; flex-direction: column; gap: 2px; }

.backup-btn-title { font-size: 15px; font-weight: 700; color: var(--text); }

.backup-btn-sub { font-size: 12px; color: var(--text-secondary); }

/* ===== STRAVA INTEGRATION ===== */
.strava-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.strava-connect-btn {
    border: 1.5px solid #FC4C02 !important;
}
.strava-connect-btn:hover {
    background: rgba(252, 76, 2, 0.08) !important;
}
.strava-connect-btn .backup-btn-title {
    color: #FC4C02;
}

.strava-connected {
    background: rgba(252, 76, 2, 0.06);
    border: 1px solid rgba(252, 76, 2, 0.2);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.strava-connected-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.strava-athlete-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.strava-last-sync {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.7;
}
.strava-connected-actions {
    display: flex;
    gap: 8px;
}
.strava-sync-btn {
    flex: 1;
    padding: 8px 14px;
    background: #FC4C02;
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.strava-sync-btn:hover { opacity: 0.85; }
.strava-sync-btn:active { transform: scale(0.97); }

.strava-disconnect-btn {
    padding: 8px 14px;
    background: none;
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.strava-disconnect-btn:hover {
    color: var(--red);
    border-color: var(--red);
}

.strava-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6px;
    height: 6px;
    background: #FC4C02;
    border-radius: 50%;
    margin-left: 4px;
}

/* ===== BACKUP BUTTON (RIDES PAGE) ===== */
.btn-backup-inline {
    position: absolute;
    top: 10px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-backup-inline:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--accent);
    color: var(--text);
}

.btn-backup-inline:active {
    transform: scale(0.95);
}

.btn-delete-all-rides {
    display: block;
    margin: 24px auto 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.2s;
    padding: 8px 16px;
}
.btn-delete-all-rides:hover {
    opacity: 1;
    color: #ff6b6b;
}

/* ===== TOAST ===== */
.toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1a1a2c; color: var(--text); padding: 14px 24px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; border: 1px solid var(--border); opacity: 0; pointer-events: none; transition: all 0.3s; z-index: 200; max-width: 340px; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== CELEBRATION ===== */
.celebration-overlay {
    position: fixed; inset: 0; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10, 10, 20, 0.9);
    animation: fadeIn 0.3s ease;
    transition: opacity 0.4s;
}

.celebration-content {
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    z-index: 501;
}

.celebration-logo {
    position: relative;
    width: 80px; height: 80px;
    filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.5));
}

.celebration-logo .logo-wheel,
.celebration-logo .logo-smiley {
    position: absolute; top: 0; left: 0;
}

.celebration-logo .logo-smiley {
    opacity: 0; transform: scale(0.5);
}

.celebration-text {
    font-size: 24px; font-weight: 800; color: var(--text);
    font-family: 'Outfit', sans-serif;
    animation: celebBounce 0.5s ease 0.8s both;
}

@keyframes celebBounce {
    0% { opacity: 0; transform: scale(0.5) translateY(10px); }
    70% { transform: scale(1.1) translateY(-4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

#confetti-canvas {
    position: absolute; inset: 0; z-index: 500; pointer-events: none;
}

/* ===== ONBOARDING WIZARD ===== */
.onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(10, 10, 20, 0.92);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.4s ease;
}

.onboarding-overlay.hidden { display: none; }

.onboarding-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 28px 28px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    animation: modalIn 0.5s ease;
}

.onboarding-logo {
    margin-bottom: 16px;
    filter: drop-shadow(0 0 16px rgba(255, 107, 53, 0.4));
}

.onboarding-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 900;
    background: linear-gradient(135deg, #ff6b35, #ffad85);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
}

.onboarding-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
    margin-bottom: 28px;
}

.onboarding-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.onboarding-step-number {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #e85d2a);
    color: white;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onboarding-step-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.onboarding-step-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.onboarding-step-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.onboarding-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--accent), #e85d2a);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s;
    box-shadow: 0 4px 24px var(--accent-glow);
    letter-spacing: 0.3px;
}

.onboarding-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px var(--accent-glow);
}

.onboarding-btn:active {
    transform: translateY(0);
}

/* ===== PRO TIP (HOMESCREEN) ===== */
.onboarding-protip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 20px;
}

.protip-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    white-space: nowrap;
}

.protip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.protip-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
    color: var(--accent);
}

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

/* ===== INSTALL BANNER ===== */
.install-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(255,107,53,0.08), rgba(255,154,108,0.04));
    border-bottom: 1px solid rgba(255,107,53,0.15);
    position: relative;
    z-index: 10;
}
.install-banner-text {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}
.install-banner-text svg { color: var(--accent); }
.install-banner-btn {
    padding: 7px 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--accent), #e85d2a);
    color: white;
    border: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.install-banner-btn:hover { filter: brightness(1.1); transform: scale(1.03); }
.install-banner-btn:active { transform: scale(0.97); }
.install-banner-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    opacity: 0.5;
    transition: all 0.2s;
}
.install-banner-close:hover { opacity: 1; color: var(--text); }

/* ===== INSTALL INSTRUCTIONS ===== */
.install-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    font-size: 14px;
    color: var(--text);
    line-height: 1.5;
}

.install-step + .install-step {
    border-top: 1px solid var(--border);
}

.install-step-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #e85d2a);
    color: white;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== RIDE HISTORY MINI-CHARTS ===== */
.ride-history-charts {
    margin: 8px 0 4px;
}

.rh-carousel {
    position: relative;
    width: 100%;
}


.rh-viewport {
    overflow: hidden;
}

.rh-track {
    display: flex;
    transition: transform 0.3s ease;
}

.rh-chart-slide {
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
}

.rh-chart-slide svg {
    width: 100%;
    height: 50px;
    display: block;
    overflow: visible;
}


.rh-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
}

.rh-dot {
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    cursor: pointer;
    font-size: 0;
    color: transparent;
    transition: all 0.3s ease;
    overflow: hidden;
}

.rh-dot.active {
    width: auto;
    height: auto;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    font-size: 8px;
    color: rgba(255,255,255,0.45);
    padding: 2px 8px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }