.monthyShell{
--max-tool-width:720px;
}

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

.monthyConnectionRow{
display:flex;
align-items:center;
justify-content:flex-end;
min-height:48px;
}

.monthControls{
display:flex;
align-items:flex-end;
gap:8px;
width:max-content;
max-width:100%;
margin-inline:auto;
}

.monthPicker{
display:flex;
min-width:180px;
font-family:var(--font-mono);
}

.monthPicker input{
height:42px;
padding:8px 12px;
font:inherit;
font-size:.9rem;
color:var(--text);
}

.monthNavBtn{
width:42px;
height:42px;
border:1px solid var(--border);
background:var(--button-bg);
color:var(--button-text);
font-size:1.1rem;
cursor:pointer;
}

.monthNavBtn:hover,
.monthNavBtn:focus-visible{
color:var(--primary);
border-color:var(--border-strong);
}

.monthNavBtn:disabled,
.monthPicker input:disabled{
opacity:.5;
cursor:wait;
}

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

.monthyConnectionActions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
max-width:100%;
}

.btnRefreshActivity{
width:40px;
min-width:40px;
height:40px;
padding:0;
border:none;
border-radius:var(--radius-pill);
background:var(--button-bg);
color:var(--button-text);
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:background .16s ease,color .16s ease,transform .08s ease,opacity .16s ease;
}

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

.btnRefreshActivity:active{transform:translateY(1px)}
.btnRefreshActivity:disabled{cursor:default;opacity:.6}

.btnRefreshActivity svg{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}

.btnRefreshActivity.isRefreshing svg{animation:monthyRefreshSpin .8s linear infinite}

@keyframes monthyRefreshSpin{
to{transform:rotate(360deg)}
}

.monthyConnection>.stravaInlineStatus{
margin:0;
}

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

.monthyConnectionRow:not(.isDisconnected) .monthyConnection{
align-items:flex-end;
}

.metricControls{
display:grid;
gap:8px;
}

.monthyVisualOptions{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
align-items:center;
gap:8px;
min-width:0;
}

.monthySettingSelect{
width:100%;
min-width:0;
min-height:36px;
padding:7px 10px;
border:1px solid var(--border);
background:var(--input-bg);
color:var(--text);
font-family:var(--font-mono);
font-size:.75rem;
}

.metricRemoveBtn{
background:var(--button-bg);
color:var(--button-text);
font-family:var(--font-mono);
cursor:pointer;
}

.metricAddBtn:hover:not(:disabled),
.metricAddBtn:focus-visible,
.metricRemoveBtn:hover:not(:disabled),
.metricRemoveBtn:focus-visible{
outline:none;
color:var(--primary);
}

.metricAddBtn:disabled,
.metricRemoveBtn:disabled{
opacity:.35;
cursor:not-allowed;
}

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

.metricSlot{
display:grid;
grid-template-columns:minmax(0,1fr) 36px;
align-items:stretch;
min-width:0;
}

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

.metricSlotControl{
display:grid;
grid-template-columns:auto minmax(0,1fr);
align-items:stretch;
min-width:0;
background:var(--input-bg);
}

.metricSlotNumber{
display:flex;
align-items:center;
justify-content:center;
min-width:38px;
border:1px solid var(--border);
border-right:none;
font-family:var(--font-mono);
font-size:.75rem;
line-height:1;
color:var(--muted-strong);
}

.metricSelect{
width:100%;
min-width:0;
min-height:36px;
padding:7px 10px;
border:1px solid var(--border);
background:var(--input-bg);
color:var(--text);
font-family:var(--font-mono);
font-size:.75rem;
}

.metricRemoveBtn{
display:flex;
align-items:center;
justify-content:center;
min-width:36px;
min-height:36px;
padding:0;
border:1px solid var(--border);
border-left:none;
font-size:1.1rem;
line-height:1;
}

.monthyPreview{
width:min(100%,720px);
margin:0 auto;
padding:18px;
background-color:#202020;
background-image:
linear-gradient(45deg,#292929 25%,transparent 25%),
linear-gradient(-45deg,#292929 25%,transparent 25%),
linear-gradient(45deg,transparent 75%,#292929 75%),
linear-gradient(-45deg,transparent 75%,#292929 75%);
background-position:0 0,0 12px,12px -12px,-12px 0;
background-size:24px 24px;
border:1px solid var(--border);
}

.monthyPreview canvas{
display:block;
width:100%;
height:auto;
}

.monthyPreview.isLoading,
.monthyPreview.isError{
display:grid;
place-items:center;
min-height:320px;
}

.monthyPreviewSpinner{
width:32px;
height:32px;
border:2px solid rgba(255,255,255,.22);
border-top-color:var(--primary);
border-radius:50%;
animation:monthySpin .8s linear infinite;
}

.monthyLoaderText{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}

.monthyPreviewMessage{
margin:0;
font-family:var(--font-mono);
font-size:.75rem;
line-height:1.5;
color:var(--muted-strong);
}

.monthyPreviewMessage.isError{
color:var(--danger);
}

@keyframes monthySpin{
to{transform:rotate(360deg)}
}

.monthyActions{
display:grid;
grid-template-columns:minmax(100px,1fr) minmax(74px,auto) minmax(132px,auto);
gap:8px;
width:100%;
}

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

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

.monthyActionBtn:active:not(:disabled){
transform:translateY(1px);
}

.monthyActionBtn:disabled{
opacity:.45;
cursor:not-allowed;
}

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

.strava-credit a{
color:var(--muted-strong);
}

@media (max-width:760px){
.metricSlotList{grid-template-columns:minmax(0,1fr)}
.monthyActions{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:600px){
.monthyPanel{padding:16px}
.monthControls{width:100%}
.monthPicker{flex:1;min-width:0}
.monthNavBtn{width:44px;height:44px;min-width:44px}
.monthPicker input[type="month"]{
height:44px;
min-height:44px;
max-height:44px;
padding:0 12px;
font-size:16px;
line-height:1.2;
-webkit-appearance:none;
appearance:none;
}
.monthPicker input[type="month"]::-webkit-date-and-time-value{
min-height:0;
padding:0;
text-align:left;
}
.monthyConnectionRow{justify-content:center}
.monthyConnection{width:100%;justify-content:center}
.monthyConnectionRow:not(.isDisconnected) .monthyConnection{align-items:flex-end}
.monthyVisualOptions{grid-template-columns:minmax(0,1fr)}
.metricSelect{height:44px}
.monthySettingSelect{height:44px}
.metricSlot{grid-template-columns:minmax(0,1fr) 40px}
.metricSlot.isSingle{grid-template-columns:minmax(0,1fr)}
.metricRemoveBtn{min-width:40px;min-height:40px}
.monthyPreview{padding:8px}
.monthyPreview.isLoading{min-height:220px}
.monthyPreview.isError{min-height:220px}
.monthyActionBtn{min-height:44px}
.strava-credit{margin-top:20px;padding-top:18px}
}