/* TCG Keeper — gemeinsames Stylesheet, Teil 8 von 8: Sammel-Wertabruf und TCGdex API Abruf (Fortschritts-Lightbox, Protokoll).
   Bis 09.10.2026 eine einzige Datei app.css; aufgeteilt ohne inhaltliche Änderung.
   Alle Teile werden in includes/layout_top.php in dieser Reihenfolge eingebunden —
   die Reihenfolge bestimmt die Kaskade, Regeln nicht zwischen Teilen verschieben. */
/* ------------------------------------------------------------------
   Sammel-Wertabruf (08.10.2026): Knopf „Werte abrufen“ (Statusbereich
   oben rechts, Startseite → Wertentwicklung) und Fortschritts-Lightbox
   #valueRefreshScrim (includes/layout_top.php, assets/valuerefresh.js).
   ------------------------------------------------------------------ */
.value-refresh-btn{ padding:5px 9px; display:inline-flex; align-items:center; justify-content:center; gap:4px; white-space:nowrap; }
.value-refresh-btn .nav-icon{ line-height:1; }
.value-refresh-pct{ font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.value-refresh-pct[hidden]{ display:none; }
.js-value-refresh.is-running .nav-icon,
.js-value-refresh.is-running .pc-bb-icon{ animation:vr-pulse 1.4s ease-in-out infinite; }
@keyframes vr-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@media (prefers-reduced-motion: reduce){
  .js-value-refresh.is-running .nav-icon,
  .js-value-refresh.is-running .pc-bb-icon{ animation:none; }
}
.value-refresh-panel{ width:min(92vw,560px); }
.value-refresh-panel .vr-intro{ margin:0 0 14px; }
.vr-meter{ background:var(--paper-sunken); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.vr-meter-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; }
.vr-phase{ font-weight:600; color:var(--ink); }
.vr-pct{ font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1; }
.vr-pct-unit{ font-size:.62em; margin-left:2px; }
.vr-track{ height:14px; border-radius:7px; background:var(--paper-raised); border:1px solid var(--line); overflow:hidden; }
.vr-fill{ height:100%; width:0; background:var(--accent); border-radius:7px; transition:width .35s ease; }
.vr-is-running .vr-fill{
  background-image:linear-gradient(45deg, rgba(255,255,255,.22) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.22) 75%, transparent 75%, transparent);
  background-size:18px 18px; animation:vr-stripes 1s linear infinite;
}
@keyframes vr-stripes{ from{ background-position:0 0; } to{ background-position:18px 0; } }
@media (prefers-reduced-motion: reduce){ .vr-fill{ transition:none; } .vr-is-running .vr-fill{ animation:none; } }
.vr-sub{ display:flex; justify-content:space-between; gap:12px; margin-top:7px; font-size:12.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.vr-current{ min-height:1.4em; margin:10px 0 0; font-size:12.5px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vr-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:10px 0 0; }
.vr-stats[hidden]{ display:none; }
.vr-stats div{ background:var(--paper-raised); border:1px solid var(--line); border-radius:8px; padding:7px 9px; }
.vr-stats dt{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em; }
.vr-stats dd{ margin:2px 0 0; font-family:var(--font-mono); font-size:16px; font-weight:700; color:var(--ink); }
.vr-result{ margin:12px 0 0; padding:10px 12px; border-radius:8px; border:1px solid var(--line); background:var(--paper-raised); font-size:13.5px; line-height:1.5; }
.vr-result[hidden]{ display:none; }
.vr-result-ok{ border-color:var(--good); background:var(--good-soft); }
.vr-result-warn{ border-color:var(--gold); background:var(--gold-soft); }
.vr-result-error{ border-color:var(--danger); background:var(--danger-soft); }
.vr-delta.up{ color:var(--good); font-weight:600; }
.vr-delta.down{ color:var(--danger); font-weight:600; }
.vr-last{ margin:10px 0 0; }
.vr-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.vr-actions [hidden]{ display:none; }
@media (max-width: 520px){
  .vr-stats{ grid-template-columns:1fr; }
  .vr-pct{ font-size:22px; }
}

/* ------------------------------------------------------------------
   TCGdex API Abruf (09.10.2026): Fortschritts-Lightbox #catalogRunScrim
   (nutzt die .vr-*-Bausteine des Sammel-Wertabrufs) und Abruf-Protokoll.
   ------------------------------------------------------------------ */
.catalog-run-panel{ width:min(92vw,640px); }
.vr-stats.cr-stats{ grid-template-columns:repeat(4, 1fr); }
.vr-stats.cr-stats div[hidden]{ display:none; }
.cr-log-wrap{ margin-top:10px; }
.cr-log-wrap > summary{ cursor:pointer; font-size:12.5px; color:var(--ink-soft); }
.cr-log{ max-height:200px; overflow-y:auto; margin-top:6px; font-size:12px; }
.cr-log .cr-log-err{ color:var(--danger); }
.cr-btn-pct{ font-weight:700; font-variant-numeric:tabular-nums; }
.cr-btn-pct[hidden]{ display:none; }
.catalog-busy-btn.is-running{ outline:2px solid var(--accent); outline-offset:1px; }
.sa-group-badge.run-err-badge{ background:var(--danger); color:#fff; }
.sa-group-badge.run-st-ok{ background:var(--good-soft); color:var(--good); }
.sa-group-badge.run-st-warn{ background:var(--gold-soft); color:var(--gold); }
.sa-group-badge.run-st-err{ background:var(--danger-soft); color:var(--danger); }
.run-act-new{ color:var(--good); font-weight:600; }
.run-act-err{ color:var(--danger); font-weight:600; }
@media (max-width: 560px){
  .vr-stats.cr-stats{ grid-template-columns:repeat(2, 1fr); }
}