/* ============================================================
   Garbit SHIP - Retouren · seitenspezifische Komponenten
   Schwerpunkt: Retourenlabel, Status-Workflow + Audit-Trail,
   Lagerplatzbuchung. Theme-aware.
   ============================================================ */

:root {
  --c-1: #33cc3f;
  --c-3: oklch(0.66 0.14 255);
  --c-5: oklch(0.78 0.15 85);
  --c-6: oklch(0.68 0.16 35);
  --paper: #ffffff; --paper-ink: #18181a; --paper-line: #d8d8d8;
  --st-open: oklch(0.78 0.15 85);     /* Offen - amber */
  --st-prog: oklch(0.66 0.14 255);    /* In Bearbeitung - blau */
  --st-done: #33cc3f;                 /* Fertig - grün */
}
[data-theme="dark"] { --paper: #f3f3f0; --paper-ink: #18181a; --paper-line: #cccccc; }

/* ===========================================================
   FENSTER-RAHMEN (Hero & interaktive Panels)
   =========================================================== */
.win { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.win--hero { box-shadow: 0 40px 90px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05); }
.win--flat { box-shadow: var(--card-shadow); }
.win__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.win__dot { width: 11px; height: 11px; border-radius: 50%; }
.win__dot.r { background: #ff5f57; } .win__dot.y { background: #febc2e; } .win__dot.g { background: #28c840; }
.win__title { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.win__title b { color: var(--text-head); font-weight: 700; }
.win__static { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.win__body { padding: 22px; }

/* RMA-Kopf */
.rma-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.rma-head__id { font-size: 15px; font-weight: 800; color: var(--text-head); }
.rma-head__sub { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.status-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; padding: 6px 13px; border-radius: 99px; white-space: nowrap; }
.status-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-badge[data-st="offen"] { color: var(--st-open); background: color-mix(in srgb, var(--st-open) 15%, transparent); }
.status-badge[data-st="prog"] { color: var(--st-prog); background: color-mix(in srgb, var(--st-prog) 15%, transparent); }
.status-badge[data-st="fertig"] { color: var(--st-done); background: color-mix(in srgb, var(--st-done) 16%, transparent); }

/* Positions-Liste */
.rma-pos { display: flex; flex-direction: column; gap: 8px; }
.rma-pos__item { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; }
.rma-pos__ico { width: 30px; height: 30px; border-radius: 8px; background: var(--bg-alt); color: var(--text-muted); display: grid; place-items: center; flex-shrink: 0; }
.rma-pos__name { font-size: 13px; font-weight: 700; color: var(--text-head); }
.rma-pos__meta { font-size: 11px; color: var(--text-faint); }
.rma-pos__qty { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--text-head); font-variant-numeric: tabular-nums; }
.rma-reason { font-size: 11.5px; color: var(--text-muted); margin-left: auto; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 7px; padding: 3px 9px; }

/* Mini-Label im Hero */
.rlabel { width: 150px; background: var(--paper); color: var(--paper-ink); border: 1px solid var(--paper-line); border-radius: 5px; padding: 12px; box-shadow: 0 10px 26px rgba(0,0,0,0.22); flex-shrink: 0; }
.rlabel__top { font-size: 9px; font-weight: 800; letter-spacing: 0.05em; border-bottom: 1.5px solid var(--paper-ink); padding-bottom: 6px; margin-bottom: 7px; display: flex; justify-content: space-between; }
.rlabel__addr { font-size: 10.5px; font-weight: 700; line-height: 1.4; }
.rlabel__bc { height: 30px; margin-top: 9px; background-image: repeating-linear-gradient(90deg, var(--paper-ink) 0 1.5px, transparent 1.5px 3px, var(--paper-ink) 3px 4.5px, transparent 4.5px 7px); }
.rlabel__num { text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; margin-top: 5px; }
.hero-rma { display: flex; gap: 16px; align-items: flex-start; }
@media (max-width: 480px){ .hero-rma { flex-direction: column; } .rlabel { width: 100%; } }

/* ===========================================================
   01 · LABEL-MODUS (interaktiv)
   =========================================================== */
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; flex-wrap: wrap; }
.seg__btn { font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 9px 16px; border-radius: 9px; transition: color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast); }
.seg__btn:hover { color: var(--text-head); }
.seg__btn.is-active { color: var(--green-dark); background: var(--card-bg); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
[data-theme="dark"] .seg__btn.is-active { color: var(--green); background: #222; }
.label-out { margin-top: 22px; display: flex; align-items: center; gap: 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; box-shadow: var(--card-shadow); }
.label-out__ico { width: 52px; height: 52px; border-radius: 13px; background: var(--green-tint); color: var(--green-dark); display: grid; place-items: center; flex-shrink: 0; transition: background var(--dur-base), color var(--dur-base); }
[data-theme="dark"] .label-out__ico { background: rgba(51,204,63,0.13); color: var(--green); }
.label-out__title { font-size: 1rem; font-weight: 800; color: var(--text-head); margin-bottom: 3px; }
.label-out__desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; }

/* ===========================================================
   02 · STATUS-WORKFLOW + AUDIT-TRAIL (interaktiv)
   =========================================================== */
.wf { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px){ .wf { grid-template-columns: 1fr; gap: 24px; } }

.pipeline { display: flex; flex-direction: column; gap: 0; }
.pstep { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 14px; border: 1px solid transparent; transition: background var(--dur-base), border-color var(--dur-base); }
.pstep.is-current { background: var(--card-bg); border-color: var(--border); box-shadow: var(--card-shadow); }
.pstep__dot { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--bg-alt); border: 2px solid var(--border); color: var(--text-faint); transition: all var(--dur-base); }
.pstep.is-done .pstep__dot { background: var(--green); border-color: var(--green); color: #fff; }
.pstep.is-current .pstep__dot { border-color: var(--green); color: var(--green-dark); }
[data-theme="dark"] .pstep.is-current .pstep__dot { color: var(--green); }
.pstep__dot svg { width: 18px; height: 18px; }
.pstep__name { font-size: 1rem; font-weight: 800; color: var(--text-head); }
.pstep__desc { font-size: 0.82rem; color: var(--text-muted); }
.pstep__connector { width: 2px; height: 16px; background: var(--border); margin-left: 35px; transition: background var(--dur-base); }
.pstep__connector.is-filled { background: var(--green); }

.wf-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.wf-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; font-family: inherit; font-size: 14px; font-weight: 700; border-radius: 10px; cursor: pointer; border: 1px solid var(--green); background: var(--green); color: #fff; transition: background var(--dur-base), transform var(--dur-fast); }
.wf-btn:hover:not(:disabled) { background: var(--green-dark); transform: translateY(-1px); }
.wf-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wf-btn--ghost { background: transparent; color: var(--text-head); border-color: var(--border); }
.wf-btn--ghost:hover:not(:disabled) { background: var(--bg-alt); border-color: var(--text-muted); transform: none; }

/* Audit-Trail */
.audit { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--card-shadow); overflow: hidden; }
.audit__head { padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--bg-alt); font-size: 12.5px; font-weight: 800; color: var(--text-head); display: flex; align-items: center; gap: 9px; }
.audit__head svg { width: 16px; height: 16px; color: var(--green); }
.audit__list { list-style: none; padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 0; max-height: 340px; overflow-y: auto; }
.audit__item { display: flex; gap: 14px; padding: 9px 0; position: relative; }
.audit__item:not(:last-child)::before { content: ''; position: absolute; left: 5px; top: 22px; bottom: -9px; width: 2px; background: var(--border); }
.audit__bullet { width: 12px; height: 12px; border-radius: 50%; background: var(--green); flex-shrink: 0; margin-top: 4px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
.audit__txt { font-size: 12.5px; color: var(--text); line-height: 1.4; }
.audit__txt b { color: var(--text-head); font-weight: 700; }
.audit__time { font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; margin-top: 2px; }
.audit__item.is-new { animation: auditIn 0.4s var(--ease-out); }
@keyframes auditIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* SQL-Suchfeld-Chips */
.sql-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.sql-row__label { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.sql-chip { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; color: var(--text); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; }
.sql-chip b { color: var(--green-dark); } [data-theme="dark"] .sql-chip b { color: var(--green); }

/* ===========================================================
   03 · LAGERPLATZBUCHUNG (interaktiv)
   =========================================================== */
.stock { background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--card-shadow); overflow: hidden; }
.stock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.stock__title { font-size: 14px; font-weight: 800; color: var(--text-head); }
.stock__sub { font-size: 12px; color: var(--text-muted); }
.stable { width: 100%; border-collapse: collapse; }
.stable th { text-align: right; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); padding: 12px 16px; border-bottom: 1px solid var(--border); }
.stable th:first-child { text-align: left; }
.stable td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.stable td:first-child { text-align: left; }
.stable tr:last-child td { border-bottom: none; }
.stable .art { font-weight: 700; color: var(--text-head); }
.stable .art small { display: block; font-weight: 600; color: var(--text-faint); font-size: 11px; }
.stable .bin { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; color: var(--text-head); }
.stable tr.is-booked { opacity: 0.55; }
.stable tr.is-booked .art { text-decoration: line-through; }
.book-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; font-family: inherit; font-size: 12.5px; font-weight: 700; border-radius: 8px; cursor: pointer; border: 1px solid var(--green); background: transparent; color: var(--green-dark); transition: background var(--dur-fast), color var(--dur-fast); }
[data-theme="dark"] .book-btn { color: var(--green); }
.book-btn:hover:not(:disabled) { background: var(--green); color: #fff; }
.book-btn:disabled { border-color: var(--border); color: var(--text-faint); cursor: default; background: transparent; }
.book-btn svg { width: 13px; height: 13px; }
.stock__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; background: var(--bg-alt); border-top: 1px solid var(--border); flex-wrap: wrap; }
.stock__summary { font-size: 13px; color: var(--text-muted); }
.stock__summary b { color: var(--text-head); }
@media (max-width: 560px){ .stable th.col-hide, .stable td.col-hide { display: none; } }

/* ===========================================================
   04 · CARRIER-CHIPS
   =========================================================== */
.carrier-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.carrier-chip { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--text-head); background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 18px; box-shadow: var(--card-shadow); transition: border-color var(--dur-base), transform var(--dur-base); }
.carrier-chip:hover { border-color: var(--green); transform: translateY(-2px); }
.carrier-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

/* ===========================================================
   Hinweis + FAQ + Heads (geteilt)
   =========================================================== */
.mock-note { margin-top: 12px; font-size: 11px; color: var(--text-faint); display: flex; align-items: center; gap: 6px; justify-content: center; }
.mock-note svg { width: 12px; height: 12px; flex-shrink: 0; }
[data-theme="dark"] .faq-q:hover { color: var(--green); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-dark); margin-bottom: 16px; }
[data-theme="dark"] .eyebrow { color: var(--green); }
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--green); border-radius: 1px; }
.section-head--center { text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .section-lead { margin-left: auto; margin-right: auto; }

/* ===========================================================
   GESCHLOSSENER KREISLAUF + PROZESS-EXPLORER (Umbau)
   =========================================================== */
/* Stepper */
.proc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 36px; }
@media (max-width: 760px){ .proc-steps { grid-template-columns: 1fr 1fr; } }
.proc-step { text-align: left; font-family: inherit; cursor: pointer; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px 16px; display: flex; flex-direction: column; gap: 8px; transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base); position: relative; }
.proc-step:hover { border-color: var(--text-muted); transform: translateY(-2px); }
.proc-step.is-active { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), var(--card-shadow); }
.proc-step.is-done { border-color: color-mix(in srgb, var(--green) 35%, var(--border)); }
.proc-step__num { width: 30px; height: 30px; border-radius: 9px; background: var(--bg-alt); color: var(--text-muted); font-size: 14px; font-weight: 800; display: grid; place-items: center; transition: background var(--dur-base), color var(--dur-base); }
.proc-step.is-active .proc-step__num { background: var(--green); color: #fff; }
.proc-step.is-done .proc-step__num { background: var(--green); color: #fff; }
.proc-step__name { font-size: 0.92rem; font-weight: 800; color: var(--text-head); line-height: 1.2; }
.proc-step__sub { font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; }

/* Panels */
.proc-panel { display: none; }
.proc-panel.is-active { display: block; animation: panelIn 0.35s var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .proc-panel.is-active { animation: none; } }
.proc-body { background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--card-shadow); overflow: hidden; }
.proc-body__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.proc-body__dot { width: 11px; height: 11px; border-radius: 50%; }
.proc-body__dot.r { background: #ff5f57; } .proc-body__dot.y { background: #febc2e; } .proc-body__dot.g { background: #28c840; }
.proc-body__title { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.proc-body__title b { color: var(--text-head); font-weight: 700; }
.proc-body__inner { padding: 26px; }
.proc-lead { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; max-width: 640px; }
.proc-lead b { color: var(--text-head); font-weight: 700; }
.proc-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; flex-wrap: wrap; }

/* Schritt 1 - Label-Wege als Kacheln */
.way-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 560px){ .way-grid { grid-template-columns: 1fr; } }
.way { text-align: left; font-family: inherit; cursor: pointer; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; gap: 13px; align-items: flex-start; transition: border-color var(--dur-base), background var(--dur-base); }
.way:hover { border-color: var(--text-muted); }
.way.is-active { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); background: color-mix(in srgb, var(--green) 5%, var(--bg)); }
.way__ico { width: 38px; height: 38px; border-radius: 10px; background: var(--green-tint); color: var(--green-dark); display: grid; place-items: center; flex-shrink: 0; }
[data-theme="dark"] .way__ico { background: rgba(51,204,63,0.13); color: var(--green); }
.way__name { font-size: 0.92rem; font-weight: 800; color: var(--text-head); margin-bottom: 3px; }
.way__desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; }

/* Schritt 2 - Erfassung */
.cap-search { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; margin-bottom: 18px; }
.cap-search svg { width: 17px; height: 17px; color: var(--text-faint); flex-shrink: 0; }
.cap-search input { flex: 1; border: none; background: none; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-head); outline: none; }
.cap-search__found { font-size: 11.5px; font-weight: 700; color: var(--green-dark); white-space: nowrap; }
[data-theme="dark"] .cap-search__found { color: var(--green); }
.cap-item { display: flex; align-items: center; gap: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); margin-bottom: 8px; }
.cap-item:hover { border-color: var(--text-muted); }
.cap-item.is-checked { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); background: color-mix(in srgb, var(--green) 5%, var(--bg)); }
.cap-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border); flex-shrink: 0; display: grid; place-items: center; color: #fff; transition: background var(--dur-fast), border-color var(--dur-fast); }
.cap-item.is-checked .cap-check { background: var(--green); border-color: var(--green); }
.cap-check svg { width: 13px; height: 13px; opacity: 0; }
.cap-item.is-checked .cap-check svg { opacity: 1; }
.cap-item__name { font-size: 13.5px; font-weight: 700; color: var(--text-head); }
.cap-item__meta { font-size: 11px; color: var(--text-faint); }
.cap-item__qty { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }

/* Schritt 3 - Lagerung / Routing */
.route-item { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.route-item__name { font-size: 13.5px; font-weight: 700; color: var(--text-head); }
.route-item__meta { font-size: 11px; color: var(--text-faint); }
.cond { margin-left: auto; display: inline-flex; gap: 4px; padding: 3px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 9px; }
.cond__btn { font-family: inherit; font-size: 12px; font-weight: 700; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 6px 12px; border-radius: 7px; transition: all var(--dur-fast); }
.cond__btn.is-active[data-c="ok"] { color: #fff; background: var(--green); }
.cond__btn.is-active[data-c="bad"] { color: #fff; background: var(--c-6); }
.route-target { width: 100%; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); padding-top: 10px; border-top: 1px dashed var(--border); }
.route-target b { color: var(--text-head); font-family: ui-monospace, Menlo, Consolas, monospace; }
.route-target svg { width: 14px; height: 14px; color: var(--green); }
.save-result { margin-top: 16px; display: none; align-items: center; gap: 12px; background: color-mix(in srgb, var(--green) 8%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--green) 35%, var(--border)); border-radius: 12px; padding: 14px 18px; font-size: 13.5px; color: var(--text-head); font-weight: 600; }
.save-result.is-shown { display: flex; animation: panelIn 0.35s var(--ease-out); }
.save-result svg { width: 20px; height: 20px; color: var(--green); flex-shrink: 0; }

/* Schritt 4 - Bestätigung */
.confirm-card { margin-top: 20px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--card-shadow); }
.confirm-card__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--bg-alt); border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--text-head); }
.confirm-card__head svg { width: 18px; height: 18px; color: var(--green); }
.confirm-card__body { padding: 20px 22px; font-size: 0.9rem; color: var(--text); line-height: 1.65; background: var(--card-bg); }
.confirm-card__body .muted { color: var(--text-muted); }
.confirm-card__row { display: flex; gap: 8px; padding: 5px 0; }
.confirm-card__row .lbl { color: var(--text-faint); min-width: 92px; font-size: 12.5px; }
.confirm-card__row .val { color: var(--text-head); font-weight: 600; font-size: 12.5px; }
.refund-amt { font-size: 1.4rem; font-weight: 800; color: var(--green-dark); }
[data-theme="dark"] .refund-amt { color: var(--green); }

/* Kreislauf-Band */
.loopband { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; margin-bottom: 40px; }
.loopband__node { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-head); background: var(--card-bg); border: 1px solid var(--border); border-radius: 99px; padding: 8px 16px; }
.loopband__node span { width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.loopband__arr { color: var(--text-faint); }
.loopband__loop { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--green-dark); }
[data-theme="dark"] .loopband__loop { color: var(--green); }