:root { --bg:#f1f4ef; --panel:#fff; --fg:#101412; --muted:#68716b; --line:#dce2da; --signal:#c7f532; --signal-ink:#233000; --accent:#ff5a36; --road:#2672d9; --danger:#d83a2e; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.topbar { height:64px; padding:0 26px; display:flex; align-items:center; gap:34px; background:var(--fg); color:#fff; position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-weight:800; font-size:18px; }
.brand img { width:34px; height:34px; border-radius:7px; object-fit:cover; }
.topbar nav { display:flex; align-self:stretch; align-items:center; gap:24px; }
.topbar nav a { color:#aeb6b0; text-decoration:none; font-weight:650; height:100%; display:flex; align-items:center; border-bottom:2px solid transparent; }
.topbar nav a.active { color:#fff; border-color:var(--signal); }
.account { margin-left:auto; }
.empty-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:7px; color:var(--signal-ink); background:var(--signal); }
.account { display:flex; align-items:center; gap:10px; }
.account #avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid var(--line); }
.primary,.quiet { border:1px solid transparent; border-radius:7px; padding:8px 13px; }
.primary,.hunt-button { background:var(--signal); color:var(--signal-ink); font-weight:750; }
.quiet { background:transparent; color:var(--muted); border-color:var(--line); }
main { max-width:1680px; margin:0 auto; display:grid; grid-template-columns:280px minmax(0,1fr); min-height:calc(100vh - 64px); }
aside { padding:24px 20px; background:var(--panel); border-right:1px solid var(--line); }
.filter-head,.content-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.icon-button { width:34px; height:34px; border:1px solid var(--line); border-radius:7px; background:transparent; color:var(--muted); font-size:18px; }
h1,h2,p { margin-top:0; }
aside h2 { font-size:16px; margin-bottom:0; }
.field { display:block; margin-top:18px; }
.field>span { display:block; margin-bottom:5px; color:var(--muted); font-size:11px; font-weight:650; text-transform:uppercase; }
.field>div { display:flex; align-items:center; gap:5px; }
input,select { width:100%; min-width:0; padding:9px 10px; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:7px; }
small { color:var(--muted); }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.check { display:flex; gap:8px; align-items:center; margin-top:18px; color:var(--muted); }
.check input { width:auto; }
.filter-label { display:block; color:var(--muted); font-size:11px; font-weight:650; text-transform:uppercase; }
.direction-filter { margin-top:14px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.direction-filter-head { display:flex; align-items:center; justify-content:space-between; }
.direction-filter-head strong { display:block; margin-top:2px; font-variant-numeric:tabular-nums; }
.switch input { position:absolute; opacity:0; pointer-events:none; }
.switch>span { display:block; width:38px; height:22px; padding:2px; border-radius:11px; background:#c8cec8; transition:.15s ease; }
.switch>span::after { content:""; display:block; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.24); transition:.15s ease; }
.switch input:checked+span { background:var(--fg); }
.switch input:checked+span::after { transform:translateX(16px); background:var(--signal); }
.compass-dial { --from:315deg; --span:90deg; position:relative; width:150px; aspect-ratio:1; margin:13px auto 9px; border:10px solid #e5e9e3; border-radius:50%; color:var(--muted); background:radial-gradient(circle at center,var(--panel) 0 48%,transparent 49%); }
.compass-dial::before { content:""; position:absolute; inset:-10px; border-radius:50%; background:conic-gradient(from var(--from),transparent 0 var(--span),transparent 0); }
.compass-dial.enabled::before { background:conic-gradient(from var(--from),var(--signal) 0 var(--span),transparent 0); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 0); mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 0); }
.compass-dial span { position:absolute; z-index:1; font-size:10px; font-weight:800; }
.compass-dial .north { top:8px; left:50%; transform:translateX(-50%); }.compass-dial .east { right:8px; top:50%; transform:translateY(-50%); }.compass-dial .south { bottom:8px; left:50%; transform:translateX(-50%); }.compass-dial .west { left:8px; top:50%; transform:translateY(-50%); }
.direction-values { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.compass-dial .direction-handle { position:absolute; z-index:3; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--ink); transform:translate(-50%,-50%); touch-action:none; cursor:grab; font-weight:800; }
.direction-handle::before { content:""; position:absolute; inset:8px; border:2px solid var(--signal); border-radius:50%; background:var(--panel); z-index:-1; }
.direction-handle:active { cursor:grabbing; }
.direction-handle:focus-visible { outline:2px solid #2672d9; outline-offset:2px; }
.direction-values label { position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:5px; }
.direction-values label>span { color:var(--muted); font-size:11px; }
.direction-values input { padding:7px 5px; text-align:right; font-variant-numeric:tabular-nums; }
.direction-values small { min-width:28px; font-weight:700; }
.direction-filter p { margin:9px 0 0; color:var(--muted); font-size:11px; }
.premium-note { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
.premium-note b { display:block; margin-top:8px; }
.pro-badge { display:inline-block; color:var(--signal-ink); background:var(--signal); padding:2px 6px; font-size:10px; font-weight:850; border-radius:4px; }
.full { width:100%; margin-top:12px; }
.premium-note p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.content { padding:26px 28px 50px; min-width:0; }
.content-head h1 { margin:2px 0 0; font-size:25px; letter-spacing:0; }
.eyebrow { color:#476000; font-size:10px; font-weight:800; text-transform:uppercase; }
.ride-strip { min-height:66px; padding:12px 14px 12px 18px; margin-bottom:16px; color:#fff; background:var(--fg); display:flex; align-items:center; justify-content:space-between; border-radius:8px; }
.ride-strip>div { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:9px; }
.ride-strip small { grid-column:2; color:#aeb6b0; }
.live-dot { width:9px; height:9px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px rgba(199,245,50,.15); grid-row:1 / span 2; }
.hunt-button { border:0; border-radius:7px; padding:10px 14px; }
.summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-bottom:24px; border:1px solid var(--line); background:var(--line); border-radius:8px; overflow:hidden; }
.summary-grid>div { background:var(--panel); padding:15px 17px; display:grid; }
.summary-grid span,.summary-grid small { color:var(--muted); font-size:11px; }
.summary-grid strong { margin:4px 0 1px; font-size:24px; letter-spacing:0; }
.workspace { display:grid; grid-template-columns:minmax(430px,1.25fr) minmax(340px,.75fr); gap:16px; align-items:start; }
.segment-pane,.wind-planner,.nearby-panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.segment-pane { min-width:0; padding:16px; }
.conditions-pane { display:grid; gap:16px; min-width:0; }
.conditions-pane>section { min-width:0; overflow-wrap:anywhere; }
.route-planner { padding:16px; background:var(--panel); }
.route-planner h2 { font-size:18px; margin-bottom:12px; }
#routeStatus { margin:12px 0; color:var(--muted); }
#routeSegments { list-style:none; padding:0; max-height:260px; overflow:auto; }
#routeSegments li { margin-top:6px; }
#routeSegments button { text-align:left; white-space:normal; overflow-wrap:anywhere; }
#segmentMap { width:100%; min-width:0; height:340px; isolation:isolate; }
[hidden] { display:none !important; }
.wind-planner { margin:0; padding:16px 18px; }
.wind-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.wind-head h2 { margin:2px 0 0; font-size:18px; }
.day-tabs { display:grid; grid-template-columns:repeat(3,1fr); padding:3px; margin-top:12px; background:var(--bg); border:1px solid var(--line); border-radius:7px; }
.day-tabs button { border:0; border-radius:5px; padding:7px 11px; color:var(--muted); background:transparent; font-weight:650; }
.day-tabs button.active { color:var(--signal-ink); background:var(--signal); }
.wind-summary { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 16px; margin:15px 0 9px; }
.wind-summary strong { font-size:24px; }.wind-summary span { color:var(--muted); font-size:12px; }
.suggested-segments { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.suggested-segments li { display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.suggested-segments li>div { display:grid; }.suggested-segments small { color:var(--muted); }
.suggestion-rank { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--fg); color:#fff; font-size:11px; font-weight:800; }
.tailwind { color:#3c6700; }.headwind { color:var(--danger); }.weather-source { display:block; margin-top:8px; }
.nearby-panel { padding:16px 18px; }
.panel-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.panel-title h2 { margin:2px 0 0; font-size:18px; }.panel-title a { color:var(--road); font-size:12px; text-decoration:none; font-weight:650; }
.nearby-map { position:relative; height:250px; margin-top:14px; overflow:hidden; border:1px solid var(--line); border-radius:7px; background-color:#e8eee5; background-image:linear-gradient(#dce5d8 1px,transparent 1px),linear-gradient(90deg,#dce5d8 1px,transparent 1px); background-size:38px 38px; }
.nearby-map b { position:absolute; left:18px; bottom:28px; }.nearby-map small { position:absolute; left:18px; bottom:10px; }
.road { position:absolute; height:7px; border:2px solid #fff; border-radius:8px; background:#bdc7b9; transform-origin:left center; }.road-a { width:360px; left:-35px; top:115px; transform:rotate(-18deg); }.road-b { width:300px; left:92px; top:40px; transform:rotate(55deg); }
.river { position:absolute; width:360px; height:70px; left:-30px; top:78px; border:8px solid #9fc9e8; border-color:#9fc9e8 transparent transparent transparent; border-radius:50%; transform:rotate(8deg); }
.pin,.you { position:absolute; width:14px; height:14px; border:3px solid #fff; border-radius:50%; background:var(--road); box-shadow:0 1px 4px rgba(0,0,0,.25); }.pin.starred { background:var(--accent); }.you { width:20px; height:20px; left:52%; top:48%; background:var(--road); box-shadow:0 0 0 6px rgba(38,114,217,.18); }.p1{left:22%;top:28%}.p2{right:17%;top:24%}.p3{left:34%;top:65%}.p4{right:27%;top:62%}
.content-head select { width:150px; background:var(--panel); }
.status { min-height:30px; padding:10px 0; color:var(--muted); font-size:12px; }
#segments { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); overflow:hidden; }
#segments:empty { display:none; }
.segment { display:grid; grid-template-columns:52px minmax(0,1fr) 100px; gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); transition:background .15s ease; }
.segment:hover { background:#f8faf6; }
.segment:last-child { border-bottom:0; }
.route { width:48px; height:48px; border-radius:7px; border:1px solid var(--line); display:grid; place-items:center; color:var(--road); background:var(--bg); font-weight:750; }
.name { font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meta { display:flex; flex-wrap:wrap; gap:9px; margin-top:4px; color:var(--muted); font-size:12px; }
.direction { text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
.segment-name { border:0; padding:0; background:transparent; color:inherit; text-align:left; white-space:normal; overflow-wrap:anywhere; }
.segment-name:hover { text-decoration:underline; }
.segment-name:focus-visible { outline:2px solid var(--road); outline-offset:3px; }
.hazard { color:var(--danger); }
.empty { min-height:420px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.empty-icon { margin-bottom:14px; }
.empty h2 { margin-bottom:4px; }
.empty p { color:var(--muted); }
@media (max-width:1260px) { .workspace{grid-template-columns:minmax(0,1fr)}.conditions-pane{grid-template-columns:minmax(0,1fr)}.nearby-map{height:220px} }
@media (max-width:760px) { .topbar nav{display:none} main{grid-template-columns:1fr} aside{display:block;padding:16px 20px;border-right:0;border-bottom:1px solid var(--line)}.content{padding:14px}.topbar{padding:0 14px}.account #athlete{display:none}.segment{grid-template-columns:48px minmax(0,1fr)}.direction{display:none}.summary-grid{grid-template-columns:1fr}.ride-strip{align-items:flex-start;gap:10px}.content-head{align-items:flex-end}.content-head h1{font-size:21px}.wind-head{align-items:flex-start;flex-direction:column}.suggested-segments li{grid-template-columns:26px minmax(0,1fr)}.suggested-segments li>strong{grid-column:2}.conditions-pane{grid-template-columns:1fr}.segment-pane{padding:12px}.premium-note{display:none} }