:root { --ink:#102a2a; --muted:#627474; --accent:#d9f651; --accent-dark:#b9d832; --paper:#f6f7f2; --card:#fff; --line:#dfe6df; --danger:#b42318; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif; }
a { color:inherit; }
h1,h2 { font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif; margin-top:0; letter-spacing:-.035em; }
h1 { font-size:clamp(2.2rem,5vw,4.2rem); line-height:1.02; margin-bottom:.7rem; }
h2 { font-size:1.25rem; }
.site-header { height:76px; padding:0 max(24px,calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; background:rgba(246,247,242,.94); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }
.brand { text-decoration:none; display:flex; align-items:center; gap:10px; font-family:Inter,"Segoe UI",sans-serif; font-weight:800; font-size:1.2rem; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; background:var(--ink); color:var(--accent); border-radius:10px; }
nav { display:flex; align-items:center; gap:24px; } nav a { text-decoration:none; font-weight:600; } nav form { margin:0; }
.mobile-nav { display:none; position:relative; }
.mobile-nav summary { display:flex; align-items:center; gap:9px; min-height:44px; padding:0 13px; border:1px solid var(--line); border-radius:12px; background:#fff; font-weight:700; cursor:pointer; list-style:none; user-select:none; }
.mobile-nav summary::-webkit-details-marker { display:none; }
.menu-icon { display:flex; flex-direction:column; gap:4px; width:18px; }
.menu-icon i { display:block; width:18px; height:2px; border-radius:2px; background:var(--ink); transition:.18s ease; }
.mobile-nav[open] .menu-icon i:first-child { transform:translateY(6px) rotate(45deg); }
.mobile-nav[open] .menu-icon i:nth-child(2) { opacity:0; }
.mobile-nav[open] .menu-icon i:last-child { transform:translateY(-6px) rotate(-45deg); }
.mobile-nav nav { position:absolute; top:calc(100% + 10px); right:0; width:min(310px,calc(100vw - 32px)); padding:10px; display:flex; align-items:stretch; flex-direction:column; gap:4px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 45px rgba(16,42,42,.18); }
.mobile-nav nav a,.mobile-nav nav .link-button { display:flex; align-items:center; width:100%; min-height:48px; padding:10px 13px; border-radius:10px; color:var(--ink); font-weight:700; text-decoration:none; font-size:1rem; text-align:left; }
.mobile-nav nav a:hover,.mobile-nav nav .link-button:hover { background:#f0f3ec; }
.mobile-nav nav a:nth-child(3) { background:var(--accent); }
.mobile-nav nav form { border-top:1px solid var(--line); margin-top:5px; padding-top:5px; }
.link-button { border:0; background:none; font:inherit; color:var(--muted); cursor:pointer; }
.page-shell { max-width:1180px; margin:auto; padding:64px 24px 80px; min-height:calc(100vh - 150px); }
.button { display:inline-flex; justify-content:center; align-items:center; border:0; border-radius:12px; padding:14px 20px; background:var(--accent); color:var(--ink); font:700 1rem Inter,"Segoe UI",sans-serif; text-decoration:none; cursor:pointer; box-shadow:0 1px 0 rgba(0,0,0,.08); }
.button:hover { background:var(--accent-dark); transform:translateY(-1px); }
.button-small { padding:10px 15px; font-size:.9rem; }.button-danger { background:#fee4e2; color:var(--danger); }
.eyebrow { color:#4b6f62; text-transform:uppercase; letter-spacing:.14em; font-size:.77rem; font-weight:800; }
.lead { color:var(--muted); font-size:1.1rem; max-width:650px; }
.muted { color:var(--muted); font-size:.9rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:0 12px 40px rgba(16,42,42,.06); }
.hero-row,.detail-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:40px; }
.filter-bar { display:flex; align-items:center; gap:14px; margin-bottom:24px; }.filter-bar label,.map-heading label { font-weight:700; font-size:.88rem; }
select,input { border:1px solid #cbd6cf; border-radius:10px; padding:10px 12px; background:#fff; color:var(--ink); font:inherit; }
.map-link { margin-left:auto; font-weight:700; text-decoration:none; }
.activity-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.activity-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; text-decoration:none; transition:.2s ease; }
.activity-card:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(16,42,42,.09); border-color:#bdcabe; }
.activity-card-top { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.82rem; margin-bottom:24px; }.activity-date { margin-left:auto; }.sport-dot { display:inline-block; width:10px; height:10px; border-radius:50%; }.sport-name { font-weight:700; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.metrics div { display:flex; flex-direction:column; }.metrics strong { font-family:"Manrope"; font-size:1.2rem; }.metrics span { color:var(--muted); font-size:.78rem; }
.metrics-large { padding:22px 28px; margin-bottom:18px; }.metrics-large strong { font-size:1.8rem; }
.no-track { color:#b54708; font-size:.8rem; margin-bottom:0; }.empty-state { text-align:center; padding:70px 25px; }.empty-state p { max-width:500px; margin:0 auto 24px;color:var(--muted); }.empty-icon,.upload-icon { font-size:2rem; color:#668000; }
.narrow-page { max-width:720px; margin:auto; }.upload-card { padding:28px; }.drop-zone { min-height:260px; border:2px dashed #b8c7bc; border-radius:15px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; cursor:pointer; background:#fbfcf8; }.drop-zone:hover { border-color:#78921b; background:#f8fbe9; }.file-input { position:absolute; opacity:0; width:1px; height:1px; }.file-summary { background:#eef2ed; border-radius:10px; padding:12px; margin:16px 0; font-size:.9rem; }
.auth-layout { min-height:calc(100vh - 220px); display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:8vw; }.auth-copy p:not(.eyebrow) { color:var(--muted); max-width:580px; font-size:1.2rem; }.auth-card { padding:34px; }.stack-form p { display:flex; flex-direction:column; gap:5px; }.stack-form input { width:100%; }.stack-form .helptext,.stack-form ul { color:var(--muted); font-size:.78rem; }.stack-form .button { width:100%; }.form-error,.errorlist { color:var(--danger); }
.messages { position:fixed; right:24px; top:92px; z-index:20; width:min(420px,calc(100vw - 48px)); }.message { padding:13px 16px; margin-bottom:8px; background:#fff; border-left:4px solid #588157; border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.12); }.message.error { border-color:var(--danger); }.message.info { border-color:#3b82f6; }
.map { border-radius:20px; border:1px solid var(--line); overflow:hidden; box-shadow:0 12px 40px rgba(16,42,42,.08); }.map-detail { height:580px; }.map-all { height:calc(100vh - 300px); min-height:520px; }.map-heading { margin-bottom:18px; }.map-heading label { display:flex; flex-direction:column; gap:6px; }.legend { display:flex; flex-wrap:wrap; gap:18px; margin:0 0 14px; font-size:.82rem; }.legend span { display:flex; align-items:center; gap:6px; }.legend i { width:18px; height:4px; border-radius:2px; }.back-link { display:inline-block; color:var(--muted); margin-bottom:25px; text-decoration:none; }.detail-heading .eyebrow { display:flex; align-items:center; gap:7px; }.empty-map { padding:60px;text-align:center;color:var(--muted); }
@media(max-width:850px) { .activity-grid { grid-template-columns:repeat(2,1fr); }.auth-layout { grid-template-columns:1fr; }.auth-copy { display:none; }.desktop-nav { display:none; }.mobile-nav { display:block; }.hero-row,.detail-heading { align-items:flex-start; }.map-link { display:none; } }
@media(max-width:560px) { .page-shell { padding:36px 16px 60px; }.activity-grid { grid-template-columns:1fr; }.hero-row,.detail-heading { flex-direction:column; }.hero-row .button { width:100%; }.site-header { padding:0 16px; }.metrics-large { padding:18px; }.map-all,.map-detail { height:65vh; min-height:430px; } }