:root{ --accent:#00E5FF; --fg:#E5E7EB; --muted:#94A3B8; }

/* LAN @ Berlin – Progressbar */
.lb-progress{ --value:0; --height:14px; --radius:.8rem; --track:rgba(255,255,255,.06); --track-border:rgba(255,255,255,.10); --bar-start: rgba(0,229,255,.9); --bar-end:#53f7ff; --glow: rgba(0,229,255,.25); display:grid; gap:.5rem; }
.lb-progress__track{ position:relative; height:var(--height); background:var(--track); border:1px solid var(--track-border); border-radius:var(--radius); overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.25); }
.lb-progress__bar{ position:absolute; inset:0 auto 0 0; width:calc(var(--value)*1%); min-width:0%; max-width:100%; background:
  linear-gradient(90deg, var(--bar-start), var(--bar-end)),
  radial-gradient(80% 100% at 50% 0%, rgba(255,255,255,.22), transparent);
  border-right:1px solid rgba(255,255,255,.35);
  box-shadow: 0 0 24px var(--glow);
  transition: width .4s cubic-bezier(.2,.8,.2,1);
}
.lb-progress__bar::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0)); mix-blend-mode:screen; opacity:.35; pointer-events:none; }
.lb-progress__label{ display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:.95rem; }
.lb-progress__value{ color:var(--fg); font-weight:700; }

/* Sizes */
.lb-progress--sm{ --height:10px; --radius:.5rem; font-size:.85rem; }
.lb-progress--lg{ --height:18px; --radius:1rem; font-size:1rem; }

/* Stripes */
.lb-progress.is-striped .lb-progress__bar{ background-image:
  linear-gradient(90deg, var(--bar-start), var(--bar-end)),
  repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 10px, rgba(255,255,255,0) 10px 20px);
  background-blend-mode:screen;
}
/* Indeterminate */
.lb-progress.is-indeterminate .lb-progress__bar{ width:30%; animation: lb-indet 1.2s ease-in-out infinite; }
@keyframes lb-indet{ 0%{ transform:translateX(-30%);} 50%{ transform:translateX(40%);} 100%{ transform:translateX(100%);} }

/* Animated stripes */
.lb-progress.is-animated.is-striped .lb-progress__bar{ animation: lb-stripes 1s linear infinite; }
@keyframes lb-stripes{ to{ background-position: 40px 0, 40px 0; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .lb-progress__bar{ transition:none; animation:none; }
  .lb-progress.is-indeterminate .lb-progress__bar{ width:45%; transform:none; }
}