/* COMM-DZ — storefront slug (thèmes cat / tpl / palette) */
:root {
  --ink: #10231f;
  --mute: #4d6a63;
  --bg: #f2f6f5;
  --a1: #0f766e;
  --a2: #0d9488;
  --a3: #99f6e4;
  --panel: #fff;
  --line: #d7e5e1;
  --glow: rgba(15, 118, 110, .28);
  --r: 16px;
  --font-display: "Figtree", system-ui, "Segoe UI", sans-serif;
  --font-body: "Figtree", system-ui, "Segoe UI", sans-serif;
}

html[data-palette="rose"] {
  --bg:#fff5f8; --ink:#2a0f1a; --mute:#9a5a72; --panel:rgba(255,255,255,.94);
  --line:rgba(255,105,180,.28); --a1:#ff69b4; --a2:#e11d74; --a3:#ffb6d9; --glow:rgba(255,105,180,.4);
}
html[data-palette="blush"] {
  --bg:#fff8f5; --ink:#3a1c18; --mute:#a8786c; --panel:rgba(255,255,255,.94);
  --line:rgba(244,162,140,.35); --a1:#f4a28c; --a2:#d9776a; --a3:#ffd6cc; --glow:rgba(244,162,140,.4);
}
html[data-palette="orchid"] {
  --bg:#fdf4fb; --ink:#2a1028; --mute:#8a5a82; --panel:rgba(255,255,255,.94);
  --line:rgba(217,70,180,.28); --a1:#d946b4; --a2:#a21caf; --a3:#f0abfc; --glow:rgba(217,70,180,.4);
}
html[data-palette="noir"] {
  --bg:#120810; --ink:#fce7f3; --mute:#c4a0b4; --panel:rgba(28,12,24,.92);
  --line:rgba(244,114,182,.28); --a1:#f472b6; --a2:#e8b86d; --a3:#831843; --glow:rgba(244,114,182,.35);
}
html[data-palette="cyan"] {
  --bg:#f0f9ff; --ink:#0c1a2a; --mute:#5b7a94; --panel:rgba(255,255,255,.94);
  --line:rgba(56,189,248,.3); --a1:#38bdf8; --a2:#0ea5e9; --a3:#818cf8; --glow:rgba(56,189,248,.35);
}
html[data-palette="midnight"] {
  --bg:#070b14; --ink:#e8f2ff; --mute:#8aa0c0; --panel:rgba(14,24,44,.92);
  --line:rgba(96,165,250,.28); --a1:#60a5fa; --a2:#22d3ee; --a3:#1e293b; --glow:rgba(96,165,250,.35);
}
html[data-palette="neon"] {
  --bg:#0a0f0a; --ink:#f0ffe8; --mute:#9cb89a; --panel:rgba(12,20,12,.92);
  --line:rgba(163,230,53,.3); --a1:#a3e635; --a2:#22d3ee; --a3:#0f172a; --glow:rgba(163,230,53,.35);
}
html[data-palette="slate"] {
  --bg:#f1f5f9; --ink:#0f172a; --mute:#64748b; --panel:rgba(255,255,255,.94);
  --line:rgba(148,163,184,.35); --a1:#64748b; --a2:#38bdf8; --a3:#334155; --glow:rgba(56,189,248,.25);
}
html[data-palette="citrus"] {
  --bg:#f7ffe8; --ink:#1a2e05; --mute:#5a7a2e; --panel:rgba(255,255,255,.94);
  --line:rgba(132,204,22,.35); --a1:#84cc16; --a2:#f97316; --a3:#facc15; --glow:rgba(249,115,22,.3);
}
html[data-palette="herb"] {
  --bg:#f0fdf4; --ink:#14532d; --mute:#4d7c5a; --panel:rgba(255,255,255,.94);
  --line:rgba(101,163,13,.3); --a1:#65a30d; --a2:#15803d; --a3:#bbf7d0; --glow:rgba(101,163,13,.3);
}
html[data-palette="chili"] {
  --bg:#fff5f5; --ink:#450a0a; --mute:#9f5a5a; --panel:rgba(255,255,255,.94);
  --line:rgba(239,68,68,.3); --a1:#ef4444; --a2:#f59e0b; --a3:#fecaca; --glow:rgba(239,68,68,.3);
}
html[data-palette="berry"] {
  --bg:#fff1f2; --ink:#4c0519; --mute:#9f5a6e; --panel:rgba(255,255,255,.94);
  --line:rgba(225,29,72,.28); --a1:#e11d48; --a2:#fb7185; --a3:#ffe4e6; --glow:rgba(225,29,72,.3);
}
html[data-palette="pulse"] {
  --bg:#061018; --ink:#e8fff4; --mute:#7aa8b8; --panel:rgba(8,24,36,.92);
  --line:rgba(52,211,153,.3); --a1:#34d399; --a2:#fbbf24; --a3:#0b1c2c; --glow:rgba(52,211,153,.35);
}
html[data-palette="solar"] {
  --bg:#111827; --ink:#fff7ed; --mute:#c4a484; --panel:rgba(17,24,39,.92);
  --line:rgba(245,158,11,.3); --a1:#f59e0b; --a2:#ef4444; --a3:#111827; --glow:rgba(245,158,11,.35);
}
html[data-palette="ice"] {
  --bg:#0f172a; --ink:#f0f9ff; --mute:#94a3b8; --panel:rgba(15,23,42,.92);
  --line:rgba(56,189,248,.28); --a1:#38bdf8; --a2:#e2e8f0; --a3:#0f172a; --glow:rgba(56,189,248,.3);
}
html[data-palette="court"] {
  --bg:#f0fdf4; --ink:#052e16; --mute:#4d7c5a; --panel:rgba(255,255,255,.94);
  --line:rgba(34,197,94,.3); --a1:#22c55e; --a2:#166534; --a3:#dcfce7; --glow:rgba(34,197,94,.3);
}

html[data-tpl="1"] { --font-display:"Playfair Display",Georgia,serif; --font-body:"Nunito",system-ui,sans-serif; --r:22px; }
html[data-tpl="2"] { --font-display:"Syne",system-ui,sans-serif; --font-body:"DM Sans",system-ui,sans-serif; --r:14px; }
html[data-tpl="3"] { --font-display:"Cormorant Garamond",Georgia,serif; --font-body:"Outfit",system-ui,sans-serif; --r:4px; }
html[data-tpl="4"] { --font-display:"Instrument Serif",Georgia,serif; --font-body:"Nunito",system-ui,sans-serif; --r:0; }

* { box-sizing: border-box; }
body.sf {
  margin: 0; min-height: 100vh;
  font-family: var(--font-body); color: var(--ink);
  background:
    radial-gradient(900px 420px at 15% 0%, var(--glow), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, var(--a3)), var(--bg));
}
html[data-tpl="1"] body.sf {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--glow), transparent 60%),
    linear-gradient(165deg, var(--bg), color-mix(in srgb, var(--bg) 70%, var(--a3)));
}
html[data-tpl="2"] body.sf {
  background:
    radial-gradient(circle at 85% 15%, var(--glow), transparent 40%),
    radial-gradient(circle at 10% 80%, color-mix(in srgb, var(--a2) 22%, transparent), transparent 45%),
    var(--bg);
}
html[data-tpl="3"] body.sf {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--a1) 8%, var(--bg)) 0 38%, var(--bg) 38%);
}
html[data-tpl="4"] body.sf {
  background: var(--bg);
}
.sf-top {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.25rem; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 5;
}
html[data-tpl="1"] .sf-top { border-radius: 0 0 var(--r) var(--r); margin: 0 .5rem; }
html[data-tpl="3"] .sf-top { border-bottom-width: 2px; }
html[data-tpl="4"] .sf-top { border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; }
.sf-top .sf-mark { border-radius: calc(var(--r) * .55); object-fit: cover; }
.sf-top strong {
  display: block; font-size: 1.05rem;
  font-family: var(--font-display); letter-spacing: -.01em;
}
html[data-cat="sport"] .sf-top strong { text-transform: uppercase; letter-spacing: .06em; }
html[data-cat="tech"] .sf-top strong { letter-spacing: .04em; }
.sf-top span { color: var(--mute); font-size: .82rem; }
.sf-top .sf-status { margin-left: .5rem; }
.sf-cart-btn {
  margin-left: auto; position: relative;
  width: 2.55rem; height: 2.55rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); cursor: pointer; display: grid; place-items: center;
  font-size: 1.05rem; padding: 0;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.sf-cart-btn:hover {
  border-color: var(--a1); transform: translateY(-1px);
  box-shadow: 0 8px 18px var(--glow);
}
.sf-cart-n {
  position: absolute; top: -.25rem; right: -.25rem;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .28rem;
  background: var(--a2); color: #fff; border-radius: 999px;
  font-size: .65rem; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 2px 8px var(--glow);
}
.sf-cart-btn[hidden] { display: none !important; }
.sf-card-actions { display: flex; gap: .4rem; margin-top: auto; }
.sf-card-actions .sf-btn { flex: 1; margin-top: 0; font-size: .85rem; padding: .5rem .55rem; }
.sf-cart-lines { display: grid; gap: .65rem; margin: 1rem 0; max-width: 42rem; }
.sf-cart-line {
  display: grid; grid-template-columns: 4.5rem 1fr auto; gap: .75rem; align-items: center;
  padding: .65rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.sf-cart-line img, .sf-cart-line .sf-ph {
  width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 10px;
  background: color-mix(in srgb, var(--a3) 40%, var(--panel));
}
.sf-cart-line .t { margin: 0; font-weight: 800; }
.sf-cart-line .m { margin: .2rem 0 0; font-size: .82rem; color: var(--mute); }
.sf-cart-line .sf-line-acts { display: grid; gap: .35rem; justify-items: end; }
.sf-qty { display: inline-flex; align-items: center; gap: .35rem; }
.sf-qty button {
  width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); cursor: pointer; font-weight: 800; color: var(--ink);
}
.sf-link {
  border: 0; background: 0; color: var(--mute); cursor: pointer;
  font-size: .78rem; font-weight: 700; text-decoration: underline;
}
.sf-totals { font-weight: 800; margin: .5rem 0 1rem; max-width: 42rem; }
.sf-actions { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 42rem; }
.sf-checkout { max-width: 42rem; }
.sf-checkout-board {
  margin-top: 1rem; padding: 1.1rem 1.15rem; border-radius: calc(var(--r) + 2px);
  border: 1px solid var(--line); background: var(--panel);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--ink) 8%, transparent);
  display: grid; gap: 1rem;
}
html[data-tpl="4"] .sf-checkout-board { border-radius: 0; border-left: 3px solid var(--a1); }
.sf-steps {
  display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .25rem;
}
.sf-steps span {
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--line); color: var(--mute);
}
.sf-steps span.is-on {
  color: #fff; background: var(--a1); border-color: transparent;
}
.sf-field { display: grid; gap: .35rem; }
.sf-label { font-weight: 700; font-size: .82rem; }
.sf-carriers {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: .5rem;
}
.sf-carrier {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .7rem .4rem; border-radius: 12px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 55%, var(--panel));
  cursor: pointer; font-size: .72rem; font-weight: 750; color: var(--ink);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sf-carrier:hover { border-color: var(--a1); transform: translateY(-1px); }
.sf-carrier.is-on {
  border-color: var(--a1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 22%, transparent);
  background: var(--panel);
}
.sf-carrier img { width: 40px; height: 40px; object-fit: contain; }
.sf-bill {
  margin: 0; padding: .9rem 1rem; border-radius: 12px;
  border: 1px dashed var(--line); background: color-mix(in srgb, var(--bg) 70%, var(--panel));
  display: grid; gap: .45rem;
}
.sf-bill > div { display: flex; justify-content: space-between; gap: 1rem; color: var(--mute); font-size: .92rem; }
.sf-bill-total { color: var(--ink); font-size: 1.08rem; font-weight: 800; }
.geo-pick { position: relative; width: 100%; z-index: 2; }
.geo-pick-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  appearance: none; border: 1px solid var(--line); border-radius: 11px; padding: .75rem .9rem;
  background: color-mix(in srgb, var(--bg) 40%, var(--panel)); color: var(--ink);
  cursor: pointer; font: inherit; text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.geo-pick-btn:focus,
.geo-pick-btn[aria-expanded="true"] {
  outline: none; border-color: var(--a1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 22%, transparent);
  background: var(--panel);
}
.geo-pick-chev { color: var(--mute); font-size: .8rem; flex: none; transition: transform .2s ease; }
.geo-pick-btn[aria-expanded="true"] .geo-pick-chev {
  transform: rotate(180deg); color: var(--a1);
}
.geo-pick-back {
  margin-top: .35rem; appearance: none; border: 0; background: transparent;
  color: var(--a2); font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; padding: .25rem .4rem;
}
.geo-pick-back:hover { text-decoration: underline; }
.geo-pick-path { margin: .35rem 0 0; font-size: .78rem; color: var(--mute); min-height: 1.1em; }
body.sf > .geo-pick-list,
.geo-pick-list {
  position: fixed !important; z-index: 200 !important; margin: 0; padding: .5rem; list-style: none;
  box-sizing: border-box; max-height: min(14.5rem, 42vh); overflow-x: hidden; overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--a1) 35%, var(--line)); border-radius: 14px;
  background: var(--panel); color: var(--ink);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--ink) 18%, transparent);
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.geo-pick-list[hidden] { display: none !important; }
.geo-pick-opt {
  display: block; width: 100%; appearance: none; border: 0; background: transparent;
  cursor: pointer; font: inherit; text-align: left; padding: .62rem .85rem; border-radius: 10px;
  color: var(--ink); font-size: .9rem; font-weight: 500;
}
.geo-pick-opt:hover,
.geo-pick-opt:focus {
  outline: none; background: color-mix(in srgb, var(--a1) 12%, transparent);
}
.geo-pick-opt.is-selected {
  background: color-mix(in srgb, var(--a1) 18%, transparent); font-weight: 700; color: var(--a2);
}
.geo-pick-ph { padding: .7rem .85rem; color: var(--mute); font-size: .84rem; }
body.geo-pick-open { overflow: hidden; }
html[data-tpl="1"] .sf-wrap,
html[data-tpl="2"] .sf-wrap { max-width: min(1180px, 96vw); }
.sf-wrap { max-width: min(1180px, 96vw); margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem; }
html[data-tpl="1"] .sf-wrap { max-width: min(1180px, 96vw); }
html[data-tpl="3"] .sf-wrap { max-width: min(1240px, 96vw); padding-left: clamp(1rem, 4vw, 2.5rem); }
html[data-tpl="4"] .sf-wrap { max-width: min(980px, 96vw); }
.sf-hero { margin: 0 0 1.5rem; }
.sf-kicker {
  margin: 0 0 .4rem; font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--a1);
}
.sf-title, .sf-wrap > h1, .sf-sec {
  margin: 0 0 .35rem;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  letter-spacing: -.02em;
  font-family: var(--font-display);
}
.sf-sec { font-size: clamp(1.2rem, 2.2vw, 1.45rem); margin-top: .5rem; }
html[data-tpl="4"] .sf-title { font-style: italic; font-weight: 500; }
html[data-cat="sport"] .sf-title { text-transform: uppercase; letter-spacing: .02em; }
.sf-lede { margin: 0 0 1.25rem; color: var(--mute); max-width: 36rem; }
html[data-tpl="1"] .sf-hero {
  padding: 1.25rem 1.35rem; border-radius: var(--r);
  background: color-mix(in srgb, var(--panel) 80%, var(--a3));
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--a1) 14%, transparent);
}
html[data-tpl="2"] .sf-hero { border-bottom: 2px solid var(--a1); padding-bottom: 1rem; }
html[data-tpl="3"] .sf-hero {
  border-left: 4px solid var(--a1); padding-left: 1rem;
}
html[data-tpl="4"] .sf-hero {
  border-bottom: 1px solid var(--ink); padding-bottom: 1.25rem; margin-bottom: 2rem;
}
html[data-cat="food"] body.sf::before,
html[data-cat="beauty"] body.sf::before,
html[data-cat="tech"] body.sf::before,
html[data-cat="sport"] body.sf::before {
  content: ""; pointer-events: none; position: fixed; inset: 0; z-index: 0;
  opacity: .35;
}
html[data-cat="food"] body.sf::before {
  background: radial-gradient(circle at 20% 30%, var(--glow), transparent 28%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--a2) 25%, transparent), transparent 32%);
}
html[data-cat="beauty"] body.sf::before {
  background: radial-gradient(ellipse at 50% 0%, var(--glow), transparent 45%);
}
html[data-cat="tech"] body.sf::before {
  background:
    linear-gradient(transparent 95%, color-mix(in srgb, var(--a1) 20%, transparent) 96%),
    linear-gradient(90deg, transparent 95%, color-mix(in srgb, var(--a1) 15%, transparent) 96%);
  background-size: 28px 28px;
}
html[data-cat="sport"] body.sf::before {
  background: radial-gradient(circle at 70% 20%, var(--glow), transparent 40%);
}
/* Ne pas cibler .geo-pick-list (monté sur body en fixed) */
body.sf > *:not(.geo-pick-list) { position: relative; z-index: 1; }
.sf-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
html[data-tpl="1"] .sf-grid {
  grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px);
  grid-template-columns: none; overflow-x: auto; padding-bottom: .5rem;
  scroll-snap-type: x mandatory;
}
html[data-tpl="1"] .sf-card { scroll-snap-align: start; }
html[data-tpl="2"] .sf-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.15rem; }
html[data-tpl="3"] .sf-grid { grid-template-columns: 1fr; max-width: 28rem; }
html[data-tpl="3"] .sf-card { flex-direction: row; align-items: center; }
html[data-tpl="3"] .sf-card img,
html[data-tpl="3"] .sf-card .sf-ph {
  width: 96px; min-width: 96px; aspect-ratio: 1; border-radius: var(--r);
}
html[data-tpl="4"] .sf-grid { grid-template-columns: 1fr; gap: 1.75rem; }
html[data-tpl="4"] .sf-card {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  box-shadow: none; padding: 0 0 1.5rem; background: transparent;
}
.sf-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1rem; display: flex; flex-direction: column; gap: .55rem;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 8%, transparent);
}
.sf-card img, .sf-card .sf-ph {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--r) * .75);
  background: color-mix(in srgb, var(--a3) 40%, var(--panel));
}
.sf-card h2 { margin: 0; font-size: 1.05rem; font-family: var(--font-display); }
.sf-card .price { font-weight: 800; color: var(--a1); }
.sf-card button {
  margin-top: auto; border: 0; border-radius: 999px; padding: .55rem .9rem;
  background: var(--a1); color: #fff; font-weight: 700; cursor: pointer;
}
html[data-palette="citrus"] .sf-card button,
html[data-palette="herb"] .sf-card button,
html[data-palette="court"] .sf-card button,
html[data-palette="neon"] .sf-card button { color: #14240a; }
html[data-tpl="3"] .sf-card button,
html[data-tpl="4"] .sf-card button { border-radius: var(--r); }
.sf-empty { grid-column: 1 / -1; color: var(--mute); text-align: center; padding: 2rem; }
.sf-order {
  margin-top: 2rem; background: var(--panel); border: 1px solid var(--line);
  border-radius: calc(var(--r) + 2px); padding: 1.1rem 1.2rem; max-width: 28rem;
}
html[data-tpl="4"] .sf-order { border-radius: 0; border-left: 3px solid var(--a1); }
.sf-order h2 { margin: 0 0 .35rem; font-family: var(--font-display); }
.sf-pick { margin: 0 0 1rem; color: var(--mute); font-size: .92rem; }
.sf-form { display: grid; gap: .75rem; }
.sf-form label { display: grid; gap: .3rem; font-weight: 600; font-size: .88rem; }
.sf-form input {
  border: 1px solid var(--line); border-radius: calc(var(--r) * .6); padding: .55rem .7rem; font: inherit;
  background: color-mix(in srgb, var(--panel) 90%, transparent); color: var(--ink);
}
.sf-btn {
  border: 0; border-radius: 999px; padding: .7rem 1rem; font-weight: 800;
  background: var(--a1); color: #fff; cursor: pointer;
}
.sf-btn-ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--line);
}
.sf-otp { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
html[data-palette="citrus"] .sf-btn,
html[data-palette="herb"] .sf-btn,
html[data-palette="court"] .sf-btn,
html[data-palette="neon"] .sf-btn { color: #14240a; }
html[data-tpl="3"] .sf-btn,
html[data-tpl="4"] .sf-btn { border-radius: var(--r); }
.sf-msg { margin: 0; min-height: 1.2em; color: var(--mute); font-size: .9rem; }
.sf-msg.ok { color: var(--a2); }
.sf-msg.err { color: #8a1c1c; }
.sf-main { text-align: center; max-width: 26rem; margin: 3rem auto; }
.sf-logo {
  width: 72px; height: 72px; border-radius: calc(var(--r) + 2px); object-fit: cover; margin-bottom: 1rem;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 12%, transparent);
}
.sf-host { margin: 0 0 .75rem; color: var(--mute); }
.sf-status {
  display: inline-block; margin: 0; padding: .4rem .75rem; border-radius: 999px;
  font-weight: 700; font-size: .88rem; background: var(--panel); color: var(--a1); border: 1px solid var(--line);
}
body.sf[data-status="draft"] .sf-status { color: #9a5b00; background: #fff4e5; border-color: #f0d7a8; }
body.sf[data-status="active"] .sf-status { color: var(--a2); background: color-mix(in srgb, var(--a3) 45%, var(--panel)); border-color: var(--line); }
body.sf[data-status="missing"] .sf-status { color: #8a1c1c; background: #fdecec; border-color: #f0c2c2; }