/* Son en Vinyl — sistema de diseño
   Traducción 1:1 del canvas "Son en Vinyl.dc.html" (artboard 1a).
   Un solo fondo, tres tipografías, la terracota es funcional. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --cream:  #EDE9E1;   /* único fondo del sitio */
  --ink:    #1A1A18;   /* texto, reglas, silueta de vinilo */
  --terra:  #B5432E;   /* solo funcional: Favorites, estrellas, filtro activo */
  --aux:    #DDD8CE;   /* campos, placeholder de portada */

  --rule:      rgba(26,26,24,.14);
  --border:    rgba(26,26,24,.20);
  --border-2:  rgba(26,26,24,.30);
  --muted:     rgba(26,26,24,.60);
  --muted-2:   rgba(26,26,24,.50);
  --faint:     rgba(26,26,24,.45);
  --star-off:  rgba(26,26,24,.22);

  --hatch:    repeating-linear-gradient(135deg, rgba(26,26,24,.055) 0 8px, transparent 8px 16px);
  --hatch-sm: repeating-linear-gradient(135deg, rgba(26,26,24,.055) 0 6px, transparent 6px 12px);

  /* escala de espaciado 8 / 16 / 24 / 40 / 64 / 96 */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;

  --margin:64px;   /* margen desktop */
  --maxw:1440px;
}

*, *::before, *::after { box-sizing:border-box; }

[hidden] { display:none !important; }

html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Archivo, system-ui, sans-serif;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a { color:inherit; text-decoration:none; }
a:hover { color:var(--ink); }
img { display:block; max-width:100%; }
button { font:inherit; color:inherit; }

:focus-visible { outline:2px solid var(--terra); outline-offset:2px; }

/* ---------------------------------------------------------------- primitives */

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--margin); }

.mono { font-family:'IBM Plex Mono', ui-monospace, monospace; }

.eyebrow {                       /* etiqueta mono en mayúsculas */
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2);
}

.display {
  font-family:Archivo;
  font-variation-settings:'wdth' 118;
  font-weight:800; text-transform:uppercase;
  letter-spacing:-.01em; line-height:.9;
  margin:0;
}
h1.display { font-size:52px; }
h2.display { font-size:32px; }
h3.display { font-size:20px; }

.rule       { height:1px; background:var(--rule); border:0; margin:0; }
.rule--ink  { background:var(--ink); }

.skip-link {
  position:absolute; left:-999px; top:0;
  background:var(--ink); color:var(--cream);
  padding:8px 12px; z-index:100;
}
.skip-link:focus { left:8px; top:8px; }

/* ---------------------------------------------------------------------- stars */

.stars { display:inline-flex; gap:.28em; line-height:1; color:var(--star-off); font-size:16px; }
.stars i { font-style:normal; }
.stars i.on { color:var(--terra); }

/* ------------------------------------------------------------- vinyl silhouette */
/* negro plano, agujero crema. sin brillo, sin surcos, sin rotación. */

.vinyl {
  border-radius:50%;
  background:var(--ink);
  display:grid; place-items:center;
  flex:none;
}
.vinyl > span { border-radius:50%; background:var(--cream); display:block; }

/* --------------------------------------------------------------- site header */

.site-head__inner {
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:32px;
  padding:40px 0 28px;
  border-bottom:1px solid var(--border);
}

.wordmark { display:flex; align-items:center; gap:14px; }
.wordmark__dot { display:none; width:30px; height:30px; }
.wordmark__dot > span { width:5px; height:5px; }
.wordmark b {
  display:block;
  font-variation-settings:'wdth' 118;
  font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
}
.wordmark .l1 { font-size:54px; line-height:.86; }
.wordmark .l2 { font-size:29px; line-height:1; }
.wordmark .l3 {
  font-variation-settings:normal;
  font-weight:600; font-size:10px; letter-spacing:.42em; margin-top:8px;
}

.nav { display:flex; gap:32px; align-items:baseline; }
.nav a {
  font-weight:600; font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding-bottom:3px;
}
.nav a:hover { color:var(--ink); }
.nav a.is-active { color:var(--ink); font-weight:700; border-bottom:2px solid var(--ink); }

.nav-toggle {
  display:none;
  flex-direction:column; gap:6px; width:26px; padding:8px 0;
  background:none; border:0; cursor:pointer;
}
.nav-toggle span { height:2px; background:var(--ink); display:block; }

/* buscador global */
.search-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; margin-left:4px;
  background:none; border:0; color:var(--muted); cursor:pointer; flex:none;
}
.search-toggle:hover, .search-toggle[aria-expanded="true"] { color:var(--ink); }

.site-search { border-bottom:1px solid var(--rule); background:var(--cream); }
.site-search .wrap { padding:16px var(--margin); }
.site-search input {
  width:100%; font-family:Archivo, sans-serif; font-size:20px; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--border);
  padding:8px 0; outline:none;
}
.site-search input::placeholder {
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:13px;
  letter-spacing:.04em; color:var(--muted-2); text-transform:uppercase;
}
.site-search input:focus { border-bottom-color:var(--ink); }

/* slim header (fichas) */
.slim-head__inner {
  display:flex; justify-content:space-between; align-items:center;
  gap:24px;
  padding:32px 0 20px;
  border-bottom:1px solid var(--border);
}
.slim-mark {
  display:flex; align-items:center; gap:14px;
  font-variation-settings:'wdth' 118;
  font-weight:800; text-transform:uppercase; font-size:20px;
}
.slim-mark .vinyl { width:26px; height:26px; }
.slim-mark .vinyl > span { width:4px; height:4px; }

.backlink { display:inline-block; margin-top:24px; }

/* ------------------------------------------------------------------- footer */

.site-foot {
  border-top:1px solid var(--rule);
  margin-top:var(--s6);
  padding:32px 0 64px;
}
.site-foot__inner {
  display:flex; justify-content:space-between; align-items:center; gap:18px 24px; flex-wrap:wrap;
  font-size:13px; color:var(--muted);
}
.site-foot__by { display:flex; align-items:center; gap:14px; }
.site-foot__mark { width:72px; height:auto; opacity:.5; flex:none; }

/* firma de marca al cierre de "Acerca de" */
.brand-sign { margin-top:56px; }
.brand-sign img { width:96px; height:auto; opacity:.55; display:block; }

/* --------------------------------------------------------------- home / hero */

.section-lead {
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding-top:52px;
}
.section-lead .catalog-count { margin-left:0; }

.fav-label {
  font-family:Archivo; font-weight:700; font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--terra);
}

/* 3 portadas grandes (recién llegados) */
.featured-list {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  margin-top:24px;
}
.featured { min-width:0; }
.featured__cover {
  width:100%; aspect-ratio:1;
  background-color:var(--aux); background-image:var(--hatch);
  display:flex; align-items:flex-end; padding:14px;
  position:relative; overflow:hidden;
}
.featured__cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.featured__row {
  margin-top:16px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
}
.featured__title {
  font-variation-settings:'wdth' 112;
  font-weight:800; text-transform:uppercase; font-size:24px; line-height:1.05; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:anywhere;
}
.featured__by { font-size:15px; color:var(--muted); margin-top:7px; }
.featured .stars { font-size:14px; padding-top:3px; }
.featured a:hover .featured__title { text-decoration:underline; }

.cover-tag {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted-2);
  position:relative; z-index:1;
}

/* ----------------------------------------------------------- catálogo head */

.catalog-head {
  display:flex; align-items:baseline; gap:20px; flex-wrap:wrap;
  padding-bottom:20px; border-bottom:1px solid var(--border);
}
.catalog-count {
  margin-left:auto;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.catalog-count b { color:var(--ink); font-weight:600; }

/* conmutador de vista */
.cat-views {
  display:flex; flex-wrap:wrap; gap:22px;
  margin-top:22px;
}
.cat-views button {
  background:none; border:0; padding:0 0 4px; cursor:pointer;
  font-family:Archivo; font-weight:600; font-size:14px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.cat-views button:hover { color:var(--ink); }
.cat-views button[data-active] {
  color:var(--ink); font-weight:700; border-bottom:2px solid var(--ink);
}

.filter-bar {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin-top:20px;
}
.filter-bar:empty { display:none; }

/* barra de salto (A–Z / décadas / géneros) */
.az-bar {
  position:sticky; top:0; z-index:8;
  display:flex; flex-wrap:wrap; gap:2px 4px;
  margin-top:24px; padding:10px 0;
  background:var(--cream); border-bottom:1px solid var(--rule);
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}
.az-bar a, .az-bar span { padding:2px 6px; }
.az-bar a { color:var(--ink); }
.az-bar a:hover { background:var(--ink); color:var(--cream); }
.az-bar span { color:rgba(26,26,24,.28); }

/* secciones del catálogo */
.cat-section { padding-top:36px; }
.cat-section + .cat-section { border-top:1px solid var(--rule); margin-top:12px; }
.cat-section__head {
  font-family:Archivo; font-variation-settings:'wdth' 118;
  font-weight:800; text-transform:uppercase; font-size:26px; line-height:1;
  letter-spacing:-.005em; margin:0 0 20px;
}
.cat-section .disc-grid { margin-top:0; }

/* vista "por artista": sublabel de artista dentro de la sección de la inicial */
.disc-grid--labelled { row-gap:22px; }
.cat-artist {
  grid-column:1 / -1;
  margin:14px 0 0;
  font-family:Archivo; font-weight:700; font-size:15px;
  display:flex; align-items:baseline; gap:8px;
}
.cat-artist:first-child { margin-top:0; }
.cat-artist span {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; font-weight:400; color:var(--muted-2);
}

.index__empty {
  padding:48px 0; font-family:Archivo; font-size:15px; color:var(--muted);
}

/* --------------------------------------------------------------- disc grid */

.disc-grid {
  display:grid; grid-template-columns:repeat(5, 1fr); gap:28px 24px;
  margin-top:32px;
}
.disc { min-width:0; }
.disc__cover {
  display:block; aspect-ratio:1;
  background-color:var(--aux); background-image:var(--hatch-sm);
  position:relative; overflow:hidden;
}
.disc__cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.disc__title {
  font-family:Archivo; font-weight:700; font-size:14px; line-height:1.25;
  margin-top:12px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:anywhere;
}
.disc a:hover .disc__title { text-decoration:underline; }
.disc__meta { font-size:13px; color:var(--muted); margin-top:3px; }
.disc .stars { font-size:12px; margin-top:6px; }

/* aparición al hacer scroll — fade + leve subida, en cascada.
   El estado inicial solo aplica si el JS marcó :root.reveal-on. */
:root.reveal-on .disc.reveal,
:root.reveal-on .featured.reveal {
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .58s cubic-bezier(.22,.61,.28,1);
}
:root.reveal-on .disc.reveal.is-in,
:root.reveal-on .featured.reveal.is-in {
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce) {
  :root.reveal-on .disc.reveal,
  :root.reveal-on .featured.reveal { opacity:1; transform:none; transition:none; }
}

.morelink { display:flex; justify-content:center; margin-top:56px; }
.morelink a {
  font-weight:700; font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  border-bottom:2px solid var(--ink); padding-bottom:4px;
}

/* ------------------------------------------------------------------- chips */
/* filtro de dato: outline; activo = relleno negro.
   filtro curatorial (rating): siempre relleno terracota. */

.chips { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

.chip, .chip-select {
  font-family:Archivo; font-weight:600; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
  background:transparent;
  border:1px solid var(--border-2);
  padding:6px 12px; line-height:1.1; cursor:pointer;
}
.chip-select {
  -webkit-appearance:none; appearance:none;
  max-width:190px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding-right:24px;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:right 13px center, right 8px center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.chip.is-set, .chip-select.is-set {
  background:var(--ink); color:var(--cream); border-color:var(--ink); padding:7px 12px;
}

/* ------------------------------------------------------------- meta grid */

.meta-grid {
  display:grid; grid-template-columns:auto 1fr; gap:10px 24px;
  font-family:Archivo; font-size:15px; color:var(--ink); margin:0;
}
.meta-grid dt {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); padding-top:3px;
}
.meta-grid dd { margin:0; }
.meta-grid dd.mono { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:14px; color:rgba(26,26,24,.7); }

/* ---------------------------------------------------------- ficha editorial */

.ficha {
  display:grid; grid-template-columns:440px 1fr; gap:96px;
  margin-top:32px; align-items:start;
}
.ficha__aside { position:sticky; top:24px; align-self:start; }
.ficha__cover {
  width:100%; aspect-ratio:1;
  background-color:var(--aux); background-image:var(--hatch);
  display:flex; align-items:flex-end; padding:14px;
  position:relative; overflow:hidden;
}
.ficha__cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ficha__side .meta-grid { margin-top:28px; }

/* galería: portada + fotos de Discogs */
.ficha__gallery { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.ficha__gallery button {
  width:58px; height:58px; padding:0; border:1px solid var(--border);
  background:var(--aux); cursor:pointer; overflow:hidden; flex:none;
}
.ficha__gallery img { width:100%; height:100%; object-fit:cover; display:block; }
.ficha__gallery button:hover { border-color:var(--ink); }

.lightbox {
  position:fixed; inset:0; z-index:100;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  background:rgba(26,26,24,.93);
}
.lightbox img { max-width:88vw; max-height:88vh; object-fit:contain; justify-self:center; }
.lightbox button {
  background:none; border:0; color:var(--cream); cursor:pointer;
  font-size:34px; line-height:1; padding:20px;
}
.lightbox button:hover { color:#fff; }
.lightbox__close { position:absolute; top:8px; right:12px; font-size:30px; }

/* tracklist */
.tracklist { list-style:none; margin:0; padding:0; }
.tl-row {
  display:grid; grid-template-columns:3.5ch 1fr auto; gap:14px; align-items:baseline;
  padding:7px 0; border-top:1px solid var(--rule);
  font-family:Archivo; font-size:15px;
}
.tl-pos, .tl-dur {
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12px; color:var(--muted);
}
.tl-dur { text-align:right; }
.tl-title { min-width:0; }
.tl-head {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2);
  padding:18px 0 4px;
}
.tl-head:first-child { padding-top:0; }

.ficha__main { max-width:660px; min-width:0; }
.ficha__main .fav-label { font-size:12px; }
.ficha__title {
  font-family:Fraunces;
  font-variation-settings:'opsz' 120;
  font-weight:500; font-size:78px; line-height:.98; letter-spacing:-.015em;
  margin:18px 0 0; text-wrap:balance;
}
.ficha__by {
  font-variation-settings:'wdth' 108;
  font-weight:700; text-transform:uppercase; font-size:20px; letter-spacing:.06em;
  margin-top:22px;
}
.ficha__main .stars { font-size:24px; gap:.3em; margin-top:20px; }

.nota { margin-top:20px; }
.nota p {
  font-size:20px; line-height:1.65; max-width:620px; margin:0;
}
.nota p + p { margin-top:24px; }
.nota-added {
  margin-top:44px;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
}

.tiktok-box {
  width:270px; aspect-ratio:9 / 16;
  background-color:var(--aux); background-image:var(--hatch);
  margin:12px 0 0;
  display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  padding:14px; border:0;
}
.tiktok-box .path {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:10px; color:var(--faint); word-break:break-all;
}
iframe.tiktok-box, blockquote.tiktok-box { background:var(--aux); }

.more-head { margin-top:0; }
.more {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:20px;
}
.more .disc__meta { margin-top:2px; }

/* ------------------------------------------------------------------- prose */

.prose { max-width:640px; }
.prose h1.editorial {
  font-family:Fraunces; font-variation-settings:'opsz' 120;
  font-weight:500; font-size:56px; line-height:1; letter-spacing:-.01em; margin:0;
}
.prose p { font-size:17px; line-height:1.65; margin:20px 0 0; }
.prose p::first-letter { }
.dropcap p:first-of-type::first-letter {
  font-family:Fraunces; font-variation-settings:'opsz' 120;
  font-weight:500; font-size:3.4em; line-height:.8;
  float:left; margin:.06em .08em 0 0;
}

/* ------------------------------------------------------------------ layout */

main { display:block; }
.page { padding-bottom:0; }
.stack-6 > * + * { margin-top:var(--s6); }

/* ------------------------------------------------------------- responsive */

@media (max-width:1180px) {
  .disc-grid { grid-template-columns:repeat(4, 1fr); }
}

@media (max-width:1023px) {
  .featured-list { grid-template-columns:repeat(3, 1fr); gap:18px; }
  .featured__title { font-size:19px; }

  /* una columna, sin sticky. orden 1f: portada → nota → ficha técnica → tiktok */
  .ficha { display:flex; flex-direction:column; gap:40px; }
  .ficha__aside { display:contents; }
  .ficha__cover { order:1; }
  .ficha__main { order:2; }
  .ficha__side { order:3; }
  .ficha__side .meta-grid { margin-top:0; }
  .ficha__title { font-size:52px; }
  .tiktok-box { width:100%; }
}

@media (max-width:767px) {
  :root { --margin:20px; }

  .site-head__inner { align-items:center; padding:24px 0 18px; }
  .wordmark__dot { display:grid; }
  .wordmark b { display:inline; }
  .wordmark .l1, .wordmark .l2 { font-size:22px; line-height:.9; }
  .wordmark .l1::after { content:" "; }
  .wordmark .l3 { display:block; font-size:8px; letter-spacing:.4em; margin-top:4px; }
  .nav {
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; align-items:stretch; background:var(--cream);
    border-bottom:1px solid var(--border); z-index:20;
  }
  .site-head { position:relative; }
  .nav.is-open { display:flex; }
  .nav a { padding:14px var(--margin); border-top:1px solid var(--rule); }
  .nav a.is-active { border-bottom:0; }
  .nav-toggle { display:flex; }

  h1.display { font-size:34px; }
  h2.display { font-size:22px; }

  .section-lead { padding-top:32px; }
  .featured-list { grid-template-columns:1fr; gap:28px; }
  .featured__title { font-size:24px; }

  .cat-views { gap:16px; margin-top:18px; }
  .cat-views button { font-size:13px; letter-spacing:.08em; }

  .disc-grid { grid-template-columns:repeat(2, 1fr); gap:22px 16px; }
  .cat-section__head { font-size:22px; }

  .ficha__title { font-size:42px; }
  .more { grid-template-columns:repeat(2, 1fr); }

  .prose h1.editorial { font-size:38px; }

  .catalog-count { margin-left:0; }
}

/* -------------------------------------------------- agregar disco (add.js) */

.add-fab {
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:52px; height:52px; border-radius:50%;
  background:var(--ink); color:var(--cream); border:0;
  font-family:Archivo, sans-serif; font-size:30px; font-weight:400; line-height:1;
  cursor:pointer;
  /* excepción deliberada al "sin sombras": es un control flotante, no contenido */
  box-shadow:0 3px 14px rgba(26,26,24,.22);
}
.add-fab:hover { background:#000; }

.add-sheet { position:fixed; inset:0; z-index:70; display:flex; }
.add-sheet[hidden] { display:none; }
.add-scrim { position:absolute; inset:0; background:rgba(26,26,24,.5); }
.add-panel {
  position:relative; margin:auto;
  width:min(520px, 100%); max-height:92vh; overflow:auto;
  background:var(--cream); border:1px solid var(--border);
  padding:28px;
}
.add-x {
  position:absolute; top:10px; right:12px;
  width:38px; height:38px; border:0; background:none;
  font-size:26px; line-height:1; color:var(--ink); cursor:pointer;
}
.add-body h2 {
  font-family:Archivo; font-variation-settings:'wdth' 112;
  font-weight:800; text-transform:uppercase; font-size:22px; line-height:1.05;
  margin:0 0 6px;
}
.add-muted { color:var(--muted); font-size:14px; margin:0 0 16px; }
.add-err { color:var(--terra); font-size:13px; font-weight:600; min-height:1em; margin-top:10px; }

.add-form { display:flex; flex-direction:column; gap:12px; }
.add-form input[type=text], .add-form input[type=password], .add-form select {
  width:100%; font:inherit; padding:11px 12px;
  background:#fff5; border:1px solid var(--border-2); color:var(--ink);
}
.add-form label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; }
.add-form .add-inline { flex-direction:row; align-items:center; gap:8px; font-weight:400; }
.add-form button[type=submit], .add-btn {
  font:inherit; font-weight:700; font-size:14px; padding:11px 16px;
  background:var(--ink); color:var(--cream); border:1px solid var(--ink);
  cursor:pointer; text-align:center; text-decoration:none; display:inline-block;
}
.add-btn.add-ghost { background:transparent; color:var(--ink); }
.add-form button:disabled { opacity:.55; }

.add-scan-btn {
  margin-top:10px; width:100%; font:inherit; font-weight:600; font-size:13px;
  letter-spacing:.04em; text-transform:uppercase;
  padding:10px; background:transparent; border:1px solid var(--border-2);
  color:var(--ink); cursor:pointer;
}
.add-back {
  background:none; border:0; padding:0; margin:0 0 10px; cursor:pointer;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}

#add-results { margin-top:14px; display:flex; flex-direction:column; gap:2px; }
.add-cand {
  display:flex; gap:12px; align-items:flex-start; text-align:left;
  padding:10px 2px; background:none; border:0; border-top:1px solid var(--rule);
  cursor:pointer; width:100%;
}
.add-cand:hover { background:#0000000a; }
.add-cand__cover {
  width:52px; height:52px; flex:none; background:var(--aux); overflow:hidden;
}
.add-cand__cover img { width:100%; height:100%; object-fit:cover; display:block; }
.add-cand__t { display:flex; flex-direction:column; gap:2px; min-width:0; }
.add-cand__t b { font-family:Archivo; font-weight:700; font-size:14px; }
.add-cand__t > span { font-size:12px; color:var(--muted); }
.add-cand__meta { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:11px; }
.add-cand__dup { color:var(--terra) !important; font-weight:600; }

.add-rate { display:inline-flex; gap:4px; }
.add-rate button {
  background:none; border:0; padding:0 2px; cursor:pointer;
  font-size:20px; line-height:1; color:var(--star-off);
}
.add-rate button.on { color:var(--terra); }

.add-cam { display:flex; flex-direction:column; gap:10px; align-items:center; margin-top:12px; }
.add-cam video {
  width:100%; max-width:360px; aspect-ratio:4/3; object-fit:cover;
  background:var(--ink); border:1px solid var(--border);
}
.add-cam__line {
  width:min(300px,80%); height:2px; background:var(--terra); margin-top:-30px;
}

.add-done { text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center; }
.add-done__tick { font-weight:700; color:#2e7d32; margin:0; }

@media (max-width:560px) {
  .add-panel { width:100%; margin:auto 0 0; max-height:88vh; border-bottom:0; }
  .add-sheet { align-items:flex-end; }
}

@media print {
  .site-head, .site-foot, .nav-toggle, .morelink, .az-bar, .add-fab { display:none; }
  body { background:#fff; }
}