/* ============================================================
   Rilayer · tema "BHC" — override di index.html
   Fondo #050505, testo #e5e7eb, nebulosa viola in puro CSS,
   titoli system-sans maiuscoli con gradiente magenta → arancio,
   nav e micro-etichette monospaziate con tracking.
   Da collegare DOPO lo <style> inline; i selettori sono comunque
   prefissati con `body` per prevalere a prescindere dall'ordine.
   ============================================================ */

:root {
  --bhc-bg: #050505;
  --bhc-bg-2: #0b0b10;
  --bhc-panel: #0e0e14;
  --bhc-panel-2: #13131b;
  --bhc-line: #23232f;
  --bhc-line-2: #34344a;
  --bhc-text: #e5e7eb;
  --bhc-muted: #9ca3af;
  --bhc-magenta: #e879f9;
  --bhc-magenta-deep: #c026d3;
  --bhc-orange: #fb923c;
  --bhc-violet: #7c3aed;
  --bhc-grad: linear-gradient(100deg, #f0abfc 0%, #e879f9 35%, #fb923c 100%);
  --bhc-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --bhc-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bhc-focus: #fb923c;

  /* neutralizza i verdi del tema originale, usati da button e .tag/.notice */
  --green: #c026d3;
  --lime: #1a1122;

  font-family: var(--bhc-sans);
  color: var(--bhc-text);
  background: var(--bhc-bg);
  color-scheme: dark;
}

/* ── Universo: nebulose e stelle, solo CSS ────────────────── */
html { background: var(--bhc-bg); }
body {
  position: relative;
  background: var(--bhc-bg);
  color: var(--bhc-text);
  min-height: 100vh;
  isolation: isolate;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* nebulose */
body::before {
  background:
    radial-gradient(60vw 42vw at 82% -6%, rgba(124, 58, 237, .38), transparent 62%),
    radial-gradient(48vw 36vw at 8% 22%, rgba(192, 38, 211, .22), transparent 60%),
    radial-gradient(40vw 30vw at 55% 78%, rgba(251, 146, 60, .10), transparent 60%),
    radial-gradient(70vw 50vw at 30% 110%, rgba(76, 29, 149, .30), transparent 65%);
}
/* stelle: tre strati di punti a passo diverso */
body::after {
  background-image:
    radial-gradient(1px 1px at 12px 18px, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 78px 64px, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 140px 30px, rgba(232,121,249,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 200px 120px, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 46px 150px, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 170px 170px, rgba(251,146,60,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 110px 96px, rgba(255,255,255,.8) 50%, transparent 51%);
  background-size: 220px 190px, 260px 230px, 340px 300px, 300px 260px, 240px 210px, 380px 330px, 280px 250px;
  opacity: .55;
}
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: bhc-twinkle 9s ease-in-out infinite alternate; }
  @keyframes bhc-twinkle { from { opacity: .4; } to { opacity: .7; } }
}

/* ── Tipografia di base ───────────────────────────────────── */
body h1, body h2, body h3 {
  font-family: var(--bhc-sans);
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--bhc-text);
}
body p { color: var(--bhc-text); }
body .muted { color: var(--bhc-muted); }
body .eyebrow,
body label,
body .badge,
body .tag,
body dt,
body footer,
body .notice,
body nav button,
body .toolbar label {
  font-family: var(--bhc-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
body .eyebrow { color: var(--bhc-magenta); font-size: 11px; font-weight: 600; }
body a { color: var(--bhc-orange); }
body ::selection { background: rgba(232,121,249,.35); color: #fff; }

/* ── Avviso ───────────────────────────────────────────────── */
body .notice {
  background: rgba(192, 38, 211, .10);
  color: #f5d0fe;
  border-bottom: 1px solid rgba(232, 121, 249, .28);
  font-size: 11px;
  letter-spacing: .12em;
}

/* ── Header e logo ────────────────────────────────────────── */
body header {
  position: sticky;
  top: 0;
  z-index: 4;
  background: rgba(5, 5, 5, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bhc-line);
}
body .logo {
  font-family: var(--bhc-sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.03em;
  text-decoration: none;
  background: var(--bhc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
body .logo span { color: inherit; -webkit-text-fill-color: inherit; }
body .logo:focus-visible { border-radius: 4px; }

/* ── Bottoni ──────────────────────────────────────────────── */
body button {
  font-family: var(--bhc-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 4px;
  background: var(--bhc-grad);
  color: #050505;
  transition: filter .18s ease, border-color .18s ease, color .18s ease, background-color .18s ease;
}
body button:hover { filter: brightness(1.08) saturate(1.05); }
body button.secondary,
body button.heart {
  background: transparent;
  color: var(--bhc-text);
  border: 1px solid var(--bhc-line-2);
}
body button.secondary:hover,
body button.heart:hover { border-color: var(--bhc-magenta); color: #fff; filter: none; }
body button.heart { font-family: var(--bhc-sans); font-size: 16px; letter-spacing: 0; line-height: 1; }
body button.heart[aria-pressed="true"] { color: var(--bhc-magenta); border-color: var(--bhc-magenta); background: rgba(232,121,249,.10); }
body button.close { background: transparent; color: var(--bhc-muted); border: 1px solid var(--bhc-line-2); }
body button.close:hover { color: #fff; border-color: var(--bhc-orange); }
body nav button { padding: 10px 14px; }

/* ── Stati di focus ───────────────────────────────────────── */
body :focus-visible {
  outline: 2px solid var(--bhc-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(251, 146, 60, .22);
}

/* ── Intro del catalogo (compatta, il catalogo resta sotto) ── */
body .intro { margin-bottom: 26px; }
body h1 {
  font-size: clamp(40px, 6.2vw, 84px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .96;
  background: var(--bhc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: .06em; /* evita il taglio dei discendenti con clip */
}
body .intro p { color: var(--bhc-muted); font-size: 15px; }

/* ── Filtri ───────────────────────────────────────────────── */
body .filters {
  background: rgba(14, 14, 20, .82);
  border: 1px solid var(--bhc-line);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body label { font-size: 11px; font-weight: 600; color: var(--bhc-muted); }
body input,
body select,
body textarea {
  font-family: var(--bhc-sans);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  background: var(--bhc-bg-2);
  color: var(--bhc-text);
  border: 1px solid var(--bhc-line-2);
  border-radius: 4px;
}
body input::placeholder,
body textarea::placeholder { color: #6b7280; }
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible {
  outline: none;
  border-color: var(--bhc-magenta);
  box-shadow: 0 0 0 3px rgba(232, 121, 249, .25);
}
body select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e879f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}
body select option { background: var(--bhc-panel); color: var(--bhc-text); }
body input[type="checkbox"] { accent-color: var(--bhc-magenta-deep); width: auto; margin-right: 8px; vertical-align: middle; }
body input[type="file"] { padding: 9px; color: var(--bhc-muted); }
body input[type="file"]::file-selector-button {
  font-family: var(--bhc-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: transparent;
  color: var(--bhc-text);
  border: 1px solid var(--bhc-line-2);
  border-radius: 4px;
  padding: 6px 10px;
  margin-right: 12px;
  cursor: pointer;
}
body input[type="number"] { -moz-appearance: textfield; }

/* ── Toolbar risultati ────────────────────────────────────── */
body .toolbar { border-bottom: 1px solid var(--bhc-line); padding-bottom: 12px; }
body .toolbar label { display: flex; align-items: center; gap: 10px; }
body .toolbar select { margin-top: 0; width: auto; padding: 8px 34px 8px 10px; font-size: 14px; }
body #count { font-family: var(--bhc-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* ── Schede annuncio ──────────────────────────────────────── */
body .card {
  background: linear-gradient(180deg, var(--bhc-panel-2), var(--bhc-panel));
  border: 1px solid var(--bhc-line);
  border-radius: 10px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body .card:hover,
body .card:focus-within {
  border-color: rgba(232, 121, 249, .55);
  box-shadow: 0 0 0 1px rgba(232,121,249,.15), 0 18px 40px -22px rgba(124, 58, 237, .8);
}
@media (prefers-reduced-motion: no-preference) {
  body .card:hover { transform: translateY(-2px); }
}
body .art {
  background:
    radial-gradient(70% 90% at 50% 100%, rgba(124, 58, 237, .30), transparent 70%),
    linear-gradient(180deg, #0b0b12, #101019);
  border-bottom: 1px solid var(--bhc-line);
}
body .art.resina {
  background:
    radial-gradient(70% 90% at 50% 100%, rgba(232, 121, 249, .28), transparent 70%),
    linear-gradient(180deg, #0d0a14, #14101f);
}
body .art img { background: #000; }

/* Illustrazione SVG: i colori sono attributi hardcoded, il CSS li sovrascrive.
   Ordine dei path nel markup: 1 telaio, 2 base, 3 guida, 4 testa, 5 ugello,
   6 pezzo stampato, 7 linee di strato. */
body .art svg ellipse { fill: #000; opacity: .45; }
body .art svg path:nth-of-type(1) { stroke: #6d6d85; }              /* telaio */
body .art svg path:nth-of-type(2) { fill: #2a2a3b; }                /* base */
body .art svg path:nth-of-type(3) { stroke: #4b4b63; }              /* guida X */
body .art svg path:nth-of-type(4) { fill: #1c1c28; }                /* testa */
body .art svg path:nth-of-type(5) { stroke: var(--bhc-orange); }    /* ugello caldo */
body .art svg path:nth-of-type(6) { fill: var(--bhc-orange); }      /* pezzo FDM */
body .art svg path:nth-of-type(7) { stroke: rgba(5,5,5,.5); }       /* strati */
body .art.resina svg path:nth-of-type(6) { fill: #c084fc; }         /* pezzo resina */

body .badge {
  background: rgba(5, 5, 5, .85);
  color: var(--bhc-orange);
  border: 1px solid rgba(251, 146, 60, .35);
  font-size: 10px;
  letter-spacing: .12em;
  border-radius: 3px;
}
body .card h3 { font-size: 17px; letter-spacing: -.01em; line-height: 1.2; }
body .price {
  font-family: var(--bhc-sans);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -.03em;
  background: var(--bhc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
body .card button { padding: 9px 12px; font-size: 11px; }

/* ── Stato vuoto ──────────────────────────────────────────── */
body .empty {
  background: rgba(14, 14, 20, .82);
  border: 1px dashed var(--bhc-line-2);
  border-radius: 10px;
}
body .empty h2 { font-size: 22px; }
body .empty p { color: var(--bhc-muted); }

/* ── Modulo di pubblicazione ──────────────────────────────── */
body .panel {
  background: rgba(14, 14, 20, .88);
  border: 1px solid var(--bhc-line);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body .panel h1 { font-size: clamp(30px, 4.5vw, 44px); }
body .panel h2 { font-size: 15px; letter-spacing: .08em; color: var(--bhc-magenta); }
body .panel > p { color: var(--bhc-muted); }
body .step { border-top: 1px solid var(--bhc-line); }
body .preview { border: 1px solid var(--bhc-line-2); border-radius: 6px; background: #000; }
body #preview p { margin: 10px 0 0; }

/* ── Pubblicazione collegata all'API: accesso, foto, esito ─── */
html body #adform-auth { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0 6px; padding: 12px 14px; border: 1px solid var(--el-line-2); border-radius: 8px; background: rgba(255,255,255,.03); }
html body #adform-auth.is-out { border-color: rgba(251,146,60,.6); }
html body #adform-auth p { margin: 0; }
html body #adform .check { display: flex; align-items: center; gap: 8px; align-self: end; min-height: 44px; color: var(--el-text); }
html body #adform .check input { margin: 0; }
html body #adform [aria-invalid="true"] { border-color: #f87171; }
html body #adform button[disabled] { opacity: .55; cursor: not-allowed; filter: none; box-shadow: none; }
html body .photos { list-style: none; padding: 0; margin: 12px 0 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
html body .photos li { position: relative; aspect-ratio: 1; border: 1px solid var(--el-line-2); border-radius: 6px; overflow: hidden; background: #000; }
html body .photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body .photos .cover { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 4px; font-size: 12px; background: rgba(0,0,0,.75); color: var(--el-text); }
html body .photos button { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; padding: 0; font-size: 20px; line-height: 1; background: rgba(0,0,0,.75); color: #fff; border-color: var(--el-line-2); }
html body #adform-msg { margin-top: 14px; font-size: 14.5px; color: var(--el-muted); }
html body #adform-msg.is-error { color: #fca5a5; }
html body #adform-msg p { margin: 0; color: inherit; }
html body #adform-msg ul { margin: 6px 0 0; padding-left: 18px; }

/* ── Finestra di dettaglio ────────────────────────────────── */
body dialog {
  background: var(--bhc-panel);
  color: var(--bhc-text);
  border: 1px solid var(--bhc-line-2);
  border-radius: 12px;
  box-shadow: 0 30px 80px -20px rgba(124, 58, 237, .55), 0 0 0 1px rgba(232,121,249,.08);
}
body dialog::backdrop {
  background: rgba(5, 5, 5, .78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body dialog h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.025em; }
body .detail .art { border: 1px solid var(--bhc-line); border-radius: 8px; }
body dl { row-gap: 12px; }
body dt { font-size: 10px; color: var(--bhc-muted); letter-spacing: .14em; }
body dd { color: var(--bhc-text); font-weight: 600; font-size: 14px; }
body .tag {
  background: rgba(251, 146, 60, .12);
  color: var(--bhc-orange);
  border: 1px solid rgba(251, 146, 60, .35);
  font-size: 11px;
  letter-spacing: .12em;
}
body dialog .price { font-size: 32px; }
body dialog form { border-top: 1px solid var(--bhc-line); margin-top: 16px; padding-top: 16px; }
body dialog b { color: var(--bhc-orange); font-family: var(--bhc-mono); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }

/* ── Notifica ─────────────────────────────────────────────── */
body .toast {
  background: var(--bhc-panel);
  color: var(--bhc-text);
  border: 1px solid rgba(232, 121, 249, .55);
  box-shadow: 0 16px 40px -16px rgba(232, 121, 249, .5);
  font-family: var(--bhc-mono);
  font-size: 12px;
  letter-spacing: .06em;
}

/* ── Piè di pagina ────────────────────────────────────────── */
body footer {
  border-top: 1px solid var(--bhc-line);
  color: var(--bhc-muted);
  font-size: 10px;
  letter-spacing: .12em;
  line-height: 1.9;
  background: rgba(5, 5, 5, .7);
}

/* ── Movimento ────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  body .card { animation-duration: .4s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  body dialog[open] { animation: bhc-rise .22s cubic-bezier(.2,.7,.2,1); }
  body .toast { animation: bhc-rise .22s cubic-bezier(.2,.7,.2,1); }
  @keyframes bhc-rise { from { opacity: 0; transform: translate(var(--bhc-tx, 0), 10px); } }
  body .toast { --bhc-tx: -50%; }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  body .card, body dialog[open], body .toast { animation: none; }
  body .card:hover { transform: none; }
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 650px) {
  body header { padding: 14px 5%; }
  body .logo { font-size: 26px; }
  body nav { gap: 6px; }
  body nav button { padding: 9px 10px; font-size: 10px; letter-spacing: .08em; }
  body h1 { font-size: clamp(34px, 11vw, 48px); }
  body .filters { background: rgba(14, 14, 20, .92); }
  body .toolbar { flex-wrap: wrap; gap: 10px; }
  body dialog { padding: 20px; width: min(94vw, 850px); }
  body .price { font-size: 23px; }
}

/* ── Contrasto elevato ────────────────────────────────────── */
@media (prefers-contrast: more) {
  :root { --bhc-line: #4b4b5e; --bhc-line-2: #6b6b82; --bhc-muted: #c4c9d1; }
  body::before { opacity: .5; }
  body .logo, body h1, body .price {
    background: none;
    color: var(--bhc-orange);
    -webkit-text-fill-color: var(--bhc-orange);
  }
}