:root { --bg:#0f172a; --card:#1e293b; --card2:#273449; --text:#e2e8f0; --muted:#94a3b8; --line:rgba(148,163,184,.18);
  --accent:#38bdf8; --accent2:#a78bfa; --ok:#4ade80; --warn:#fbbf24; --bad:#f87171; --run:#a78bfa; --bike:#38bdf8; --strength:#4ade80; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
a { color:var(--accent); text-decoration:none; }
h1 { font-size:1.5rem; margin:8px 0 12px; }
h2 { font-size:1.1rem; margin:0 0 10px; }
h3,h4 { margin:12px 0 6px; font-size:1rem; }
p { margin:6px 0; }
.wrap { max-width:720px; margin:0 auto; padding:12px 16px; }
.top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top)) 16px 10px; background:rgba(15,23,42,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.brand { font-weight:700; color:var(--text); font-size:1.1rem; }
.who { color:var(--muted); margin-left:auto; }
.spin { width:14px; height:14px; border:2px solid var(--accent); border-top-color:transparent; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg);} }
.card { background:var(--card); border-radius:16px; padding:16px; margin:12px 0; box-shadow:0 1px 0 var(--line); }
.card.center { text-align:center; }
.card.danger summary { color:var(--bad); }
details.card summary { cursor:pointer; font-weight:600; }
.muted { color:var(--muted); } .small { font-size:.85rem; } .center { text-align:center; }
.eyebrow { text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; color:var(--muted); }
.row-between { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.link { color:var(--accent); font-size:.9rem; }
.btn { display:inline-block; background:var(--card2); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:10px 16px; font-size:1rem; cursor:pointer; }
.btn.primary { background:var(--accent); color:#0f172a; border-color:transparent; font-weight:700; }
.btn.small { padding:6px 12px; font-size:.9rem; }
.btn.wide { width:100%; }
.flash { padding:10px 14px; border-radius:12px; margin:8px 0; background:var(--card2); border-left:4px solid var(--accent); }
.flash.error { border-left-color:var(--bad); } .flash.ok { border-left-color:var(--ok); }
.login { max-width:380px; margin:48px auto; text-align:center; }
.login form { text-align:left; }
label { display:block; margin:10px 0; font-size:.9rem; color:var(--muted); }
input, textarea, select, button { font-family:inherit; }
input, textarea, select { width:100%; margin-top:4px; padding:10px 12px; font-size:1rem; border-radius:10px; border:1px solid var(--line); background:#0b1220; color:var(--text); }
textarea { resize:vertical; }
input[type=checkbox] { width:auto; margin-right:8px; }
form .btn { margin-top:8px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px; margin:10px 0; }
.tiles.four { grid-template-columns:repeat(2, 1fr); }
@media (min-width:520px) { .tiles.four { grid-template-columns:repeat(3, 1fr);} }
.tile { background:var(--card2); border-radius:12px; padding:12px; text-align:center; }
.tile .v { font-size:1.35rem; font-weight:700; }
.tile .l { font-size:.78rem; color:var(--muted); margin-top:2px; }
.tile.status-auf-Kurs .v { color:var(--ok); } .tile.status-knapp .v { color:var(--warn);} .tile.status-ambitioniert .v { color:var(--bad);}
.big { font-size:1.6rem; font-weight:700; }
.sep { color:var(--muted); margin:0 4px; }
.goal-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.countdown { text-align:center; background:var(--card2); border-radius:14px; padding:8px 14px; min-width:84px; }
.countdown .big { display:block; line-height:1.1; color:var(--accent); font-size:2rem; }
.countdown .small { color:var(--muted); }
.progress { height:8px; background:#0b1220; border-radius:6px; overflow:hidden; margin:6px 0 4px; }
.progress div { height:100%; background:linear-gradient(90deg, var(--accent), var(--accent2)); border-radius:6px; transition:width .4s; max-width:100%; }
.sessions { list-style:none; padding:0; margin:10px 0 0; }
.sessions .s { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line); }
.sessions .s:first-child { border-top:none; }
.check { flex:0 0 30px; width:30px; height:30px; border-radius:50%; border:2px solid var(--muted); background:transparent; color:#0f172a; font-weight:700; cursor:pointer; font-size:1rem; }
.s.run .check { border-color:var(--run);} .s.bike .check { border-color:var(--bike);} .s.strength .check { border-color:var(--strength);} .s.race .check { border-color:var(--warn);}
.s.done .check { background:var(--ok); border-color:var(--ok); }
.s.done .s-title { text-decoration:line-through; color:var(--muted); }
.s.past .s-title { color:var(--muted); }
.s-title .day { display:inline-block; min-width:62px; color:var(--muted); font-size:.85rem; }
.s-detail, .s-actual { font-size:.85rem; color:var(--muted); margin-top:2px; }
.s-actual { color:var(--ok); }
.s-body { flex:1; min-width:0; }
.s-actions { font-size:.8rem; margin-top:4px; }
.run-card { display:block; background:var(--card2); border-radius:12px; padding:12px; color:var(--text); }
.rc-date { color:var(--muted); font-size:.85rem; }
.rc-main { margin:4px 0; }
.rc-meta { color:var(--muted); font-size:.85rem; }
.badge { display:inline-block; font-size:.72rem; padding:2px 8px; border-radius:999px; background:var(--card2); border:1px solid var(--line); vertical-align:middle; }
.badge.q-gut { color:var(--ok); border-color:var(--ok);} .badge.q-eingeschränkt { color:var(--warn); border-color:var(--warn);} .badge.q-lückenhaft { color:var(--warn); border-color:var(--warn);} .badge.q-unbrauchbar, .badge.q-keine-HF { color:var(--bad); border-color:var(--bad);}
.analysis { line-height:1.5; }
.analysis h3, .analysis h4 { color:var(--accent); font-size:.95rem; margin:14px 0 4px; }
.analysis ul { padding-left:18px; margin:4px 0; }
.analysis.preview { max-height:220px; overflow:hidden; position:relative; }
.analysis.preview .link { position:absolute; bottom:0; right:0; left:0; padding:30px 0 0; background:linear-gradient(transparent, var(--card) 60%); }
.runlist { list-style:none; padding:0; margin:0; }
.runlist li a { display:grid; grid-template-columns:96px 1fr; gap:4px 12px; padding:10px 0; border-top:1px solid var(--line); color:var(--text); }
.runlist li:first-child a { border-top:none; }
.rl-date { color:var(--muted); font-size:.85rem; grid-row:span 2; }
.rl-bar { height:6px; background:#0b1220; border-radius:4px; overflow:hidden; }
.rl-bar div { height:100%; background:var(--run); border-radius:4px; }
.rl-main { font-size:.95rem; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-left:6px; }
table.splits { width:100%; border-collapse:collapse; font-size:.92rem; }
table.splits th, table.splits td { padding:6px 4px; text-align:right; border-bottom:1px solid var(--line); }
table.splits th:first-child, table.splits td:first-child { text-align:left; }
table.splits tr.weak td { color:var(--muted); }
table.plain { width:100%; border-collapse:collapse; font-size:.92rem; }
table.plain th, table.plain td { padding:7px 6px; text-align:left; border-bottom:1px solid var(--line); }
table.plain td.num, table.plain th.num { text-align:right; }
.ach-list { list-style:none; padding:0; margin:8px 0; }
.ach-list li { display:flex; gap:12px; align-items:center; padding:8px 0; border-top:1px solid var(--line); }
.ach-list li:first-child { border-top:none; }
.ach-list.inline li { padding:4px 0; }
.medal { flex:0 0 36px; width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, #fbbf24, #f59e0b); color:#1e293b; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.celebrate { background:linear-gradient(135deg, #1e293b, #312e81); border:1px solid rgba(167,139,250,.5); }
.tabs { position:fixed; bottom:0; left:0; right:0; display:flex; background:rgba(15,23,42,.96); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); z-index:5; }
.tabs a { flex:1; text-align:center; padding:8px 0 6px; color:var(--muted); font-size:.72rem; }
.tabs a .ic { display:block; font-size:1.25rem; line-height:1.2; }
.tabs a.on { color:var(--accent); }
.chat { display:flex; flex-direction:column; gap:10px; }
.msg { max-width:92%; padding:10px 14px; border-radius:16px; line-height:1.45; }
.msg.user { align-self:flex-end; background:#1d4ed8; color:#fff; border-bottom-right-radius:4px; }
.msg.trainer { align-self:flex-start; background:var(--card); border-bottom-left-radius:4px; }
.msg.pending { opacity:.6; font-style:italic; }
.msg .t { font-size:.72rem; color:var(--muted); margin-top:4px; }
.msg.user .t { color:rgba(255,255,255,.7); }
.chatform { position:sticky; bottom:calc(64px + env(safe-area-inset-bottom)); display:flex; gap:8px; background:var(--bg); padding:8px 0; }
.chatform textarea { flex:1; margin:0; min-height:44px; }
.chatform .btn { margin:0; }
.week-nav { display:flex; justify-content:space-between; align-items:center; margin:4px 0 8px; }
.day { }
.dayhead { display:flex; justify-content:space-between; color:var(--muted); font-size:.85rem; margin-top:12px; padding-top:8px; border-top:1px solid var(--line); }
.dayhead.today { color:var(--accent); font-weight:700; }
.extra-run { font-size:.9rem; color:var(--run); padding:6px 0 0 42px; }
.overview td.cur { color:var(--accent); font-weight:700; }
.goal-item { padding:10px 0; border-top:1px solid var(--line); }
.goal-item:first-child { border-top:none; }
.kind-run { color:var(--run);} .kind-bike { color:var(--bike);} .kind-strength { color:var(--strength);} .kind-race { color:var(--warn);}
code { background:#0b1220; padding:2px 6px; border-radius:6px; font-size:.85rem; word-break:break-all; }
pre { background:#0b1220; padding:10px; border-radius:10px; overflow:auto; font-size:.8rem; }
@media (prefers-color-scheme: light) {
  :root { --bg:#f1f5f9; --card:#ffffff; --card2:#e2e8f0; --text:#0f172a; --muted:#475569; --line:rgba(15,23,42,.1); }
  .top { background:rgba(241,245,249,.9); } .tabs { background:rgba(241,245,249,.97); }
  input, textarea, select, .progress, .rl-bar, code, pre { background:#f8fafc; }
  .msg.trainer { background:#fff; } .celebrate { background:linear-gradient(135deg, #fff, #ede9fe); }
  .countdown .big { color:#0284c7; }
}