:root {
    --green: #2EAD5B;
    --green-light: #6EE28A;
    --green-dark: #145A32;
    --bg: #050B0F;
    --card: #111C22;
    --card-soft: #16242B;
    --text: #FFFFFF;
    --muted: #91A29B;
    --border: rgba(255, 255, 255, .08);
    --shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, "Segoe UI", Arial, sans-serif; line-height: 1.5; transition: background .25s, color .25s; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img, svg, video, canvas { max-width: 100%; }
strong, h1, h2, h3, p, span, small, a, button { overflow-wrap: anywhere; }
.page-shell { min-height: 100vh; overflow: hidden; }
.site-loader { position: fixed; z-index: 9999; inset: 0; display: grid; place-items: center; background: transparent; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .24s ease, visibility .24s ease; }
.is-loading .site-loader, .is-fetching .site-loader { opacity: 1; visibility: visible; pointer-events: auto; }
.site-loader-card { display: grid; place-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.site-loader-card img { width: 62px; height: 62px; object-fit: contain; }
.site-loader-card span { color: var(--green-light); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.site-toast { position: fixed; z-index: 10000; right: 20px; bottom: 20px; max-width: min(360px, calc(100% - 40px)); padding: 15px 18px; border: 1px solid rgba(110,226,138,.32); border-radius: 16px; background: rgba(17,28,34,.94); color: var(--text); box-shadow: 0 22px 70px rgba(0,0,0,.3); font-size: 12px; font-weight: 800; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
.site-toast.show { opacity: 1; transform: translateY(0); }
.site-toast.success { border-color: rgba(110,226,138,.42); color: var(--green-light); }
.site-toast.error { border-color: rgba(255,120,120,.4); color: #ff9b9b; }
.topbar { width: min(1180px, calc(100% - 40px)); height: 82px; margin: auto; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1200; background: rgba(5, 11, 15, .88); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; letter-spacing: 0; }
.brand-logo { display: block; width: 42px; height: 42px; flex: none; border-radius: 10px; background: transparent; object-fit: cover; }
.main-nav { display: flex; align-items: center; gap: 6px; padding: 5px; border: 1px solid var(--border); border-radius: 99px; background: rgba(17, 28, 34, .72); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.main-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 15px; color: var(--muted); border-radius: 99px; font-size: 13px; font-weight: 800; transition: color .2s, background .2s, transform .2s; white-space: nowrap; }
.main-nav a:hover, .main-nav a.active { background: var(--green); color: white; transform: translateY(-1px); }
.nav-icon { display: grid; place-items: center; width: 18px; height: 18px; flex: none; }
.nav-label-short { display: none; }
.nav-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.profile-shortcut { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; background: var(--green); color: white; font-size: 14px; font-weight: 900; box-shadow: none; }
.profile-shortcut.active { box-shadow: none; }
.landing-page .topbar .main-nav, .landing-page .topbar .menu-toggle, .landing-page .topbar .profile-shortcut { display: none; }
.landing-page .topbar { justify-content: flex-start; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 11px; }
.menu-toggle span { display: block; height: 2px; margin: 4px 0; background: currentColor; }
.hero { width: min(1180px, calc(100% - 40px)); min-height: calc(100vh - 82px); margin: auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); align-items: center; gap: clamp(28px, 5vw, 70px); padding: 60px 0 110px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--green-light); font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-light); box-shadow: 0 0 0 6px rgba(110, 226, 138, .1); }
.hero h1 { max-width: 680px; margin: 20px 0; font-size: clamp(56px, 8vw, 108px); line-height: .9; letter-spacing: 0; }
.hero h1 em { color: var(--green); font-style: normal; }
.hero-copy > p { max-width: 590px; margin: 0; color: var(--muted); font-size: 18px; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 51px; padding: 0 22px; border: 1px solid transparent; border-radius: 14px; font-weight: 800; font-size: 13px; text-align: center; cursor: pointer; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--green); color: white; box-shadow: none; }
.button.secondary { background: transparent; border-color: var(--border); color: var(--text); }
.button.compact { min-height: 42px; padding: 0 17px; gap: 14px; }
.trust-row { display: flex; gap: 26px; margin-top: 26px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; }
.trust-row span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--green); }
.hero-visual { position: relative; display: grid; place-items: center; min-height: 560px; }
.phone-card { position: relative; z-index: 2; width: min(390px, 100%); overflow: hidden; padding: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 38px; background: linear-gradient(160deg, rgba(25, 42, 48, .96), rgba(8, 16, 20, .98)); box-shadow: var(--shadow); rotate: 0deg; transform: none !important; }
.phone-sheen { position: absolute; inset: 1px; border-radius: 37px; pointer-events: none; background: linear-gradient(145deg, rgba(255,255,255,.09), transparent 26%, transparent 72%, rgba(110,226,138,.08)); opacity: .9; }
.phone-card > :not(.phone-sheen) { position: relative; z-index: 1; }
.avatar { width: 36px; height: 36px; display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--green); color: white; font-size: 11px; font-weight: 900; }
.avatar.large { width: 54px; height: 54px; }
.phone-card h3 { margin: 0 0 1px; font-size: 25px; }
.phone-card p { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.mini-map { position: relative; height: 250px; overflow: hidden; border-radius: 22px; background-color: #0B151A; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; }
.mini-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11,21,26,0), rgba(11,21,26,.22)); }
.map-district { position: absolute; border: 1px solid rgba(110,226,138,.07); border-radius: 20px; background: rgba(46,173,91,.035); }
.district-one { width: 34%; height: 28%; left: 9%; top: 50%; }.district-two { width: 30%; height: 24%; left: 40%; top: 19%; }.district-three { width: 26%; height: 28%; right: 5%; top: 43%; }
.mini-route-svg { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mini-route-base, .mini-route-glow, .mini-route-line { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mini-route-base { stroke: rgba(255,255,255,.2); stroke-width: 4; stroke-dasharray: 7 11; stroke-dashoffset: 0; }
.mini-route-glow { stroke: rgba(110,226,138,.28); stroke-width: 12; stroke-dasharray: 100; stroke-dashoffset: 100; filter: blur(5px); animation: routeSnake 7.2s ease-in-out infinite; }
.mini-route-line { stroke: var(--green-light); stroke-width: 6; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 8px rgba(110,226,138,.65)); animation: routeSnake 7.2s ease-in-out infinite; }
.mini-route-particle { fill: #E8FFED; opacity: .95; filter: drop-shadow(0 0 7px rgba(110,226,138,.9)); }
.route { position: absolute; height: 4px; border-radius: 99px; background: var(--green); transform-origin: left; box-shadow: 0 0 14px rgba(46, 173, 91, .6); }
.route-one { width: 150px; left: 42px; top: 180px; transform: rotate(-37deg); }
.route-two { width: 135px; left: 158px; top: 90px; transform: rotate(23deg); }
.map-pin { position: absolute; z-index: 2; width: 15px; height: 15px; border: 3px solid white; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 7px rgba(46,173,91,.18), 0 0 20px rgba(110,226,138,.32); transform: translate(-50%, -50%); }
.map-pin::after { content: ""; position: absolute; inset: -11px; border: 1px solid rgba(110,226,138,.3); border-radius: 50%; animation: pinRipple 2.8s ease-out infinite; }
.pin-two::after { animation-delay: .45s; }.pin-three::after { animation-delay: .9s; }
.pin-one { left: 16.25%; top: 70.4%; }.pin-two { left: 49.06%; top: 43.2%; }.pin-three { left: 83.44%; top: 58.4%; }
.route-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.route-stats span { min-width: 0; padding: 10px 8px; border: 1px solid rgba(255,255,255,.055); border-radius: 13px; background: rgba(255,255,255,.025); color: var(--muted); font-size: 9px; font-weight: 800; text-align: center; }
.route-stats strong { display: block; color: var(--green-light); font-size: 13px; line-height: 1.1; }
.insight-card { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px; border-radius: 17px; background: rgba(46, 173, 91, .12); }
.icon-box, .recommendation-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--green); color: white; font-size: 22px; }
.icon-box svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.insight-card strong, .insight-card small { display: block; }.insight-card strong { font-size: 12px; }.insight-card small { margin-top: 3px; color: var(--muted); font-size: 10px; }
@keyframes routeSnake { 0% { stroke-dashoffset: 100; opacity: 0; } 10% { opacity: 1; } 62% { stroke-dashoffset: 0; opacity: 1; } 76% { stroke-dashoffset: 0; opacity: 1; } 96% { stroke-dashoffset: -100; opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes routePulse { 0%, 100% { transform: scale(1); opacity: .8; } 45% { transform: scale(1.28); opacity: 1; } 70% { transform: scale(.94); opacity: .86; } }
@keyframes pinRipple { 0% { transform: scale(.58); opacity: .72; } 70%, 100% { transform: scale(1.25); opacity: 0; } }
.section, .app-main { width: min(1180px, calc(100% - 40px)); margin: auto; }
.section { padding: 100px 0; }
.proposal { border-top: 1px solid var(--border); }
.section-heading { max-width: 650px; margin-bottom: 40px; }
.section-heading h2, .page-intro h1 { margin: 12px 0 0; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: 0; }
.feature-grid, .stats-grid, .opportunity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature-card, .stat-card, .content-card, .opportunity-card, .settings-card { border: 1px solid var(--border); border-radius: 24px; background: var(--card); box-shadow: 0 20px 50px rgba(0,0,0,.08); }
.feature-card { min-height: 230px; padding: 28px; }.feature-number { color: var(--green); font-weight: 900; }.feature-card h3 { margin: 60px 0 8px; font-size: 23px; }.feature-card p { margin: 0; color: var(--muted); }
.about-section { border-top: 1px solid var(--border); }
.about-grid { display: grid; gap: 28px; align-items: start; }
.about-copy { max-width: 920px; }
.about-copy p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.about-copy p + p { margin-top: 18px; }
.about-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.about-points span { display: block; min-height: 142px; padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.025); color: var(--muted); font-size: 12px; line-height: 1.65; }
.about-points strong { display: block; margin-bottom: 5px; color: var(--green-light); font-size: 12px; }
.objectives-block { margin-top: 52px; }
.objectives-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.objectives-grid article { min-height: 230px; padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(145deg, rgba(46,173,91,.12), rgba(255,255,255,.02)); }
.objectives-grid strong { display: block; color: var(--text); font-size: 16px; line-height: 1.3; }
.objectives-grid p { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.download-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); align-items: center; gap: 32px; border-top: 1px solid var(--border); }
.download-copy h2 { margin: 12px 0 0; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: 0; }
.download-copy p { max-width: 620px; margin: 18px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.download-actions { display: grid; gap: 12px; }
.download-card { display: flex; align-items: center; gap: 16px; min-width: 0; min-height: 92px; padding: 18px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(145deg, rgba(46,173,91,.13), var(--card)); color: var(--text); text-align: left; cursor: pointer; transition: transform .2s, border-color .2s, background .2s; }
.download-card:hover, .download-card:focus-visible { border-color: rgba(110,226,138,.45); background: linear-gradient(145deg, rgba(46,173,91,.2), var(--card)); transform: translateY(-2px); outline: none; }
.download-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 15px; background: var(--green); color: white; }
.download-icon svg { width: 25px; height: 25px; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.download-card strong, .download-card small { display: block; }
.download-card strong { font-size: 15px; }
.download-card small { margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.download-status { grid-column: 1 / -1; min-height: 18px; margin: -12px 0 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.app-main { min-height: calc(100vh - 160px); padding: 65px 0 90px; }.app-main.narrow { max-width: 900px; }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }.page-intro p { margin: 12px 0 0; color: var(--muted); }
.date-chip, .card-tag { display: inline-flex; padding: 7px 12px; border: 1px solid rgba(46,173,91,.25); border-radius: 99px; background: rgba(46,173,91,.1); color: var(--green-light); font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; }
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card { position: relative; min-width: 0; padding: 21px; }.stat-card strong, .stat-card span { display: block; }.stat-card .stat-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 28px; border-radius: 11px; background: rgba(46,173,91,.12); color: var(--green-light); line-height: 0; }.stat-svg { width: 23px; height: 23px; display: block; flex: none; stroke: currentColor; }.stat-card strong { max-width: 100%; font-size: clamp(21px, 3vw, 28px); line-height: 1.05; }.stat-card div span { margin-top: 7px; color: var(--muted); font-size: 11px; }.stat-card small { position: absolute; top: 21px; right: 21px; max-width: calc(100% - 72px); color: var(--green-light); font-size: 9px; font-weight: 800; text-align: right; }
.journey-stat .stat-svg { width: 23px; height: 23px; }
.dashboard-grid { display: grid; grid-template-columns: 1.6fr .8fr; gap: 16px; margin-top: 16px; }.dashboard-stats, .dashboard-recommendation { margin-top: 16px; }.content-card { padding: 28px; }.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.card-heading h2 { margin: 7px 0 0; font-size: 21px; }.card-heading a { color: var(--green-light); font-size: 11px; font-weight: 800; }
.route-summary { margin: 45px 5px 35px; }.route-line { display: flex; justify-content: space-between; height: 3px; background: linear-gradient(90deg, var(--green), var(--green-light)); }.route-line i { display: grid; place-items: center; width: 25px; height: 25px; margin-top: -11px; border: 4px solid var(--card); border-radius: 50%; background: var(--green); color: white; box-shadow: 0 0 0 3px rgba(46,173,91,.25); }.route-line .stat-svg { width: 12px; height: 12px; }.route-labels { display: flex; justify-content: space-between; margin-top: 15px; }.route-labels span { font-size: 10px; font-weight: 800; }.route-labels small { display: block; margin-top: 3px; color: var(--muted); font-weight: 600; }
.summary-metrics, .map-metrics { display: flex; gap: 12px; }.summary-metrics span, .map-metrics span { flex: 1 1 0; min-width: 0; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.03); color: var(--muted); font-size: 9px; }.summary-metrics strong, .map-metrics strong { display: block; color: var(--text); font-size: 12px; }
.recommendation { display: flex; align-items: flex-start; flex-direction: column; background: linear-gradient(155deg, rgba(46,173,91,.19), var(--card) 60%); }.recommendation-icon { margin: 35px 0 18px; width: 50px; height: 50px; border-radius: 16px; }.recommendation h2 { margin: 0; font-size: 23px; }.recommendation p { margin: 8px 0 25px; color: var(--muted); font-size: 12px; }.recommendation .button { margin-top: auto; }
.timeline-list { position: relative; }.timeline-item { display: grid; grid-template-columns: 65px 52px 1fr; align-items: stretch; min-height: 145px; }.timeline-item time { padding-top: 22px; color: var(--green-light); font-size: 12px; font-weight: 900; }.timeline-marker { position: relative; display: flex; justify-content: center; }.timeline-marker::before { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }.timeline-marker span { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; margin-top: 15px; border: 5px solid var(--bg); border-radius: 50%; background: var(--green); color: white; font-size: 9px; font-weight: 900; }.timeline-marker .stat-svg { width: 15px; height: 15px; }.timeline-content { position: relative; margin-bottom: 12px; padding: 21px 25px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); }.timeline-content h2 { margin: 0 0 6px; font-size: 16px; }.timeline-content p { margin: 0; color: var(--muted); font-size: 11px; }.event-index { position: absolute; top: 20px; right: 20px; color: rgba(110,226,138,.22); font-size: 22px; font-weight: 900; }
.map-legend { display: flex; gap: 16px; color: var(--muted); font-size: 10px; font-weight: 800; }.map-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; }.map-legend .visited { background: var(--green); }.map-legend .unexplored { border: 1px solid var(--muted); }
.map-board { position: relative; height: 620px; overflow: hidden; border: 1px solid var(--border); border-radius: 28px; background: #0B151A; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 28px 28px; }.street { position: absolute; z-index: 1; border: 1px solid rgba(255,255,255,.035); background: #111E24; }.street.horizontal { left: 0; right: 0; height: 42px; transform: rotate(-4deg); }.street.vertical { top: 0; bottom: 0; width: 42px; transform: rotate(8deg); }.s1 { top: 16%; }.s2 { top: 47%; }.s3 { top: 75%; }.v1 { left: 18%; }.v2 { left: 48%; }.v3 { left: 78%; }.block { position: absolute; border-radius: 25px; background: rgba(46,173,91,.035); }.b1 { width: 20%; height: 18%; top: 22%; left: 24%; }.b2 { width: 17%; height: 22%; top: 9%; right: 16%; }.b3 { width: 18%; height: 18%; bottom: 19%; right: 22%; }.b4 { width: 16%; height: 17%; bottom: 14%; left: 25%; }.b5 { width: 12%; height: 14%; top: 31%; right: 3%; }
.map-route { position: absolute; z-index: 3; inset: 0; width: 100%; height: 90%; overflow: visible; }.map-route path { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 8 8; filter: drop-shadow(0 0 6px rgba(46,173,91,.6)); }
.map-point { position: absolute; z-index: 4; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%); }.map-point.visited { border: 4px solid white; background: var(--green); box-shadow: 0 0 0 7px rgba(46,173,91,.18); }.map-point.unexplored { border: 3px solid var(--muted); background: var(--card); }.map-point b { position: absolute; top: 22px; left: 50%; padding: 4px 7px; border-radius: 6px; background: rgba(5,11,15,.8); color: white; font-size: 8px; transform: translateX(-50%); white-space: nowrap; }.p1 { left: 15%; top: 64%; }.p2 { left: 36%; top: 43%; }.p3 { left: 61%; top: 39%; }.p4 { left: 84%; top: 18%; }.p5 { left: 68%; top: 68%; }.p6 { left: 26%; top: 20%; }
.map-summary { position: absolute; z-index: 5; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 20px 24px; border: 1px solid var(--border); border-radius: 20px; background: rgba(17,28,34,.92); backdrop-filter: blur(14px); }.map-summary h2 { margin: 5px 0 0; font-size: 18px; }.map-metrics { min-width: 50%; }
.opportunity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.opportunity-card { min-height: 285px; min-width: 0; padding: 25px; display: flex; flex-direction: column; cursor: pointer; transition: border-color .2s, transform .2s; }.opportunity-card:hover, .opportunity-card:focus-visible { border-color: rgba(110,226,138,.35); transform: translateY(-2px); outline: none; }.opportunity-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.opportunity-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; background: rgba(46,173,91,.12); color: var(--green-light); font-weight: 900; }.opportunity-icon .stat-svg, .recommendation-icon .stat-svg { width: 22px; height: 22px; }.opportunity-card h2 { max-width: 440px; margin: 45px 0 8px; font-size: 19px; line-height: 1.35; }.opportunity-card p { margin: 0; color: var(--muted); font-size: 11px; }.save-opportunity-form { margin-top: auto; }.text-button { display: flex; justify-content: space-between; gap: 12px; width: 100%; margin-top: auto; padding: 15px 0 0; border: 0; border-top: 1px solid var(--border); background: none; color: var(--green-light); font-size: 11px; font-weight: 800; cursor: pointer; }.save-opportunity-form .text-button { margin-top: 0; }
.profile-hero { display: flex; align-items: center; gap: 20px; padding: 35px; border: 1px solid var(--border); border-radius: 26px; background: linear-gradient(145deg, rgba(46,173,91,.15), var(--card)); }.profile-avatar { width: 76px; height: 76px; font-size: 18px; }.profile-hero h1 { margin: 4px 0 0; font-size: 30px; }.profile-hero p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }.profile-hero .button { margin-left: auto; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0; border: 1px solid var(--border); border-radius: 20px; background: var(--card); }.profile-stats div { padding: 20px; text-align: center; }.profile-stats div + div { border-left: 1px solid var(--border); }.profile-stats strong, .profile-stats span { display: block; }.profile-stats strong { color: var(--green-light); font-size: 22px; }.profile-stats span { color: var(--muted); font-size: 10px; }
.settings-card { padding: 28px; }.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 20px 0; border-top: 1px solid var(--border); }.setting-row:first-of-type { margin-top: 24px; }.setting-row strong, .setting-row span { display: block; }.setting-row strong { font-size: 12px; }.setting-row div span { margin-top: 3px; color: var(--muted); font-size: 10px; }.setting-value { color: var(--green-light); font-size: 10px; font-weight: 800; }.theme-toggle { width: 47px; height: 26px; padding: 3px; border: 0; border-radius: 99px; background: var(--green); cursor: pointer; }.theme-toggle span { width: 20px; height: 20px; border-radius: 50%; background: white; transition: transform .25s; }
.settings-card + .settings-card { margin-top: 18px; }
.footer { width: min(1180px, calc(100% - 40px)); margin: auto; padding: 25px 0 35px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; color: var(--muted); }.footer .mini { color: var(--text); font-size: 14px; }.footer p { margin: 0; font-size: 9px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.footer-logo { width: 30px; height: 30px; border-radius: 8px; }
.auth-main { width: min(100% - 28px, 520px); min-height: calc(100vh - 160px); margin: auto; display: grid; place-items: center; padding: 55px 0 90px; }
.auth-card { width: 100%; padding: 38px; border: 1px solid var(--border); border-radius: 28px; background: linear-gradient(155deg, rgba(46,173,91,.1), var(--card) 42%); box-shadow: var(--shadow); }
.auth-brand { display: inline-flex; margin-bottom: 30px; }
.auth-logo { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 14px 30px rgba(0, 0, 0, .2); }
.auth-card h1 { margin: 10px 0 6px; font-size: clamp(36px, 8vw, 52px); line-height: 1.05; letter-spacing: 0; }
.auth-subtitle { margin: 0 0 28px; color: var(--muted); font-size: 12px; }
.auth-form { display: grid; gap: 9px; }
.auth-form label { margin-top: 7px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.auth-form input { width: 100%; min-height: 49px; padding: 0 15px; border: 1px solid var(--border); border-radius: 13px; outline: none; background: rgba(255,255,255,.035); color: var(--text); font: inherit; transition: border-color .2s, box-shadow .2s; }
.auth-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,173,91,.12); }
.auth-form .button { width: 100%; margin-top: 16px; }
.auth-link { margin: 24px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
.auth-link a, .setting-row a { color: var(--green-light); font-weight: 800; }
.flash-message { margin-bottom: 20px; padding: 12px 14px; border: 1px solid; border-radius: 12px; font-size: 11px; font-weight: 700; }
.flash-message.error { border-color: rgba(235,94,94,.25); background: rgba(235,94,94,.09); color: #ff9b9b; }
.flash-message.success { border-color: rgba(46,173,91,.3); background: rgba(46,173,91,.1); color: var(--green-light); }

body.light-mode { --bg: #F6F8F7; --card: #FFFFFF; --card-soft: #EDF3EF; --text: #142018; --muted: #66756D; --border: rgba(20, 32, 24, .09); --shadow: 0 24px 70px rgba(20, 70, 40, .09); }
body.light-mode .topbar { background: rgba(246, 248, 247, .9); }
body.light-mode .site-loader { background: transparent; }
body.light-mode .site-loader-card { background: transparent; }
body.light-mode .site-toast { background: rgba(255,255,255,.94); }
body.light-mode .main-nav { background: rgba(255,255,255,.8); }
body.light-mode .phone-card { background: linear-gradient(160deg, rgba(25, 42, 48, .96), rgba(8, 16, 20, .98)); }
body.light-mode .mini-map, body.light-mode .map-board { background-color: #DDE8E1; background-image: linear-gradient(rgba(20,32,24,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(20,32,24,.04) 1px, transparent 1px); }
body.light-mode .street { background: #F2F6F3; border-color: rgba(20,32,24,.05); }
body.light-mode .map-summary { background: rgba(255,255,255,.92); }
body.light-mode .map-point b { background: rgba(255,255,255,.9); color: var(--text); }
body.light-mode .theme-toggle span { transform: translateX(21px); }
body.light-mode .auth-form input { background: rgba(20,32,24,.025); }

@media (max-width: 900px) {
    body.has-mobile-nav { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
    .menu-toggle { display: none; }
    .topbar { gap: 14px; }
    .topbar .profile-shortcut { margin-left: auto; }
    .topbar .main-nav { position: fixed; z-index: 1000; top: auto; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 0; width: 100%; padding: 8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right)); border: 0; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0; background: rgba(17,28,34,.98); color: var(--muted); box-shadow: 0 -16px 34px rgba(0,0,0,.32); backdrop-filter: blur(18px); }
    .topbar .main-nav.open { display: grid; }
    .topbar .main-nav a { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; min-width: 0; min-height: 56px; padding: 5px 3px; border-radius: 0; color: var(--muted); font-size: 10px; font-weight: 800; line-height: 1; text-align: center; white-space: nowrap; }
    .topbar .main-nav a:hover, .topbar .main-nav a.active { background: transparent; color: var(--green-light); }
    .topbar .main-nav .nav-icon { display: grid; place-items: center; width: 27px; height: 27px; flex: none; }
    .topbar .main-nav .nav-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .topbar .main-nav .nav-label-full { display: none; }
    .topbar .main-nav .nav-label-short { display: block; }
    .hero { grid-template-columns: 1fr; gap: 24px; min-height: auto; padding-top: 64px; }.hero-copy { text-align: center; }.hero-copy > p { margin-inline: auto; }.button-row, .trust-row { justify-content: center; }.hero-visual { min-height: auto; padding: 20px 0 0; }
    .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.feature-card { min-height: auto; }.feature-card h3 { margin-top: 30px; }
    .about-points { grid-template-columns: 1fr; }
    .objectives-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .download-section { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-grid { grid-template-columns: 1fr; }
    .opportunity-grid, .report-grid { grid-template-columns: 1fr; }
    .page-intro, .card-heading, .map-summary { align-items: flex-start; flex-direction: column; }
    .map-metrics { min-width: 100%; flex-wrap: wrap; }
}

@media (max-width: 620px) {
    .topbar, .section, .app-main, .footer, .hero { width: min(100% - 28px, 1180px); }
    .topbar { height: 70px; }.hero { min-height: auto; padding: 42px 0 70px; }.hero h1 { font-size: clamp(44px, 13vw, 58px); letter-spacing: 0; }.hero-copy > p { font-size: 15px; }.button-row { flex-direction: column; }.button-row .button { width: 100%; }.trust-row { flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 16px; }.trust-row span { white-space: nowrap; font-size: 10px; }.hero-visual { min-height: auto; }.phone-card { width: 100%; padding: 20px; border-radius: 28px; }
    .app-main { padding: 45px 0 70px; }.page-intro { align-items: flex-start; flex-direction: column; }.page-intro h1 { font-size: 42px; }
    .feature-grid, .stats-grid, .opportunity-grid { grid-template-columns: 1fr; }.stat-card { min-height: 140px; }.dashboard-grid { margin-top: 12px; }.content-card { padding: 20px; }
    .about-copy p { font-size: 14px; }
    .objectives-grid { grid-template-columns: 1fr; }
    .about-points span, .objectives-grid article { min-height: auto; }
    .download-section { padding-top: 70px; }
    .download-copy h2 { font-size: 38px; }
    .download-card { min-height: 86px; padding: 15px; }
    .download-icon { width: 46px; height: 46px; border-radius: 13px; }
    .route-labels span:nth-child(2), .route-labels span:nth-child(3) { display: none; }.summary-metrics { flex-direction: column; }
    .timeline-item { grid-template-columns: 48px 38px 1fr; }.timeline-content { padding: 18px; }.event-index { display: none; }
    .map-board { height: 600px; }.map-summary { align-items: flex-start; flex-direction: column; }.map-metrics { min-width: 100%; flex-wrap: wrap; }.map-metrics span { min-width: 30%; }
    .map-legend { flex-direction: column; gap: 4px; }.profile-hero { align-items: flex-start; flex-wrap: wrap; padding: 24px; }.profile-hero .button { width: 100%; margin-left: 0; }
    .footer { align-items: flex-start; flex-direction: column; gap: 10px; }.footer p { line-height: 1.6; }
    .auth-card { padding: 26px 20px; border-radius: 22px; }
    .mini-map { height: auto; aspect-ratio: 320 / 250; min-height: 214px; }
    .mini-route-particle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mini-route-glow, .mini-route-line, .map-pin::after { animation: none; }
    .mini-route-glow, .mini-route-line { stroke-dasharray: 100; stroke-dashoffset: 0; opacity: 1; }
    .mini-route-particle { display: none; }
}

/* Functional location, map and empty-state extensions */
.intro-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.action-feedback { min-height: 18px; margin: -24px 0 24px; color: var(--muted); font-size: 11px; font-weight: 700; }
.action-feedback.error { color: #ff9b9b; }
.action-feedback.success { color: var(--green-light); }
.button:disabled { opacity: .55; cursor: wait; transform: none; }
.empty-state { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; min-height: 180px; margin-top: 24px; padding: 25px; border: 1px dashed var(--border); border-radius: 18px; color: var(--muted); }
.empty-state strong { color: var(--text); font-size: 15px; }
.empty-state span { margin-top: 5px; font-size: 11px; }
.empty-state.wide { grid-column: 1 / -1; margin-top: 0; }
.timeline-item time small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.map-legend .current { border: 2px solid white; background: var(--green); }
.map-legend .opportunity { background: #d5a94e; }
.real-map-board { background: var(--card); }
.real-map-board #real-map { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.real-map-board .map-summary { z-index: 500; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--card); color: var(--text); }
.leaflet-popup-content { font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 11px; line-height: 1.5; }
.leaflet-popup-content small { color: var(--muted); }

@media (max-width: 620px) {
    .intro-actions { width: 100%; align-items: stretch; flex-direction: column; }
    .intro-actions .button { width: 100%; }
    .intro-actions .avatar { display: none; }
}

/* Block 4: PWA, reports, journeys and mobile app experience */
.hidden { display: none !important; }
.journey-panel, .report-hero { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 22px; margin-bottom: 16px; padding: 25px 28px; border: 1px solid rgba(46,173,91,.24); border-radius: 24px; background: linear-gradient(145deg, rgba(46,173,91,.15), var(--card)); }
.journey-panel h2, .report-hero h2, .report-grid h2, .opportunity-section h2 { margin: 6px 0; }
.journey-panel p, .report-grid p, .privacy-copy { margin: 0; color: var(--muted); font-size: 11px; }
.journey-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.journey-status { grid-column: 1 / -1; color: var(--muted); font-size: 10px; font-weight: 800; }
.journey-status.success { color: var(--green-light); }.journey-status.error { color: #ff9b9b; }
.journey-debug { margin: -6px 0 16px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.02); color: var(--muted); font-size: 10px; }
.journey-debug summary { cursor: pointer; color: var(--muted); font-weight: 800; }
.journey-debug dl { display: grid; gap: 8px; margin: 12px 0 0; }.journey-debug dl div { display: grid; grid-template-columns: minmax(145px, .35fr) 1fr; gap: 8px; }.journey-debug dt { color: var(--text); font-weight: 800; }.journey-debug dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.web-limit-note { margin-top: 16px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 15px; color: var(--muted); font-size: 10px; }
.opportunity-section { margin-top: 34px; }.opportunity-section > .card-heading { margin-bottom: 15px; }
.saved-opportunity-section { margin-top: 0; margin-bottom: 34px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.saved-card { background: linear-gradient(145deg, rgba(46,173,91,.15), var(--card) 48%); }
.opportunity-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0; }.opportunity-meta span { padding: 6px 9px; border-radius: 99px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 9px; font-weight: 800; }
.map-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin: 2px 0 14px; padding: 0 14px; border: 1px solid rgba(110,226,138,.28); border-radius: 12px; background: rgba(46,173,91,.1); color: var(--green-light); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.map-button:hover { border-color: rgba(110,226,138,.5); background: rgba(46,173,91,.16); }
.unsave-opportunity-form { margin: 0 0 14px; }.unsave-button { width: 100%; min-height: 40px; margin: 0 0 14px; padding: 0 14px; border: 1px solid rgba(255,120,120,.3); border-radius: 12px; background: rgba(255,120,120,.08); color: #ff9b9b; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }.unsave-opportunity-form .unsave-button { margin: 0; }
.unsave-button:hover { border-color: rgba(255,120,120,.52); background: rgba(255,120,120,.13); }
.text-button.saved { opacity: .65; }
.map-filters { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 15px; padding: 12px; border: 1px solid var(--border); border-radius: 17px; background: var(--card); }
.map-filters > div { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }.map-filters label { color: var(--muted); font-size: 10px; font-weight: 800; }
.filter-chip { min-height: 36px; padding: 0 13px; border: 1px solid var(--border); border-radius: 99px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 800; cursor: pointer; }.filter-chip.active { border-color: var(--green); background: var(--green); color: white; }
.category-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -16px 0 30px; padding: 12px; border: 1px solid var(--border); border-radius: 17px; background: var(--card); }
.category-filter .filter-chip { display: inline-flex; align-items: center; gap: 7px; }
.category-filter .filter-chip span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: rgba(255,255,255,.08); font-size: 9px; }
.category-filter .filter-chip.active span { background: rgba(255,255,255,.22); color: white; }
.report-hero { grid-template-columns: 1fr; min-height: 190px; margin-bottom: 16px; }.report-hero h2 { max-width: 900px; font-size: clamp(25px, 4vw, 43px); line-height: 1.12; letter-spacing: 0; }.report-summary-text { max-width: 760px; margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; font-weight: 600; }
.report-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 22px; }.report-grid .content-card { min-height: 180px; }
.report-stats { margin-top: 24px; }
.ai-report-card { margin-top: 16px; margin-bottom: 0; padding: 28px; background: linear-gradient(145deg, rgba(46,173,91,.13), rgba(213,169,78,.06), var(--card) 62%); }
.ai-report-card .card-heading { align-items: center; }
.ai-report-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.ai-report-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border: 1px solid rgba(110,226,138,.34); border-radius: 99px; background: rgba(46,173,91,.1); color: var(--green-light); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.ai-report-badge[data-source="local"] { border-color: rgba(213,169,78,.42); background: rgba(213,169,78,.1); color: #f2c56d; }
.ai-report-status { min-height: 18px; margin: 14px 0 0; color: var(--muted); font-size: 10px; font-weight: 800; }
.ai-report-status.error { color: #ff9b9b; }
.ai-report-summary { max-width: 900px; margin: 12px 0 0; color: var(--text); font-size: 15px; line-height: 1.7; font-weight: 650; }
.ai-insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.ai-insight { min-width: 0; min-height: 148px; padding: 18px; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; background: rgba(255,255,255,.03); }
.ai-insight span, .ai-insight strong, .ai-insight p { display: block; }
.ai-insight span { color: var(--green-light); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.ai-insight strong { margin-top: 12px; color: var(--text); font-size: 15px; line-height: 1.3; }
.ai-insight p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.ai-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.ai-actions span { min-width: 0; padding: 13px 15px; border: 1px solid rgba(110,226,138,.18); border-radius: 14px; background: rgba(46,173,91,.07); color: var(--muted); font-size: 11px; line-height: 1.55; font-weight: 750; }
.ai-report-card.is-loading-ai .ai-insight-grid, .ai-report-card.is-loading-ai .ai-actions { opacity: .55; }
.privacy-card { margin-top: 16px; }.privacy-copy { margin: 16px 0 5px; }
.app-install-card { margin-top: 16px; background: linear-gradient(145deg, rgba(46,173,91,.14), var(--card)); }
.profile-app-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.install-feedback { margin: 14px 0 0; min-height: 16px; }
.install-guide { margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: rgba(46,173,91,.07); }
.install-guide strong, .install-guide span { display: block; }
.install-guide strong { color: var(--green-light); font-size: 11px; }
.install-guide span, .install-guide ol { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.install-guide ol { padding-left: 18px; }
.location-permission-card { margin-top: 16px; }
.permission-status { padding: 8px 12px; border: 1px solid var(--border); border-radius: 99px; color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.permission-status[data-status="active"] { border-color: rgba(110,226,138,.45); color: var(--green-light); background: rgba(46,173,91,.1); }
.permission-status[data-status="blocked"], .permission-status[data-status="unavailable"] { border-color: rgba(255,120,120,.4); color: #ff9b9b; background: rgba(255,120,120,.08); }
.permission-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ios-location-note { margin-top: 16px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.danger-button { min-height: 40px; padding: 0 14px; border: 1px solid rgba(235,94,94,.28); border-radius: 12px; background: rgba(235,94,94,.08); color: #ff9b9b; font-size: 10px; font-weight: 800; cursor: pointer; }

@media (max-width: 620px) {
    body.has-mobile-nav { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
    .topbar { height: calc(78px + env(safe-area-inset-top)); padding-top: calc(16px + env(safe-area-inset-top)); }
    .topbar .menu-toggle { display: none; }
    .topbar .profile-shortcut { width: 38px; height: 38px; font-size: 13px; }
    .topbar .main-nav { position: fixed; top: auto; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 0; overflow: visible; padding: 7px max(5px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-right)); border-radius: 0; background: rgba(17,28,34,.99); box-shadow: 0 -12px 30px rgba(0,0,0,.35); scrollbar-width: auto; }
    .topbar .main-nav.open { display: grid; }
    .topbar .main-nav a { min-width: 0; min-height: 56px; padding: 4px 2px; font-size: 9px; text-align: center; white-space: nowrap; }
    .topbar .main-nav .nav-icon { width: 25px; height: 25px; }
    .app-main { padding-top: 32px; }
    .button, .filter-chip, .danger-button { min-height: 46px; }
    .journey-panel { grid-template-columns: 1fr; padding: 22px; }.journey-actions { justify-content: stretch; }.journey-actions .button { width: 100%; }.journey-debug dl div { grid-template-columns: 1fr; gap: 2px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }.stat-card { min-height: 145px; padding: 18px; }.stat-card strong { font-size: 23px; }
    .report-grid { grid-template-columns: 1fr; margin-top: 18px; }.report-stats { grid-template-columns: repeat(2, 1fr); margin-top: 18px; }
    .ai-report-card { padding: 22px; }.ai-report-controls { width: 100%; justify-content: stretch; }.ai-report-controls .button, .ai-report-badge { flex: 1 1 0; }.ai-insight-grid, .ai-actions { grid-template-columns: 1fr; }
    .map-board { height: calc(100vh - 245px); min-height: 520px; border-radius: 22px; }.map-summary { right: 10px; bottom: 10px; left: 10px; padding: 15px; }
    .map-filters { align-items: stretch; flex-direction: column; }.map-filters > div:first-child { flex-wrap: nowrap; overflow-x: auto; }
    .opportunity-card, .content-card, .settings-card { border-radius: 20px; }
    .profile-stats { overflow-x: auto; }.profile-stats div { min-width: 120px; }
    .setting-row { align-items: flex-start; flex-direction: column; }.danger-button { width: 100%; }
    .profile-app-actions { width: 100%; justify-content: stretch; }
    .profile-app-actions .button { width: 100%; }
}

/* Top search and notifications */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.logged-in-topbar { position: fixed; top: 0; left: 50%; transform: translateX(-50%); height: auto; min-height: 126px; padding: 18px 0 16px; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; }
.logged-in-topbar .profile-shortcut { order: 1; width: 54px; height: 54px; margin-left: 0; border: 0; background: var(--green); color: white; font-size: 18px; box-shadow: 0 16px 34px rgba(0,0,0,.18); }
.logged-in-topbar .profile-shortcut.active { background: var(--green-dark); color: white; }
.top-search { order: 2; position: relative; display: flex; align-items: center; flex: 1 1 420px; max-width: 760px; min-width: 0; height: 58px; }
.top-search input { width: 100%; height: 100%; min-width: 0; padding: 0 62px 0 25px; border: 1px solid rgba(255,255,255,.12); border-radius: 99px; outline: none; background: rgba(255,255,255,.96); color: #26322D; font: inherit; font-size: 18px; font-weight: 650; box-shadow: 0 18px 45px rgba(0,0,0,.18); }
.top-search input::placeholder { color: #748077; font-weight: 600; }
.top-search input:focus { border-color: rgba(110,226,138,.8); box-shadow: 0 0 0 4px rgba(46,173,91,.16), 0 18px 45px rgba(0,0,0,.18); }
.top-search-submit { position: absolute; right: 10px; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #121714; cursor: pointer; }
.top-search-submit svg, .notification-button svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.notification-wrap { order: 3; position: relative; flex: none; }
.notification-button { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border: 0; border-radius: 50%; background: transparent; color: var(--green-light); cursor: pointer; box-shadow: none; }
.notification-button span { position: absolute; top: 2px; right: 1px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border: 2px solid var(--bg); border-radius: 99px; background: #E9425B; color: white; font-size: 12px; font-weight: 900; line-height: 1; }
.notification-panel { position: absolute; z-index: 1100; top: calc(100% + 12px); right: 0; width: min(330px, calc(100vw - 28px)); padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: rgba(17,28,34,.98); color: var(--text); box-shadow: 0 24px 70px rgba(0,0,0,.32); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.notification-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.notification-panel strong { display: block; margin-bottom: 10px; color: var(--green-light); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.notification-panel p { margin: 0; padding: 11px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 700; }
.notification-panel a { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; margin-top: 10px; padding: 0 14px; border-radius: 12px; background: var(--green); color: white; font-size: 11px; font-weight: 900; }
.logged-in-topbar .menu-toggle { order: 4; }
.logged-in-topbar .main-nav { order: 5; flex: 0 0 auto; margin: 2px auto 0; }
.logged-in-nav { width: max-content; max-width: min(1180px, calc(100% - 40px)); margin: 126px auto 0; position: relative; z-index: 1100; }
.has-mobile-nav .app-main { padding-top: 36px; }
body.light-mode .logged-in-topbar .profile-shortcut { background: var(--green); color: white; box-shadow: 0 12px 28px rgba(20,70,40,.11); }
body.light-mode .notification-button { background: transparent; color: var(--green); box-shadow: none; }
body.light-mode .notification-button span { border-color: var(--bg); }
body.light-mode .notification-panel { background: rgba(255,255,255,.98); }

@media (max-width: 900px) {
    .logged-in-topbar { min-height: calc(92px + env(safe-area-inset-top)); padding-top: calc(16px + env(safe-area-inset-top)); padding-bottom: 14px; display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; column-gap: 10px; }
    .logged-in-topbar .profile-shortcut { grid-column: 1; width: 48px; height: 48px; font-size: 16px; }
    .top-search { grid-column: 2; width: 100%; height: 50px; min-width: 0; }
    .top-search input { padding: 0 48px 0 18px; font-size: 15px; }
    .top-search-submit { right: 5px; width: 40px; height: 40px; }
    .top-search-submit svg { width: 23px; height: 23px; }
    .notification-wrap { grid-column: 3; justify-self: end; }
    .notification-button { width: 48px; height: 48px; }
    .notification-button svg { width: 26px; height: 26px; }
    .notification-button span { top: 0; right: 0; min-width: 22px; height: 22px; font-size: 11px; }
    .logged-in-topbar .main-nav { order: initial; margin: 0; }
    .notification-panel { top: calc(100% + 10px); right: 0; }
}

@media (max-width: 620px) {
    .logged-in-topbar { width: min(100% - 28px, 1180px); height: auto; min-height: calc(92px + env(safe-area-inset-top)); padding-top: calc(16px + env(safe-area-inset-top)); }
    .logged-in-topbar .profile-shortcut, .notification-button { width: 46px; height: 46px; }
    .top-search { height: 48px; }
    .top-search input { font-size: 14px; }
}

@media (max-width: 900px) {
    .topbar.logged-in-topbar {
        display: grid;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        grid-template-columns: 46px minmax(0, 1fr) 46px;
        gap: 10px;
        align-items: center;
        height: auto;
        min-height: calc(86px + env(safe-area-inset-top));
        padding: calc(14px + env(safe-area-inset-top)) 0 12px;
    }

    .has-mobile-nav .app-main {
        padding-top: calc(118px + env(safe-area-inset-top));
    }

    .topbar.logged-in-topbar .profile-shortcut {
        display: inline-grid !important;
        grid-column: 1;
        grid-row: 1;
        width: 46px;
        height: 46px;
        margin: 0;
    }

    .topbar.logged-in-topbar .top-search {
        display: flex !important;
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        height: 48px;
        margin: 0;
    }

    .topbar.logged-in-topbar .notification-wrap {
        display: block !important;
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .topbar.logged-in-topbar .notification-button {
        width: 46px;
        height: 46px;
    }

    .topbar.logged-in-topbar .menu-toggle {
        display: none !important;
    }

    .topbar.logged-in-topbar .main-nav {
        position: fixed !important;
        z-index: 1190;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        width: 100% !important;
        margin: 0 !important;
        padding: 7px max(5px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-right));
        border: 0;
        border-top: 1px solid rgba(255,255,255,.08);
        border-radius: 0;
        background: rgba(17,28,34,.99);
        box-shadow: 0 -12px 30px rgba(0,0,0,.35);
    }

    .logged-in-nav {
        position: fixed !important;
        z-index: 1190;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        width: 100% !important;
        max-width: none;
        margin: 0 !important;
        padding: 7px max(5px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-right));
        border: 0;
        border-top: 1px solid rgba(255,255,255,.08);
        border-radius: 0;
        background: rgba(17,28,34,.99);
        box-shadow: 0 -12px 30px rgba(0,0,0,.35);
    }

    .logged-in-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
        min-height: 56px;
        padding: 4px 2px;
        border-radius: 0;
        color: var(--muted);
        font-size: 9px;
        font-weight: 800;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
    }

    .logged-in-nav a:hover,
    .logged-in-nav a.active {
        background: transparent;
        color: var(--green-light);
        transform: none;
    }

    .logged-in-nav .nav-icon {
        display: grid;
        place-items: center;
        width: 25px;
        height: 25px;
        flex: none;
    }

    .logged-in-nav .nav-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .logged-in-nav .nav-label-full {
        display: none;
    }

    .logged-in-nav .nav-label-short {
        display: block;
    }
}