:root {
  --bg:          #0a1628;
  --bg-card:     #111f38;
  --bg-card2:    #152035;
  --border:      #1e3050;
  --text:        #e8f0fe;
  --text-2:      #6b84a8;
  --text-3:      #3d5a80;

  --c-green:   #00e676;
  --c-orange:  #ff6d00;
  --c-blue:    #29b6f6;
  --c-purple:  #ce93d8;
  --c-yellow:  #ffd740;
  --c-red:     #ff5252;

  --critical:    #ff5252;
  --critical-bg: rgba(255,82,82,.12);
  --warning:     #ffd740;
  --warning-bg:  rgba(255,215,64,.10);
  --good:        #00e676;
  --good-bg:     rgba(0,230,118,.10);
  --excel:       #29b6f6;
  --excel-bg:    rgba(41,182,246,.10);

  --r: 14px;
  --nav: 64px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%; height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}
body { display: flex; flex-direction: column; }

/* ── Header ── */
.hdr {
  flex-shrink: 0;
  padding: calc(env(safe-area-inset-top) + 14px) 18px 13px;
  background: rgba(10,22,40,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.hdr-left { display: flex; align-items: center; gap: 11px; }
.hdr-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #29b6f6, #ce93d8);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.hdr-text h1 { font-size: 17px; font-weight: 800; letter-spacing: .3px; }
.hdr-text p  { font-size: 10px; color: var(--text-2); margin-top: 1px; letter-spacing: .2px; }
.hdr-date {
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  padding: 5px 11px; border-radius: 20px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-2);
  display: flex; align-items: center; gap: 5px;
}
.hdr-date::before { content: '📅'; font-size: 11px; }

/* ── Scroll area ── */
.content {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 14px calc(var(--nav) + env(safe-area-inset-bottom) + 14px);
}
.panel { display: none; }
.panel.active { display: block; }

/* ── Bottom nav ── */
.nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--nav) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(10,22,40,.97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border);
  display: flex;
}
.nb {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  color: var(--text-2); font-size: 10px; font-weight: 600;
  letter-spacing: .3px;
  transition: color .15s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.nb svg { width: 22px; height: 22px; }
.nb.on { color: var(--c-orange); }
.nb.on::after {
  content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2px; border-radius: 2px;
  background: var(--c-orange);
}

/* ── Generic card ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 15px;
  margin-bottom: 11px;
}
.card-lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-2); margin-bottom: 12px;
}

/* ── Section title ── */
.sec { font-size: 16px; font-weight: 800; margin: 18px 0 10px; letter-spacing: .1px; }
.sec:first-child { margin-top: 0; }

/* ── Metric cards grid ── */
.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 11px;
}
.metric-card {
  border-radius: var(--r);
  padding: 14px 13px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.metric-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: var(--r) var(--r) 0 0;
}
.metric-card.green::before  { background: linear-gradient(90deg, var(--c-green), #00bfa5); }
.metric-card.orange::before { background: linear-gradient(90deg, var(--c-orange), #ff9100); }
.metric-card.blue::before   { background: linear-gradient(90deg, var(--c-blue), #0091ea); }
.metric-card.purple::before { background: linear-gradient(90deg, var(--c-purple), #9c27b0); }
.metric-card.yellow::before { background: linear-gradient(90deg, var(--c-yellow), #ff6f00); }
.metric-card.red::before    { background: linear-gradient(90deg, var(--c-red), #c62828); }

.metric-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.metric-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.metric-icon.green  { background: rgba(0,230,118,.15); }
.metric-icon.orange { background: rgba(255,109,0,.15); }
.metric-icon.blue   { background: rgba(41,182,246,.15); }
.metric-icon.purple { background: rgba(206,147,216,.15); }
.metric-icon.yellow { background: rgba(255,215,64,.15); }
.metric-icon.red    { background: rgba(255,82,82,.15); }

.metric-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-2); }
.metric-value { font-size: 26px; font-weight: 900; line-height: 1; letter-spacing: -.5px; }
.metric-value.green  { color: var(--c-green); }
.metric-value.orange { color: var(--c-orange); }
.metric-value.blue   { color: var(--c-blue); }
.metric-value.purple { color: var(--c-purple); }
.metric-value.yellow { color: var(--c-yellow); }
.metric-value.red    { color: var(--c-red); }
.metric-unit { font-size: 12px; font-weight: 500; color: var(--text-2); margin-left: 2px; }
.metric-sub  { font-size: 11px; color: var(--text-2); margin-top: 5px; }

/* mini progress bar inside metric card */
.metric-bar {
  height: 3px; background: var(--border); border-radius: 3px;
  overflow: hidden; margin-top: 9px;
}
.metric-bar-fill {
  height: 100%; border-radius: 3px;
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.metric-bar-fill.green  { background: linear-gradient(90deg, var(--c-green), #00bfa5); }
.metric-bar-fill.orange { background: linear-gradient(90deg, var(--c-orange), #ff9100); }
.metric-bar-fill.blue   { background: linear-gradient(90deg, var(--c-blue), #0091ea); }
.metric-bar-fill.purple { background: linear-gradient(90deg, var(--c-purple), #9c27b0); }
.metric-bar-fill.yellow { background: linear-gradient(90deg, var(--c-yellow), #ff6f00); }
.metric-bar-fill.red    { background: linear-gradient(90deg, var(--c-red), #c62828); }

/* ── Wide metric card (full row) ── */
.metric-card-wide {
  border-radius: var(--r);
  padding: 14px 15px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin-bottom: 11px;
  position: relative; overflow: hidden;
}
.metric-card-wide::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: var(--r) var(--r) 0 0;
}
.metric-card-wide.green::before  { background: linear-gradient(90deg, var(--c-green), #00bfa5); }
.metric-card-wide.orange::before { background: linear-gradient(90deg, var(--c-orange), #ff9100); }

.metric-wide-row { display: flex; align-items: center; gap: 14px; }
.metric-wide-main { flex: 1; }
.metric-wide-val { font-size: 36px; font-weight: 900; line-height: 1; }
.metric-wide-label { font-size: 11px; color: var(--text-2); margin-top: 3px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }

/* ring for Schritte */
.ring { position: relative; width: 70px; height: 70px; flex-shrink: 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--border); stroke-width: 6; }
.ring-fill  { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 188; stroke-dashoffset: 188; transition: stroke-dashoffset 1.2s ease; }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-pct  { font-size: 14px; font-weight: 900; line-height: 1; }
.ring-pct-lbl { font-size: 9px; color: var(--text-2); }

/* ── Status badges ── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 20px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
}
.b-critical { background: var(--critical-bg); color: var(--critical); border: 1px solid rgba(255,82,82,.25); }
.b-warning  { background: var(--warning-bg);  color: var(--warning);  border: 1px solid rgba(255,215,64,.25); }
.b-good     { background: var(--good-bg);      color: var(--good);     border: 1px solid rgba(0,230,118,.25); }
.b-excel    { background: var(--excel-bg);     color: var(--excel);    border: 1px solid rgba(41,182,246,.25); }

/* ── Priority cards ── */
.prio { border-radius: 12px; padding: 14px 15px; margin-bottom: 10px; border-left: 3px solid; }
.prio.critical { background: var(--critical-bg); border-color: var(--critical); }
.prio.warning  { background: var(--warning-bg);  border-color: var(--warning); }
.prio.good     { background: var(--good-bg);     border-color: var(--good); }
.prio-head  { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.prio-title { font-size: 14px; font-weight: 700; }
.prio-act { font-size: 12px; color: var(--text-2); padding: 3px 0; display: flex; gap: 7px; line-height: 1.4; }
.prio-act::before { content: '›'; flex-shrink: 0; opacity: .6; }

/* ── Lab accordion ── */
.acc { margin-bottom: 7px; }
.acc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 15px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); cursor: pointer;
  transition: background .12s; -webkit-tap-highlight-color: transparent;
}
.acc-head.open { border-radius: var(--r) var(--r) 0 0; border-bottom-color: transparent; }
.acc-head:active { background: var(--bg-card2); }
.acc-head-left { display: flex; align-items: center; gap: 10px; }
.acc-name { font-size: 14px; font-weight: 700; }
.acc-alerts { display: flex; gap: 5px; }
.acc-chevron { font-size: 10px; color: var(--text-2); transition: transform .2s; }
.acc-head.open .acc-chevron { transform: rotate(180deg); }
.acc-body { display: none; background: var(--bg-card); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--r) var(--r); overflow: hidden; }
.acc-body.open { display: block; }
.acc-source { font-size: 11px; color: var(--text-2); padding: 7px 15px; border-bottom: 1px solid var(--border); }
.lab-row { display: flex; align-items: flex-start; padding: 11px 15px; gap: 10px; border-top: 1px solid var(--border); }
.lab-row:first-child { border-top: none; }
.dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; box-shadow: 0 0 5px currentColor; }
.d-critical { background: var(--critical); color: var(--critical); }
.d-warning  { background: var(--warning);  color: var(--warning); }
.d-good     { background: var(--good);     color: var(--good); }
.d-excel    { background: var(--excel);    color: var(--excel); }
.lab-info { flex: 1; }
.lab-name  { font-size: 14px; font-weight: 500; }
.lab-note  { font-size: 11px; color: var(--text-2); margin-top: 3px; line-height: 1.5; }
.lab-right { text-align: right; flex-shrink: 0; }
.lab-val   { font-size: 16px; font-weight: 800; }
.lab-unit  { font-size: 11px; color: var(--text-2); margin-top: 1px; }

/* ── Legend ── */
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.leg-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); }

/* ── Supplement rows ── */
.supp-row { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.supp-row:last-child { border-bottom: none; }
.supp-icon-wrap {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: var(--bg-card2); border: 1px solid var(--border);
}
.supp-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.supp-dose { font-size: 12px; color: var(--text-2); }
.supp-note { font-size: 12px; margin-top: 4px; line-height: 1.4; }

/* ── Nutrition chips ── */
.chip-wrap { margin-bottom: 14px; }
.chip-lbl  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 11px; border-radius: 20px; font-size: 12px; border: 1px solid var(--border); background: var(--bg-card2); }
.chip.avoid  { border-color: rgba(255,82,82,.4); color: var(--critical); background: var(--critical-bg); }
.chip.prefer { border-color: rgba(0,230,118,.4); color: var(--good); background: var(--good-bg); }
.nutr-item { font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--border); color: var(--text-2); }
.nutr-item:last-child { border-bottom: none; }

/* ── Connect button ── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; border-radius: var(--r);
  border: none; cursor: pointer;
  font-size: 15px; font-weight: 700; transition: opacity .15s;
}
.btn:active { opacity: .8; }
.btn-primary { background: linear-gradient(135deg, #ff6d00, #ff9100); color: #fff; }
.btn-outline { background: transparent; color: var(--text-2); border: 1px solid var(--border); font-size: 13px; }

/* ── Workout list ── */
.wo-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.wo-row:last-child { border-bottom: none; }
.wo-icon-wrap {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--bg-card2); border: 1px solid var(--border);
}
.wo-name { font-size: 14px; font-weight: 700; }
.wo-sub  { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.wo-dur  { font-size: 14px; font-weight: 800; color: var(--c-blue); margin-left: auto; flex-shrink: 0; }

/* ── Setup box ── */
.setup-box {
  background: var(--warning-bg); border: 1px solid rgba(255,215,64,.3);
  border-radius: var(--r); padding: 15px; margin-bottom: 14px;
  font-size: 13px; line-height: 1.7;
}
.setup-box strong { color: var(--warning); }

/* ── Divider ── */
.divider { height: 1px; background: var(--border); margin: 14px 0; }

/* ── Spin ── */
.spin-wrap { text-align: center; padding: 30px; color: var(--text-2); }
.spin {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--c-blue);
  animation: spin .7s linear infinite; margin: 0 auto 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Today tab ── */
.today-greet { font-size: 22px; font-weight: 800; margin: 4px 0 14px; letter-spacing: -.3px; }
.today-greet small { font-size: 12px; font-weight: 500; color: var(--text-2); display:block; margin-top: 4px; letter-spacing: 0; }
.check-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.check-row:last-child { border-bottom: none; }
.check-box {
  width: 26px; height: 26px; border-radius: 8px;
  border: 2px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; background: var(--bg-card2);
}
.check-row.done .check-box { background: var(--c-green); border-color: var(--c-green); }
.check-box svg { width: 16px; height: 16px; opacity: 0; transition: opacity .15s; }
.check-row.done .check-box svg { opacity: 1; }
.check-info { flex: 1; min-width: 0; }
.check-name { font-size: 14px; font-weight: 700; }
.check-row.done .check-name { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--text-3); }
.check-sub { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.check-row.warning .check-sub { color: var(--warning); }

/* Quick-Log */
.ql-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ql-card { background: var(--bg-card2); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.ql-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-2); margin-bottom: 6px; }
.ql-val { font-size: 20px; font-weight: 900; line-height: 1; }
.ql-input {
  background: transparent; border: none; outline: none;
  color: var(--text); font-size: 20px; font-weight: 900;
  width: 100%; padding: 0; font-family: inherit;
}
.ql-input::placeholder { color: var(--text-3); font-weight: 500; }
.ql-row { display: flex; gap: 8px; align-items: center; }
.ql-mini-btn {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-2); font-size: 12px; font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ql-mini-btn:active { background: var(--bg-card2); }

/* Adhärenz-Streifen */
.streak { display: flex; gap: 3px; margin-top: 8px; }
.streak-day { flex: 1; height: 6px; border-radius: 3px; background: var(--border); }
.streak-day.done { background: var(--c-green); }
.streak-day.partial { background: var(--c-yellow); }

/* Wochenplan */
.wk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 10px; }
.wk-day { background: var(--bg-card2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 4px; text-align: center; }
.wk-day.today { border-color: var(--c-orange); }
.wk-day.done { background: var(--good-bg); border-color: rgba(0,230,118,.3); }
.wk-day.rest { opacity: .6; }
.wk-d-name { font-size: 10px; font-weight: 700; color: var(--text-2); }
.wk-d-icon { font-size: 16px; margin: 2px 0; }
.wk-d-min  { font-size: 9px; color: var(--text-3); }

/* Reminder-Banner */
.banner {
  background: linear-gradient(135deg, rgba(41,182,246,.15), rgba(206,147,216,.10));
  border: 1px solid rgba(41,182,246,.3);
  border-radius: var(--r); padding: 13px 15px; margin-bottom: 12px;
  font-size: 13px; line-height: 1.5;
}
.banner-title { font-weight: 700; color: var(--c-blue); margin-bottom: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }

/* ── Trend cards ── */
.trend-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; }
.trend-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.trend-lbl  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-2); }
.trend-val  { font-size: 22px; font-weight: 900; line-height: 1; }
.trend-unit { font-size: 11px; font-weight: 500; color: var(--text-2); margin-left: 3px; }
.trend-spark { margin: 4px 0 6px; }
.trend-spark svg { width: 100%; height: auto; }
.trend-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-2); }
.trend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trend-grid .trend-card { margin-bottom: 0; }
@media (max-width: 380px) { .trend-grid { grid-template-columns: 1fr; } }

/* ── Stat grid 2-col (Training) ── */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 11px; }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 12px; text-align: center; }
.stat-val { font-size: 28px; font-weight: 900; line-height: 1; }
.stat-unit { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.stat-lbl  { font-size: 12px; color: var(--text-2); margin-top: 6px; }

::-webkit-scrollbar { width: 0; }