/* Rendu e-label partagé (page publique /e/:id et aperçu du studio /app).
   Styles portés par le conteneur .xd-elabel ; les variables de thème (--bg,
   --panel, --text, --ok, --warn…) sont fournies par la page hôte. */
.xd-elabel .hero{padding:22px 0 8px}
.xd-elabel .cat{font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2)}
.xd-elabel h1{font-size:34px;line-height:1.12;margin:6px 0 8px;font-weight:500}
.xd-elabel .appel{color:var(--muted);font-size:15px}
.xd-elabel .appel b{color:var(--text);font-weight:500}
/* badge */
.xd-elabel .vbadge{display:flex;align-items:center;gap:12px;margin:20px 0 6px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.xd-elabel .vbadge.ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:var(--ok-soft)}
.xd-elabel .vbadge.draft{border-color:color-mix(in srgb,var(--warn) 42%,var(--line))}
.xd-elabel .vbadge .vi{width:38px;height:38px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;background:var(--panel-2);color:var(--muted)}
.xd-elabel .vbadge.ok .vi{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)}
.xd-elabel .vbadge.draft .vi{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.xd-elabel .vbadge .vt{font-weight:500;font-size:14.5px}
.xd-elabel .vbadge .vs{font-size:12.5px;color:var(--muted)}
.xd-elabel .vbadge a.more{margin-left:auto;font-size:12.5px;white-space:nowrap}
.xd-elabel .spin{width:20px;height:20px;border:2.5px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:xdsp .8s linear infinite}
@keyframes xdsp{to{transform:rotate(360deg)}}
/* sections */
.xd-elabel .sec{margin-top:26px}
.xd-elabel .sec > h2{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 12px}
.xd-elabel .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:4px 18px}
.xd-elabel .kv{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.xd-elabel .kv:first-child{border-top:0}
.xd-elabel .kv .k{color:var(--muted);font-size:14px}
.xd-elabel .kv .v{font-weight:500;text-align:right}
.xd-elabel .kv .v small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.xd-elabel .pill{display:inline-block;font-size:12px;font-weight:500;padding:2px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-2);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);margin:2px 0 2px 6px}
.xd-elabel .allergen{background:rgba(217,70,160,.14);color:#f0a6d6;border-color:rgba(217,70,160,.4)}
html[data-theme="light"] .xd-elabel .allergen{color:#b0248a}
.xd-elabel table.nut{width:100%;border-collapse:collapse;font-size:14px}
.xd-elabel table.nut td{padding:10px 0;border-top:1px solid var(--line)}
.xd-elabel table.nut tr:first-child td{border-top:0}
.xd-elabel table.nut td.n{text-align:right;font-weight:500}
.xd-elabel .ing{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line)}
.xd-elabel .ing:first-child{border-top:0}
.xd-elabel .ing .nm{font-weight:500}
.xd-elabel .ing .cl{font-size:12.5px;color:var(--muted)}
.xd-elabel .ing .e{font-size:11.5px;font-family:ui-monospace,monospace;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.xd-elabel .foot{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px}
.xd-elabel .foot .inv{display:inline-flex;align-items:center;gap:6px;margin-right:16px}
.xd-elabel .foot .inv svg{color:var(--ok)}
.xd-elabel .err{padding:40px 0;text-align:center;color:var(--muted)}