pn-progress,
pn-progress * {
  box-sizing: border-box;
}

/* Απόκρυψη μέχρι να οριστεί το custom element */
pn-progress:not(:defined) {
  opacity: 0;
  pointer-events: none;
  display: block;
}

pn-progress {
  --ink:#0b1433;
  --muted:#64748b;
  --line:#e2e8f0;
  --chip:#eef2ff;
  --chip-ink:#1e2a78;
  --seg-on:linear-gradient(180deg,#4f46e5 0%,#22d3ee 100%);
  --seg-off:#f1f5f9;
  --card:#fff;
  --shadow:0 10px 26px rgba(2,6,23,.06);
  --wrap-bg:
    radial-gradient(1200px 60% at 10% 20%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(1000px 60% at 90% 10%, rgba(45,212,191,.10), transparent 60%),
    radial-gradient(900px 60% at 50% 100%, rgba(59,130,246,.12), transparent 60%),
    #f6f9ff;
  color:var(--ink);
  font:400 15px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  display:block;
  contain:layout paint style;
  content-visibility:auto;
}

pn-progress[hidden] {
  display:none;
}

pn-progress .wrap {
  max-width:900px;
  margin:0 auto;
  padding:18px;
  background:var(--wrap-bg);
  border-radius:18px;
}

pn-progress .panel {
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  box-shadow:var(--shadow);
  padding:20px;
}

pn-progress .hdr {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}

pn-progress .ttl {
  margin:0;
  font-weight:900;
  letter-spacing:.2px;
  font-size:clamp(18px,2.4vw,24px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background:linear-gradient(90deg,#0f2fa7,#2d5bff 45%,#0ea5a5 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

pn-progress .sub {
  margin:0;
  color:var(--muted);
  font-size:14px;
}

pn-progress .list {
  display:grid;
  gap:10px;
  margin-top:6px;
  list-style:none;
  padding:0;
}

pn-progress .row {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

pn-progress .label {
  font-weight:700;
  color:#13234f;
  font-size:14px;
}

pn-progress .pct {
  font-variant-numeric:tabular-nums;
  min-width:44px;
  text-align:center;
  background:var(--chip);
  color:var(--chip-ink);
  border:1px solid rgba(15,23,42,.08);
  padding:2px 8px;
  border-radius:999px;
}

pn-progress .meter {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:6px;
  margin-top:8px;
}

pn-progress .seg {
  height:8px;
  border-radius:6px;
  background:var(--seg-off);
  transform-origin:left center;
}

pn-progress .seg.on {
  background:var(--seg-on);
}

pn-progress .row.is-active .seg.on {
  animation:rise .45s ease forwards;
}

@keyframes rise {
  from {
    transform:scaleX(.2);
    opacity:.4;
  }
  to {
    transform:scaleX(1);
    opacity:1;
  }
}

@media (max-width:640px) {
  pn-progress .wrap {
    padding:14px;
  }
}