:root{
  --bg:#08090e; --bg2:#0d0f17; --surface:#151824; --surface2:#1c2130; --surface3:#252b3c;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --txt:#f5f7fc; --muted:#8b93a8; --muted2:#5f6678;
  --brand:#6c5cff; --brand2:#a855f7; --brand3:#4f7cff;
  --grad:linear-gradient(135deg,#6c5cff 0%,#a855f7 100%);
  --grad-hero:linear-gradient(140deg,#5c6bff 0%,#8b5cff 48%,#c04bd8 100%);
  --grad-lime:linear-gradient(135deg,#34e39b,#7cf25e);
  --lime:#7cf25e; --green:#34e39b; --orange:#ff8a3d; --gold:#ffcc4d; --red:#ff5a6a; --pink:#ff5c8a;
  --radius:20px; --radius-sm:14px;
  --c-legs:#ff8a3d; --c-push:#6c8bff; --c-pull:#34e39b; --c-arms:#ff5c8a; --c-core:#ffcc4d;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.45; letter-spacing:-.01em;
  padding:0 0 calc(86px + env(safe-area-inset-bottom)) 0; padding-top:env(safe-area-inset-top);
  background-image:radial-gradient(120% 60% at 50% -10%, rgba(108,92,255,.18), transparent 60%);
  background-attachment:fixed;
}
::-webkit-scrollbar{width:0;height:0;}

header{position:sticky; top:0; z-index:20; background:linear-gradient(180deg,rgba(8,9,14,.9),rgba(8,9,14,.55) 70%,transparent); backdrop-filter:blur(8px); padding:16px 18px 12px; display:flex; align-items:center; gap:10px;}
header h1{font-size:20px; margin:0; font-weight:800; flex:1; letter-spacing:-.02em;}
.pill{background:var(--grad); color:#fff; font-size:12px; padding:4px 11px; border-radius:99px; font-weight:700; box-shadow:0 4px 14px rgba(108,92,255,.4);}
main{padding:4px 16px; max-width:640px; margin:0 auto;}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:14px; box-shadow:0 6px 22px rgba(0,0,0,.28); animation:fadeUp .38s cubic-bezier(.2,.7,.3,1) both;}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
h2{font-size:17px; margin:0 0 12px; font-weight:800; letter-spacing:-.02em;}
h3{font-size:15px; margin:0; font-weight:700;}
.muted{color:var(--muted); font-size:13px;}
.row{display:flex; gap:8px; align-items:center;}
.spread{display:flex; justify-content:space-between; align-items:center; gap:8px;}

.btn{border:none; border-radius:15px; padding:15px 18px; font-size:16px; font-weight:800; letter-spacing:-.01em; background:var(--grad); color:#fff; cursor:pointer; width:100%; transition:transform .12s, box-shadow .2s; box-shadow:0 8px 22px rgba(108,92,255,.4);}
.btn:active{transform:scale(.97);}
.btn.sec{background:var(--surface2); color:var(--txt); border:1px solid var(--line2); box-shadow:none;}
.btn.ghost{background:transparent; color:var(--muted); border:1px solid var(--line2); box-shadow:none;}
.btn.sm{padding:10px 14px; font-size:14px; width:auto; border-radius:12px;}
.btn.good{background:var(--grad-lime); color:#04210f; box-shadow:0 8px 22px rgba(52,227,155,.35);}
.btn.danger{background:transparent; color:var(--red); border:1px solid rgba(255,90,106,.5); box-shadow:none;}

/* ===== HERO ===== */
.hero{position:relative; overflow:hidden; border-radius:24px; padding:22px; margin-bottom:16px; background:var(--grad-hero); color:#fff; box-shadow:0 14px 40px rgba(124,60,220,.45); animation:fadeUp .4s both;}
.hero::after{content:""; position:absolute; right:-40px; top:-60px; width:200px; height:200px; background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%);}
.hero .greet{font-size:14px; font-weight:600; opacity:.9;}
.hero .htitle{font-size:26px; font-weight:900; letter-spacing:-.03em; margin:2px 0 4px; line-height:1.1;}
.hero .hsub{font-size:13.5px; opacity:.92;}
.hero .herorow{display:flex; align-items:center; gap:18px; position:relative; z-index:1;}
.hero .herocol{flex:1;}
.hero .btn{background:rgba(255,255,255,.16); backdrop-filter:blur(4px); box-shadow:none; border:1px solid rgba(255,255,255,.25); margin-top:14px;}
.hero .btn.solid{background:#fff; color:#5b2bd0;}
.ring{width:92px; height:92px; flex:0 0 auto;}
.ring .track{fill:none; stroke:rgba(255,255,255,.22); stroke-width:9;}
.ring .prog{fill:none; stroke:#fff; stroke-width:9; stroke-linecap:round; transform:rotate(-90deg); transform-origin:center; transition:stroke-dashoffset .5s cubic-bezier(.2,.7,.3,1);}
.ring text{fill:#fff; font-weight:900; font-size:22px; text-anchor:middle; dominant-baseline:central;}
.ring tspan.u{font-size:10px; font-weight:700; fill:rgba(255,255,255,.8);}

/* ===== DAY CHIPS ===== */
.daycard{padding:14px 16px;}
.daylabel{font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px;}
.daychip{display:flex; flex-direction:column; gap:3px; text-align:left; background:var(--surface2); border:1.5px solid var(--line); border-radius:15px; padding:12px 14px; cursor:pointer; flex:1; min-width:120px; transition:transform .12s, border-color .2s;}
.daychip:active{transform:scale(.97);}
.daychip.active{border-color:transparent; background:var(--grad); color:#fff; box-shadow:0 8px 20px rgba(108,92,255,.4);}
.daychip.active .muted{color:rgba(255,255,255,.85);}
.daychip b{font-size:16px; font-weight:800;}

/* ===== EXERCISE CARD ===== */
.ex{position:relative; border:1px solid var(--line); border-radius:18px; padding:16px 16px 16px 18px; margin-bottom:14px; background:var(--surface); overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.25); animation:fadeUp .35s both;}
.ex::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--accentcol,var(--brand));}
.ex .name{font-weight:800; font-size:17px; letter-spacing:-.02em;}
.tag{font-size:11px; color:var(--muted); background:var(--surface2); border:1px solid var(--line); padding:3px 8px; border-radius:8px; font-weight:600;}
.rec{background:rgba(108,92,255,.14); border:1px solid rgba(108,92,255,.35); color:#d7d2ff; border-radius:12px; padding:10px 12px; font-size:13px; margin:11px 0; font-weight:500;}
.rec.up{background:rgba(52,227,155,.14); border-color:rgba(52,227,155,.4); color:#b6f5da;}
.last{font-size:12px; color:var(--muted); margin:7px 0 2px;}

.setrow{display:grid; grid-template-columns:22px 1fr 1fr 42px 26px; gap:7px; align-items:center; margin-top:9px;}
.setrow .sn{color:var(--muted); font-size:14px; font-weight:700; text-align:center;}
.setrow.done input{border-color:rgba(52,227,155,.5); background:rgba(52,227,155,.09); color:#d8ffec;}
input,select{width:100%; background:var(--bg2); border:1.5px solid var(--line); color:var(--txt); border-radius:13px; padding:13px 8px; font-size:16px; font-weight:600; text-align:center; transition:border-color .15s;}
input:focus,select:focus{outline:none; border-color:var(--brand);}
.lbl{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; text-align:center; margin-bottom:3px; font-weight:600;}
.chk{width:42px; height:46px; border:1.5px solid var(--line); border-radius:13px; background:var(--bg2); color:var(--muted2); font-size:19px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .12s, background .2s;}
.chk.on{background:var(--grad-lime); border-color:transparent; color:#04210f; animation:pop .3s;}
@keyframes pop{0%{transform:scale(.8);}50%{transform:scale(1.18);}100%{transform:scale(1);}}
.xbtn{background:transparent; border:none; color:var(--red); font-size:20px; cursor:pointer; padding:0; opacity:.7;}
.addset{color:var(--brand); background:transparent; border:1.5px dashed var(--line2); border-radius:13px; padding:11px; width:100%; margin-top:10px; font-size:14px; font-weight:700; cursor:pointer;}
.addset:active{transform:scale(.98);}

/* ===== NAV ===== */
nav{position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex; background:rgba(13,15,23,.86); backdrop-filter:blur(18px); border-top:1px solid var(--line); padding:8px 6px calc(8px + env(safe-area-inset-bottom));}
nav button{flex:1; background:transparent; border:none; color:var(--muted2); padding:7px 2px 5px; font-size:10px; font-weight:700; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; transition:color .2s;}
nav button .ic{font-size:21px; width:44px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:12px; transition:background .25s, transform .2s;}
nav button.active{color:var(--txt);}
nav button.active .ic{background:var(--grad); transform:translateY(-2px); box-shadow:0 6px 16px rgba(108,92,255,.5);}

.hidden{display:none !important;}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(96px + env(safe-area-inset-bottom)); background:var(--grad-lime); color:#04210f; padding:13px 22px; border-radius:99px; font-weight:800; z-index:99; box-shadow:0 10px 30px rgba(0,0,0,.5); max-width:90%; text-align:center; animation:toastIn .3s;}
.toast.pr{background:linear-gradient(135deg,#ffcc4d,#ff8a3d); color:#3a2400;}
@keyframes toastIn{from{opacity:0; transform:translate(-50%,14px);} to{opacity:1; transform:translate(-50%,0);}}

.empty{text-align:center; color:var(--muted); padding:34px 10px; font-size:14px;}
.badge{font-size:11px; padding:3px 9px; border-radius:8px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;}
.b-legs{background:rgba(255,138,61,.16); color:#ffb27a;}
.b-push{background:rgba(108,139,255,.16); color:#aebfff;}
.b-pull{background:rgba(52,227,155,.16); color:#8ef0c6;}
.b-arms{background:rgba(255,92,138,.16); color:#ff9db9;}
.b-core{background:rgba(255,204,77,.16); color:#ffe09a;}

/* ===== REST TIMER ===== */
.resttimer{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom)); width:min(600px,92%); background:linear-gradient(135deg,var(--surface2),var(--surface3)); border:1px solid var(--brand); border-radius:18px; padding:12px 14px; z-index:40; display:flex; align-items:center; gap:11px; box-shadow:0 12px 36px rgba(0,0,0,.6); animation:toastIn .3s;}
.resttimer .t{font-size:24px; font-weight:900; font-variant-numeric:tabular-nums; min-width:66px; letter-spacing:-.02em;}
.resttimer .bar{flex:1; height:7px; background:var(--line2); border-radius:5px; overflow:hidden;}
.resttimer .bar i{display:block; height:100%; background:var(--grad); width:100%; transition:width 1s linear;}
.resttimer button{background:var(--bg2); border:1px solid var(--line2); color:var(--txt); border-radius:11px; padding:9px 11px; font-size:13px; font-weight:800; cursor:pointer;}

/* ===== STATS ===== */
.statgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.stat{position:relative; background:var(--surface2); border:1px solid var(--line); border-radius:18px; padding:16px; overflow:hidden;}
.stat .ico{width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:10px;}
.stat .n{font-size:28px; font-weight:900; line-height:1; letter-spacing:-.03em;}
.stat .l{font-size:12px; color:var(--muted); margin-top:6px; font-weight:600;}
.i-violet{background:rgba(108,92,255,.18);} .i-orange{background:rgba(255,138,61,.18);} .i-green{background:rgba(52,227,155,.18);} .i-gold{background:rgba(255,204,77,.18);}
.heat{display:flex; gap:5px; overflow-x:auto; padding-bottom:4px;}
.heat .wk{display:flex; flex-direction:column; gap:5px;}
.heat .d{width:16px; height:16px; border-radius:5px; background:var(--surface2); border:1px solid var(--line);}
.heat .d.on{background:var(--grad); border-color:transparent; box-shadow:0 2px 8px rgba(108,92,255,.4);}
.heat .d.today{outline:2px solid var(--gold); outline-offset:1px;}
.prrow{display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); gap:8px;}
.prrow:last-child{border-bottom:none;}
.prrow .v{text-align:right; font-size:13px; color:var(--muted);}
.prrow .v b{font-size:17px; color:var(--txt); font-weight:900; letter-spacing:-.02em;}

/* ===== CHARTS ===== */
.chart{width:100%; height:170px; display:block;}
.chart .cl{stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.chart .cd{fill:#fff; stroke:var(--brand); stroke-width:2.5;}
.chart .cax{stroke:var(--line); stroke-width:1;}
.chart text{fill:var(--muted2); font-size:10px; font-weight:600;}
.histbar{height:9px; border-radius:5px; background:var(--grad); min-width:5px;}

/* ===== FORMS ===== */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}
label.field{display:block;}
label.field .lbl{text-align:left;}
input[type=text]{text-align:left;}
input[type=checkbox]{width:52px; height:30px; appearance:none; -webkit-appearance:none; background:var(--surface3); border-radius:99px; position:relative; cursor:pointer; transition:background .2s; border:none;}
input[type=checkbox]:checked{background:var(--grad);}
input[type=checkbox]::after{content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:transform .2s;}
input[type=checkbox]:checked::after{transform:translateX(22px);}
details summary{cursor:pointer; font-weight:800; padding:8px 0; font-size:15px;}
.settingsex{display:grid; grid-template-columns:1fr; gap:8px; border-bottom:1px solid var(--line); padding:14px 0;}
.seg{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px;}
.seg button{flex:1; min-width:70px; background:var(--surface2); border:1px solid var(--line); color:var(--muted); padding:9px; border-radius:11px; font-size:13px; font-weight:700; cursor:pointer; transition:.2s;}
.seg button.active{background:var(--grad); border-color:transparent; color:#fff;}

/* ===== CONFETTI ===== */
#confetti{position:fixed; inset:0; pointer-events:none; z-index:200; overflow:hidden;}
#confetti i{position:absolute; top:-20px; width:10px; height:14px; border-radius:2px; animation:fall linear forwards;}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg); opacity:.9;}}

.viewtitle{font-size:24px; font-weight:900; letter-spacing:-.03em; margin:8px 2px 14px;}

/* Ausführ-Video */
.videowrap{margin-top:10px;}
.videobtn{display:inline-flex; align-items:center; gap:6px; background:rgba(255,92,138,.14); border:1px solid rgba(255,92,138,.4); color:#ff9db9; border-radius:10px; padding:8px 12px; font-size:13px; font-weight:700; cursor:pointer;}
.videobtn:active{transform:scale(.97);}
.vframe{overflow:hidden; max-height:0; transition:max-height .35s ease; border-radius:12px; margin-top:0;}
.videowrap.open .vframe{max-height:260px; margin-top:10px;}
.vframe iframe{width:100%; aspect-ratio:16/9; border:0; display:block; border-radius:12px; background:#000;}

/* ===== SPLASH (Öffnungs-Animation) ===== */
#splash{position:fixed; inset:0; z-index:1000; background:radial-gradient(120% 80% at 50% 38%, #17090c 0%, #0a0406 55%, #000 100%); display:flex; align-items:center; justify-content:center; overflow:hidden; transition:opacity .55s ease;}
#splash.fade-out{opacity:0; pointer-events:none;}
#splash .figwrap{position:relative; width:64%; max-width:340px; height:78%; display:flex; align-items:center; justify-content:center;}
#splash svg{width:100%; height:100%;}
#splash .m{--mdark:#3a0707; --m:#8d1414; --mmid:#b11d1d; --mhi:#df3838; --glow:#ff4242; opacity:.14; animation:revealOnce 1s forwards; animation-delay:calc(var(--v,0)*1.7s);}
@keyframes revealOnce{0%{opacity:.14; filter:brightness(.5);}40%{opacity:1; filter:brightness(2) drop-shadow(0 0 7px #ff4242);}100%{opacity:1; filter:brightness(1.05) drop-shadow(0 0 3px rgba(255,60,60,.5));}}
#splash .scanbar{position:absolute; left:-6%; right:-6%; height:5px; z-index:3; border-radius:5px; background:linear-gradient(90deg,transparent,rgba(255,80,80,.6) 20%,#fff 50%,rgba(255,80,80,.6) 80%,transparent); box-shadow:0 0 26px 7px rgba(255,60,60,.75); top:6%; opacity:0; animation:scanOnce 2.4s forwards;}
@keyframes scanOnce{0%{top:6%; opacity:0;}6%{opacity:1;}85%{opacity:1; top:90%;}100%{top:92%; opacity:0;}}
#splash .logo{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:4; opacity:0; transform:translateY(14px) scale(.96); transition:opacity .6s ease, transform .6s ease;}
#splash.show-logo .logo{opacity:1; transform:none;}
#splash.show-logo .m{filter:brightness(.55) !important; transition:filter .6s;}
#splash .logo b{font-size:40px; font-weight:900; letter-spacing:1px; background:linear-gradient(135deg,#8b7bff,#c04bd8); -webkit-background-clip:text; background-clip:text; color:transparent;}
#splash .logo span{font-size:13px; letter-spacing:5px; color:#c9b8ff; margin-top:7px; text-transform:uppercase;}
#splash .skip{position:absolute; bottom:26px; left:0; right:0; text-align:center; color:#5f6678; font-size:12px; z-index:5;}
@media (prefers-reduced-motion: reduce){ #splash .m{animation:none; opacity:1;} #splash .scanbar{display:none;} }

/* 3D-Modell-Splash */
#splash model-viewer{width:100%; height:100%; background:transparent; --poster-color:transparent; opacity:0; transition:opacity .8s ease;}
#splash.show-model model-viewer{opacity:1;}
#splash.show-logo model-viewer{filter:brightness(.5); transition:filter .6s;}
#splash .sload{position:absolute; bottom:32%; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:12px; color:#c9b8ff; font-size:13px; letter-spacing:2px; text-transform:uppercase; z-index:2;}
#splash .spinner{width:36px; height:36px; border-radius:50%; border:3px solid rgba(255,255,255,.14); border-top-color:#8b7bff; animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===== AUTH ===== */
#auth{position:fixed; inset:0; z-index:900; background:radial-gradient(120% 70% at 50% 0%, rgba(108,92,255,.2), transparent 55%), var(--bg); display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto;}
.authbox{width:100%; max-width:400px;}
.authlogo{text-align:center; margin-bottom:22px;}
.authlogo b{font-size:34px; font-weight:900; letter-spacing:1px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; display:block;}
.authlogo span{font-size:12px; letter-spacing:4px; color:var(--muted); text-transform:uppercase;}
.authtabs{margin-bottom:16px;}
#auth form{display:flex; flex-direction:column; gap:11px;}
#auth input{text-align:left; padding:15px 14px;}
.genderpick{display:flex; gap:10px;}
.genderpick button{flex:1; background:var(--surface2); border:1.5px solid var(--line); color:var(--muted); padding:14px; border-radius:13px; font-size:15px; font-weight:700; cursor:pointer;}
.genderpick button.active{background:var(--grad); border-color:transparent; color:#fff;}
.autherr{background:rgba(255,90,106,.14); border:1px solid rgba(255,90,106,.4); color:#ffb0b6; padding:11px 13px; border-radius:12px; font-size:13.5px; margin-bottom:14px; font-weight:600;}

/* ===== COMMUNITY ===== */
.feedcard{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:15px; margin-bottom:12px; box-shadow:0 4px 16px rgba(0,0,0,.22);}
.feedhead{display:flex; align-items:center; gap:11px; margin-bottom:11px;}
.avatar{width:42px; height:42px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:#fff; flex:0 0 auto;}
.feedhead b{font-size:15px; display:block;}
.feedstats{display:flex; gap:14px; padding:10px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:13px;}
.feedstats b{font-weight:800; color:var(--txt);}
.feedactions{display:flex; align-items:center; gap:14px; margin-top:11px;}
.likebtn{background:var(--surface2); border:1px solid var(--line); color:var(--muted); border-radius:99px; padding:8px 14px; font-size:14px; font-weight:700; cursor:pointer; transition:.15s;}
.likebtn:active{transform:scale(.94);}
.likebtn.on{background:rgba(255,92,138,.18); border-color:rgba(255,92,138,.5); color:#ff8fb0;}
.comments{margin-top:11px; display:flex; flex-direction:column; gap:6px;}
.cmt{font-size:13.5px;} .cmt b{font-weight:700;}
.addcomment{display:flex; gap:8px; margin-top:10px;}
.addcomment input{flex:1; text-align:left; padding:11px 12px; font-size:14px;}
.addcomment button{background:var(--grad); border:none; color:#fff; border-radius:12px; padding:0 16px; font-weight:800; cursor:pointer;}
.ranklist{display:flex; flex-direction:column;}
.rankrow{display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line);}
.rankrow:last-child{border-bottom:none;}
.rankrow .medal{font-size:20px; width:28px; text-align:center;}
.rankrow .rname{flex:1; font-weight:700;}
.rankrow .rval{font-weight:900; font-size:16px; letter-spacing:-.02em;}
.rankrow.me{background:rgba(108,92,255,.1); margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:10px;}
.friendrow{display:flex; align-items:center; gap:12px; padding:14px; background:var(--surface2); border:1px solid var(--line); border-radius:14px; margin-bottom:10px; cursor:pointer;}
.friendrow b{flex:1; font-weight:700;}
.fw{font-size:13px; color:var(--muted); padding:8px 0; border-top:1px solid var(--line);}
.fw b{color:var(--txt);}