/* Paired card materials: the saved theme key is stable; resolved appearance selects its artwork. */
[data-card-surface][data-card-theme] {
  --foreground: #263442;
  --secondary-foreground: #415261;
  --muted-foreground: #4c5c69;
  --border: rgb(45 60 73 / 16%);
  --border-strong: rgb(45 60 73 / 28%);
  --explore-theme-border-strong: var(--border-strong);
  --explore-theme-secondary: var(--secondary-foreground);
  --surface: #f5f7f8;
  --surface-hover: rgb(255 255 255 / 48%);
  --supplier-inset: rgb(255 255 255 / 50%);
  --supplier-score: #745b31;
  --supplier-score-caption: #5d6159;
  --reputation-rule: rgb(45 60 73 / 16%);
  --accent-text: #314b60;
  --accent-soft: rgb(49 75 96 / 7%);
  --accent-border: rgb(49 75 96 / 32%);
  --focus: #314b60;
  --card-fill: #eae9e4;
  --card-artwork-light: url('/assets/supplier-cards/graphite-light-v1.webp');
  --card-artwork-dark: url('/assets/supplier-cards/graphite-v1.webp');
  isolation: isolate;
  color: var(--foreground);
  background-color: var(--card-fill);
  background-image: var(--card-artwork-light);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
[data-card-surface][data-card-theme="midnight"] {
  --card-fill: #e6f1f8;
  --card-artwork-light: url('/assets/supplier-cards/midnight-light-v1.webp');
  --card-artwork-dark: url('/assets/supplier-cards/midnight-v1.webp');
}
[data-card-surface][data-card-theme="jade"] {
  --foreground: #213b33;
  --secondary-foreground: #3b554b;
  --muted-foreground: #50645a;
  --border: rgb(55 85 69 / 16%);
  --border-strong: rgb(55 85 69 / 28%);
  --surface: #f3f6ed;
  --supplier-score-caption: #5b624c;
  --reputation-rule: rgb(55 85 69 / 16%);
  --accent-text: #244e3a;
  --accent-soft: rgb(39 81 58 / 7%);
  --accent-border: rgb(39 81 58 / 32%);
  --focus: #244e3a;
  --card-fill: #edf2e8;
  --card-artwork-light: url('/assets/supplier-cards/jade-light-v1.webp');
  --card-artwork-dark: url('/assets/supplier-cards/jade-v1.webp');
}
[data-card-surface][data-card-theme="porcelain"] {
  --foreground: #3d352c;
  --secondary-foreground: #574d40;
  --muted-foreground: #675f53;
  --surface: #f5f1e9;
  --card-fill: #f1eee6;
  --card-artwork-light: url('/assets/supplier-cards/porcelain-v1.webp');
  --card-artwork-dark: url('/assets/supplier-cards/porcelain-dark-v1.webp');
}
[data-card-surface][data-card-theme="aurora"] {
  --foreground: #352e44;
  --secondary-foreground: #51455e;
  --muted-foreground: #63566f;
  --surface: #f5f1fa;
  --card-fill: #f0eaf7;
  --card-artwork-light: url('/assets/supplier-cards/aurora-light-v1.webp');
  --card-artwork-dark: url('/assets/supplier-cards/aurora-v1.webp');
}
:root[data-theme="dark"] [data-card-surface][data-card-theme] {
  --foreground: #f2f4f7;
  --secondary-foreground: #d4dce4;
  --muted-foreground: #b7c3cf;
  --border: rgb(204 217 231 / 22%);
  --border-strong: rgb(204 217 231 / 36%);
  --surface: #202a37;
  --surface-hover: rgb(223 235 248 / 9%);
  --supplier-inset: rgb(5 14 28 / 42%);
  --supplier-score: #f0d59b;
  --supplier-score-caption: #d5d5be;
  --reputation-rule: rgb(220 228 239 / 20%);
  --accent-text: #e2e5cb;
  --accent-soft: rgb(220 228 239 / 9%);
  --accent-border: rgb(220 228 239 / 36%);
  --focus: #e6ebd6;
  --card-fill: #141c26;
  background-image: var(--card-artwork-dark);
}
:root[data-theme="dark"] [data-card-surface][data-card-theme="midnight"] { --card-fill: #06172e; --surface: #0e2543; }
:root[data-theme="dark"] [data-card-surface][data-card-theme="jade"] {
  --foreground: #f1f6ee;
  --secondary-foreground: #d1ded1;
  --muted-foreground: #b6cbbb;
  --border: rgb(181 220 191 / 22%);
  --border-strong: rgb(197 230 201 / 36%);
  --surface: #103d2e;
  --surface-hover: rgb(214 241 214 / 9%);
  --supplier-inset: rgb(4 29 21 / 42%);
  --supplier-score-caption: #d7d8b6;
  --reputation-rule: rgb(220 234 206 / 20%);
  --accent-text: #dfebc5;
  --accent-soft: rgb(220 234 206 / 9%);
  --accent-border: rgb(220 234 206 / 36%);
  --focus: #e3ecca;
  --card-fill: #043125;
}
:root[data-theme="dark"] [data-card-surface][data-card-theme="porcelain"] {
  --foreground: #f5f1eb;
  --secondary-foreground: #ded7ce;
  --muted-foreground: #c6bfb5;
  --surface: #332f2a;
  --supplier-inset: rgb(20 18 16 / 42%);
  --card-fill: #302d29;
}
:root[data-theme="dark"] [data-card-surface][data-card-theme="aurora"] { --card-fill: #28172d; --surface: #34213b; }
:root[data-theme="dark"] .supplier-hub [data-card-surface] [data-follow] {
  --follow-confirm: #b7e6bd;
  --follow-confirm-wash: rgb(183 230 189 / 10%);
}
[data-card-surface][data-card-theme] :is(.supplier-brand-score, .supplier-profile-score) strong {
  font-family: "Racing Sans One Score", "Avenir Next", sans-serif;
  font-weight: 400;
  letter-spacing: -.025em;
}
/* Subtle elevation keeps material edges crisp in either page appearance. */
:is(.supplier-brand-card, .supplier-profile-hero, .card-theme-preview)[data-card-surface] {
  box-shadow: 0 0 0 .5px rgb(20 30 45 / 3%), 0 1px 1px rgb(20 30 45 / 4%), 0 2px 1px -1px rgb(20 30 45 / 4%), 0 1px 3px rgb(20 30 45 / 4%);
}
@media (hover: hover) {
  .supplier-brand-card[data-card-surface]:hover {
    box-shadow: 0 2px 3px -2px rgb(20 30 45 / 12%), 0 3px 12px -4px rgb(20 30 45 / 10%), 0 4px 16px -8px rgb(20 30 45 / 10%);
  }
}
.card-theme-editor { overflow: hidden; }
.card-theme-form { padding: 22px; }
.card-theme-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.card-theme-layout { display: grid; grid-template-columns: minmax(230px, .9fr) minmax(0, 1.4fr); align-items: center; gap: 24px; }
.card-theme-preview { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 228px; padding: 26px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 12px 26px rgb(0 0 0 / 10%); }
.card-theme-preview-head { display: flex; align-items: center; gap: 13px; min-width: 0; }
.card-theme-preview-initial { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; color: var(--foreground); background: var(--supplier-inset); font-size: 21px; }
.card-theme-preview-head > div { min-width: 0; }
.card-theme-preview-initial > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-theme-preview-initial { position: relative; }
.card-theme-preview-head strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--foreground); font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.card-theme-preview-head small { display: block; margin-top: 4px; color: var(--muted-foreground); font-size: 10px; }
.card-theme-preview > p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 18px 0 0; overflow: hidden; color: var(--secondary-foreground); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.card-theme-preview-meta { margin-top: 22px; color: var(--muted-foreground); font-size: 10px; }
.card-theme-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.card-theme-option { position: relative; min-width: 0; margin: 0; padding: 0 0 9px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; color: var(--foreground); background: var(--surface); cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease; }
.card-theme-option input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.card-theme-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.card-theme-option:has(input:focus-visible) { outline: 2px solid var(--focus,var(--accent-text)); outline-offset: 3px; }
.card-theme-option-image { display: block; aspect-ratio: 1.65; border-bottom: 1px solid var(--border); }
.card-theme-option-label { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-width: 0; padding: 8px 9px 0; }
.card-theme-option-label strong { color: var(--foreground); font-size: 11px; font-weight: 550; white-space: nowrap; }
.card-theme-option-label small { overflow: hidden; color: var(--muted-foreground); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.card-theme-option-check { position: absolute; top: 7px; right: 7px; display: none; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: var(--accent); }
.card-theme-option:has(input:checked) .card-theme-option-check { display: grid; }
.card-theme-option-check svg { width: 12px; height: 12px; }
.card-theme-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.card-theme-editor-actions > span { color: var(--muted-foreground); font-size: 11px; }
.card-theme-editor-actions > span strong { color: var(--foreground); font-weight: 500; }
.card-theme-form [data-form-error] { margin: 15px 0 0; }
.card-theme-form[aria-busy="true"] .card-theme-option { opacity: .65; cursor: wait; }
@media (max-width: 1000px) {
  .card-theme-layout { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .card-theme-preview { min-height: 190px; }
  .card-theme-options { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }
  .card-theme-option-label { display: block; padding: 7px 8px 0; }
  .card-theme-option-label small { display: block; margin-top: 2px; }
}
@media (max-width: 560px) {
  .card-theme-form { padding: 17px; }
  .card-theme-preview { min-height: 190px; padding: 22px; }
  .card-theme-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  .card-theme-option-label small { font-size: 9px; }
  .card-theme-editor-actions { flex-wrap: wrap; }
  .card-theme-editor-actions > .button { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .card-theme-option { transition: none; } }