.k-icon-box,
.k-slot {
  display: grid;
  place-items: center;
  border: 1px solid rgba(236,205,142,.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 20%, rgba(214,168,79,.12), transparent 65%),
    rgba(0,0,0,.28);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.65);
}

.k-icon-box {
  width: 42px;
  height: 42px;
  color: var(--k-gold-2);
  font-size: 1.2rem;
}

.k-slot {
  width: 46px;
  height: 46px;
  color: var(--k-gold-2);
  font-size: 1.35rem;
}

.k-slot.empty {
  color: rgba(169,157,135,.42);
  background: rgba(0,0,0,.22);
}

.k-progress {
  overflow: hidden;
  height: 9px;
  border: 1px solid rgba(236,205,142,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.36);
}

.k-progress > span {
  display: block;
  width: var(--value, 0%);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #743093, #d06cd9);
}

.k-progress.green > span { background: linear-gradient(90deg, #4f7d30, #9bd45a); }
.k-progress.gold > span { background: linear-gradient(90deg, #8c5d19, #f0c76e); }
.k-progress.blue > span { background: linear-gradient(90deg, #346274, #81c4de); }

.k-list {
  display: grid;
  gap: 8px;
}

.k-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(236,205,142,.1);
}

.k-row:first-child { border-top: 0; padding-top: 0; }
.k-row strong { color: var(--k-text); }
.k-row small { color: var(--k-muted); }

.k-empty {
  color: var(--k-muted);
  line-height: 1.5;
}

/* 0.10.25a130c – kanonický systém kompletace */
.k-completion-card {
  --progress-accent: #d6a84f;
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--progress-accent) 44%, transparent);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.22));
  color: inherit;
  text-decoration: none;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
button.k-completion-card { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.k-completion-card:hover,
.k-completion-card[aria-pressed="true"] { transform: translateY(-1px); border-color: var(--progress-accent); }
.k-completion-card.is-complete {
  border-color: var(--progress-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--progress-accent) 35%, transparent), 0 0 24px color-mix(in srgb, var(--progress-accent) 18%, transparent), inset 0 0 22px color-mix(in srgb, var(--progress-accent) 8%, transparent);
}
.k-completion-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.k-completion-title { display:flex; align-items:center; gap:10px; min-width:0; }
.k-completion-title img { width:38px; height:38px; object-fit:contain; image-rendering:pixelated; }
.k-completion-title strong { color:var(--k-text,#f2e7d0); }
.k-completion-count { color:var(--progress-accent); font-weight:800; white-space:nowrap; }
.k-completion-track { overflow:hidden; height:10px; border:1px solid color-mix(in srgb, var(--progress-accent) 38%, transparent); border-radius:999px; background:rgba(0,0,0,.42); box-shadow:inset 0 1px 3px rgba(0,0,0,.8); }
.k-completion-fill { display:block; width:clamp(0%,var(--progress,0%),100%); height:100%; border-radius:inherit; background:linear-gradient(90deg,color-mix(in srgb,var(--progress-accent) 68%,#24190b),var(--progress-accent)); box-shadow:0 0 12px color-mix(in srgb,var(--progress-accent) 48%,transparent); }
.k-completion-card small { color:var(--k-muted,#b5a890); }