.athleteShell{
--athlete-accent:var(--primary);
}

.strava-credit{
margin-top:18px;
padding-top:16px;
border-top:1px solid var(--border-soft);
font-size:0.75rem;
line-height:1.5;
text-align:center;
color:var(--muted);
}

.athleteCard{
display:flex;
flex-direction:column;
gap:24px;
}

.athleteTopRow{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}

.athleteTopRow.isDisconnected{
justify-content:center;
}

.athleteTopRow.isDisconnected .sectionMeta{
display:none;
}

.athleteStatus{
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
}

.athleteStatusText{
margin:0;
font-size:0.875rem;
line-height:1.6;
color:var(--muted-strong);
}

.athleteContent{
display:flex;
flex-direction:column;
gap:28px;
}

.athleteSection{
display:flex;
flex-direction:column;
gap:16px;
}

.sectionHeader{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:16px;
}

.sectionHeader h2{
font-size:1.5rem;
line-height:1.25;
}

.sectionEyebrow,
.sectionMeta{
font-family:var(--font-mono);
font-size:0.75rem;
line-height:1.5;
color:var(--muted);
}

.sectionMeta{
margin:0;
text-align:right;
}

.chartLayout{
display:flex;
flex-direction:column;
gap:18px;
}

.chartExportPanel{
display:flex;
flex-direction:column;
gap:10px;
}

.chartControls{
display:grid;
grid-template-columns:minmax(150px, 1fr) auto auto;
align-items:stretch;
justify-content:stretch;
gap:8px;
flex-wrap:wrap;
order:4;
}

.chartControls select{
width:100%;
min-width:0;
min-height:36px;
font-size:0.75rem;
}

.chartActionBtn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:36px;
padding:8px 14px;
border:none;
background:var(--button-bg);
color:var(--button-text);
font-family:var(--font-mono);
font-size:0.72rem;
line-height:1.4;
cursor:pointer;
transition:color .16s ease, transform .08s ease;
}

.chartActionBtn:hover,
.chartActionBtn:focus-visible{
outline:none;
color:var(--primary);
}

.chartActionBtn:active{
transform:translateY(1px);
}

.chartDisplayOptions{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:8px;
order:5;
}

.chartOption{
display:inline-flex;
align-items:center;
gap:8px;
justify-content:flex-start;
padding:7px 9px;
border:1px solid var(--border);
background:var(--surface-muted);
color:var(--muted-strong);
font-family:var(--font-mono);
font-size:0.68rem;
line-height:1.4;
cursor:pointer;
}

.chartOption input{
width:13px;
height:13px;
min-height:0;
padding:0;
border:none;
background:transparent;
appearance:auto;
accent-color:var(--primary);
}

.spiderChart{
min-height:360px;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
padding:14px;
border:1px solid var(--border);
background-color:#050505;
background-image:
linear-gradient(45deg, rgba(255,255,255,0.12) 25%, transparent 25%),
linear-gradient(-45deg, rgba(255,255,255,0.12) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.12) 75%),
linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.12) 75%);
background-position:0 0, 0 12px, 12px -12px, -12px 0;
background-size:24px 24px;
order:1;
}

.spiderChart.chartLineBlack{
background-color:#f7f7f7;
background-image:
linear-gradient(45deg, rgba(0,0,0,0.12) 25%, transparent 25%),
linear-gradient(-45deg, rgba(0,0,0,0.12) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.12) 75%),
linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.12) 75%);
}

.spiderChart svg{
width:100%;
max-width:480px;
height:auto;
display:block;
overflow:visible;
}

.spiderGrid{
fill:none;
stroke-width:0.75;
}

.spiderAxis{
stroke-width:1;
}

.spiderShape{
stroke-width:4;
}

.spiderLabel{
font-family:"Nunito","Tooly Sans",Arial,sans-serif;
font-size:14px;
font-weight:800;
letter-spacing:0.6px;
text-anchor:middle;
dominant-baseline:middle;
}

.shareMetaLabel,
.shareDateLabel,
.shareBadgeLabel,
.shareStatLabel,
.shareStatValue{
font-family:"Nunito","Tooly Sans",Arial,sans-serif;
text-anchor:middle;
dominant-baseline:middle;
}

.shareBeastLabel{
font-family:"Nunito","Tooly Sans",Arial,sans-serif;
text-anchor:middle;
dominant-baseline:middle;
}

.shareMetaLabel{
font-size:15px;
font-weight:800;
letter-spacing:0.6px;
}

.shareDateLabel{
font-size:14px;
font-weight:800;
letter-spacing:0.6px;
}

.shareBeastLabel{
font-weight:900;
letter-spacing:0.7px;
}

.shareBadgeLabel{
font-size:14px;
font-weight:900;
letter-spacing:0.6px;
}

.shareStatLabel{
font-size:13px;
font-weight:800;
letter-spacing:0.5px;
}

.shareStatValue{
font-size:22px;
font-weight:900;
letter-spacing:0.3px;
}

.metricList{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:10px;
}

.metricInlineToggle{
display:flex;
align-items:center;
gap:8px;
cursor:pointer;
min-width:0;
}

.metricInlineToggle input{
width:14px;
height:14px;
min-height:0;
padding:0;
border:none;
background:transparent;
appearance:auto;
accent-color:var(--primary);
}

.metricInlineToggle span{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.emptyChart{
font-family:var(--font-mono);
font-size:0.8125rem;
color:var(--muted);
}

.unsupportedActivityCard{
max-width:360px;
padding:18px;
border:1px solid var(--border);
background:rgba(10,10,10,0.58);
color:var(--muted-strong);
font-family:var(--font-mono);
font-size:0.8125rem;
line-height:1.55;
text-align:center;
}

.unsupportedActivityCard p{
margin:0;
}

.beastExplanation,
.hiddenStatsNote{
padding:10px 12px;
border:1px solid var(--border);
background:rgba(10,10,10,0.54);
font-family:var(--font-mono);
font-size:0.72rem;
line-height:1.55;
color:var(--muted-strong);
order:2;
}

.hiddenStatsNote{
color:var(--muted);
order:3;
}

.metricItem,
.activityItem{
border:1px solid var(--border);
background:var(--surface-muted);
}

.metricItem{
padding:12px;
display:flex;
flex-direction:column;
gap:8px;
}

.metricItem.isUnavailable{
opacity:0.54;
}

.metricTop{
display:flex;
justify-content:space-between;
gap:10px;
font-family:var(--font-mono);
font-size:0.75rem;
line-height:1.4;
color:var(--muted);
}

.metricValue{
font-size:0.875rem;
line-height:1.45;
color:var(--text-soft);
}

.metricBar{
height:4px;
background:rgba(154,154,154,0.18);
overflow:hidden;
}

.metricFill{
height:100%;
background:var(--athlete-accent);
}

.activityControls{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:10px;
}

.activityControlGroup{
display:flex;
flex-direction:column;
gap:8px;
}

.activityList{
display:grid;
grid-template-columns:minmax(0, 1fr);
gap:10px;
max-height:226px;
overflow-y:auto;
padding:10px 6px 10px 10px;
border:1px solid var(--border);
background:rgba(10,10,10,0.54);
scrollbar-width:thin;
scrollbar-color:var(--border-strong) transparent;
}

.listMessage{
padding:14px;
border:1px solid var(--border);
background:rgba(10,10,10,0.54);
color:var(--muted-strong);
font-family:var(--font-mono);
font-size:0.8125rem;
line-height:1.5;
}

.activityList::-webkit-scrollbar{
width:10px;
}

.activityList::-webkit-scrollbar-track{
background:transparent;
}

.activityList::-webkit-scrollbar-thumb{
background:rgba(154,154,154,0.36);
border:2px solid transparent;
border-radius:0;
background-clip:padding-box;
}

.activityList::-webkit-scrollbar-thumb:hover{
background:rgba(154,154,154,0.56);
border:2px solid transparent;
background-clip:padding-box;
}

.loadMoreRow{
display:flex;
justify-content:flex-end;
}

.loadMoreBtn{
padding:0 2px;
border:none;
background:none;
color:var(--muted);
font-family:var(--font-mono);
font-size:0.72rem;
line-height:1.5;
cursor:pointer;
transition:color .16s ease;
}

.loadMoreBtn:hover,
.loadMoreBtn:focus-visible{
outline:none;
color:var(--primary);
}

.loadMoreBtn:disabled{
cursor:default;
opacity:0.56;
color:var(--muted);
}

.activityItem{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
padding:14px;
color:var(--text);
text-align:left;
cursor:pointer;
transition:color .16s ease, border-color .16s ease, background .16s ease;
}

.activityItem:hover,
.activityItem:focus-visible,
.activityItem.isActive{
outline:none;
border-color:var(--border-accent);
color:var(--primary);
}

.activityName{
font-size:0.9375rem;
line-height:1.35;
}

.activityMeta{
font-family:var(--font-mono);
font-size:0.72rem;
line-height:1.5;
color:var(--muted);
}

.activitySport{
color:var(--primary);
}

.detailLoading{
padding:14px;
border:1px solid var(--border);
background:var(--bg-deep);
color:var(--muted-strong);
font-family:var(--font-mono);
font-size:0.8125rem;
}

@media (max-width:760px){
.chartLayout,
.activityList,
.activityControls{
grid-template-columns:minmax(0, 1fr);
}

.chartControls,
.chartDisplayOptions{
grid-template-columns:minmax(0, 1fr);
}

.sectionHeader{
align-items:flex-start;
flex-direction:column;
}

.sectionMeta{
text-align:left;
}
}

@media (max-width:600px){
.athleteTopRow{
align-items:center;
flex-direction:row;
justify-content:space-between;
}

.athleteTopRow.isDisconnected{
justify-content:center;
}

.athleteStatus{
align-items:center;
flex-direction:row;
justify-content:flex-end;
}

.athleteStatus .btn,
.athleteStatus .btnDisconnect{
width:auto;
}

.spiderChart{
min-height:280px;
padding:10px;
}

.spiderChart svg{
max-width:min(100%, 340px);
}

.metricList{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

.strava-credit{
margin-top:20px;
padding-top:18px;
}
}