*{box-sizing:border-box}:root,[data-theme=pink]{--bg:#171719;--panel:#222226;--panel2:#2b2b30;--surface:#25252a;--text:#f8f5f7;--muted:#b8b2b7;--accent:#e7a6c5;--accent2:#f2c4d9;--line:#3b3b42;--chart-line:#e7a6c5}[data-theme=graphite]{--bg:#171719;--panel:#222226;--panel2:#2b2b30;--surface:#25252a;--text:#f8f5f7;--muted:#b8b2b7;--accent:#b9c0ca;--accent2:#d9dde3;--line:#3b3b42;--chart-line:#b9c0ca}[data-theme=glacier]{--bg:#171719;--panel:#222226;--panel2:#2b2b30;--surface:#25252a;--text:#f8f5f7;--muted:#b8b2b7;--accent:#83d9ee;--accent2:#bceefa;--line:#3b3b42;--chart-line:#83d9ee}[data-theme=nature]{--bg:#171719;--panel:#222226;--panel2:#2b2b30;--surface:#25252a;--text:#f8f5f7;--muted:#b8b2b7;--accent:#9fcea6;--accent2:#c8e6cd;--line:#3b3b42;--chart-line:#9fcea6}[data-theme=light]{--bg:#f3f3f5;--panel:#ffffff;--panel2:#f1f1f4;--surface:#f8f8fa;--text:#272428;--muted:#666a70;--accent:#5f646b;--accent2:#7a8088;--line:#d9dadd;--chart-line:#5f646b}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,sans-serif}main{max-width:1200px;margin:38px auto;padding:20px}header{display:flex;align-items:center;gap:16px}h1{font-size:40px;margin:0}h2{margin:0 0 5px}h3{margin-top:24px}header p,.muted-text,small{color:var(--muted)}.header-actions{margin-left:auto;display:flex;align-items:center;gap:12px}button,a{border:1px solid var(--accent);border-radius:10px;padding:10px 14px;font-weight:750;text-decoration:none;cursor:pointer;background:var(--accent);color:#171719}.logo-btn{font-size:22px;font-weight:950;font-style:italic;padding:11px 14px}[data-theme=light] button,[data-theme=light] a{color:white}nav{display:flex;gap:9px;flex-wrap:wrap;margin:25px 0}.secondary,.small{background:var(--panel2);color:var(--text)!important;border-color:var(--line)}select,input{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:9px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stats>div,.card{background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:20px}.stats b{font-size:30px;display:block}.period-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}.period-grid,.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:15px}.period-grid>div,.detail-grid>div,.insights>div{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:13px}.period-grid b,.detail-grid b,.insights b{display:block;font-size:1.25rem;color:var(--accent)}.period-head,.section-head,.chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.card{margin-top:14px}.chart-controls,.filters{display:flex;flex-wrap:wrap;gap:7px}.filters{margin:12px 0}.chart-controls button{padding:7px 9px;font-size:.78rem;background:var(--panel2);color:var(--muted);border-color:var(--line)}.chart-controls button.active{background:var(--accent);color:#171719;border-color:var(--accent)}.chart-wrap{position:relative;width:100%}#chart{display:block;width:100%;height:300px}.chart-tip{position:absolute;pointer-events:none;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:.82rem}.insights{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.table{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:11px;border-bottom:1px solid var(--line);white-space:nowrap}th{color:var(--muted)}.route-add,.route-assign{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.route-add{margin:14px 0}.route-add input{min-width:260px}.route-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.route-card{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:14px}.route-card b,.route-card span{display:block}.route-card span{color:var(--muted);margin-top:5px}.update-progress{height:9px;background:var(--panel2);border-radius:999px;overflow:hidden;margin-top:18px}#bar{height:100%;width:0;background:var(--accent);transition:.4s}.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;padding:20px;z-index:10}.modal[hidden]{display:none}.modal-card{position:relative;max-width:760px;width:100%;max-height:85vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px}.close{position:absolute;right:14px;top:14px;padding:6px 10px}.modal .detail-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:850px){.period-stats{grid-template-columns:1fr}.insights,.route-cards{grid-template-columns:1fr 1fr}.chart-head{display:block}.chart-controls{margin-top:10px}}@media(max-width:620px){main{margin:10px auto;padding:12px}header{align-items:flex-start;flex-wrap:wrap}.header-actions{margin-left:0;width:100%}.stats{grid-template-columns:1fr}.period-grid,.detail-grid,.modal .detail-grid,.insights,.route-cards{grid-template-columns:1fr 1fr}h1{font-size:32px}}
/* v0.6.1 navigation + destructive actions */
.topnav{display:flex;align-items:center;gap:8px;padding:7px;background:var(--panel);border:1px solid var(--line);border-radius:14px;margin:24px 0}
.topnav .nav-item{display:inline-flex;align-items:center;justify-content:center;height:40px;margin:0;padding:0 14px;border-radius:9px;font-family:inherit;font-size:14px;line-height:1;font-weight:700;letter-spacing:0;text-decoration:none;white-space:nowrap;background:transparent!important;color:var(--muted)!important;border:1px solid transparent!important}
.topnav .nav-item:hover{background:var(--panel2)!important;color:var(--text)!important}
.topnav .nav-item.active{background:var(--accent)!important;color:#171719!important;border-color:var(--accent)!important}
[data-theme="light"] .topnav .nav-item.active{color:#fff!important}
.row-actions{display:flex;align-items:center;gap:7px}
.row-actions .small{height:34px;padding:0 10px;font-family:inherit;font-size:12px;line-height:1}
.row-actions .danger{background:transparent!important;color:#e58b91!important;border-color:#8d454b!important}
.row-actions .danger:hover{background:#8d454b!important;color:#fff!important}
@media(max-width:620px){.topnav{overflow-x:auto;justify-content:flex-start}.topnav .nav-item{flex:0 0 auto}}

.import-card{max-width:850px}.import-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.import-grid label{display:flex;flex-direction:column;gap:7px}.import-grid label span{font-size:.82rem;font-weight:750;color:var(--muted)}.import-grid .wide{grid-column:1/-1}.import-result{margin:14px 0;min-height:24px}.info-box{display:flex;flex-direction:column;gap:5px;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:14px;margin-top:16px}.info-box span{color:var(--muted);font-size:.9rem}@media(max-width:620px){.import-grid{grid-template-columns:1fr}.import-grid .wide{grid-column:auto}}
.log-list{margin-top:16px}.log-row{display:grid;grid-template-columns:1.2fr 1.5fr auto;gap:15px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line)}.log-row b,.log-row small{display:block}.log-row span,.log-row time{color:var(--muted);font-size:.86rem}.log-row time{white-space:nowrap}@media(max-width:650px){.log-row{grid-template-columns:1fr}.log-row time{margin-top:-8px}}
.brand-subtitle{font-size:1rem;font-weight:700;display:flex;align-items:center;white-space:nowrap;margin-left:12px}
.analysis-controls{display:flex;justify-content:flex-end;margin:12px 0}.analysis-controls label{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.86rem}.chart-wrap{height:310px;margin:10px 0 20px}
@media(max-width:620px){.brand-subtitle{font-size:.86rem;margin-left:8px}.chart-wrap{height:260px}}

/* v0.9.1 responsive + dependency-free analysis chart */
.svg-chart{width:100%;min-height:285px}.svg-chart svg{display:block;width:100%;height:270px;overflow:visible}.svg-chart text{fill:var(--muted);font-size:12px}.svg-chart .grid{stroke:var(--line);stroke-width:1}.svg-chart .trendline{fill:none;stroke:var(--chart-line);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.svg-chart circle{fill:var(--chart-line);stroke:var(--panel);stroke-width:3}.chart-title{font-size:.82rem;color:var(--muted);font-weight:700;margin:0 0 5px}.chart-empty{min-height:220px;display:grid;place-items:center;color:var(--muted)}
@media(max-width:700px){
 body{overflow-x:hidden}.shell,.container,main{width:100%;max-width:100%;padding-left:12px!important;padding-right:12px!important;box-sizing:border-box}
 header{gap:10px;flex-wrap:wrap}.brand-subtitle{white-space:normal;font-size:.82rem;line-height:1.2}.topnav{overflow-x:auto;scrollbar-width:none;white-space:nowrap;-webkit-overflow-scrolling:touch}.topnav::-webkit-scrollbar{display:none}.nav-item{flex:0 0 auto}
 .card{padding:16px!important;border-radius:16px}.stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}.stat{min-width:0!important;padding:14px!important}.stat b{font-size:1.55rem!important}
 .analysis-controls{justify-content:stretch}.analysis-controls label{width:100%;justify-content:space-between}.analysis-controls select{max-width:58%;min-height:42px}
 .chart-wrap{height:auto!important;min-height:250px;margin-bottom:14px}.svg-chart{min-height:245px}.svg-chart svg{height:235px}
 .table{overflow-x:auto;-webkit-overflow-scrolling:touch}.table table{min-width:700px}
 input,select,button{font-size:16px!important}button,.nav-item{min-height:42px}
 .import-grid{grid-template-columns:1fr!important}.section-head{align-items:flex-start;gap:10px;flex-wrap:wrap}
}
@media(max-width:420px){.stats{grid-template-columns:1fr!important}.brand-subtitle{max-width:210px}.svg-chart svg{height:220px}}

/* v0.9.2 UI finish */
.bottomnav{max-width:100%;margin:24px 0 8px;padding:8px 10px;display:flex;justify-content:center;gap:8px;align-items:center;border:1px solid var(--line);border-radius:15px;background:var(--panel);box-sizing:border-box}
.bottomnav .nav-item{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
#analysis .card{padding-left:18px!important;padding-right:18px!important}
#analysis .chart-wrap{width:calc(100% + 8px);margin-left:-4px;margin-right:-4px}
#analysis .svg-chart svg{width:100%}
@media(min-width:900px){
 #analysis .chart-wrap{width:calc(100% + 20px);margin-left:-10px;margin-right:-10px}
}
@media(max-width:700px){
 .bottomnav{justify-content:flex-start;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:12px;margin-right:12px}
 .bottomnav::-webkit-scrollbar{display:none}.bottomnav .nav-item{flex:0 0 auto}
 #analysis .card{padding-left:12px!important;padding-right:12px!important}
 #analysis .chart-wrap{width:100%;margin-left:0;margin-right:0}
}

/* v0.10 */
.bottomnav{justify-content:flex-start!important;margin-left:0;margin-right:0;padding:7px 10px!important}
.bottomnav .nav-item{font-size:14px!important;font-weight:700!important;min-height:40px!important;padding:0 16px!important;border-radius:10px!important;background:transparent!important;color:var(--muted)!important;border:0!important}
.bottomnav .nav-item:hover,.bottomnav .nav-item.active{background:var(--accent)!important;color:var(--accentText,#202024)!important}
.compare-block{border-top:1px solid var(--line);margin-top:28px;padding-top:24px}.compare-route{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:.86rem}.compare-route select{min-width:180px}
@media(max-width:700px){.bottomnav{margin-left:12px!important;margin-right:12px!important}.compare-route{width:100%;justify-content:space-between}.compare-route select{max-width:60%}}

/* v0.10.1 */
.bottomnav-wrap{width:100%;max-width:1180px;margin:24px auto 8px;padding:0 24px;box-sizing:border-box}
.bottomnav-wrap .bottomnav{width:100%;margin:0!important;box-sizing:border-box}
.include-toggle{display:flex;align-items:center;gap:9px;cursor:pointer}.include-toggle input{width:17px;height:17px;accent-color:var(--accent)}
.comparison-excluded{opacity:.42}.comparison-excluded td{text-decoration:none}
@media(max-width:700px){.bottomnav-wrap{padding:0 12px;margin-top:18px}.bottomnav-wrap .bottomnav{margin:0!important}}
.app-footer{max-width:1180px;margin:10px auto 22px;padding:0 24px;text-align:center;color:var(--muted);font-size:.76rem;opacity:.78;box-sizing:border-box}@media(max-width:700px){.app-footer{padding:0 16px;margin-bottom:18px;font-size:.72rem;line-height:1.45}}
/* v0.11.1 */
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}
.pager button{min-height:38px;padding:0 14px}.pager span{color:var(--muted);font-size:.9rem}
.log-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.log-row span{color:var(--muted);white-space:nowrap}
@media(max-width:600px){.log-row{flex-direction:column;gap:4px}.log-row span{white-space:normal}}

/* v0.11.2 */
.brand-stack{display:flex;flex-direction:column;justify-content:center}.current-date{margin-top:2px;color:var(--muted);font-size:.72rem;font-weight:500;opacity:.68;line-height:1.1}#effRoute{min-width:190px}@media(max-width:700px){.current-date{font-size:.68rem}#effRoute{min-width:0;width:100%;margin-top:8px}}

/* v0.12 */
.header-actions{display:flex;flex-direction:column;align-items:flex-end}.current-date{text-align:right;margin-top:4px;color:var(--muted);font-size:.72rem;opacity:.68}#baseRoute{min-width:190px}@media(max-width:700px){#baseRoute{min-width:0;width:100%;margin-top:8px}}

/* v0.13 */
.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.export-box{border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--panel2)}.button-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:10px;background:var(--accent);color:var(--accentText,#202024);font-weight:700;text-decoration:none;margin-top:12px}.raw-link{display:block;margin-top:12px;color:var(--muted)}@media(max-width:700px){.export-grid{grid-template-columns:1fr}}

/* v0.13.4 */
.bottomnav-wrap{
  width:100%;
  max-width:1200px;
  margin:24px auto 8px;
  padding:0;
  box-sizing:border-box;
}
.bottomnav-wrap .bottomnav{
  width:100%;
  margin:0!important;
}
@media(max-width:1240px){
  .bottomnav-wrap{
    width:auto;
    margin-left:20px;
    margin-right:20px;
  }
}
@media(max-width:700px){
  .bottomnav-wrap{
    margin-left:12px;
    margin-right:12px;
    padding:0;
  }
}

/* v0.13.5 - spacing & bottom navigation alignment */

/* Dashboard: exactly the same vertical gap between all main boxes */
#dash{
  display:flex;
  flex-direction:column;
  gap:14px;
}

#dash > .stats,
#dash > .period-stats,
#dash > .card{
  margin-top:0!important;
  margin-bottom:0!important;
}

/* The two week/month boxes keep the same 14px internal gap */
#dash > .period-stats{
  gap:14px;
}

/*
  main uses max-width:1200px plus 20px left/right padding.
  The bottom navigation lives outside <main>, so mirror the exact
  1240px outer box and the same 20px inner padding.
*/
.bottomnav-wrap{
  width:100%;
  max-width:1240px;
  margin:24px auto 8px;
  padding:0 20px;
  box-sizing:border-box;
}

.bottomnav-wrap .bottomnav{
  width:100%;
  margin:0!important;
  box-sizing:border-box;
}

@media(max-width:1240px){
  .bottomnav-wrap{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    padding-left:20px;
    padding-right:20px;
  }
}

@media(max-width:700px){
  #dash{
    gap:12px;
  }

  #dash > .period-stats{
    gap:12px;
  }

  .bottomnav-wrap{
    padding-left:12px;
    padding-right:12px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* v0.13.6 - definitive layout cleanup */

/* One spacing value for every dashboard block. */
#dash{
  display:grid;
  grid-template-columns:1fr;
  gap:14px!important;
}
#dash > *{
  margin-top:0!important;
  margin-bottom:0!important;
}
#dash > .period-stats{
  margin:0!important;
  gap:14px!important;
}
#dash > .period-stats > .card{
  margin:0!important;
}

/* Navigation now lives inside main. No independent max-width or side padding. */
.bottomnav-wrap{
  width:100%!important;
  max-width:none!important;
  margin:24px 0 8px!important;
  padding:0!important;
  box-sizing:border-box!important;
}
.bottomnav-wrap .bottomnav{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  box-sizing:border-box!important;
}
.app-footer{
  max-width:none!important;
  width:100%!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
}

/* Analysis SVG occupies the full available chart width. */
#analysis .chart-wrap{
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
#analysis .svg-chart{
  width:100%!important;
}
#analysis .svg-chart svg{
  width:100%!important;
  max-width:none!important;
}

@media(max-width:700px){
  #dash{gap:12px!important}
  #dash > .period-stats{gap:12px!important}
  .bottomnav-wrap{margin-top:18px!important}
}

/* v0.13.8 - page visibility fix
   #dash used display:grid!important, which overruled the browser's hidden state.
   hidden must always win, regardless of a page's own layout rule. */
[hidden]{
  display:none!important;
}

/* v0.13.10 - dashboard visibility */
#dash[hidden]{
  display:none!important;
}

/* v0.13.11 - route management */
.route-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.route-card-head>b{
  min-width:0;
  overflow-wrap:anywhere;
}
.route-card-actions{
  display:flex;
  gap:7px;
  flex:0 0 auto;
}
.route-card-actions .small{
  min-height:34px!important;
  padding:0 10px!important;
  font-size:.78rem!important;
}
@media(max-width:620px){
  .route-card-head{
    flex-direction:column;
  }
  .route-card-actions{
    width:100%;
  }
}

/* v0.13.14 - pagination */
.pager-pages{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}
.pager-pages .active-page{
  background:var(--accent)!important;
  color:var(--accentText,#202024)!important;
  border-color:var(--accent)!important;
}
.pager-pages button:disabled{
  opacity:.35;
  cursor:default;
}
.pager-pages span{
  color:var(--muted);
  font-size:.82rem;
  margin-left:4px;
}
@media(max-width:700px){
  .pager-pages{justify-content:center}
}

/* v0.15.0 - progress analysis */
.progress-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:14px 0;
}
.progress-card{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:15px;
}
.progress-card>small{
  display:block;
  margin-bottom:6px;
}
.progress-card>b{
  display:block;
  font-size:1.35rem;
  margin-bottom:10px;
}
.progress-card>div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line);
  padding-top:7px;
  margin-top:7px;
  font-size:.82rem;
}
.progress-card>div span{color:var(--muted)}
@media(max-width:800px){.progress-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.progress-grid{grid-template-columns:1fr}}

/* v0.15.1 - export period selectors */
.export-period{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:14px 0;
}
.export-period span{
  color:var(--muted);
  font-size:.82rem;
  font-weight:750;
}
.export-period select{width:100%}

/* v0.15.2 - branding */
.logo-btn{letter-spacing:.02em}

/* v0.16.0 - heart analysis */
.heart-controls{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.heart-controls select{min-width:150px}
@media(max-width:620px){
  .heart-controls{width:100%}
  .heart-controls select{flex:1 1 100%}
}

/* v0.16.1 - primary navigation grouping */
.topnav{
  justify-content:space-between;
}
.topnav-left,
.topnav-right{
  display:flex;
  align-items:center;
  gap:8px;
}
.topnav-right{
  margin-left:auto;
}
@media(max-width:700px){
  .topnav{
    justify-content:flex-start!important;
  }
  .topnav-left,
  .topnav-right{
    display:flex;
    flex:0 0 auto;
  }
  .topnav-right{
    margin-left:12px;
    padding-left:12px;
    border-left:1px solid var(--line);
  }
}

/* v0.17.0 - heart progress */
.heart-progress-block{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.heart-progress-block h3{
  margin:0;
  font-size:1rem;
}

/* v0.17.2 - weekly HR comparison */
.period-hr-compare{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:baseline;
  gap:8px 12px;
}
.period-hr-compare small{
  grid-column:1/-1;
  color:var(--muted);
}
.period-hr-compare b{font-size:1.2rem}
.period-hr-compare span{
  color:var(--muted);
  font-size:.82rem;
}
@media(max-width:620px){
  .period-hr-compare{grid-template-columns:auto 1fr}
}

/* v0.17.4 - analysis period filters */
.analysis-period{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:.86rem;
}
.analysis-period select{min-width:130px}
@media(max-width:700px){
  .analysis-period{width:100%;justify-content:space-between}
  .analysis-period select{min-width:0;max-width:60%}
}

/* v0.18.0 - settings */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.settings-group{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:16px}
.settings-group h3{margin:0 0 14px;font-size:1rem}
.settings-group label{display:flex;flex-direction:column;gap:6px;margin-top:11px}
.settings-group label>span{font-size:.8rem;font-weight:750;color:var(--muted)}
.input-unit{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}
.input-unit b{color:var(--muted);font-size:.82rem}
.settings-actions{display:flex;justify-content:flex-end;margin-top:16px}
.settings-danger{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:20px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.settings-danger div{display:flex;flex-direction:column;gap:5px}.settings-danger span{color:var(--muted);font-size:.86rem;max-width:700px}
@media(max-width:760px){.settings-grid{grid-template-columns:1fr}.settings-danger{align-items:stretch;flex-direction:column}.settings-danger button{width:100%}}

/* v0.18.1 - archived original CSV action */
.row-actions .button-link.small{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-height:0;
  margin:0;
  padding:7px 10px;
  font-size:.78rem;
  line-height:1;
}

/* v0.18.3 - multi CSV import */
.batch-import-results{display:grid;gap:7px;margin-top:12px}
.batch-import-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel2);
}
.batch-import-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.batch-import-row small{color:var(--muted)}
@media(max-width:650px){
  .batch-import-row{grid-template-columns:auto 1fr}
  .batch-import-row small{grid-column:2}
}

/* v0.18.5 - settings polish */
.settings-card{padding:0;overflow:hidden}
.settings-hero{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 24px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
}
.settings-hero h2{margin:0 0 5px;font-size:1.25rem}
.settings-hero p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.45}
.settings-version{
  flex:0 0 auto;padding:7px 10px;border:1px solid var(--line);border-radius:999px;
  color:var(--muted);font-size:.75rem;background:var(--panel);
}
.settings-card>.import-result{margin:16px 24px 0}
.settings-card .settings-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  padding:18px 24px;margin:0;
}
.settings-card .settings-group{
  min-width:0;padding:17px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);
}
.settings-group-head{display:flex;flex-direction:column;gap:3px;margin-bottom:13px}
.settings-group-head>b{font-size:.98rem}
.settings-group-head small{color:var(--muted);font-size:.78rem}
.settings-card .settings-group label{display:flex;flex-direction:column;gap:6px;margin:10px 0 0}
.settings-card .settings-group label>span{font-size:.76rem;font-weight:700;color:var(--muted)}
.settings-card .settings-group input,
.settings-card .settings-group select{width:100%;min-width:0}
.settings-two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.settings-card .input-unit{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
.settings-savebar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:0 24px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);
}
.settings-savebar span{max-width:760px;color:var(--muted);font-size:.8rem;line-height:1.4}
.settings-savebar button{flex:0 0 auto}
.maintenance{padding:22px 24px 24px}
.maintenance-head{margin-bottom:12px}
.maintenance-head h3{margin:0 0 3px;font-size:1rem}
.maintenance-head small{color:var(--muted)}
.maintenance-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.maintenance-card{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-width:0;padding:15px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);
}
.maintenance-card>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.maintenance-card span{color:var(--muted);font-size:.79rem;line-height:1.4}
.maintenance-card button{flex:0 0 auto;white-space:nowrap}
.maintenance-danger{border-color:color-mix(in srgb,var(--line) 65%,#a65 35%)}
@media(max-width:850px){
  .settings-card .settings-grid,.maintenance-grid{grid-template-columns:1fr}
  .settings-two{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .settings-hero{flex-direction:column;padding:18px}
  .settings-card>.import-result{margin:14px 18px 0}
  .settings-card .settings-grid{padding:14px 18px}
  .settings-two{grid-template-columns:1fr}
  .settings-savebar{margin:0 18px;align-items:stretch;flex-direction:column}
  .settings-savebar button{width:100%}
  .maintenance{padding:18px}
  .maintenance-card{align-items:stretch;flex-direction:column}
  .maintenance-card button{width:100%}
}

/* v0.18.6 - consistent settings buttons */
.settings-savebar button,
.maintenance-card button{
  min-height:52px;
  border-radius:14px;
  padding:0 22px;
  font-size:.9rem;
  font-weight:800;
  line-height:1;
}
.maintenance-card button{
  width:260px;
  max-width:100%;
}
.settings-savebar button{
  min-width:260px;
}
@media(max-width:620px){
  .settings-savebar button,
  .maintenance-card button{
    width:100%;
    min-width:0;
  }
}

/* v0.18.7 - import layout full width */
#import > .import-card,
#import .import-card{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
}
#import .import-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
#import .import-grid .wide{
  grid-column:1 / -1;
}
@media(max-width:800px){
  #import .import-grid{grid-template-columns:1fr}
  #import .import-grid .wide{grid-column:auto}
}

/* v0.18.8 - settings/export alignment polish */

/* Maintenance actions use the same primary visual language. */
.maintenance-card button{
  width:260px;
  max-width:100%;
  min-height:52px;
  border-radius:14px;
  padding:0 22px;
  font-size:.9rem;
  font-weight:800;
}

/* Export cards: keep controls aligned and pin actions to a common baseline. */
#export .export-grid{
  align-items:stretch;
}
#export .export-box{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
#export .export-box > p{
  min-height:3.2em;
}
#export .export-period{
  margin-top:0;
}
#export .raw-link{
  min-height:38px;
  display:flex;
  align-items:center;
}
#export .button-link{
  margin-top:auto;
  align-self:flex-start;
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  border-radius:14px;
  font-weight:800;
}

@media(max-width:620px){
  .maintenance-card button,
  #export .button-link{
    width:100%;
  }
  #export .export-box > p{
    min-height:0;
  }
}

/* v0.19.0 - unified action buttons
   Reference: "Trainings importieren" on the Import page.
   Navigation tabs, logo and chart metric tabs intentionally keep their navigation role. */
main section button:not(.nav-item):not(.metric):not(.close),
main section a.button-link,
main section .row-actions button,
main section .row-actions a.button-link,
main section .pager button,
.bottomnav-wrap + * button {
  box-sizing:border-box;
  width:auto;
  min-width:0;
  min-height:44px;
  height:44px;
  padding:10px 14px;
  border:1px solid var(--accent)!important;
  border-radius:10px!important;
  background:var(--accent)!important;
  color:#171719!important;
  font-family:inherit!important;
  font-size:16px!important;
  font-weight:750!important;
  font-style:normal!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-decoration:none!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  cursor:pointer;
}

/* Remove old semantic/size variants from action buttons so they really match. */
main section button.small,
main section button.secondary,
main section button.danger,
main section a.button-link.small,
main section .maintenance-card button,
main section .settings-savebar button,
main section .route-save,
main section .row-actions .small,
main section .row-actions .danger {
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  min-height:44px!important;
  height:44px!important;
  padding:10px 14px!important;
  border:1px solid var(--accent)!important;
  border-radius:10px!important;
  background:var(--accent)!important;
  color:#171719!important;
  font-size:16px!important;
  font-weight:750!important;
}

/* Disabled stays visibly disabled without changing the component geometry. */
main section button:disabled,
main section a.button-link[aria-disabled="true"] {
  opacity:.45;
  cursor:not-allowed;
}

/* Light theme keeps readable text, consistent with the existing app behavior. */
[data-theme="light"] main section button:not(.nav-item):not(.metric):not(.close),
[data-theme="light"] main section a.button-link {
  color:#fff!important;
}

/* Keep table action groups tidy despite the larger unified controls. */
.row-actions {
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* Settings action rows no longer impose their old 260px button width. */
.maintenance-card button,
.settings-savebar button {
  width:auto!important;
  min-width:0!important;
}

/* Export actions retain aligned baselines while using the exact shared button geometry. */
#export .button-link {
  min-height:44px!important;
  height:44px!important;
  padding:10px 14px!important;
  border-radius:10px!important;
  font-size:16px!important;
  font-weight:750!important;
}

/* Mobile: don't force full-width buttons; keep the same component as desktop. */
@media(max-width:620px){
  main section button:not(.nav-item):not(.metric):not(.close),
  main section a.button-link,
  .maintenance-card button,
  .settings-savebar button,
  #export .button-link {
    width:auto!important;
  }
}

/* v0.19.1 - compact table action buttons
   Match the proportions of the metric tabs instead of the large primary CTA buttons. */
main section .row-actions button,
main section .row-actions a.button-link,
main section .row-actions .small,
main section .row-actions .danger,
main section .row-actions .button-link.small{
  min-height:34px!important;
  height:34px!important;
  padding:7px 10px!important;
  border-radius:9px!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1!important;
}

.row-actions{
  gap:7px!important;
  flex-wrap:nowrap;
}

/* Keep action groups usable on narrow screens. */
@media(max-width:700px){
  .row-actions{
    flex-wrap:wrap;
  }
}

/* v0.19.2 - compact route controls + settings backup */
#routes .route-card-actions button,
#routes .route-save,
#routes .route-add button{
  min-height:34px!important;
  height:34px!important;
  padding:7px 10px!important;
  border-radius:9px!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1!important;
}
#routes .route-card-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
#routes .route-assign{gap:7px}

/* Backup in Settings uses the same compact maintenance action geometry. */
#settings .maintenance-card .button-link{
  min-height:44px!important;
  height:44px!important;
  padding:10px 14px!important;
  border-radius:10px!important;
  font-size:16px!important;
  font-weight:750!important;
  margin-top:0!important;
  align-self:auto!important;
}

/* v0.19.3 - CSV archive maintenance */
#settings .maintenance-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(max-width:850px){
  #settings .maintenance-grid{grid-template-columns:1fr}
}

/* v0.19.5 - maintenance alignment + updater agent health */
#settings .maintenance-card > button,
#settings .maintenance-card > a.button-link{
  box-sizing:border-box;
  width:220px!important;
  min-width:220px!important;
  max-width:220px!important;
  flex:0 0 220px!important;
  height:44px!important;
  min-height:44px!important;
  padding:10px 14px!important;
  border-radius:10px!important;
  font-size:16px!important;
  font-weight:750!important;
  margin-top:0!important;
  align-self:center!important;
}
.agent-state{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:16px 0 10px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel2);
}
.agent-state span{color:var(--muted);font-size:.84rem}
.agent-state.ok{border-color:color-mix(in srgb,var(--line) 55%,#72b88a 45%)}
.agent-state.bad{border-color:color-mix(in srgb,var(--line) 45%,#c96f78 55%)}
.agent-help{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0 0 14px;
  padding:14px 15px;
  border:1px solid color-mix(in srgb,var(--line) 45%,#c96f78 55%);
  border-radius:12px;
  background:var(--panel2);
}
.agent-help span{color:var(--muted);font-size:.86rem}
.agent-help code{
  display:block;
  overflow-x:auto;
  white-space:nowrap;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--bg);
  color:var(--text);
  font-size:.78rem;
}
#updateInstallBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
@media(max-width:620px){
  #settings .maintenance-card > button,
  #settings .maintenance-card > a.button-link{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    flex:0 0 auto!important;
  }
  .agent-state{align-items:flex-start;flex-direction:column}
}

/* v1.0.1 - Info page */
.bottomnav .info-nav-item{margin-left:auto}
.info-page{display:flex;flex-direction:column;gap:16px}
.info-intro{
  display:flex;flex-direction:column;gap:5px;
  padding:15px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)
}
.info-intro span{color:var(--muted);line-height:1.5}
.info-metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.info-metric{
  margin:0;padding:15px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)
}
.info-metric h3{margin:0 0 7px;font-size:1rem;color:var(--accent)}
.info-metric p{margin:0 0 8px;line-height:1.48}
.info-metric small{display:block;line-height:1.45}
.info-guide{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.info-guide h3{margin:0 0 12px;font-size:1rem}
.info-guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.info-guide-grid>div{padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.info-guide-grid b,.info-guide-grid span{display:block}
.info-guide-grid span{margin-top:5px;color:var(--muted);font-size:.82rem;line-height:1.4}
.info-medical{margin-top:0}
@media(max-width:850px){
 .info-guide-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
 .bottomnav .info-nav-item{margin-left:0}
 .info-metric-grid,.info-guide-grid{grid-template-columns:1fr}
}

/* v1.1.0 - Multi-user / auth */
.user-chip{display:flex;align-items:center;gap:8px;padding:5px 7px 5px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.user-chip b{font-size:.82rem}.user-chip span{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.user-chip button{min-height:30px!important;height:30px!important;padding:5px 9px!important;font-size:.72rem!important;border-radius:8px!important}
.user-management{border-top:1px solid var(--line);margin-top:6px}
.user-management-head{display:flex;align-items:center;justify-content:space-between}
.user-create{display:grid;grid-template-columns:minmax(140px,1fr) minmax(180px,1.3fr) 120px auto;gap:10px;margin:12px 0}
.user-create input,.user-create select{width:100%;min-width:0}
.user-create button{white-space:nowrap}
.user-table{margin-top:12px}
.user-actions{display:flex;gap:6px;flex-wrap:wrap}
.user-actions button{width:auto!important;min-width:0!important;max-width:none!important;flex:0 0 auto!important;height:34px!important;min-height:34px!important;padding:7px 10px!important;font-size:12px!important}
.user-actions button:disabled{opacity:.4;cursor:not-allowed}

.login-body{min-height:100vh;display:grid;place-items:center;background:var(--bg);padding:24px}
.login-shell{width:min(430px,100%);margin:0}
.login-card{padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:0 18px 55px rgba(0,0,0,.12)}
.login-brand{display:inline-flex;padding:7px 10px;border-radius:10px;background:var(--accent);color:var(--accent-text,#fff);font-weight:900;letter-spacing:.08em;font-size:.78rem}
.login-card h1{margin:18px 0 5px;font-size:1.65rem}
.login-card>p{margin:0 0 20px;color:var(--muted);line-height:1.45}
.login-card form{display:flex;flex-direction:column;gap:13px}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:.78rem;font-weight:750;color:var(--muted)}
.login-card input{width:100%}
.login-card form button{margin-top:4px;min-height:46px;font-size:1rem;font-weight:800}
.login-error,.login-hint{margin:0 0 15px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);font-size:.82rem;line-height:1.45}
.login-error{border-color:color-mix(in srgb,var(--line) 40%,#c96f78 60%)}
.login-hint code{display:block;margin-top:5px;overflow-wrap:anywhere}
@media(max-width:850px){
 .user-create{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
 .header-actions{flex-wrap:wrap;justify-content:flex-end}
 .user-chip{order:3;width:100%;justify-content:flex-end}
 .user-create{grid-template-columns:1fr}
}

/* v1.1.1 - user chip polish */
.user-chip .welcome-label{
  font-size:.78rem;
  color:var(--muted);
  text-transform:none;
  letter-spacing:0;
}
.user-chip>b{
  font-size:.84rem;
}

/* v1.3.0 - personal profile */
.user-chip .user-name-link{
  appearance:none;border:0!important;background:transparent!important;padding:0!important;
  min-height:0!important;height:auto!important;font:inherit;font-weight:800;color:var(--text);cursor:pointer
}
.user-chip .user-name-link:hover{text-decoration:underline}
.profile-page{width:100%;max-width:none}
.profile-head{align-items:center}
.profile-name-card{
  display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel2)
}
.profile-name-card small{color:var(--muted)}
.profile-name-card b{font-size:.95rem}
.profile-overview-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.62fr);gap:18px;align-items:stretch
}
.profile-body-card{min-height:100%}
.profile-bmi-card{
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  min-height:100%;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)
}
.profile-bmi-card>small{color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.profile-bmi-card>b{font-size:4rem;line-height:1;margin:12px 0 6px}
.profile-bmi-card>strong{font-size:.96rem;margin-bottom:7px}
.profile-bmi-card>span{font-size:.9rem;color:var(--muted)}
.profile-bmi-card>p{max-width:520px;margin:18px 0 0;color:var(--muted);font-size:.82rem;line-height:1.5}
.profile-section-card{
  margin-top:18px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)
}
.weight-entry-row{
  display:grid;grid-template-columns:220px minmax(220px,320px) auto;gap:12px;align-items:end;margin-bottom:8px
}
.weight-entry-row label,.password-grid label{display:flex;flex-direction:column;gap:6px}
.weight-entry-row label>span,.password-grid label>span{font-size:.78rem;font-weight:700;color:var(--muted)}
.weight-chart-wrap{
  position:relative;height:300px;margin:18px 0 14px;padding:8px;border:1px solid var(--line);
  border-radius:14px;background:var(--panel)
}
#weightChart{width:100%;height:100%;overflow:visible}
.wc-grid{stroke:var(--line);stroke-width:1}
.wc-label{fill:var(--muted);font-size:13px}
.wc-line{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.wc-dot{fill:var(--accent);stroke:var(--panel);stroke-width:3}
.weight-chart-empty{
  position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:.9rem
}
.weight-chart-empty[hidden]{display:none}
.password-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:end
}
.weight-history-table{margin-top:8px}
@media(max-width:980px){
 .profile-overview-grid{grid-template-columns:1fr}
 .weight-entry-row{grid-template-columns:1fr 1fr}
 .weight-entry-row button{grid-column:1/-1}
 .password-grid{grid-template-columns:1fr 1fr}
 .password-grid button{grid-column:1/-1}
}
@media(max-width:620px){
 .profile-head{align-items:flex-start}
 .profile-name-card{width:100%;justify-content:space-between}
 .weight-entry-row,.password-grid{grid-template-columns:1fr}
 .weight-entry-row button,.password-grid button{grid-column:auto}
 .profile-bmi-card>b{font-size:3.4rem}
 .weight-chart-wrap{height:240px}
}

/* v1.3.1 - Körperdaten polish */
.profile-body-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:22px;
}
.profile-body-intro{
  max-width:760px;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.5;
}
.profile-height-label{
  margin-top:2px;
}
.profile-save-row{
  margin-top:4px;
}
.profile-save-row button{
  min-width:180px;
}
.profile-info-box{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:4px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  color:var(--muted);
  font-size:.83rem;
  line-height:1.45;
}
.profile-info-box b{
  color:var(--text);
  flex:0 0 auto;
}
@media(max-width:620px){
  .profile-save-row button{
    width:100%;
  }
}

/* v1.4.0 - Multi-sport Cardio */
.sport-badge{
  display:inline-flex;align-items:center;padding:5px 8px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel2);font-size:.72rem;font-weight:800;white-space:nowrap
}
.cardio-summary-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:14px 0 18px
}
.cardio-sport-card{
  padding:17px;border:1px solid var(--line);border-radius:15px;background:var(--panel2)
}
.cardio-sport-card>div:first-child{display:flex;justify-content:space-between;gap:12px;align-items:center}
.cardio-sport-card>div:first-child>b{font-size:1rem}
.cardio-sport-card>div:first-child>small{color:var(--muted)}
.cardio-sport-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.cardio-sport-stats span{display:flex;flex-direction:column;gap:2px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.cardio-sport-stats span b{font-size:.94rem}
.cardio-sport-stats span small{font-size:.7rem;color:var(--muted)}
@media(max-width:900px){
  .cardio-summary-grid{grid-template-columns:1fr}
}

/* v1.4.0 - Multi-Sport Cardio */
.sport-badge{
  display:inline-flex;align-items:center;padding:5px 8px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel2);font-size:.72rem;font-weight:800;white-space:nowrap
}
.cardio-summary-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:14px 0 18px
}
.cardio-sport-card{
  padding:17px;border:1px solid var(--line);border-radius:15px;background:var(--panel2)
}
.cardio-sport-card>div:first-child{display:flex;justify-content:space-between;gap:12px;align-items:center}
.cardio-sport-card>div:first-child>b{font-size:1rem}
.cardio-sport-card>div:first-child>small{color:var(--muted)}
.cardio-sport-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.cardio-sport-stats span{
  display:flex;flex-direction:column;gap:2px;padding:10px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel)
}
.cardio-sport-stats span b{font-size:.94rem}
.cardio-sport-stats span small{font-size:.7rem;color:var(--muted)}
@media(max-width:900px){
  .cardio-summary-grid{grid-template-columns:1fr}
}

/* v1.5.0 - Routinen + Fahrrad/Ergo */
.routine-add{
  display:grid;
  grid-template-columns:minmax(220px,1fr) 220px auto;
  gap:10px;
  align-items:end;
}
.route-card-head>div:first-child{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
.bike-summary-grid{
  grid-template-columns:minmax(0,1fr);
}
.bike-summary-grid .cardio-sport-card{
  max-width:none;
}
@media(max-width:760px){
  .routine-add{grid-template-columns:1fr}
}

/* v1.6.0 - unified visual system */
body{background:var(--bg)}
main{max-width:1240px}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
}
section[id]:not(#dash){scroll-margin-top:20px}
.section-head,.chart-head,.period-head{
  align-items:center;
}
.section-head h2,.section-head h3,.chart-head h2,.period-head h2{
  margin:0;
}
.section-head small,.chart-head small,.period-head small{
  display:block;
  margin-top:4px;
}
.compare-block,
.profile-section-card,
.settings-group,
.export-box,
.info-metric,
.route-card,
.cardio-sport-card{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:15px;
}
.compare-block{
  margin-top:16px;
  padding:18px;
}
.settings-group,.export-box,.profile-section-card{
  padding:18px;
}
.import-card{max-width:none}
.info-box{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:13px;
  padding:14px 16px;
}
.stats>div{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 8px 28px rgba(0,0,0,.06);
}
.stats b,.period-grid b,.detail-grid b,.insights b{
  color:var(--accent);
}
.period-grid>div,.detail-grid>div,.insights>div{
  background:var(--panel2);
}
.chart-wrap{
  margin-top:10px;
  border-radius:13px;
}
table thead th{
  background:var(--panel);
}
table tbody tr:hover td{
  background:color-mix(in srgb,var(--accent) 5%,transparent);
}
input,select{
  background:var(--surface);
  border-color:var(--line);
}
button,a.button-link{
  box-shadow:none;
}
button:not(.nav-item):not(.secondary):not(.small):hover,
a.button-link:hover{
  filter:brightness(1.06);
}
.topnav{
  background:var(--panel);
  box-shadow:0 8px 28px rgba(0,0,0,.06);
}
.topnav .nav-item.active{
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 22%,transparent);
}
.route-cards{margin-top:16px}
.route-card{padding:16px}
.export-grid{gap:14px}
.profile-overview-grid{gap:14px}
.cardio-summary-grid{gap:14px}
.info-page .info-intro{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:15px;
}
.log-row:last-child{border-bottom:0}
[data-theme=light] .card,
[data-theme=light] .stats>div,
[data-theme=light] .topnav{
  box-shadow:0 7px 24px rgba(20,20,30,.06);
}
@media(max-width:620px){
  .card{padding:16px}
  .compare-block,.settings-group,.export-box,.profile-section-card{padding:14px}
}

/* v1.6.1 - Light theme neutral gray accents */
[data-theme=light] button,
[data-theme=light] a{
  color:#fff;
}
[data-theme=light] .secondary,
[data-theme=light] .small,
[data-theme=light] .topnav .nav-item,
[data-theme=light] .user-name-link{
  color:var(--text)!important;
}
[data-theme=light] .topnav .nav-item.active,
[data-theme=light] .metric.active{
  color:#fff!important;
}
[data-theme=light] input,
[data-theme=light] select{
  color:var(--text);
  background:var(--surface);
}
[data-theme=light] th,
[data-theme=light] small,
[data-theme=light] .muted-text{
  color:var(--muted);
}
[data-theme=light] .stats b,
[data-theme=light] .period-grid b,
[data-theme=light] .detail-grid b,
[data-theme=light] .insights b,
[data-theme=light] .cardio-sport-stats b,
[data-theme=light] .profile-bmi-card>b{
  color:#4f545b;
}

/* v1.7.6 - improved settings navigation toggles */
.settings-toggle-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  margin-top:12px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
}
.settings-toggle-copy{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.settings-toggle-title{
  font-size:1rem;
  font-weight:800;
  color:var(--text);
}
.settings-toggle-desc{
  display:block;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.45;
  font-weight:600;
}
.switch-control{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.settings-toggle-row input[type="checkbox"]{
  appearance:none;
  width:40px;
  height:22px;
  flex:0 0 40px;
  padding:0;
  margin:0;
  border-radius:999px;
  background:var(--surface-2, var(--panel2));
  border:1px solid var(--line);
  position:relative;
  cursor:pointer;
  transition:.18s ease;
  box-shadow:none;
}
.settings-toggle-row input[type="checkbox"]::after{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  top:2px;
  left:2px;
  border-radius:50%;
  background:var(--muted);
  transition:.18s ease;
}
.settings-toggle-row input[type="checkbox"]:checked{
  background:var(--accent);
  border-color:var(--accent);
}
.settings-toggle-row input[type="checkbox"]:checked::after{
  left:20px;
  background:#171719;
}
[data-theme=light] .settings-toggle-row input[type="checkbox"]:checked::after{
  background:#fff;
}
@media(max-width:700px){
  .settings-toggle-row{
    grid-template-columns:1fr;
    align-items:start;
  }
  .switch-control{
    justify-content:flex-start;
  }
}

/* v1.7.1 - Theme label in header */
.theme-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 7px 5px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel2);
}
.theme-label{
  color:var(--muted);
  font-size:.68rem;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.theme-chip select{
  min-height:30px;
  height:30px;
  padding:4px 28px 4px 9px;
  font-size:.76rem;
  border-radius:8px;
  background:var(--surface);
}
@media(max-width:620px){
  .theme-chip{width:auto}
}

/* v1.7.2 - expanded Info page */
.info-topic{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.info-topic-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.info-topic-head h3{
  margin:0;
}
.info-topic-head small{
  display:block;
  margin-top:4px;
}

/* v1.7.4 - keep Theme label in normal capitalization */
.theme-label{
  text-transform:none!important;
}

/* v1.8.0 - Health Auto Export batch import */
.batch-import-source{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:12px 0 6px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.batch-import-source small{color:var(--muted)}
@media(max-width:650px){.batch-import-source{align-items:flex-start;flex-direction:column}}

/* v1.9.0 - Health and sleep */
.health-summary-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin:16px 0;
}
.health-stat{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel2);
}
.health-stat small,.health-stat span{color:var(--muted)}
.health-stat b{font-size:1.45rem}
.health-chart{min-height:280px}
.health-chart svg{width:100%;height:280px;display:block}
.health-sync-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
}
.health-sync-details{margin-top:12px}
.health-sync-details input[readonly]{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}
@media(max-width:900px){.health-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
 .health-summary-grid{grid-template-columns:1fr}
 .health-sync-status{align-items:stretch;flex-direction:column}
}

/* v1.10.0 - Körper and slim User page */
.body-overview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:16px 0;
}
.body-metric-card{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel2);
}
.body-metric-card small,.body-metric-card span{color:var(--muted)}
.body-metric-card b{font-size:1.55rem}
.body-metric-card strong{font-size:.82rem;color:var(--muted)}
.account-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:16px;
}
.account-api-status{margin-top:8px}
.account-page .profile-section-card{margin-top:0}
@media(max-width:900px){
  .body-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .account-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .body-overview-grid{grid-template-columns:1fr}
}

/* v1.11.0 - User page stacked */
.account-grid{grid-template-columns:1fr!important}
.account-page .profile-section-card{width:100%}

/* v1.11.0 - Body entry & sleep day browser */
.body-entry-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.body-bmi-card{margin-top:16px}
.sleep-day-browser{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin:16px 0;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.sleep-day-title{text-align:center;display:flex;flex-direction:column;gap:3px}
.sleep-day-detail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}
.sleep-detail-card{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);display:flex;flex-direction:column;gap:5px}
.sleep-detail-card small{color:var(--muted)}
.sleep-detail-card b{font-size:1.2rem}
.clickable-row{cursor:pointer}
.clickable-row:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
@media(max-width:900px){.body-entry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sleep-day-detail{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.body-entry-grid{grid-template-columns:1fr}.sleep-day-browser{grid-template-columns:1fr}.sleep-day-detail{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* v1.11.1 - mobile layout overhaul */
@media(max-width:700px){
  html,body{max-width:100%;overflow-x:hidden}
  body{font-size:15px}
  main{width:100%;max-width:none;margin:0 auto;padding:10px 10px 84px}

  header{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:10px 12px;
    align-items:center;
    padding-top:4px;
  }
  .logo-btn{
    font-size:18px;
    padding:9px 11px;
    border-radius:10px;
  }
  .brand-subtitle{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.82rem;
    color:var(--muted);
  }
  .header-actions{
    grid-column:1/-1;
    width:100%;
    margin:0;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .user-chip,.theme-chip{
    width:100%;
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px 8px;
  }
  .user-chip .welcome-label,.theme-label{
    flex:0 0 auto;
    font-size:.75rem;
  }
  .user-chip .user-name-link{
    min-width:0;
    flex:1 1 auto;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:left;
  }
  .user-chip>button:last-child{
    flex:0 0 auto;
    padding:8px 10px;
    font-size:.78rem;
  }
  .theme-chip select{
    flex:1 1 auto;
    width:auto;
    min-width:0;
  }
  .current-date{
    display:none;
  }

  .topnav{
    width:calc(100% + 20px);
    margin:10px -10px 14px;
    padding:7px 10px;
    border-left:0;
    border-right:0;
    border-radius:0;
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .topnav::-webkit-scrollbar{display:none}
  .topnav-left,.topnav-right{
    display:flex;
    flex:0 0 auto;
    gap:6px;
  }
  .topnav-right{
    margin-left:0;
    padding-left:0;
  }
  .topnav .nav-item{
    flex:0 0 auto;
    height:38px;
    padding:0 11px;
    font-size:.82rem;
  }

  .card,.stats>div{
    border-radius:14px;
    padding:14px;
  }
  .card{margin-top:10px}
  h2{font-size:1.2rem}
  h3{font-size:1.02rem;margin-top:16px}
  p{line-height:1.45}

  .section-head,.period-head,.chart-head{
    gap:9px;
  }
  .section-head{
    flex-direction:column;
    align-items:stretch;
  }
  .section-head>label,.section-head>select,
  .analysis-period,.heart-controls{
    width:100%;
  }
  .section-head select,.analysis-period select,.heart-controls select{
    width:100%;
  }

  .stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .stats>div{
    min-width:0;
    padding:12px 10px;
  }
  .stats b{
    font-size:1.35rem;
    line-height:1.15;
    overflow-wrap:anywhere;
  }
  .stats small{font-size:.72rem}

  .period-stats{gap:10px;margin:10px 0}
  .period-grid,.detail-grid,.modal .detail-grid,.insights,.route-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .period-grid>div,.detail-grid>div,.insights>div,.route-card{
    min-width:0;
    padding:11px;
  }

  .health-summary-grid,.body-overview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px;
  }
  .health-stat,.body-metric-card{
    min-width:0;
    padding:12px;
  }
  .health-stat b,.body-metric-card b{
    font-size:1.18rem;
    overflow-wrap:anywhere;
  }

  .body-entry-grid,.settings-two,.password-grid{
    grid-template-columns:1fr!important;
  }
  .account-grid,.profile-overview-grid,.export-grid,.settings-grid{
    grid-template-columns:1fr!important;
    gap:10px;
  }

  .settings-card,.profile-page,.export-page,.info-page{
    padding:12px!important;
  }
  .settings-group,.profile-section-card,.export-box,.compare-block{
    padding:13px!important;
    border-radius:13px!important;
  }
  .settings-toggle-row{
    grid-template-columns:1fr auto!important;
    gap:10px!important;
    padding:12px!important;
    align-items:center!important;
  }
  .settings-toggle-desc{font-size:.78rem}
  .settings-savebar{
    position:sticky;
    bottom:8px;
    z-index:5;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:13px;
    background:color-mix(in srgb,var(--panel) 92%,transparent);
    backdrop-filter:blur(10px);
  }
  .settings-savebar button{width:100%}

  .weight-chart-wrap,.chart-wrap,.svg-chart,.health-chart{
    min-width:0;
    overflow:hidden;
  }
  #chart{height:230px!important}
  .health-chart,.health-chart svg{height:230px;min-height:230px}
  .weight-chart-wrap svg{height:220px}

  .sleep-day-browser{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .sleep-day-title{
    grid-column:1/-1;
    grid-row:1;
    padding-bottom:3px;
  }
  .sleep-day-browser button:first-child{grid-column:1;grid-row:2}
  .sleep-day-browser button:last-child{grid-column:2;grid-row:2}
  .sleep-day-browser button{width:100%;font-size:.78rem;padding:9px 7px}
  .sleep-day-detail{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px;
  }

  .table{
    width:calc(100% + 2px);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:10px;
  }
  table{min-width:640px;font-size:.83rem}
  th,td{padding:9px 8px}
  .weight-history-table table{min-width:520px}

  .route-add,.route-assign,.weight-entry-row,.user-create{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:stretch!important;
  }
  .route-add input,.route-add select,.route-add button,
  .route-assign select,.route-assign button,
  .weight-entry-row label,.weight-entry-row button,
  .user-create input,.user-create select,.user-create button{
    width:100%!important;
    min-width:0!important;
  }

  .health-sync-status{
    align-items:stretch;
    flex-direction:column;
  }
  .health-sync-status button{width:100%}
  .health-sync-details input{
    width:100%;
    min-width:0;
    font-size:.72rem!important;
  }

  .maintenance-grid{
    grid-template-columns:1fr!important;
  }
  .maintenance-card{
    min-width:0;
  }

  .modal{
    padding:8px;
    align-items:end;
  }
  .modal-card{
    width:100%;
    max-width:none;
    max-height:88dvh;
    padding:18px 14px;
    border-radius:18px 18px 8px 8px;
  }

  .bottomnav-wrap{
    position:sticky;
    bottom:0;
    z-index:8;
    width:calc(100% + 20px)!important;
    margin:16px -10px -10px!important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,var(--bg) 70%,transparent);
  }
  .bottomnav{
    margin:0!important;
    width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    white-space:nowrap;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:7px;
    border-radius:13px;
  }
  .bottomnav::-webkit-scrollbar{display:none}
  .bottomnav .nav-item{
    flex:0 0 auto;
    min-height:38px;
    padding:8px 11px;
    font-size:.8rem;
  }

  .app-footer{
    padding:14px 4px 4px;
    font-size:.68rem;
    line-height:1.4;
  }
}

@media(max-width:420px){
  main{padding-left:8px;padding-right:8px}
  .topnav{width:calc(100% + 16px);margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px}
  .stats{grid-template-columns:1fr 1fr}
  .stats>div:last-child:nth-child(odd){grid-column:1/-1}
  .period-grid,.detail-grid,.modal .detail-grid,.insights,.route-cards,
  .health-summary-grid,.body-overview-grid,.sleep-day-detail{
    grid-template-columns:1fr!important;
  }
  .body-metric-card,.health-stat{padding:11px}
  .bottomnav-wrap{width:calc(100% + 16px)!important;margin-left:-8px!important;margin-right:-8px!important}
}

/* v1.11.2 - weight-only manual body input and selectable body trends */
.body-weight-entry{display:grid;grid-template-columns:minmax(160px,.7fr) minmax(180px,1fr) auto;gap:12px;align-items:end}
.body-weight-entry label,.body-height-row label{display:flex;flex-direction:column;gap:6px}
.body-height-setting{margin-top:16px}
.body-height-row{display:grid;grid-template-columns:minmax(220px,420px) auto;gap:12px;align-items:end}
.body-history-table table{min-width:600px}
@media(max-width:700px){
 .body-weight-entry,.body-height-row{grid-template-columns:1fr}
 .body-weight-entry button,.body-height-row button{width:100%}
}


/* v1.12.1 - visual consistency pass */
:root{
  --radius-card:16px;
  --radius-control:10px;
  --control-h:42px;
}

button,a.button-link,select,input{
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;
}
button:hover,a.button-link:hover{filter:brightness(1.04)}
button:active,a.button-link:active{transform:translateY(1px)}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
select,input{min-height:var(--control-h)}

.card,
.profile-section-card,
.settings-group,
.export-box,
.compare-block,
.info-metric,
.info-guide,
.health-stat,
.body-metric-card,
.progress-card,
.cardio-sport-card{
  border-color:var(--line);
}

.card{box-shadow:0 10px 32px rgba(0,0,0,.07)}
[data-theme=light] .card{box-shadow:0 8px 24px rgba(0,0,0,.045)}

.section-head h2,.section-head h3{letter-spacing:-.01em}
.section-head small{line-height:1.45}

.table{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
}
.table table{margin:0}
.table thead th{background:var(--panel2);font-weight:800}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background .14s ease}
.table tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}

.nav-item{transition:background .16s ease,border-color .16s ease,color .16s ease}
.topnav .nav-item.active,.bottomnav .nav-item.active{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent);
}

/* Körper chart bugfix */
#bodyTrendChart{
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
}
.weight-chart-wrap{overflow:hidden}
.body-history-table{margin-top:12px}
#bodyTrendEmpty{pointer-events:none}

#healthdata .compare-block,
#sleepdata .compare-block,
#heart .compare-block,
#cardio .compare-block,
#body .profile-section-card{margin-top:14px}

.health-stat,.body-metric-card{min-height:104px;justify-content:center}
.health-stat b,.body-metric-card b{line-height:1.15}
.info-box{line-height:1.5}
.info-box b{display:block;margin-bottom:4px}
.export-box h3,.settings-group-head b,.profile-section-card h3{letter-spacing:-.01em}

@media(max-width:700px){
  .card{box-shadow:none}
  .table{border-radius:10px}
  .section-head h2{font-size:1.18rem}
  .section-head h3{font-size:1rem}
  .health-stat,.body-metric-card{min-height:92px}
}


/* v1.12.2 - running page and light-theme dashboard polish */
.run-page>.section-head{
  margin-bottom:14px;
}
.run-summary{
  margin:0 0 14px;
}
.run-development-block{
  margin-top:0!important;
}
.run-development-block>.section-head{
  margin-bottom:8px;
}
.run-development-block .analysis-period{
  min-width:190px;
}
#analysis .compare-block{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel2);
  padding:18px;
}
#analysis .run-development-block{
  background:var(--panel2);
}

/* Dashboard metric switches: explicit pill/toggle styling instead of relying on subtle panel contrast. */
.chart-controls{
  padding:4px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel2);
}
.chart-controls button.metric{
  min-height:34px!important;
  height:34px!important;
  padding:7px 10px!important;
  border:1px solid transparent!important;
  border-radius:8px!important;
  background:transparent!important;
  color:var(--muted)!important;
  font-size:.78rem!important;
  font-weight:750!important;
  box-shadow:none!important;
}
.chart-controls button.metric:hover{
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
.chart-controls button.metric.active{
  background:var(--accent)!important;
  color:#171719!important;
  border-color:var(--accent)!important;
  box-shadow:0 1px 3px rgba(0,0,0,.12)!important;
}
[data-theme="light"] .chart-controls{
  background:#e7e8eb;
  border-color:#c9cbd0;
}
[data-theme="light"] .chart-controls button.metric{
  color:#454a50!important;
}
[data-theme="light"] .chart-controls button.metric:hover{
  background:#f8f8fa!important;
  color:#272428!important;
  border-color:#bfc2c7!important;
}
[data-theme="light"] .chart-controls button.metric.active{
  background:#5f646b!important;
  color:#fff!important;
  border-color:#5f646b!important;
  box-shadow:0 2px 5px rgba(0,0,0,.16)!important;
}

@media(max-width:700px){
  #analysis .compare-block{padding:13px}
  .run-development-block .analysis-period{min-width:0;width:100%}
  .chart-controls{
    width:100%;
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
  }
  .chart-controls::-webkit-scrollbar{display:none}
  .chart-controls button.metric{flex:0 0 auto}
}


/* v1.12.3 - Dashboard + Laufen unified with the newer feature pages */
.dashboard-page,
.run-page{
  padding:20px;
}

.dashboard-head,
.run-page>.section-head{
  margin-bottom:16px;
}

.dashboard-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0 0 14px;
}

.dashboard-period-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}

.dashboard-period-card{
  margin-top:0!important;
}

.dashboard-development>.section-head{
  align-items:flex-start;
}

.dashboard-filters{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:12px 0 8px;
}
.dashboard-filters select{
  width:100%;
  min-width:0;
}

#dash .compare-block,
#analysis .compare-block{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel2);
  padding:18px;
}

#dash .period-grid,
#analysis .stats{
  gap:10px;
}

#dash .period-grid>div,
#analysis .stats>div{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
}

#analysis .run-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}

#analysis .run-development-block{
  margin-top:0!important;
}

#analysis .compare-block + .compare-block{
  margin-top:14px;
}

#analysis .section-head h3,
#dash .section-head h3{
  margin:0;
}

#analysis .info-box,
#dash .info-box{
  margin-top:12px;
}

@media(max-width:900px){
  .dashboard-period-grid{grid-template-columns:1fr}
  #analysis .run-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:700px){
  .dashboard-page,.run-page{padding:12px!important}
  .dashboard-summary{grid-template-columns:1fr 1fr}
  .dashboard-summary>.health-stat:last-child{grid-column:1/-1}
  .dashboard-filters{grid-template-columns:1fr}
  #analysis .run-summary{grid-template-columns:1fr 1fr}
  #dash .compare-block,#analysis .compare-block{padding:13px}
}

@media(max-width:420px){
  .dashboard-summary,#analysis .run-summary{grid-template-columns:1fr}
  .dashboard-summary>.health-stat:last-child{grid-column:auto}
}


/* v1.12.4 - settings navigation toggle repair */
.settings-toggle-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 44px!important;
  align-items:center!important;
  gap:14px!important;
  margin-top:10px!important;
  padding:13px 14px!important;
  min-height:0!important;
  border:1px solid var(--line)!important;
  border-radius:13px!important;
  background:var(--surface)!important;
}

.settings-toggle-copy{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
  min-width:0!important;
}

.settings-toggle-title{
  display:block!important;
  margin:0!important;
  font-size:.92rem!important;
  line-height:1.25!important;
  font-weight:750!important;
  color:var(--text)!important;
}

.settings-toggle-desc{
  display:block!important;
  margin:0!important;
  font-size:.78rem!important;
  line-height:1.4!important;
  font-weight:400!important;
  color:var(--muted)!important;
}

.switch-control{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
}

.settings-toggle-row .switch-control input[type="checkbox"]{
  -webkit-appearance:none!important;
  appearance:none!important;
  box-sizing:border-box!important;
  display:block!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:22px!important;
  min-height:22px!important;
  max-height:22px!important;
  flex:0 0 40px!important;
  padding:0!important;
  margin:0!important;
  border-radius:999px!important;
  border:1px solid var(--line)!important;
  background:var(--panel2)!important;
  position:relative!important;
  cursor:pointer!important;
  box-shadow:none!important;
  outline:none;
}

.settings-toggle-row .switch-control input[type="checkbox"]::after{
  content:""!important;
  position:absolute!important;
  top:2px!important;
  left:2px!important;
  width:16px!important;
  height:16px!important;
  border-radius:50%!important;
  background:var(--muted)!important;
  transition:left .18s ease,background .18s ease!important;
}

.settings-toggle-row .switch-control input[type="checkbox"]:checked{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
}

.settings-toggle-row .switch-control input[type="checkbox"]:checked::after{
  left:20px!important;
  background:#171719!important;
}

[data-theme="light"] .settings-toggle-row .switch-control input[type="checkbox"]:checked::after{
  background:#fff!important;
}

@media(max-width:700px){
  .settings-toggle-row{
    grid-template-columns:minmax(0,1fr) 44px!important;
    align-items:center!important;
    gap:12px!important;
    padding:12px!important;
  }
  .settings-toggle-title{
    font-size:.9rem!important;
  }
  .settings-toggle-desc{
    font-size:.76rem!important;
  }
  .switch-control{
    justify-content:flex-end!important;
  }
}


/* v1.12.5 - Laufen page aligned with Körper style + neutral text emphasis */
#analysis .run-page{
  padding:20px;
}
#analysis .run-page > .section-head{
  margin-bottom:16px;
}
#analysis .run-page > .section-head h2,
#analysis .compare-block h3{
  margin:0;
}
#analysis .run-page > .section-head small,
#analysis .compare-block small,
#analysis .analysis-period,
#analysis .compare-route,
#analysis th,
#analysis .chart-title,
#analysis .info-box,
#analysis .progress-card > div span,
#analysis .svg-chart text{
  color:var(--muted)!important;
}
#analysis .run-summary,
#analysis .stats{
  gap:12px;
}
#analysis .run-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0 0 16px;
}
#analysis .stats > div,
#analysis .run-summary .stat,
#analysis .progress-card{
  background:var(--panel2)!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  box-shadow:none!important;
}
#analysis .stats > div,
#analysis .run-summary .stat{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:18px!important;
}
#analysis .stats small,
#analysis .run-summary .stat small,
#analysis .stats span,
#analysis .run-summary .stat span,
#analysis .stats strong,
#analysis .run-summary .stat strong{
  color:var(--muted)!important;
}
#analysis .stats b,
#analysis .run-summary .stat b,
#analysis .period-grid b,
#analysis .detail-grid b,
#analysis .insights b,
#analysis .progress-card > b,
#analysis .info-metric h3{
  color:var(--text)!important;
}
#analysis .stats b,
#analysis .run-summary .stat b{
  font-size:1.55rem!important;
  line-height:1.15;
}
#analysis .compare-block{
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:var(--panel)!important;
  padding:18px!important;
}
#analysis .period-grid > div,
#analysis .detail-grid > div,
#analysis .insights > div,
#analysis .info-box,
#analysis table thead th{
  background:var(--surface)!important;
}
#analysis .info-box{
  border-radius:14px;
}
#analysis .section-head,
#analysis .chart-head{
  align-items:flex-start;
}
#analysis .heart-controls select,
#analysis .analysis-period select,
#analysis .compare-route select,
#analysis #effRoute,
#analysis #progressRoute,
#analysis #baseRoute{
  min-height:44px;
}
@media(max-width:900px){
  #analysis .run-summary{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:700px){
  #analysis .run-page{padding:12px!important;}
  #analysis .compare-block{padding:14px!important;}
  #analysis .run-summary{grid-template-columns:1fr 1fr;gap:10px;}
}
@media(max-width:420px){
  #analysis .run-summary{grid-template-columns:1fr;}
}


/* v1.12.6 - global accent color policy
   Accent is reserved for interaction/navigation and data visualization.
   Content typography stays neutral across every theme. */

/* Neutral content typography everywhere */
main section h1,
main section h2,
main section h3,
main section h4,
main section b,
main section strong,
main section .stat b,
main section .stats b,
main section .period-grid b,
main section .detail-grid b,
main section .insights b,
main section .progress-card>b,
main section .cardio-sport-stats b,
main section .profile-bmi-card>b,
main section .info-metric h3,
main section .route-card b,
main section .body-metric-card b,
main section .health-stat b,
main section td,
main section label{
  color:var(--text)!important;
}

main section small,
main section .muted-text,
main section .body-metric-card span,
main section .health-stat span,
main section .settings-toggle-desc,
main section .route-card span,
main section th,
main section .chart-title,
main section .pager span,
main section .progress-card>div span{
  color:var(--muted)!important;
}

/* Keep imported/status badges neutral unless they are controls. */
main section .sport-badge{
  color:var(--text)!important;
  background:var(--surface)!important;
  border-color:var(--line)!important;
}

/* Buttons and button-like links keep the selected theme accent. */
main section button:not(.secondary):not(.small):not(.close):not(.metric),
main section a.button-link:not(.secondary),
main section .row-actions button,
main section .row-actions a.button-link,
main section .pager button:not(:disabled){
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#171719!important;
}
[data-theme="light"] main section button:not(.secondary):not(.small):not(.close):not(.metric),
[data-theme="light"] main section a.button-link:not(.secondary),
[data-theme="light"] main section .row-actions button,
[data-theme="light"] main section .row-actions a.button-link,
[data-theme="light"] main section .pager button:not(:disabled){
  color:#fff!important;
}

/* Secondary controls remain neutral until hover, so content does not become a rainbow. */
main section .secondary,
main section button.small:not(.danger),
main section a.button-link.secondary{
  background:var(--panel2)!important;
  border-color:var(--line)!important;
  color:var(--text)!important;
}
main section .secondary:hover,
main section button.small:not(.danger):hover,
main section a.button-link.secondary:hover{
  border-color:var(--accent)!important;
}

/* Destructive actions remain visually distinct but not theme-accent typography. */
main section button.danger{
  color:var(--text)!important;
}

/* Navigation keeps accent behavior. */
.topnav .nav-item.active,
.bottomnav .nav-item.active{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#171719!important;
}
[data-theme="light"] .topnav .nav-item.active,
[data-theme="light"] .bottomnav .nav-item.active{
  color:#fff!important;
}

/* Header is allowed to carry the theme accent. */
.logo-btn{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#171719!important;
}
[data-theme="light"] .logo-btn{color:#fff!important}
header .user-chip>button:last-child{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
}
header .theme-chip select:focus,
header .theme-chip select:hover{
  border-color:var(--accent)!important;
}

/* Charts and graph elements keep accent color. */
.svg-chart .trendline,
.wc-line{
  stroke:var(--chart-line)!important;
}
.svg-chart circle,
.wc-dot{
  fill:var(--chart-line)!important;
}
#bar{
  background:var(--accent)!important;
}

/* Dashboard chart switchers are controls and may use accent. */
.chart-controls button.metric.active{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#171719!important;
}
[data-theme="light"] .chart-controls button.metric.active{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#fff!important;
}

/* Checkboxes/switches keep accent as requested. */
input[type="checkbox"]{
  accent-color:var(--accent);
}
.settings-toggle-row .switch-control input[type="checkbox"]:checked{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
}
.include-toggle input{
  accent-color:var(--accent)!important;
}

/* Table hover may keep a subtle accent wash. */
.table tbody tr:hover,
table tbody tr:hover td{
  background:color-mix(in srgb,var(--accent) 7%,transparent)!important;
}

/* Links inside prose should look like text unless explicitly styled as buttons/navigation. */
main section a:not(.button-link):not(.nav-item){
  color:var(--text);
}


/* v1.12.7 - iPhone content-width hardening
   Header and navigation were already correct; only page content is constrained. */
@media(max-width:700px){
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
  }

  main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  main > section{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden;
    box-sizing:border-box!important;
  }

  main > section > .card,
  main section .card,
  main section .compare-block,
  main section .profile-section-card,
  main section .settings-group,
  main section .export-box,
  main section .info-topic,
  main section .info-guide,
  main section .maintenance-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /* Grid children must be allowed to shrink on Safari/iOS. */
  main section .dashboard-summary,
  main section .dashboard-period-grid,
  main section .health-summary-grid,
  main section .body-overview-grid,
  main section .sleep-day-detail,
  main section .cardio-summary-grid,
  main section .profile-overview-grid,
  main section .settings-grid,
  main section .export-grid,
  main section .account-grid,
  main section .progress-grid,
  main section .insights,
  main section .route-cards,
  main section .detail-grid,
  main section .period-grid,
  main section .settings-two,
  main section .body-entry-grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  main section .dashboard-summary > *,
  main section .dashboard-period-grid > *,
  main section .health-summary-grid > *,
  main section .body-overview-grid > *,
  main section .sleep-day-detail > *,
  main section .cardio-summary-grid > *,
  main section .profile-overview-grid > *,
  main section .settings-grid > *,
  main section .export-grid > *,
  main section .account-grid > *,
  main section .progress-grid > *,
  main section .insights > *,
  main section .route-cards > *,
  main section .detail-grid > *,
  main section .period-grid > *,
  main section .settings-two > *,
  main section .body-entry-grid > *{
    min-width:0!important;
    max-width:100%!important;
  }

  /* Long text / URLs / API keys must wrap instead of widening the page. */
  main section p,
  main section span,
  main section small,
  main section strong,
  main section b,
  main section h2,
  main section h3,
  main section label,
  main section .info-box,
  main section .profile-info-box{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  main section input,
  main section select,
  main section textarea{
    width:100%;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /* Charts stay inside their card. */
  main section .chart-wrap,
  main section .svg-chart,
  main section canvas,
  main section svg{
    max-width:100%!important;
    min-width:0!important;
  }

  main section canvas{
    width:100%!important;
  }

  /* Wide tables scroll inside themselves, never widen the whole document. */
  main section .table{
    display:block;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    contain:inline-size;
  }

  main section .table > table{
    width:max-content;
    min-width:100%;
    max-width:none;
  }

  /* Some legacy controls had desktop minimum widths. Neutralize them on phones. */
  main section .analysis-period,
  main section .compare-route,
  main section .heart-controls,
  main section #effRoute,
  main section #progressRoute,
  main section #baseRoute,
  main section .route-add input{
    min-width:0!important;
    max-width:100%!important;
  }
}

@media(max-width:430px){
  /* iPhone Pro Max portrait still benefits from true one-column feature grids. */
  main section .dashboard-summary,
  main section .health-summary-grid,
  main section .body-overview-grid,
  main section .sleep-day-detail,
  main section .cardio-summary-grid,
  main section .progress-grid,
  main section .insights,
  main section .route-cards,
  #analysis .run-summary{
    grid-template-columns:1fr!important;
  }
}


/* v1.12.8 - mobile bottom navigation mirrors top navigation */
@media(max-width:700px){
  .bottomnav-wrap{
    position:static!important;
    bottom:auto!important;
    z-index:auto!important;
    width:calc(100% + 20px)!important;
    max-width:none!important;
    margin:14px -10px 0!important;
    padding:7px 10px calc(7px + env(safe-area-inset-bottom))!important;
    background:transparent!important;
  }

  .bottomnav{
    width:100%!important;
    margin:0!important;
    padding:7px 10px!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    border:1px solid var(--line)!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
    background:var(--panel)!important;
    box-shadow:0 8px 28px rgba(0,0,0,.06)!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .bottomnav::-webkit-scrollbar{
    display:none;
  }

  .bottomnav .nav-item{
    flex:0 0 auto!important;
    min-height:38px!important;
    height:38px!important;
    padding:0 11px!important;
    margin:0!important;
    border:0!important;
    border-radius:10px!important;
    background:transparent!important;
    color:var(--muted)!important;
    font-size:.82rem!important;
    font-weight:700!important;
    line-height:1!important;
    box-shadow:none!important;
  }

  .bottomnav .nav-item:hover{
    background:var(--surface)!important;
    color:var(--text)!important;
  }

  .bottomnav .nav-item.active{
    background:var(--accent)!important;
    color:#171719!important;
    border-color:var(--accent)!important;
  }

  [data-theme="light"] .bottomnav .nav-item.active{
    color:#fff!important;
  }

  .bottomnav .info-nav-item{
    margin-left:0!important;
  }
}

@media(max-width:420px){
  .bottomnav-wrap{
    width:calc(100% + 16px)!important;
    margin-left:-8px!important;
    margin-right:-8px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
}


/* v1.12.9 - Health Auto Export sync visibility */
.health-sync-state-wrap{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.health-sync-state-wrap>small{
  font-size:.78rem;
  font-weight:400;
  color:var(--muted);
}
.log-row-detail>div{
  min-width:0;
}
.log-row-detail>div small{
  display:block;
  margin-top:4px;
  font-size:.76rem;
  font-weight:400;
  color:var(--muted);
  overflow-wrap:anywhere;
}
@media(max-width:620px){
  .health-sync-status{align-items:stretch}
  .health-sync-state-wrap{width:100%}
}


/* v1.12.13 - API key copy UX + sleep display */
.health-sync-details{
  display:grid;
  gap:12px;
  margin-top:14px;
}
.health-sync-copy-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
}
.health-sync-copy-row label{
  min-width:0;
}
.health-sync-copy-row input{
  width:100%;
  min-height:48px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:.92rem;
  text-overflow:clip;
}
.health-sync-copy-row button{
  min-height:48px;
  white-space:nowrap;
}
@media(max-width:620px){
  .health-sync-copy-row{
    grid-template-columns:1fr;
  }
  .health-sync-copy-row button{
    width:100%;
  }
}


/* v1.12.14 - recent imports */
.recent-imports-block{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.recent-import-list{
  display:grid;
  gap:8px;
}
.recent-import-row{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface-2);
}
.recent-import-main{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:4px;
}
.recent-import-main b,
.recent-import-main small{
  overflow-wrap:anywhere;
}
.recent-import-main small{
  color:var(--muted);
}
@media(max-width:620px){
  .recent-import-row{
    align-items:stretch;
    flex-direction:column;
  }
  .recent-import-row button{
    width:100%;
  }
}


/* v1.12.15 - paginierter Importverlauf inkl. API-Syncs */
.recent-import-title{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.import-source-badge{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  min-height:22px;
  padding:2px 8px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));
  border-radius:999px;
  color:var(--accent);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.02em;
}
.recent-import-locked{
  flex:0 0 auto;
  color:var(--muted);
  font-size:.74rem;
}
.recent-import-api{
  border-style:dashed;
}
#recentImportsPager{
  margin-top:12px;
}
@media(max-width:620px){
  .recent-import-locked{
    align-self:flex-start;
  }
}


/* v1.12.16 - rückgängig machbare API-Syncs */
.import-rolled-back{
  text-decoration:line-through;
  opacity:.8;
}

/* v1.12.17: period cards + body availability */
.heart-period-card{align-items:stretch;justify-content:flex-start;gap:10px}
.heart-period-card>.period-main{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.heart-period-card>.period-main span{font-size:.74rem;white-space:nowrap}
.heart-period-card>.period-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:8px;border-top:1px solid var(--line)}
.heart-period-card>.period-grid>span{display:flex;flex-direction:column;gap:2px}
.heart-period-card em{font-size:.68rem;color:var(--muted);font-style:normal;text-transform:uppercase;letter-spacing:.04em}
.heart-period-card strong{font-size:.9rem;color:var(--text)}
.body-import-hint{margin-top:14px}
@media(max-width:600px){.heart-period-card>.period-main{display:block}.heart-period-card>.period-main span{display:block;margin-top:2px}}


/* Health Auto Export Info: lange URL/Token-Hinweise umbrechen statt horizontal scrollen */
.hae-setup .table{overflow:visible;max-width:100%}
.hae-setup table{width:100%;table-layout:fixed}
.hae-setup th{width:190px}
.hae-setup td,.hae-setup th{white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.hae-setup code{white-space:normal;overflow-wrap:anywhere;word-break:break-word}
@media(max-width:700px){
  .hae-setup th{width:38%}
}

/* v1.12.25 Gesundheits-UX */
.data-status{margin:-2px 0 14px;padding:9px 12px;border:1px solid var(--line);border-radius:11px;color:var(--muted);background:color-mix(in srgb,var(--panel2) 92%,transparent);font-size:.82rem;line-height:1.4}
.chart-meta{color:var(--muted);font-size:.78rem;margin:0 0 8px 4px}
.heart-health-summary{display:block!important}
.heart-summary-group{margin:0 0 18px}
.heart-summary-group:last-child{margin-bottom:0}
.heart-summary-title{display:flex;flex-direction:column;gap:3px;margin:0 0 9px}
.heart-summary-title b{font-size:.95rem}.heart-summary-title small{color:var(--muted)}
@media(max-width:700px){.data-status{font-size:.78rem}}


/* v1.12.27 - layout polish after visual review */
.data-status:empty,.data-status[hidden]{display:none}

/* Gesundheit: top cards always line up neatly */
#healthdata .health-summary-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:stretch;
  grid-auto-rows:1fr;
}
#healthdata .health-summary-grid>.health-stat{height:100%}

/* Schlaf: detail cards use the available width better */
#sleepdata .sleep-day-detail{
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:stretch;
}
#sleepdata .sleep-day-detail>.sleep-detail-card{height:100%}

/* Körper: clearer 3 + 2 (+ optional 1) distribution */
#body .body-overview-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:stretch;
}
#body .body-overview-grid>.body-metric-card{height:100%}
#body .body-overview-grid>.body-metric-card:nth-child(-n+3){grid-column:span 2}
#body .body-overview-grid>.body-metric-card:nth-child(4),
#body .body-overview-grid>.body-metric-card:nth-child(5){grid-column:span 3}
#body .body-overview-grid>.body-metric-card:nth-child(6){grid-column:1 / -1}

/* Laufen: summary cards calmer and tables get breathing room */
#analysis .run-summary,
#analysis #compareSummary.stats,
#analysis #effSummary.stats,
#analysis #progressSummary.stats,
#analysis #baseSummary.stats,
#analysis #heartSummary.stats{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
#analysis .run-summary>.stat:last-child:nth-child(odd),
#analysis #compareSummary.stats>div:last-child:nth-child(odd),
#analysis #effSummary.stats>div:last-child:nth-child(odd),
#analysis #progressSummary.stats>div:last-child:nth-child(odd),
#analysis #baseSummary.stats>div:last-child:nth-child(odd),
#analysis #heartSummary.stats>div:last-child:nth-child(odd){grid-column:1/-1}
#analysis .table,
#analysis .pager,
#analysis .info-box,
#analysis .heart-progress-block,
#analysis .chart-wrap{margin-top:12px}
#analysis .stats{margin-bottom:4px}

/* Herz: use full width in grouped cards and avoid wide empty space */
.heart-health-summary{display:block!important}
.heart-health-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.heart-health-special-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
#heart .heart-period-card{height:100%}
#heart .heart-period-card>.period-main{align-items:flex-start}
#heart .table{overflow-x:auto}
#heartHealthTable table{min-width:0;table-layout:fixed;width:100%}
#heartHealthTable th,#heartHealthTable td{white-space:normal;word-break:break-word;overflow-wrap:anywhere;padding:10px 8px;vertical-align:top}
#heartHealthTable th{font-size:.79rem}
#heartHealthTable td{font-size:.84rem}

/* tighter overall summary cards */
#healthdata .health-stat,
#sleepdata .health-stat,
#heart .health-stat,
#body .body-metric-card{min-height:118px}

@media(max-width:980px){
  #healthdata .health-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #sleepdata .sleep-day-detail{grid-template-columns:repeat(3,minmax(0,1fr))}
  #body .body-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #body .body-overview-grid>.body-metric-card{grid-column:auto!important}
  .heart-health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  #analysis .run-summary,
  #analysis #compareSummary.stats,
  #analysis #effSummary.stats,
  #analysis #progressSummary.stats,
  #analysis #baseSummary.stats,
  #analysis #heartSummary.stats{grid-template-columns:1fr!important}
  .heart-health-grid,.heart-health-special-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  #healthdata .health-summary-grid{grid-template-columns:1fr}
  #sleepdata .sleep-day-detail{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* v1.12.28 - settings page restructuring */
.settings-card .settings-grid{
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
}
.settings-group-half{grid-column:span 6}
.settings-group-wide{grid-column:1 / -1}
.settings-section-title{
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:2px 2px 0;
}
.settings-section-title b{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.settings-section-title small{color:var(--muted);font-size:.8rem;line-height:1.35}

.settings-card .settings-group input:not([type="checkbox"]),
.settings-card .settings-group select{width:100%;min-width:0}

.settings-help-text{margin:10px 0 0;font-size:.78rem;line-height:1.45;color:var(--muted)}
.settings-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}
.settings-three-tight{margin-top:2px}
.settings-two-spacious{gap:0 14px}
.settings-toggle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

.switch-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 44px;
  align-items:center;
  gap:14px;
  margin-top:10px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface);
}
.switch-row-compact{min-height:0}
.switch-row > span:first-child{min-width:0}
.switch-row input[type="checkbox"]{
  -webkit-appearance:none;
  appearance:none;
  box-sizing:border-box;
  display:block;
  width:40px;
  min-width:40px;
  max-width:40px;
  height:22px;
  min-height:22px;
  max-height:22px;
  flex:0 0 40px;
  padding:0;
  margin:0;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel2);
  position:relative;
  cursor:pointer;
  box-shadow:none;
  outline:none;
}
.switch-row input[type="checkbox"]::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--muted);
  transition:left .18s ease,background .18s ease;
}
.switch-row input[type="checkbox"]:checked{
  background:var(--accent);
  border-color:var(--accent);
}
.switch-row input[type="checkbox"]:checked::after{left:20px;background:#171719}
[data-theme="light"] .switch-row input[type="checkbox"]:checked::after{background:#fff}

.settings-group-login button{margin-top:12px;align-self:flex-start}
.settings-savebar{margin-top:2px}

#settings .maintenance-grid{align-items:stretch}
#settings .maintenance-card{min-height:100%}
.danger-zone{padding-top:0}
.maintenance-danger-zone{
  border-color:color-mix(in srgb, var(--line) 35%, #bf4656 65%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel2) 88%,#bf4656 12%),var(--panel2));
}
main section .maintenance-danger-zone button,
main section .maintenance-danger-zone button.danger{
  border-color:#c84b5d!important;
  background:#c84b5d!important;
  color:#fff!important;
}
[data-theme="light"] main section .maintenance-danger-zone button,
[data-theme="light"] main section .maintenance-danger-zone button.danger{
  color:#fff!important;
}

@media(max-width:980px){
  .settings-group-half{grid-column:span 12}
  .settings-toggle-grid,.settings-three{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .settings-card .settings-grid{grid-template-columns:1fr;padding:14px 18px}
  .settings-group-half,.settings-group-wide,.settings-section-title{grid-column:auto}
  .settings-toggle-grid,.settings-three,.settings-two,.settings-two-spacious{grid-template-columns:1fr}
  .switch-row{grid-template-columns:minmax(0,1fr) 44px}
  .settings-section-title{padding:0}
}


/* v1.12.29 - global spacing rhythm and card alignment */
:root{
  --ui-block-gap:18px;
  --ui-inner-gap:12px;
}

/* Consistent vertical breathing room between the major boxes on every page. */
main section .card > .compare-block,
main section .card > .profile-section-card,
main section .card > .info-box,
main section .card > .maintenance,
main section .card > .settings-savebar{
  margin-top:var(--ui-block-gap)!important;
}

#analysis .compare-block + .compare-block{
  margin-top:var(--ui-block-gap)!important;
}
#dash .dashboard-period-grid{
  margin-bottom:var(--ui-block-gap)!important;
}
#dash .dashboard-summary{
  margin-bottom:var(--ui-block-gap)!important;
}
#healthdata .health-summary-grid,
#sleepdata .health-summary-grid,
#body .body-overview-grid{
  margin-top:var(--ui-block-gap)!important;
  margin-bottom:var(--ui-block-gap)!important;
}

/* Data-state boxes no longer sit directly on the page subtitle. */
.data-status{
  margin:12px 0 var(--ui-block-gap)!important;
}

/* Health: all five top cards start their content at exactly the same height.
   This fixes the respiratory-rate card appearing to "dance" out of line. */
#healthdata .health-summary-grid{
  align-items:stretch!important;
}
#healthdata .health-summary-grid > .health-stat{
  justify-content:flex-start!important;
  align-self:stretch;
  min-height:146px!important;
}
#healthdata .health-stat small{
  min-height:1.35em;
}
#healthdata .health-stat b{
  margin-top:3px;
}
#healthdata .health-stat span{
  margin-top:2px;
  line-height:1.35;
}

/* Dashboard period cards: stack hours and minutes without growing the cards. */
#dash .dashboard-duration-card{
  justify-content:flex-start;
}
#dash .dashboard-duration{
  display:flex!important;
  flex-direction:column;
  gap:0;
  font-size:1.18rem!important;
  line-height:1.04!important;
  letter-spacing:-.01em;
}
#dash .dashboard-duration > span{
  display:block;
  white-space:nowrap;
}
#dash .dashboard-duration-card > small{
  margin-top:5px;
}

/* Keep the four weekly/monthly metric cards equally aligned. */
#dash .period-grid > div{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:112px;
}
#dash .period-grid > div > small{
  margin-top:5px;
}

/* A little more separation around tables everywhere, without huge empty areas. */
main section .compare-block > .table,
main section .profile-section-card > .table,
main section .compare-block > .pager{
  margin-top:var(--ui-inner-gap);
}

/* Mobile keeps the same rhythm but wastes less vertical space. */
@media(max-width:700px){
  :root{--ui-block-gap:14px;--ui-inner-gap:10px}
  .data-status{margin-top:10px!important}
  #healthdata .health-summary-grid > .health-stat{min-height:104px!important}
}