/* MOVKEY – Premium Styles V2 */
:root{
  --bg:#0a0b0e;--bg2:#11131a;--bg3:#161822;--card:rgba(18,20,28,.55);--card-h:rgba(22,24,34,.7);
  --border:rgba(255,255,255,.07);--border-h:rgba(255,255,255,.15);
  --prim:hsl(262,100%,70%);--prim-d:hsl(262,80%,55%);--prim-g:rgba(124,77,255,.3);--prim-bg:rgba(124,77,255,.08);
  --ok:hsl(150,100%,45%);--ok-g:rgba(0,230,118,.25);--ok-bg:rgba(0,230,118,.08);
  --warn:hsl(35,100%,55%);--warn-g:rgba(255,171,0,.25);--warn-bg:rgba(255,171,0,.08);
  --danger:hsl(345,100%,60%);--danger-g:rgba(255,23,68,.3);--danger-bg:rgba(255,23,68,.08);
  --info:hsl(210,100%,60%);--info-g:rgba(33,150,243,.25);
  --txt:#f3f4f6;--txt2:#9ca3af;--txt3:#6b7280;
  --input-bg:#1c1f2a;
  --r:16px;--r2:12px;--r3:8px;--font:'Inter','Outfit',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --shadow:0 8px 32px rgba(0,0,0,.3);--shadow-lg:0 20px 60px rgba(0,0,0,.5);
  --transition:all .25s cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--font);min-height:100vh;
  min-height:100dvh;overflow-x:hidden;display:flex;flex-direction:column}
a{color:var(--prim);text-decoration:none;transition:color .2s}
a:hover{color:hsl(262,100%,80%)}
::selection{background:rgba(124,77,255,.3);color:#fff}

/* Background Glows */
.glow1,.glow2,.glow3{position:fixed;width:500px;height:500px;border-radius:50%;z-index:-1;
  pointer-events:none;filter:blur(120px);opacity:.5}
.glow1{background:radial-gradient(circle,var(--prim-g),transparent 70%);top:-150px;left:-150px;
  animation:glowFloat 20s ease-in-out infinite}
.glow2{background:radial-gradient(circle,var(--ok-g),transparent 70%);bottom:-150px;right:-150px;
  animation:glowFloat 25s ease-in-out infinite reverse}
.glow3{background:radial-gradient(circle,var(--warn-g),transparent 70%);top:40%;left:60%;width:400px;height:400px;
  animation:glowFloat 30s ease-in-out infinite 5s}
@keyframes glowFloat{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(30px,-20px)}
  50%{transform:translate(-20px,30px)}
  75%{transform:translate(20px,20px)}
}

/* Utility */
.hidden{display:none!important}
.flex{display:flex}.col{flex-direction:column}.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}
.center{align-items:center;justify-content:center}.wrap{flex-wrap:wrap}
.grow{flex:1}.shrink0{flex-shrink:0}.w100{width:100%}.tac{text-align:center}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}

/* Loading Spinner */
.loader{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--prim);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Logo – fixed brand gradient (theme-independent, readable on light & dark) */
.logo-animated{font-size:3rem;font-weight:800;
  background:linear-gradient(120deg,#7c4dff 0%,#9d6bff 45%,#00c853 100%);
  background-size:200% 200%;animation:gradientShift 4s ease infinite;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-1px}
@keyframes gradientShift{
  0%,100%{background-position:0% 50%}50%{background-position:100% 50%}
}

/* Screen container with transition */
#app{flex:1;display:flex;flex-direction:column;max-width:600px;margin:0 auto;width:100%;
  padding:16px 16px 80px;position:relative;animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:768px){#app{max-width:900px;padding:32px 32px 40px}}
@media(min-width:1200px){#app{max-width:1100px}}

/* Cards - Premium Glass */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:20px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:var(--transition);box-shadow:var(--shadow);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;inset:0;border-radius:var(--r);
  background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 50%);pointer-events:none}
.card:hover{border-color:var(--border-h);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.card-title{font-size:1.15rem;font-weight:700;margin-bottom:16px;display:flex;
  align-items:center;gap:10px;position:relative}
.card-title .icon{font-size:1.3rem}

/* Buttons - Premium */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--r3);border:1px solid var(--border);
  background:rgba(255,255,255,.04);color:var(--txt);font-family:var(--font);
  font-weight:600;font-size:.95rem;cursor:pointer;transition:var(--transition);
  text-decoration:none;position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,
  rgba(255,255,255,.1) 0%,transparent 50%);opacity:0;transition:opacity .2s}
.btn:hover{background:rgba(255,255,255,.08);border-color:var(--border-h);transform:translateY(-1px)}
.btn:hover::after{opacity:1}
.btn:active{transform:scale(.97);transition-duration:.1s}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-sm{padding:8px 14px;font-size:.85rem}
.btn-prim{background:linear-gradient(135deg,var(--prim),var(--prim-d));
  border-color:var(--prim);color:#fff;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.btn-prim:hover{background:linear-gradient(135deg,hsl(262,100%,75%),var(--prim));
  box-shadow:0 4px 20px var(--prim-g);transform:translateY(-2px)}
.btn-ok{background:linear-gradient(135deg,var(--ok),hsl(150,80%,40%));
  border-color:var(--ok);color:#000;font-weight:700}
.btn-ok:hover{box-shadow:0 4px 20px var(--ok-g);transform:translateY(-2px)}
.btn-danger{background:linear-gradient(135deg,var(--danger),hsl(345,80%,50%));
  border-color:var(--danger);color:#fff;font-weight:700}
.btn-danger:hover{box-shadow:0 4px 20px var(--danger-g);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.05)}
.btn-block{width:100%}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}

/* Forms - Premium */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-group label{font-size:.85rem;font-weight:600;color:var(--txt2);letter-spacing:.3px}
.form-row{display:flex;gap:10px}
.form-row .form-group{flex:1;min-width:0}
.pw-meter{height:5px;border-radius:3px;background:var(--bg3);overflow:hidden;margin-top:6px}
.pw-meter-fill{height:100%;width:0;border-radius:3px;background:var(--danger);transition:width .25s,background .25s}
input,select,textarea{background:var(--input-bg);border:1px solid var(--border-h);
  border-radius:var(--r3);padding:12px 14px;color:var(--txt);font-family:var(--font);
  font-size:.95rem;transition:var(--transition);width:100%}
select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--txt2) 50%),linear-gradient(135deg,var(--txt2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--prim);
  background-color:var(--input-bg);box-shadow:0 0 0 3px var(--prim-g)}
input::placeholder,textarea::placeholder{color:var(--txt3)}
select option{background:var(--bg2);color:var(--txt)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.form-row{grid-template-columns:1fr}}

/* Welcome & Auth screens */
.screen-center{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:80vh;gap:24px;text-align:center;padding:24px}
.screen-center .logo{font-size:3.5rem;font-weight:800;
  background:linear-gradient(120deg,#7c4dff 0%,#9d6bff 45%,#00c853 100%);
  background-size:200% 200%;animation:gradientShift 4s ease infinite;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-2px}
.screen-center .subtitle{color:var(--txt2);font-size:1.1rem;margin-top:-8px;font-weight:300}
.auth-card{width:100%;max-width:380px}
.lang-picker{display:flex;gap:12px}
.lang-btn{padding:16px 32px;border-radius:var(--r2);border:2px solid var(--border);
  background:var(--card);backdrop-filter:blur(12px);color:var(--txt);font-size:1.1rem;
  font-weight:600;cursor:pointer;transition:var(--transition);text-align:center;flex:1}
.lang-btn:hover,.lang-btn.active{border-color:var(--prim);background:var(--prim-bg);
  transform:translateY(-2px);box-shadow:0 8px 24px var(--prim-g)}
.lang-btn .flag{font-size:2rem;display:block;margin-bottom:8px}

/* Header */
.header{display:flex;justify-content:space-between;align-items:center;padding:8px 0 16px;
  border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:20px}
.header-brand{font-size:1.4rem;font-weight:800;letter-spacing:-.5px;
  background:linear-gradient(120deg,#7c4dff 0%,#9d6bff 45%,#00c853 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.header-right{display:flex;align-items:center;gap:12px}
.avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:.9rem;color:#000;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.3);transition:var(--transition)}
.avatar:hover{transform:scale(1.1)}

/* Progress Ring SVG - Enhanced */
.ring-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;
  transition:transform .3s ease}
.ring-wrap:hover{transform:scale(1.05)}
.ring-wrap .ring-text{position:absolute;text-align:center}
.ring-wrap .ring-value{font-size:1.6rem;font-weight:800;display:block}
.ring-wrap .ring-label{font-size:.65rem;color:var(--txt2);text-transform:uppercase;
  letter-spacing:.8px;font-weight:600}
.ring-circle-bg{fill:transparent;stroke:rgba(255,255,255,.04);stroke-width:10}
.ring-circle{fill:transparent;stroke-width:10;stroke-linecap:round;
  transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1);
  filter:drop-shadow(0 0 8px var(--ring-glow, rgba(124,77,255,.4)))}

/* Progress Bar - Enhanced */
.pbar-bg{background:rgba(255,255,255,.05);height:10px;border-radius:50px;overflow:hidden;
  border:1px solid rgba(255,255,255,.03);position:relative}
.pbar-fill{height:100%;border-radius:50px;transition:width .8s cubic-bezier(.1,.8,.2,1);
  position:relative}
.pbar-fill::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  animation:shimmer 2s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.pbar-fill.cal{background:linear-gradient(90deg,#ff5722,#ff9800);box-shadow:0 0 12px rgba(255,87,34,.3)}
.pbar-fill.steps{background:linear-gradient(90deg,var(--ok),hsl(140,100%,55%));box-shadow:0 0 12px var(--ok-g)}
.pbar-fill.dist{background:linear-gradient(90deg,#2196f3,#03a9f4);box-shadow:0 0 12px rgba(33,150,243,.3)}
.pbar-fill.exer{background:linear-gradient(90deg,var(--prim),#b388ff);box-shadow:0 0 12px var(--prim-g)}
.pbar-fill.work{background:linear-gradient(90deg,var(--warn),#ffd54f);box-shadow:0 0 12px rgba(255,171,0,.3)}

/* Stat Badges */
.stat-badges{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.stat-badge{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:50px;
  background:rgba(255,255,255,.04);border:1px solid var(--border);font-size:.8rem;
  font-weight:600;color:var(--txt2);transition:var(--transition)}
.stat-badge:hover{border-color:var(--border-h);background:rgba(255,255,255,.06)}

/* Device Cards - Enhanced */
.device-card{border-left:4px solid var(--txt3);position:relative;
  transition:var(--transition)}
.device-card.unlocked{border-left-color:var(--ok);background:linear-gradient(135deg,var(--card) 60%,var(--ok-bg))}
.device-card.locked{border-left-color:var(--danger);background:linear-gradient(135deg,var(--card) 60%,var(--danger-bg))}
.device-card.override,.device-card.holiday{border-left-color:var(--warn);
  background:linear-gradient(135deg,var(--card) 60%,var(--warn-bg))}
.device-card.timed_unlock{border-left-color:var(--prim);
  background:linear-gradient(135deg,var(--card) 60%,var(--prim-bg))}
.device-icon{font-size:2rem;margin-right:12px;transition:transform .3s ease}
.device-card:hover .device-icon{transform:scale(1.15) rotate(-5deg)}
.device-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.device-name{font-weight:700;font-size:1.05rem}
.device-assigned{font-size:.8rem;color:var(--txt2)}
.status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;
  border-radius:50px;font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;transition:var(--transition)}
.status-pill.locked{background:rgba(255,23,68,.12);color:var(--danger)}
.status-pill.unlocked{background:rgba(0,230,118,.12);color:var(--ok)}
.status-pill.override,.status-pill.holiday{background:rgba(255,171,0,.12);color:var(--warn)}
.status-pill.timed_unlock{background:rgba(124,77,255,.12);color:var(--prim)}
.status-dot{width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 8px currentColor;animation:statusPulse 2s ease-in-out infinite}
@keyframes statusPulse{0%,100%{opacity:1;box-shadow:0 0 8px currentColor}
  50%{opacity:.6;box-shadow:0 0 4px currentColor}}

/* Child card */
.child-card{display:flex;gap:16px;align-items:flex-start;transition:var(--transition)}
.child-info{flex:1;min-width:0}
.child-name{font-weight:700;font-size:1.05rem}
.child-meta{font-size:.8rem;color:var(--txt2);margin-top:2px}
.child-prog{margin:6px 0 2px}

/* Device power switch (simple ON/OFF) */
.device-power{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--border)}
.dp-label{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.85rem;color:var(--txt2)}
.dp-lamp{width:11px;height:11px;border-radius:50%;flex:none;background:var(--txt3);transition:background .2s}
.dp-lamp.on{background:var(--ok);box-shadow:0 0 9px var(--ok),0 0 3px var(--ok);animation:lampPulse 2.2s ease-in-out infinite}
.dp-lamp.off{background:#c0392b;opacity:.55;box-shadow:none}
@keyframes lampPulse{0%,100%{opacity:1}50%{opacity:.5}}
.dp-watt{font-family:var(--mono);font-size:.78rem;font-weight:700;color:#ff9800;margin-left:auto}
.dp-state{font-size:.78rem;font-weight:700}
.dp-watt + .dp-state{margin-left:0}
.dp-state:first-of-type{margin-left:auto}
.dp-state.on{color:var(--ok)} .dp-state.off{color:var(--txt3)}
.power-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer;flex:none}
.power-switch input{position:absolute;opacity:0;width:0;height:0}
.power-switch .ps-track{width:50px;height:28px;border-radius:999px;background:var(--bg3);
  border:1px solid var(--border-h);transition:background .2s,border-color .2s;display:block;position:relative}
.power-switch .ps-thumb{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:var(--txt3);transition:transform .22s cubic-bezier(.4,1.3,.6,1),background .2s;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.power-switch.on .ps-track{background:var(--ok);border-color:var(--ok)}
.power-switch.on .ps-thumb{transform:translateX(22px);background:#fff}

/* Known-plug chips (reuse saved smart plugs) */
.plug-chips{display:flex;flex-wrap:wrap;gap:8px}
.plug-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  background:var(--prim-bg);border:1px solid var(--border-h);font-size:.8rem;cursor:pointer;color:var(--txt);
  transition:background .15s,border-color .15s}
.plug-chip:hover{border-color:var(--prim);background:var(--card-h)}
.plug-chip small{color:var(--txt3);font-family:var(--mono)}
.plug-chip-x{color:var(--txt3);font-size:.72rem;margin-left:2px;padding:0 3px;border-radius:50%;cursor:pointer}
.plug-chip-x:hover{color:var(--danger)}

/* First-time onboarding hint popup */
.hint-pop{position:fixed;left:50%;bottom:78px;z-index:300;transform:translate(-50%,20px);
  display:flex;align-items:flex-start;gap:10px;max-width:min(440px,92vw);padding:13px 14px;
  background:var(--bg2);border:1px solid var(--prim);border-radius:14px;box-shadow:var(--shadow-lg);
  opacity:0;transition:opacity .3s ease,transform .3s ease;font-size:.85rem;color:var(--txt);line-height:1.45}
.hint-pop.show{opacity:1;transform:translate(-50%,0)}
.hint-pop .hint-ico{font-size:1.2rem;flex:none;line-height:1.2}
.hint-pop .hint-x{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:1rem;flex:none;padding:0 2px;line-height:1}
.hint-pop .hint-x:hover{color:var(--txt)}
@media(min-width:768px){.hint-pop{bottom:24px}}

/* Workout accordion sections (collapsible cards) */
.wo-section.card{padding:0;overflow:hidden}
.wo-head{display:flex;align-items:center;gap:10px;padding:16px;cursor:pointer;font-weight:700;font-size:1.02rem;user-select:none}
.wo-head .grow{flex:1;display:flex;align-items:center;gap:8px}
.wo-head:hover{background:rgba(255,255,255,.025)}
.wo-section.open .wo-head{border-bottom:1px solid var(--border)}
.wo-caret{color:var(--txt3);font-size:.95rem;flex:none}
.wo-body{padding:14px 16px 16px}
.wo-badge{display:inline-block;background:var(--prim-bg);color:var(--prim);font-size:.72rem;font-weight:700;padding:1px 8px;border-radius:999px}

/* Help & explanations accordion */
.help-item.card{padding:0;overflow:hidden}
.help-q{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;font-weight:600;user-select:none}
.help-q:hover{background:rgba(255,255,255,.025)}
.help-q .help-caret{color:var(--txt3);flex:none}
.help-a{padding:0 16px 16px;font-size:.85rem;color:var(--txt2);line-height:1.55}

/* Achievements – collapsible categories */
.ach-cat{margin-bottom:12px}
.ach-cat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;font-weight:700;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r2);user-select:none;transition:border-color .15s}
.ach-cat-head:hover{border-color:var(--border-h)}
.ach-cat-head .icon{display:inline-flex;align-items:center}
.ach-cat-head .grow{flex:1}
.ach-cat-count{font-size:.75rem;color:var(--txt3);font-weight:600}
.ach-cat-head .ach-caret{color:var(--txt3);flex:none;font-size:.95rem}
.ach-cat-body{margin-top:8px}

/* Customizable dashboard (long-press edit mode) */
.dash-editing .dash-widget{outline:2px dashed var(--border-h);border-radius:var(--r2);margin-bottom:12px;position:relative;overflow:hidden}
.dash-widget.dw-hidden{opacity:.45}
.dw-bar{display:flex;align-items:center;gap:6px;padding:7px 9px;background:var(--bg3);font-size:.78rem}
.dw-name{font-weight:700;color:var(--txt2)}
.dw-btn{background:var(--card);border:1px solid var(--border-h);color:var(--txt);border-radius:8px;padding:2px 10px;cursor:pointer;font-size:.95rem;line-height:1.3}
.dw-btn:hover{border-color:var(--prim)}
.dw-btn.off{opacity:.55}
.dash-edit-banner{position:sticky;top:8px;z-index:50;display:flex;align-items:center;gap:8px;padding:10px 12px;margin-bottom:14px;
  background:var(--bg2);border:1px solid var(--prim);border-radius:var(--r2);font-weight:700;color:var(--prim);box-shadow:var(--shadow)}
.dash-edit-banner .deb-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.92rem}
.dash-edit-banner .btn{flex:none}

/* Goal items */
.goal-item{display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.03);transition:background .2s}
.goal-item:last-child{border-bottom:none}
.goal-item:hover{background:rgba(255,255,255,.02);border-radius:var(--r3)}
.goal-type-label{font-weight:600;font-size:.9rem;min-width:100px}
.goal-progress-wrap{flex:1}
.goal-values{font-size:.8rem;color:var(--txt2);margin-top:4px;font-family:var(--mono)}

/* Day checkboxes */
.day-row{display:flex;gap:6px;flex-wrap:wrap}
.day-chip{padding:6px 10px;border-radius:var(--r3);border:1px solid var(--border);
  font-size:.8rem;font-weight:600;cursor:pointer;transition:var(--transition);user-select:none}
.day-chip:hover{border-color:var(--border-h)}
.day-chip.active{background:var(--prim);border-color:var(--prim);color:#fff;
  box-shadow:0 2px 8px var(--prim-g)}

/* Event log - Enhanced */
.event-item{padding:12px 16px;border-left:3px solid var(--txt3);border-radius:0 var(--r3) var(--r3) 0;
  background:rgba(255,255,255,.02);margin-bottom:8px;font-size:.85rem;
  transition:var(--transition)}
.event-item:hover{background:rgba(255,255,255,.04);transform:translateX(4px)}
.event-item.sync{border-left-color:var(--ok)}
.event-item.auto_unlock{border-left-color:var(--ok)}
.event-item.auto_lock{border-left-color:var(--danger)}
.event-item.manual_unlock,.event-item.override{border-left-color:var(--warn)}
.event-item.system,.event-item.register{border-left-color:var(--info)}
.event-time{font-size:.7rem;color:var(--txt3);font-family:var(--mono)}
.event-msg{margin-top:2px;color:var(--txt)}

/* Activity Chart */
.chart-container{width:100%;height:200px;position:relative;margin-top:12px;padding:8px 0}
.chart-bars{display:flex;align-items:flex-end;gap:4px;height:100%;padding:0 4px}
.chart-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.chart-bar{width:100%;border-radius:6px 6px 2px 2px;min-height:4px;
  transition:height .6s cubic-bezier(.4,0,.2,1);position:relative;cursor:pointer}
.chart-bar:hover{filter:brightness(1.2)}
.chart-bar:hover::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;
  transform:translateX(-50%);background:var(--bg2);border:1px solid var(--border);
  padding:4px 10px;border-radius:6px;font-size:.7rem;font-family:var(--mono);
  white-space:nowrap;z-index:10;color:var(--txt);box-shadow:var(--shadow)}
.chart-label{font-size:.6rem;color:var(--txt3);font-weight:600}
.chart-bar.steps-bar{background:linear-gradient(to top,hsl(150,80%,30%),var(--ok))}
.chart-bar.cal-bar{background:linear-gradient(to top,hsl(15,80%,30%),#ff9800)}
.chart-bar.exer-bar{background:linear-gradient(to top,hsl(262,60%,30%),var(--prim))}

/* Section separator */
.section-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);
  margin:24px 0}

/* Bottom Nav - Enhanced */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:rgba(10,11,14,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border);display:flex;z-index:100;
  padding:0 0 env(safe-area-inset-bottom);box-shadow:0 -4px 20px rgba(0,0,0,.3)}
@media(min-width:768px){.bottom-nav{display:none}}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 2px;font-size:.58rem;font-weight:600;color:var(--txt3);cursor:pointer;
  transition:var(--transition);text-decoration:none;position:relative;min-width:0}
.nav-item .nav-icon{font-size:1.25rem}
.nav-item span:not(.nav-icon){overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
.nav-item.active{color:var(--prim)}
.nav-item.active::before{content:'';position:absolute;top:-1px;left:20%;right:20%;
  height:2px;background:var(--prim);border-radius:0 0 4px 4px;box-shadow:0 0 8px var(--prim-g)}
.nav-item:hover{color:var(--txt)}
.nav-item .nav-icon{font-size:1.3rem;transition:transform .2s}
.nav-item:hover .nav-icon{transform:scale(1.15)}

/* ── Icons (Tabler, MIT — inherit currentColor) ── */
.ic{display:inline-block;vertical-align:-.18em;flex:none;color:inherit}
.nav-item .nav-icon,.sidebar .nav-link .nav-icon{display:inline-flex;align-items:center;justify-content:center}
.nav-item .nav-icon .ic,.sidebar .nav-link .nav-icon .ic{vertical-align:middle}
.btn .ic{vertical-align:-.2em}
.ic-missing{display:inline-block;width:1em;text-align:center;opacity:.5}

/* Desktop sidebar - Enhanced */
@media(min-width:768px){
  body{flex-direction:row}
  .sidebar{display:flex;flex-direction:column;width:240px;
    background:linear-gradient(180deg,var(--bg2),var(--bg3));
    border-right:1px solid var(--border);padding:24px 16px;gap:4px;position:fixed;
    top:0;bottom:0;left:0;z-index:100;box-shadow:4px 0 20px rgba(0,0,0,.2)}
  .sidebar .logo{font-size:1.5rem;font-weight:800;margin-bottom:24px;padding:0 14px;
    background:linear-gradient(120deg,#7c4dff 0%,#9d6bff 45%,#00c853 100%);-webkit-background-clip:text;
    background-clip:text;-webkit-text-fill-color:transparent}
  .sidebar .nav-link{display:flex;align-items:center;gap:10px;padding:11px 14px;
    border-radius:var(--r3);color:var(--txt2);font-weight:600;font-size:.95rem;cursor:pointer;
    transition:var(--transition);text-decoration:none;position:relative}
  .sidebar .nav-link:hover{background:rgba(255,255,255,.04);color:var(--txt);
    transform:translateX(4px)}
  .sidebar .nav-link.active{background:var(--prim-bg);color:var(--prim);
    box-shadow:inset 3px 0 0 var(--prim)}
  .sidebar .nav-link .nav-icon{font-size:1.2rem;width:24px;text-align:center}
  #app{margin-left:240px;max-width:1000px;padding-bottom:40px}
}
@media(max-width:767px){.sidebar{display:none}}

/* Modal - Enhanced */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);z-index:200;display:flex;align-items:center;
  justify-content:center;padding:16px;animation:modalOverlayIn .2s ease}
@keyframes modalOverlayIn{from{opacity:0}to{opacity:1}}
.modal{background:linear-gradient(180deg,var(--bg2),var(--bg3));border:1px solid var(--border);
  border-radius:var(--r);padding:24px;max-width:440px;width:100%;max-height:85vh;
  overflow-y:auto;box-shadow:var(--shadow-lg);animation:modalIn .3s cubic-bezier(.4,0,.2,1)}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(10px)}
  to{opacity:1;transform:scale(1) translateY(0)}}
.modal-title{font-size:1.2rem;font-weight:700;margin-bottom:16px}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}

/* Toast - Enhanced */
.toast{position:fixed;top:20px;right:20px;padding:14px 22px;border-radius:var(--r2);
  font-weight:600;font-size:.9rem;z-index:999;
  box-shadow:var(--shadow-lg);backdrop-filter:blur(8px);
  transform:translateX(120px) scale(.9);opacity:0;transition:all .4s cubic-bezier(.4,0,.2,1)}
.toast.show{transform:translateX(0) scale(1);opacity:1}
.toast.hide{transform:translateX(120px) scale(.9);opacity:0}
.toast.ok{background:linear-gradient(135deg,var(--ok),hsl(150,80%,40%));color:#000}
.toast.err{background:linear-gradient(135deg,var(--danger),hsl(345,80%,50%));color:#fff}

/* Code Block */
.code-block{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:var(--r3);
  padding:14px;font-family:var(--mono);font-size:.8rem;color:var(--txt2);
  overflow-x:auto;line-height:1.6}

/* Guide Steps */
.guide-step{padding:16px;border-left:2px solid var(--border);margin-left:12px;
  margin-bottom:12px;position:relative;transition:var(--transition)}
.guide-step:hover{border-left-color:var(--prim)}
.guide-step::before{content:attr(data-step);position:absolute;left:-14px;top:14px;
  width:26px;height:26px;background:var(--bg2);border:2px solid var(--border);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;color:var(--prim)}
.guide-step h4{font-weight:700;margin-bottom:6px;font-size:.95rem}
.guide-step p{color:var(--txt2);font-size:.85rem;line-height:1.5}

/* Animations */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.pulse{animation:pulse 1.5s infinite}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.slide-up{animation:slideUp .4s ease}

/* Stagger children animation */
.stagger > *{animation:slideUp .4s ease both}
.stagger > *:nth-child(1){animation-delay:0s}
.stagger > *:nth-child(2){animation-delay:.05s}
.stagger > *:nth-child(3){animation-delay:.1s}
.stagger > *:nth-child(4){animation-delay:.15s}
.stagger > *:nth-child(5){animation-delay:.2s}
.stagger > *:nth-child(6){animation-delay:.25s}
.stagger > *:nth-child(7){animation-delay:.3s}
.stagger > *:nth-child(8){animation-delay:.35s}

/* Empty State */
.empty-state{text-align:center;padding:40px 20px;color:var(--txt3)}
.empty-state .empty-icon{font-size:3rem;margin-bottom:12px;opacity:.5}
.empty-state p{font-size:.9rem;margin-bottom:16px}

/* Workout Types Grid */
.workout-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.workout-type-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}
.workout-type-card:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--border-h);
}
.workout-type-card.active {
  background: var(--prim-bg);
  border-color: var(--prim);
  box-shadow: 0 4px 12px var(--prim-g);
}
.workout-type-card .wt-icon {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 4px;
}
.workout-type-card .wt-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--txt2);
}

/* Stopwatch */
.stopwatch-card {
  text-align: center;
  padding: 16px;
  background: linear-gradient(135deg, var(--card) 60%, var(--prim-bg));
}
.stopwatch-time {
  font-family: var(--mono);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--prim);
  margin: 10px 0;
  text-shadow: 0 0 10px var(--prim-g);
}

/* Star Rating */
.star-rating {
  display: flex;
  gap: 8px;
  font-size: 1.8rem;
  cursor: pointer;
  justify-content: center;
  margin: 8px 0;
}
.star-rating span {
  transition: transform .2s;
}
.star-rating span:hover {
  transform: scale(1.2);
}

/* Achievements */
.achievement-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media(min-width:480px) {
  .achievement-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.achievement-card {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--transition);
}
.achievement-card.locked {
  opacity: .5;
  filter: grayscale(1);
}
.achievement-card.unlocked {
  border-color: var(--prim);
  box-shadow: inset 0 0 10px var(--prim-bg);
}
.achievement-card .ach-icon {
  font-size: 2.2rem;
  background: rgba(255,255,255,.05);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.achievement-card.unlocked .ach-icon {
  background: var(--prim-bg);
  box-shadow: 0 0 12px var(--prim-g);
}
.achievement-card .ach-title {
  font-weight: 700;
  font-size: .95rem;
}
.achievement-card .ach-desc {
  font-size: .75rem;
  color: var(--txt2);
  margin-top: 2px;
}
.achievement-card .ach-date {
  font-size: .65rem;
  color: var(--ok);
  font-family: var(--mono);
  margin-top: 4px;
}

/* Shop Category Tabs */
.shop-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.shop-tab {
  padding: 10px 16px;
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: var(--card);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.shop-tab:hover, .shop-tab.active {
  border-color: var(--prim);
  background: var(--prim-bg);
}

/* Shop Grid */
.shop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media(min-width:600px) {
  .shop-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: rgba(255,255,255,.02);
  border-radius: var(--r2);
  margin-bottom: 12px;
  border: 1px solid var(--border);
}
.product-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--prim);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 50px;
  text-transform: uppercase;
}

/* Avatar selection */
.avatar-presets {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
.avatar-preset-btn {
  font-size: 1.8rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.avatar-preset-btn:hover, .avatar-preset-btn.active {
  border-color: var(--prim);
  background: var(--prim-bg);
  transform: scale(1.1);
}

/* ═══════════════════════════════════════════════════════
   GAMIFICATION V2 – Premium Animations & Effects
   ═══════════════════════════════════════════════════════ */

/* ── Confetti Canvas ─────────────────────────────────── */
.confetti-canvas {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

/* ── Level-Up Modal ──────────────────────────────────── */
.levelup-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  transition: all .4s ease;
  pointer-events: none;
}
.levelup-overlay.show {
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(12px);
  pointer-events: all;
}
.levelup-overlay.hide {
  opacity: 0;
  transform: scale(1.1);
}
.levelup-modal {
  text-align: center;
  padding: 48px 40px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(18, 20, 28, .95), rgba(10, 11, 14, .98));
  border: 2px solid var(--prim);
  box-shadow: 0 0 60px rgba(124, 77, 255, .3), 0 0 120px rgba(124, 77, 255, .1);
  position: relative;
  overflow: hidden;
  max-width: 380px;
  width: 90%;
  transform: scale(.6);
  opacity: 0;
  transition: all .5s cubic-bezier(.2, .8, .2, 1.2);
}
.levelup-overlay.show .levelup-modal {
  transform: scale(1);
  opacity: 1;
}
.levelup-stars {
  font-size: 2rem;
  margin-bottom: 12px;
  animation: starPulse 1.5s ease infinite;
}
@keyframes starPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.levelup-badge {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--prim), #e040fb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  font-weight: 900;
  color: #fff;
  margin: 16px auto;
  box-shadow: 0 0 40px rgba(124, 77, 255, .5), 0 0 80px rgba(124, 77, 255, .2);
  animation: badgeGlow 2s ease infinite;
  font-family: var(--mono);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
  position: relative;
}
@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 40px rgba(124, 77, 255, .5), 0 0 80px rgba(124, 77, 255, .2); }
  50% { box-shadow: 0 0 60px rgba(124, 77, 255, .7), 0 0 120px rgba(124, 77, 255, .3); }
}
.levelup-title {
  font-size: 2.2rem;
  font-weight: 900;
  background: linear-gradient(135deg, #fff, var(--prim), #e040fb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 12px 0 8px;
  letter-spacing: 3px;
}
.levelup-subtitle {
  color: var(--txt2);
  font-size: 1.05rem;
  margin: 0 0 4px;
}
.levelup-rank {
  color: var(--warn);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 0 24px;
  text-shadow: 0 0 12px rgba(255, 171, 0, .3);
}
.levelup-rays {
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent, rgba(124, 77, 255, .05), transparent, rgba(255, 215, 0, .05), transparent);
  animation: raysSpin 8s linear infinite;
  pointer-events: none;
}
@keyframes raysSpin { to { transform: rotate(360deg); } }
.levelup-btn {
  padding: 14px 40px;
  font-size: 1.1rem;
  border-radius: 50px;
  position: relative;
  z-index: 1;
}

/* ── XP Gain Toast ───────────────────────────────────── */
.xp-gain-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: linear-gradient(135deg, rgba(124, 77, 255, .9), rgba(224, 64, 251, .9));
  color: #fff;
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  font-family: var(--mono);
  z-index: 600;
  opacity: 0;
  transition: all .4s cubic-bezier(.2, .8, .2, 1.2);
  box-shadow: 0 4px 24px rgba(124, 77, 255, .5);
  pointer-events: none;
}
.xp-gain-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.xp-gain-toast.fade {
  opacity: 0;
  transform: translateX(-50%) translateY(-30px);
}
.xp-gain-icon {
  margin-right: 4px;
}

/* ── Achievement Unlock Toast ────────────────────────── */
.ach-unlock-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(40px) scale(.9);
  background: linear-gradient(135deg, rgba(18, 20, 28, .97), rgba(30, 32, 45, .97));
  border: 2px solid var(--prim);
  border-radius: var(--r);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 550;
  opacity: 0;
  transition: all .5s cubic-bezier(.2, .8, .2, 1.2);
  box-shadow: 0 8px 40px rgba(124, 77, 255, .3), 0 0 80px rgba(124, 77, 255, .1);
  max-width: 400px;
  width: 90%;
  pointer-events: none;
}
.ach-unlock-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}
.ach-unlock-toast.fade {
  opacity: 0;
  transform: translateX(-50%) translateY(20px) scale(.95);
}
.ach-unlock-glow {
  position: absolute;
  inset: -2px;
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--prim), #e040fb, var(--warn), var(--prim));
  background-size: 300% 300%;
  animation: achGlowShift 3s ease infinite;
  z-index: -1;
  filter: blur(4px);
  opacity: .5;
}
@keyframes achGlowShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.ach-unlock-icon {
  font-size: 2.5rem;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--prim-bg);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  animation: achIconPop .6s ease .3s both;
  box-shadow: 0 0 20px var(--prim-g);
}
@keyframes achIconPop {
  0% { transform: scale(0) rotate(-180deg); }
  60% { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}
.ach-unlock-label {
  font-size: .7rem;
  color: var(--prim);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ach-unlock-title {
  font-weight: 800;
  font-size: 1.05rem;
  margin: 2px 0;
}
.ach-unlock-desc {
  font-size: .8rem;
  color: var(--txt2);
}

/* Achievement particle burst */
.ach-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  animation: achParticle .8s ease-out .3s both;
}
@keyframes achParticle {
  0% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--px), var(--py)); opacity: 0; }
}

/* ── Streak Badge ────────────────────────────────────── */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 50px;
  background: linear-gradient(135deg, rgba(255, 87, 34, .12), rgba(255, 152, 0, .08));
  border: 1px solid rgba(255, 152, 0, .3);
  font-weight: 700;
  font-size: .9rem;
  position: relative;
}
.streak-flames {
  animation: flameWiggle 1s ease-in-out infinite;
}
@keyframes flameWiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-5deg) scale(1.1); }
  75% { transform: rotate(5deg) scale(1.05); }
}
.streak-count {
  font-family: var(--mono);
  font-size: 1.1rem;
  color: #ff9800;
  font-weight: 900;
}
.streak-label {
  font-size: .7rem;
  color: var(--txt3);
  font-weight: 600;
}
.streak-glow {
  box-shadow: 0 0 12px rgba(255, 152, 0, .15);
}
.streak-glow-hot {
  box-shadow: 0 0 20px rgba(255, 87, 34, .25);
  border-color: rgba(255, 87, 34, .5);
}
.streak-glow-epic {
  box-shadow: 0 0 30px rgba(255, 87, 34, .35), 0 0 60px rgba(255, 152, 0, .15);
  border-color: rgba(255, 87, 34, .7);
  background: linear-gradient(135deg, rgba(255, 87, 34, .2), rgba(255, 152, 0, .12));
}

/* ── Animated XP Bar Card ────────────────────────────── */
.xp-bar-card {
  background: linear-gradient(135deg, rgba(124, 77, 255, .08), rgba(255, 215, 0, .04));
  border: 1px solid rgba(124, 77, 255, .3);
  border-radius: var(--r);
  padding: 18px 20px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.xp-bar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124, 77, 255, .03), transparent 60%);
  pointer-events: none;
}
.xp-bar-card.compact {
  padding: 12px 16px;
}
.xp-bar-header {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.xp-level-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--prim), #e040fb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(124, 77, 255, .4);
  animation: levelBadgePulse 3s ease infinite;
}
@keyframes levelBadgePulse {
  0%, 100% { box-shadow: 0 0 20px rgba(124, 77, 255, .4); }
  50% { box-shadow: 0 0 30px rgba(124, 77, 255, .6); }
}
.xp-level-num {
  font-family: var(--mono);
  font-weight: 900;
  font-size: 1.2rem;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.xp-bar-info {
  flex: 1;
  min-width: 0;
}
.xp-bar-title {
  font-size: .8rem;
  font-weight: 600;
  color: var(--txt2);
  letter-spacing: .03em;
  margin-bottom: 6px;
}
.xp-title-name {
  color: var(--warn);
  font-weight: 700;
}
.xp-bar-track {
  height: 10px;
  background: rgba(255, 255, 255, .06);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, .04);
}
.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--prim), #e040fb, var(--warn));
  background-size: 200% 100%;
  border-radius: 50px;
  transition: width .8s cubic-bezier(.1, .8, .2, 1);
  position: relative;
  animation: xpBarGradient 3s ease infinite;
}
@keyframes xpBarGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.xp-bar-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
  animation: xpShimmer 2.5s ease infinite;
}
@keyframes xpShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.xp-bar-sub {
  font-size: .7rem;
  color: var(--txt3);
  font-family: var(--mono);
  margin-top: 4px;
}
.xp-total-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 14px;
  background: rgba(255, 255, 255, .04);
  border-radius: var(--r3);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.xp-total-num {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--prim);
}
.xp-total-label {
  font-size: .6rem;
  color: var(--txt3);
  font-weight: 700;
  letter-spacing: .08em;
}

/* ── Enhanced Progress Ring with Glow ────────────────── */
.progress-ring-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease;
}
.progress-ring-wrap:hover {
  transform: scale(1.08);
}
.progress-ring-svg {
  overflow: visible;
}
.progress-ring-circle {
  stroke-dasharray: var(--ring-circumference);
  animation: ringDraw 1.2s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes ringDraw {
  from { stroke-dashoffset: var(--ring-offset, 0); }
  to { stroke-dashoffset: var(--ring-target, 0); }
}

/* ── Achievement Card Enhancements ───────────────────── */
.achievement-card.unlocked {
  border-color: var(--prim);
  box-shadow: inset 0 0 10px var(--prim-bg), 0 0 20px rgba(124, 77, 255, .1);
  animation: achCardGlow 3s ease infinite;
}
@keyframes achCardGlow {
  0%, 100% { box-shadow: inset 0 0 10px var(--prim-bg), 0 0 20px rgba(124, 77, 255, .1); }
  50% { box-shadow: inset 0 0 15px var(--prim-bg), 0 0 30px rgba(124, 77, 255, .15); }
}
.achievement-card.unlocked .ach-icon {
  background: var(--prim-bg);
  box-shadow: 0 0 16px var(--prim-g);
  animation: achIconGlow 2s ease infinite;
}
@keyframes achIconGlow {
  0%, 100% { box-shadow: 0 0 16px var(--prim-g); }
  50% { box-shadow: 0 0 24px var(--prim-g); }
}
.achievement-card.locked {
  opacity: .45;
  filter: grayscale(.8);
}
.achievement-card.locked:hover {
  opacity: .65;
  filter: grayscale(.5);
}

/* ── Micro-interactions & Hover Enhancements ─────────── */
.card {
  transition: var(--transition), box-shadow .3s ease;
}
.btn-prim:active {
  box-shadow: 0 0 30px var(--prim-g);
}
.nav-item:active .nav-icon {
  transform: scale(.9);
}

/* ── Animated gradient border for special cards ──────── */
@keyframes borderGlow {
  0%, 100% { border-color: var(--prim); }
  25% { border-color: #e040fb; }
  50% { border-color: var(--warn); }
  75% { border-color: var(--ok); }
}

/* ── Guide Step Enhanced ─────────────────────────────── */
.guide-step {
  padding: 18px 20px;
  border-left: 3px solid var(--border);
  margin-left: 16px;
  margin-bottom: 14px;
  position: relative;
  transition: var(--transition);
  background: rgba(255, 255, 255, .01);
  border-radius: 0 var(--r3) var(--r3) 0;
}
.guide-step:hover {
  border-left-color: var(--prim);
  background: rgba(124, 77, 255, .03);
}
.guide-step::before {
  content: attr(data-step);
  position: absolute;
  left: -17px;
  top: 16px;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, var(--prim), #e040fb);
  border: 3px solid var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 0 12px var(--prim-g);
}

/* ═══════════════════════════════════════════════════════
   V2 NEW – Charts, Offline, Install, Skeleton
   ═══════════════════════════════════════════════════════ */

/* ── Charts ──────────────────────────────────────────── */
.chart-card{background:linear-gradient(135deg,var(--card) 60%,rgba(124,77,255,.04));
  border:1px solid rgba(124,77,255,.15)}
.chart-tabs{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;padding-bottom:4px}
.chart-tab{padding:7px 14px;border-radius:50px;border:1px solid var(--border);
  background:rgba(255,255,255,.03);font-weight:600;font-size:.8rem;cursor:pointer;
  transition:var(--transition);white-space:nowrap;color:var(--txt2);font-family:var(--font)}
.chart-tab:hover{border-color:var(--border-h);color:var(--txt)}
.chart-tab.active{background:linear-gradient(135deg,rgba(124,77,255,.15),rgba(124,77,255,.05));
  border-color:var(--tab-color,var(--prim));color:var(--txt);box-shadow:0 2px 10px rgba(124,77,255,.15)}
.chart-area{min-height:180px}
.chart-container{width:100%;overflow-x:auto;padding:4px 0}
.chart-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--border)}
.chart-stat{text-align:center}
.chart-stat-val{font-size:1.2rem;font-weight:800;font-family:var(--mono);color:var(--txt)}
.chart-stat-unit{font-size:.7rem;color:var(--txt3);font-weight:400}
.chart-stat-label{font-size:.7rem;color:var(--txt3);margin-top:2px;font-weight:500}
.streak-mini{margin-left:auto;font-size:.75rem;color:#ff9800;font-weight:700;
  padding:3px 10px;background:rgba(255,152,0,.1);border-radius:50px;white-space:nowrap}

/* Bar chart animation */
@keyframes barGrow{
  from{transform:scaleY(0);transform-origin:bottom}
  to{transform:scaleY(1);transform-origin:bottom}
}
.chart-bar-group{transform-origin:bottom}

/* Settings hub */
.set-section{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--txt3);
  font-weight:700;margin:0 0 8px 4px}
.set-card{padding:4px 0}
.set-row{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;
  transition:background .15s;border-bottom:1px solid var(--border)}
.set-card .set-row:last-child{border-bottom:none}
.set-row:hover{background:rgba(255,255,255,.03)}
.set-ico{font-size:1.2rem;width:26px;display:flex;align-items:center;justify-content:center;color:var(--prim)}
.set-label{flex:1;font-weight:500}
.set-chev{color:var(--txt3);font-size:1.3rem;display:flex;align-items:center}
.collapsible-head{user-select:none}

/* Quick actions */
.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
.quick-action{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;
  background:var(--bg3);border:1px solid var(--border);border-radius:14px;color:var(--txt);
  font-size:.78rem;font-weight:600;cursor:pointer;transition:var(--transition)}
.quick-action:hover{border-color:var(--prim);transform:translateY(-2px)}
.quick-action .qa-ico{font-size:1.6rem}

/* Avatar frames (achievement cosmetics) */
.av-frame{position:relative}
.av-frame-bronze{box-shadow:0 0 0 3px #cd7f32,0 0 10px #cd7f3288 !important}
.av-frame-silver{box-shadow:0 0 0 3px #c0c0c0,0 0 10px #c0c0c088 !important}
.av-frame-gold{box-shadow:0 0 0 3px #ffd700,0 0 14px #ffd70099 !important}
.frame-picker{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.frame-opt{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;
  cursor:pointer;font-size:.7rem;color:var(--txt2);padding:4px}
.frame-opt.active{color:var(--prim);font-weight:700}
.frame-opt.locked{opacity:.6}

/* 3D unlockable backgrounds */
body.bg3d-runner .glow1{background:radial-gradient(circle,#00c85399,transparent 70%)}
body.bg3d-runner .glow2{background:radial-gradient(circle,#ffb30099,transparent 70%)}
body.bg3d-runner .glow3{background:radial-gradient(circle,#2196f399,transparent 70%)}
body.bg3d-runner::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.10;
  background:repeating-linear-gradient(115deg,transparent 0 38px,rgba(255,255,255,.6) 38px 40px)}
/* Light-Mode-Fix: weiße Linien waren auf hellem Hintergrund unsichtbar -> dunkle Linien + sanftere Glows */
body.light.bg3d-runner::after{opacity:1;
  background:repeating-linear-gradient(115deg,transparent 0 38px,rgba(40,40,80,.06) 38px 40px)}
body.light.bg3d-runner .glow1{background:radial-gradient(circle,#00c85355,transparent 70%)}
body.light.bg3d-runner .glow2{background:radial-gradient(circle,#ffb30055,transparent 70%)}
body.light.bg3d-runner .glow3{background:radial-gradient(circle,#2196f355,transparent 70%)}
body.light .glow1,body.light .glow2,body.light .glow3{opacity:.38}

/* 3D background option buttons */
.bg3d-grid{display:flex;flex-wrap:wrap;gap:8px}
.bg3d-opt{padding:9px 14px;border-radius:50px;border:1px solid var(--border);background:var(--bg3);
  color:var(--txt);font-size:.8rem;font-weight:600;cursor:pointer;transition:var(--transition)}
.bg3d-opt:hover{border-color:var(--prim)}
.bg3d-opt.active{background:var(--prim-bg);border-color:var(--prim);color:var(--prim)}
.bg3d-opt.locked{opacity:.6}

/* Colour swatches (Punkt 13) */
.swatch-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.swatch-label{font-size:.72rem;color:var(--txt3);margin:12px 0 4px;font-weight:600}
.color-swatch{width:38px;height:38px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.3);transition:var(--transition);padding:0}
.color-swatch:hover{transform:scale(1.12)}
.color-swatch.active{border-color:var(--txt);transform:scale(1.1)}
.color-swatch.locked{opacity:.55}

/* Recent achievements (Punkt 14) */
.recent-ach{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}
.recent-ach:last-child{border-bottom:none}
.ra-icon{font-size:1.6rem;width:34px;text-align:center}

/* Compact profile stats (Punkt 11) */
.prof-stats{display:flex;gap:10px;margin-bottom:14px}
.prof-stat{flex:1;text-align:center;background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:10px 6px}
.ps-val{font-size:1.3rem;font-weight:800;font-family:var(--mono);line-height:1}
.ps-val span{font-size:.65rem;color:var(--txt3);margin-left:2px}
.ps-lbl{font-size:.68rem;color:var(--txt3);margin-top:4px;text-transform:uppercase;letter-spacing:.03em}
.fitness-bar .pbar-bg{height:8px}

/* Rings: prevent glow clipping (Punkt 12) */
.ring-wrap{overflow:visible}
.ring-wrap svg{overflow:visible}
.rings-card{overflow:visible}
.rings-card .flex{padding-left:6px;padding-right:6px}
.ring-toggle{cursor:pointer;font-size:1.1rem;line-height:1;padding:4px 6px;border-radius:8px;
  background:var(--bg3);border:1px solid var(--border);transition:var(--transition)}
.ring-toggle:hover{border-color:var(--prim)}

/* Activity calendar / heatmap (Punkt 1) */
.cal-wrap{display:flex;flex-direction:column;gap:8px}
.cal-month{display:flex;align-items:center;gap:10px}
.cal-mlabel{flex-shrink:0;width:52px;font-size:.72rem;font-weight:700;color:var(--txt3);font-family:var(--mono)}
.cal-row{display:flex;gap:3px;overflow-x:auto;padding-bottom:3px;cursor:grab;flex:1}
.cal-row.dragging{cursor:grabbing}
.cal-box{flex:0 0 auto;width:13px;height:13px;border-radius:3px;background:rgba(127,127,127,.18)}
.cal-box.goal{background:#00c853}
.cal-box.miss{background:#ff5252}
.cal-box.sick{background:#ffc107}
.cal-box.holiday{background:#2196f3}
.cal-box.none{background:rgba(127,127,127,.18)}
.cal-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:.72rem;color:var(--txt3)}
.cal-legend span{display:flex;align-items:center;gap:5px}
.cal-legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.cal-legend i.goal{background:#00c853}.cal-legend i.miss{background:#ff5252}
.cal-legend i.sick{background:#ffc107}.cal-legend i.holiday{background:#2196f3}

/* Sport picker popup */
.sport-picker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:50vh;overflow-y:auto;padding:2px}
.sport-pick{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;
  background:var(--bg3);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:var(--transition)}
.sport-pick:hover{border-color:var(--prim);transform:translateY(-2px)}
.sport-pick.active{border-color:var(--prim);background:var(--prim-bg)}
.workout-type-card.more{border-style:dashed}

/* GPS route map */
.route-map{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg3)}
.route-map svg{display:block}

/* Planned trainings */
.planned-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.planned-row:last-child{border-bottom:none}

/* Light-mode polish for readability & consistency */
body.light .bottom-nav{background:rgba(255,255,255,.95);border-top:1px solid rgba(0,0,0,.08);
  box-shadow:0 -4px 20px rgba(0,0,0,.06)}
body.light .bottom-nav .nav-item{color:#6b7280}
body.light .bottom-nav .nav-item.active{color:var(--prim)}
body.light .header{border-bottom:1px solid rgba(0,0,0,.08)}
body.light .code-block{background:#f0f1f5;color:#1f2937;border:1px solid rgba(0,0,0,.08)}
body.light .device-card,body.light .child-card{background:#fff}
body.light .status-pill{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
body.light .ad-banner{background:#fff !important}
body.light .seg,body.light .quick-action,body.light .an-stat,body.light .kpi{background:#f4f6f9}
body.light .welcome-overlay{background:rgba(60,60,80,.35)}
body.light .modal-overlay{background:rgba(40,40,55,.4)}

/* Drag-to-scroll charts (Punkt 4) */
.chart-container, .chart-area, .bars{cursor:grab}
.chart-container.dragging, .chart-area.dragging, .bars.dragging{cursor:grabbing;user-select:none}
.chart-container, .chart-area{-webkit-overflow-scrolling:touch}

/* Segmented toggle (holiday power, etc.) */
.seg-toggle{display:flex;gap:8px;flex-wrap:wrap}
.seg{flex:1;min-width:130px;display:flex;align-items:center;gap:8px;padding:11px 12px;
  border:1px solid var(--border);border-radius:12px;cursor:pointer;font-size:.85rem;font-weight:600;
  background:var(--bg3);transition:var(--transition)}
.seg input{accent-color:var(--prim)}
.seg.active{border-color:var(--prim);background:var(--prim-bg);color:var(--prim)}

/* Password field with eye toggle */
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{flex:1;padding-right:44px}
.pw-eye{position:absolute;right:6px;background:none;border:none;font-size:1.1rem;cursor:pointer;
  padding:6px;color:var(--txt2);line-height:1}

/* Apple Watch easy steps */
.watch-step{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.watch-step:last-of-type{border-bottom:none}
.ws-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--prim);color:#fff;
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.ws-d{font-size:.82rem;color:var(--txt2);margin-top:2px;line-height:1.5}

/* Locked (free-plan) blurred section (Punkt 11) */
.locked-wrap{position:relative;overflow:hidden;border-radius:14px}
.locked-blur{filter:blur(7px);opacity:.55;pointer-events:none;user-select:none}
.locked-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:16px;background:rgba(10,11,14,.35)}

/* Welcome overlay */
.welcome-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(5,6,9,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .3s}
.welcome-overlay.show{opacity:1}
.welcome-card{background:var(--bg2);border:1px solid var(--border-h);border-radius:22px;
  padding:32px 26px;max-width:380px;width:100%;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.5);transform:translateY(16px) scale(.96);transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
.welcome-overlay.show .welcome-card{transform:translateY(0) scale(1)}
.welcome-emoji{font-size:3.4rem;margin-bottom:10px;animation:wave 1.2s ease-in-out infinite;transform-origin:70% 70%;display:inline-block}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}}

/* Analytics screen */
.an-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 4px}
@media(max-width:380px){.an-grid{grid-template-columns:repeat(2,1fr)}}
.an-stat{text-align:center;background:var(--bg3);border:1px solid var(--border);
  border-radius:12px;padding:12px 8px}
.an-stat-val{font-size:1.15rem;font-weight:800;font-family:var(--mono);line-height:1.1}
.an-stat-label{font-size:.68rem;color:var(--txt3);margin-top:4px;font-weight:500;
  text-transform:uppercase;letter-spacing:.03em}
.an-sub{font-size:.62rem;color:var(--txt3);font-weight:400;margin-left:3px}
.an-record{display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--border);font-size:.9rem}
.an-record:last-child{border-bottom:none}
.an-record strong{margin-left:auto;font-family:var(--mono);color:var(--txt)}
.an-wt-row{padding:10px 0;border-bottom:1px solid var(--border)}
.an-wt-row:last-child{border-bottom:none}
.an-wt-head{display:flex;justify-content:space-between;align-items:center;font-weight:600}
.an-wt-head strong{font-family:var(--mono);color:var(--prim)}
.an-wt-meta{font-size:.75rem;color:var(--txt2);margin-top:2px}

/* Sparkline */
.sparkline{display:inline-block;vertical-align:middle}

/* ── Offline Banner ──────────────────────────────────── */
.offline-banner{position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(90deg,var(--danger),hsl(345,80%,45%));
  color:#fff;text-align:center;padding:10px 16px;font-size:.85rem;font-weight:600;
  transform:translateY(-100%);transition:transform .4s cubic-bezier(.4,0,.2,1);
  box-shadow:0 4px 20px rgba(255,23,68,.3)}
.offline-banner.show{transform:translateY(0)}

/* ── Install Prompt ──────────────────────────────────── */
.install-prompt{position:fixed;bottom:70px;left:16px;right:16px;z-index:150;
  animation:slideUp .5s ease .5s both}
.install-prompt.hidden{display:none!important}
.install-prompt-content{display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,rgba(18,20,28,.96),rgba(30,32,45,.96));
  border:1px solid var(--prim);border-radius:var(--r);padding:14px 18px;
  backdrop-filter:blur(16px);box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 20px var(--prim-g)}
.install-icon{font-size:1.8rem}
.install-text{flex:1;min-width:0}
.install-text strong{display:block;font-size:.9rem;color:var(--txt)}
.install-text span{font-size:.75rem;color:var(--txt2)}
@media(min-width:768px){.install-prompt{left:auto;right:24px;bottom:24px;max-width:400px}}

/* ── Skeleton Loading ────────────────────────────────── */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.03) 25%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 75%);
  background-size:200% 100%;animation:skeletonShimmer 1.5s infinite;border-radius:var(--r3)}
@keyframes skeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-text{height:14px;margin:8px 0}
.skeleton-title{height:20px;width:60%;margin:8px 0}
.skeleton-ring{width:100px;height:100px;border-radius:50%}
.skeleton-bar{height:8px;border-radius:4px;margin:6px 0}

/* ── Page Transition ─────────────────────────────────── */
.page-enter{animation:pageEnter .35s cubic-bezier(.4,0,.2,1) both}
@keyframes pageEnter{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Ripple Effect ───────────────────────────────────── */
.btn{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.2);
  transform:scale(0);animation:rippleAnim .6s ease-out;pointer-events:none}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* ── Ad Banner V2 ────────────────────────────────────── */
.ad-banner{transition:var(--transition)}
.ad-banner:hover{border-color:var(--border-h);transform:translateY(-1px)}

/* ── Intro / Splash-Animation ────────────────────────── */
.intro{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 38%,#17121f 0%,#0a0b0e 72%);opacity:1;transition:opacity .6s ease}
.intro.hide{opacity:0;pointer-events:none}
.intro-inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:24px}
.intro-svg{width:112px;height:112px;border-radius:26px;filter:drop-shadow(0 14px 34px rgba(124,77,255,.5));
  transform:scale(.55);opacity:0;animation:introPop .7s cubic-bezier(.2,.9,.3,1.4) .1s forwards}
.intro-keyhole{transform-box:fill-box;transform-origin:center;animation:introKey 1.1s ease .55s both}
.intro-word{font-size:2.6rem;font-weight:900;letter-spacing:3px;line-height:1;
  background:linear-gradient(120deg,#7c4dff,#00e676);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translateY(12px);animation:introUp .6s ease .45s forwards}
.intro-slogan{font-size:1.05rem;font-weight:800;color:#f3f4f6;max-width:300px;
  opacity:0;transform:translateY(10px);animation:introUp .6s ease .75s forwards}
.intro-sub{font-size:.86rem;font-weight:500;color:#9ca3af;min-height:1.1em;
  opacity:0;animation:introFade .7s ease 1.05s forwards}
.intro-bar{width:130px;height:3px;border-radius:3px;margin-top:8px;overflow:hidden;background:rgba(255,255,255,.08)}
.intro-bar::after{content:"";display:block;height:100%;width:38%;border-radius:3px;
  background:linear-gradient(90deg,#7c4dff,#00e676);animation:introBar 1.9s ease .3s forwards}
@keyframes introPop{to{transform:scale(1);opacity:1}}
@keyframes introUp{to{transform:translateY(0);opacity:1}}
@keyframes introFade{to{opacity:1}}
@keyframes introKey{0%{transform:translateY(-7px)}55%{transform:translateY(2px)}100%{transform:translateY(0)}}
@keyframes introBar{from{transform:translateX(-50px)}to{transform:translateX(340px)}}
@media (prefers-reduced-motion:reduce){.intro-svg,.intro-word,.intro-slogan,.intro-sub{animation-duration:.01ms;opacity:1;transform:none}}

/* ── Akku-/Timer-Modus Gerätekarte ───────────────────── */
.battery-card .batt-body{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.batt-gauge{display:flex;align-items:baseline;justify-content:center;gap:6px;
  padding:10px;border-radius:14px;background:var(--prim-bg);border:1px solid var(--prim-g)}
.batt-bolt{color:var(--prim);display:inline-flex;align-self:center}
.batt-time{font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--txt);letter-spacing:.5px}
.batt-unit{font-size:.85rem;color:var(--txt2);font-weight:600}
.batt-meta{display:flex;justify-content:space-between;align-items:center;font-size:.78rem}
.batt-state{font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:.5px}
.battery-card.batt-on .batt-state{color:var(--ok)}
.batt-rate{color:var(--txt3)}
.batt-btn{width:100%}
.batt-warn-msg{display:none;align-items:center;gap:6px;font-size:.82rem;font-weight:700;
  color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-g);
  border-radius:10px;padding:8px 10px}
.battery-card.batt-on .batt-gauge{border-color:var(--ok-g);background:var(--ok-bg)}
.battery-card.batt-warn .batt-gauge{border-color:var(--warn-g);background:var(--warn-bg);
  animation:battPulse 1s ease-in-out infinite}
.battery-card.batt-warn .batt-time{color:var(--warn)}
.battery-card.batt-warn .batt-warn-msg{display:flex}
@keyframes battPulse{0%,100%{box-shadow:0 0 0 0 var(--warn-g)}50%{box-shadow:0 0 0 6px transparent}}

/* ── QR-Scanner Overlay ──────────────────────────────── */
.qr-ov{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;
  background:rgba(5,6,10,.92);padding:20px}
.qr-box{width:100%;max-width:360px;display:flex;flex-direction:column;gap:10px}
.qr-vidwrap{position:relative;width:100%;aspect-ratio:1;border-radius:18px;overflow:hidden;
  background:#000;border:1px solid var(--border-h)}
.qr-vidwrap video{width:100%;height:100%;object-fit:cover;display:block}
.qr-frame{position:absolute;inset:18%;border:3px solid var(--prim);border-radius:14px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.35);animation:qrPulse 1.6s ease-in-out infinite}
.qr-hint{text-align:center;font-size:.9rem;color:var(--txt2)}
@keyframes qrPulse{0%,100%{border-color:var(--prim)}50%{border-color:var(--ok)}}

/* ── Fun-Fact Popup (nach Workout) ───────────────────── */
.funfact-pop{position:fixed;left:50%;bottom:84px;transform:translate(-50%,20px);z-index:9000;
  display:flex;align-items:flex-start;gap:12px;max-width:340px;width:calc(100% - 32px);
  padding:14px 14px 14px 12px;border-radius:16px;opacity:0;transition:all .3s cubic-bezier(.2,.9,.3,1.2);
  background:linear-gradient(135deg,rgba(124,77,255,.16),var(--card));
  border:1px solid var(--prim-g);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.funfact-pop.show{opacity:1;transform:translate(-50%,0)}
.funfact-pop .ff-ico{color:var(--prim);flex:none;margin-top:2px}
.funfact-pop .ff-title{font-weight:800;font-size:.8rem;letter-spacing:.4px;text-transform:uppercase;
  color:var(--prim);margin-bottom:3px}
.funfact-pop .ff-txt{font-size:.9rem;line-height:1.35;color:var(--txt)}
.funfact-pop .ff-x{flex:none;align-self:center;border:1px solid var(--border-h);background:transparent;
  color:var(--txt2);border-radius:8px;padding:5px 10px;font-weight:700;cursor:pointer}
.funfact-pop .ff-x:hover{border-color:var(--prim);color:var(--prim)}

/* ── Münzen / Wallet ─────────────────────────────────── */
.coin-badge{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:5px 10px;border-radius:20px;
  background:rgba(255,193,7,.12);border:1px solid rgba(255,193,7,.35);color:#ffc107;font-weight:800;
  font-size:.85rem;cursor:pointer;white-space:nowrap}
.coin-badge:hover{background:rgba(255,193,7,.2)}
.coin-total{display:inline-flex;align-items:center;gap:5px;color:#ffc107;font-weight:800;font-family:var(--mono)}
.coin-log{display:flex;flex-direction:column;gap:4px}
.coin-row{display:flex;justify-content:space-between;font-size:.85rem;padding:5px 0;border-bottom:1px solid var(--border)}
.coin-row:last-child{border-bottom:none}
.coin-row .pos{color:var(--ok);font-weight:700;font-family:var(--mono)}
.coin-row .neg{color:var(--danger);font-weight:700;font-family:var(--mono)}

/* ── Familien-Ziel Karte ─────────────────────────────── */
.family-card{border:1px solid var(--prim-g);background:linear-gradient(135deg,rgba(124,77,255,.10),var(--card))}
.family-card.fam-met{border-color:var(--ok-g);background:linear-gradient(135deg,rgba(0,230,118,.10),var(--card))}
.fam-status{display:flex;align-items:center;gap:6px;font-weight:700;font-size:.85rem;color:var(--txt2);margin:2px 0 10px}
.fam-status.met{color:var(--ok)}
.fam-members{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fam-chip{font-size:.72rem;background:var(--bg3,rgba(255,255,255,.05));border:1px solid var(--border);
  border-radius:20px;padding:3px 9px;color:var(--txt2)}
.fam-chip b{color:var(--txt);font-weight:700}
.fam-devices{margin-top:10px;border-top:1px solid var(--border);padding-top:8px}

/* ── Streak-Belohnungen ──────────────────────────────── */
.reward-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.reward-card{border:1px solid var(--border);border-radius:14px;padding:12px;position:relative;
  background:var(--card);transition:var(--transition)}
.reward-card.locked{opacity:.6;filter:grayscale(.4)}
.reward-card.unlocked{border-color:var(--ok-g);background:var(--ok-bg)}
.reward-card .rw-title{font-weight:800;font-size:.95rem;margin-bottom:2px}
.reward-card .rw-sub{font-size:.72rem;color:var(--txt3);margin-bottom:8px}
.reward-card .rw-badge{position:absolute;top:10px;right:10px;font-size:.62rem;font-weight:800;
  padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.4px}
.reward-card.unlocked .rw-badge{background:var(--ok);color:#04110a}
.reward-card.locked .rw-badge{background:var(--border);color:var(--txt2)}
.reward-card .rw-code{display:flex;align-items:center;gap:6px;margin-top:6px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:.85rem;
  background:var(--bg2,rgba(255,255,255,.04));border:1px dashed var(--border-h);
  border-radius:8px;padding:6px 8px;cursor:pointer}
.reward-card .rw-code:hover{border-color:var(--prim)}
.reward-card .rw-need{font-size:.75rem;color:var(--warn);font-weight:700;margin-top:6px}
.reward-card .rw-kind{font-size:.66rem;color:var(--txt3);margin-top:6px}