@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');
/* Contributi — foglio condiviso, linguaggio "Nakamura": Inter heavy + Space Mono,
   accento rosso, arte desaturata che si accende. Due temi: scuro (default) e
   chiaro via html[data-theme="light"]. Stessi nomi di classe/variabile: JS e
   stili inline restano validi. Gli stati di moderazione restano leggibili. */
:root {
  --bg: #f4f1ea; --paper: #ffffff; --raised: #fbfaf6;
  --ink: #16130f; --ink-soft: #5b5247; --ink-faint: #8c8275;
  --rule: #e2dccf; --rule-soft: #ece7dc;
  --accent: #e23012; --accent-soft: rgba(226,48,18,.10);
  --link: #b9260c;
  --ok: #2f7d54; --ok-bg: rgba(47,125,84,.12);
  --warn: #9a7a1f; --warn-bg: rgba(154,122,31,.14);
  --bad: #a83232; --bad-bg: rgba(168,50,50,.10);
  --head-bg: rgba(255,255,255,.9); --sunk: #ece7dc;
  --tile-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 14px rgba(0,0,0,.08);
  --serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Space Mono', ui-monospace, Menlo, monospace;
}
html[data-theme="dark"] {
  --bg: #080808; --paper: #111111; --raised: #0d0d0d;
  --ink: #f3f1ec; --ink-soft: #a8a299; --ink-faint: #6c665d;
  --rule: #262626; --rule-soft: #1b1b1b;
  --accent: #ff3b1d; --accent-soft: rgba(255,59,29,.13);
  --link: #ff5a3c;
  --ok: #46b27a; --ok-bg: rgba(70,178,122,.14);
  --warn: #d6a93a; --warn-bg: rgba(214,169,58,.15);
  --bad: #e2554f; --bad-bg: rgba(226,85,79,.15);
  --head-bg: rgba(8,8,8,.9); --sunk: #161616;
  --tile-shadow: 0 0 8px rgba(255,255,255,.14), 0 0 20px rgba(255,255,255,.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg); color: var(--ink); font-family: var(--sans);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}
::selection { background: var(--accent); color: #fff; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Testata ───────────────────────────────────────────────────────────── */
header.masthead {
  background: var(--head-bg); border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(140%) blur(12px);
}
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; height: 56px; padding: 0 clamp(18px,3.5vw,40px);
}
.mast-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brand { display: flex; flex-direction: column; gap: 3px; }
.pro-back { display: inline-block; margin: 16px clamp(18px,3.5vw,40px) 0; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-soft); text-decoration: none; transition: color .16s; }
.pro-back:hover { color: var(--accent); }
.brand a.title {
  font-family: var(--sans); font-size: 22px; font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.brand .subtitle {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
nav.session {
  font-family: var(--mono); font-size: 12px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
nav.session .who { color: var(--ink-soft); }
nav.session .who b { color: var(--ink); }
nav.session a, nav.session button.linklike {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--link);
  background: none; border: none; cursor: pointer; padding: 0;
}
nav.session button.linklike:hover { text-decoration: underline; }
/* Sessione testata: identica a Discover/ArtItaly (nome + Logout · ospite → Login). */
nav.session#session-nav { gap: 10px; }
.ai-who { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; font-size: 11px; letter-spacing: 1.5px; color: var(--ink-soft); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.ai-link { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--accent); background: transparent; border: 1px solid var(--rule); border-radius: 9px; padding: 6px 11px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: border-color .16s; }
.ai-link:hover { border-color: var(--accent); text-decoration: none; }
.ai-menu-who { display: block; padding: 13px 24px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--rule); }
.mod-badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; background: var(--accent); color: #fff; padding: 2px 7px; border-radius: 0;
}
.theme-tog {
  font-family: var(--mono); font-size: 14px; line-height: 1; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-soft); cursor: pointer; border-radius: 3px; transition: .18s;
}
.theme-tog:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ── Layout ────────────────────────────────────────────────────────────── */
main { padding: 34px 24px 80px; }
.narrow { max-width: 560px; }

h1 { font-family: var(--serif); font-size: clamp(28px,4vw,40px); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin-bottom: 8px; }
h2 { font-family: var(--serif); font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 12px; }
h3 { font-size: 14px; font-weight: 700; font-family: var(--sans); }
p { margin-bottom: 12px; }
.lead { font-size: 18px; color: var(--ink-soft); margin-bottom: 22px; max-width: 60ch; }
.muted { color: var(--ink-faint); }
.small { font-family: var(--sans); font-size: 13px; }
.tiny { font-family: var(--mono); font-size: 11px; }

hr.rule { border: none; border-top: 1px solid var(--rule); margin: 28px 0; }

/* ── Bottoni ───────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  padding: 10px 18px; border-radius: 3px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; cursor: pointer; display: inline-block;
}
.btn:hover { background: #e22d10; border-color: #e22d10; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { background: var(--rule-soft); border-color: var(--ink-faint); }
.btn.small { font-size: 12px; padding: 7px 12px; }
.btn.ok { border-color: var(--ok); background: var(--ok); color: #06140d; }
.btn.ok:hover { background: #57c489; }
.btn.bad { border-color: var(--bad); background: transparent; color: var(--bad); }
.btn.bad:hover { background: var(--bad-bg); }
.btn:disabled { opacity: .5; cursor: default; }

/* ── Form ──────────────────────────────────────────────────────────────── */
label.field { display: block; margin-bottom: 14px; }
label.field > span {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px;
}
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], textarea, select {
  width: 100%; font-family: var(--sans); font-size: 14px;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--paper); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.msg { font-family: var(--mono); font-size: 12px; margin-top: 10px; min-height: 18px; }
.msg.err { color: var(--bad); }
.msg.ok { color: var(--ok); }

/* ── Card / box ────────────────────────────────────────────────────────── */
.card {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 4px; padding: 22px 24px; margin-bottom: 18px;
}

/* ── Provenienza (catalogo) ────────────────────────────────────────────── */
.opera-head { display: flex; gap: 26px; flex-wrap: wrap; }
.opera-figure { flex: 0 0 240px; }
.opera-figure img { width: 100%; border: 1px solid var(--rule); background: var(--sunk); display: block;
  filter: grayscale(.92) brightness(.86); transition: filter .4s ease; }
.opera-figure img:hover { filter: grayscale(0) brightness(1); }
.opera-figure .noimg {
  width: 100%; aspect-ratio: 3/4; border: 1px dashed var(--rule);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--ink-faint); font-family: var(--mono); font-size: 11px; padding: 12px; background: var(--sunk);
}
.opera-meta { flex: 1; min-width: 280px; }
dl.props { display: grid; grid-template-columns: 180px 1fr; gap: 0; margin-top: 8px; }
dl.props dt {
  font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faint); padding: 8px 12px 8px 0; border-top: 1px solid var(--rule-soft);
}
dl.props dd { padding: 8px 0; border-top: 1px solid var(--rule-soft); color: var(--ink); }
.src-tag {
  display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  color: var(--accent); background: var(--accent-soft); border-radius: 0;
  padding: 1px 7px; margin-left: 6px; vertical-align: middle; white-space: nowrap;
}

/* ── Tab ───────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin: 30px 0 0; flex-wrap: wrap; }
.tab {
  font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  padding: 11px 18px; border: 1px solid transparent; border-bottom: none;
  color: var(--ink-soft); border-radius: 3px 3px 0 0; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.active { background: var(--paper); border-color: var(--rule); color: var(--accent); }
.tab .count { font-size: 11px; color: var(--ink-faint); font-weight: 400; }
.tabpane { display: none; background: var(--paper); border: 1px solid var(--rule); border-top: none;
  padding: 24px; border-radius: 0 0 4px 4px; }
.tabpane.active { display: block; }

/* ── Contributi (lista) ────────────────────────────────────────────────── */
.contrib {
  border: 1px solid var(--rule-soft); border-left: 3px solid var(--rule);
  border-radius: 3px; padding: 14px 16px; margin-bottom: 12px; background: var(--raised);
}
.contrib.approved { border-left-color: var(--ok); }
.contrib.pending { border-left-color: var(--warn); }
.contrib.rejected { border-left-color: var(--bad); opacity: .72; }
.contrib .byline { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.contrib .byline b { color: var(--ink-soft); }
.contrib .body { font-size: 15px; color: var(--ink); }
.contrib .body .kv { margin-bottom: 3px; }
.contrib .body .kv .k { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.contrib img.thumb { max-width: 200px; border: 1px solid var(--rule); margin-top: 8px; display: block; }

.badge {
  font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 0; white-space: nowrap;
}
.badge.approved { color: var(--ok); background: var(--ok-bg); }
.badge.pending { color: var(--warn); background: var(--warn-bg); }
.badge.rejected { color: var(--bad); background: var(--bad-bg); }
.badge.type { color: var(--accent); background: var(--accent-soft); letter-spacing: .04em; }

.empty { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); padding: 6px 0 14px; }

/* ── Form contributo (entro tab) ───────────────────────────────────────── */
.contrib-form { border-top: 1px dashed var(--rule); margin-top: 18px; padding-top: 18px; }
.contrib-form h3 { margin-bottom: 12px; color: var(--accent); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }

/* ── Risultati di ricerca / liste ──────────────────────────────────────── */
.results { margin-top: 18px; }
.result-row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.result-row .rthumb { flex: 0 0 64px; height: 84px; background: var(--sunk); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.result-row .rthumb img { width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.92) brightness(.86); transition: filter .35s ease; }
.result-row:hover .rthumb img { filter: grayscale(0) brightness(1); }
.result-row .rthumb .ph { font-family: var(--mono); font-size: 9px; color: var(--ink-faint); text-align: center; }
.result-row .rbody { flex: 1; min-width: 0; }
.result-row .rtitle { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.result-row .rtitle:hover { color: var(--accent); text-decoration: none; }
.result-row .rmeta { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-top: 3px; }

/* ── Griglia campagna foto ─────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 20px; }
.tile { background: var(--raised); border: 1px solid var(--rule); border-radius: 3px; padding: 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--tile-shadow); transition: .18s; }
.tile:hover { transform: translateY(-3px); border-color: var(--ink-faint); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.tile .ttitle { font-family: var(--serif); font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.tile .tmeta { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.tile .tspacer { flex: 1; }

/* ── Nota di provenienza — card moderna ────────────────────────────────── */
.provenance-note {
  position: relative;
  font-family: var(--sans); font-size: 13.5px; line-height: 1.62; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 14px;
  padding: 18px 22px 18px 58px; margin-bottom: 22px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
}
.provenance-note::before {
  content: ""; position: absolute; left: 18px; top: 17px; width: 26px; height: 26px;
  border-radius: 8px; background: var(--accent-soft);
}
.provenance-note::after {
  content: ""; position: absolute; left: 23px; top: 22px; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e23012' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3Cpath d='M9.3 12l1.9 1.9 3.6-3.7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.provenance-note b { color: var(--ink); font-weight: 600; }

footer.foot { padding: 30px 24px;
  border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-faint); }

/* ── Mobile / touch: niente hover → arte già a colori ──────────────────── */
@media (hover:none){
  .opera-figure img, .result-row .rthumb img { filter: none; }
}
@media (prefers-reduced-motion:reduce){ * { scroll-behavior:auto!important; } }

/* ── Box Campagna (squillante, rivolto ai giovani, con opere vere) ─────── */
.campaign {
  max-width: 640px; margin: 0 0 28px; border-radius: 18px; padding: 26px 28px;
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, #ff5a3c 0%, #ff2d7e 55%, #9b2dff 100%);
  box-shadow: 0 16px 44px rgba(255,45,126,.30);
}
.campaign-kicker {
  display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,.20); padding: 5px 11px; border-radius: 999px;
}
.campaign-h {
  font-family: var(--sans); font-weight: 800; line-height: 1.08; letter-spacing: -.02em;
  font-size: clamp(22px, 3vw, 30px); color: #fff; margin: 14px 0 8px;
}
.campaign-p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.93); max-width: 48ch; margin: 0; }
.campaign-strip { display: flex; gap: 8px; margin: 18px 0 22px; overflow: hidden; }
.campaign-strip:empty { display: none; }
.campaign-strip img {
  width: 64px; height: 80px; object-fit: cover; border-radius: 9px; flex: 0 0 auto;
  box-shadow: 0 5px 16px rgba(0,0,0,.28);
}
.campaign-cta {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #e1140f;
  font-weight: 700; font-size: 14px; padding: 12px 20px; border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.campaign-cta:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
@media (max-width: 560px) { .campaign-strip img { width: 54px; height: 68px; } }

/* ── Immagini nelle card "Tre modi di contribuire" ─────────────────────── */
.tile { overflow: hidden; }
.tile-img { display: none; flex: 0 0 auto; margin: -16px -16px 6px; height: 132px; background: var(--sunk); overflow: hidden; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.92) brightness(.85); transition: filter .4s ease; }
.tile:hover .tile-img img { filter: none; }
@media (hover:none) { .tile-img img { filter: none; } }

/* ── Raccolte: pulsante «Salva» ────────────────────────────────────────── */
.collect-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 5px 11px; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--paper); color: var(--ink-soft); transition: .16s;
}
.collect-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.collect-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.collect-btn.saved { color: var(--accent); border-color: var(--accent); }
.collect-btn.saved svg { fill: var(--accent); stroke: var(--accent); }
.result-row .rbody .rmeta + .collect-btn { margin-top: 8px; }

/* ── Raccolte: popover scegli/crea ─────────────────────────────────────── */
.collect-pop {
  position: absolute; z-index: 80; width: 264px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 5px;
  box-shadow: 0 12px 34px rgba(0,0,0,.18); padding: 10px;
}
.collect-pop .cp-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); padding: 2px 4px 8px;
}
.collect-pop .cp-list { max-height: 220px; overflow-y: auto; }
.collect-pop .cp-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; border-radius: 3px; padding: 8px 6px; color: var(--ink);
  font-family: var(--sans); font-size: 14px;
}
.collect-pop .cp-item:hover { background: var(--rule-soft); }
.collect-pop .cp-item .cp-check {
  flex: 0 0 16px; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: 3px; font-size: 11px; color: var(--accent);
}
.collect-pop .cp-item.on .cp-check { border-color: var(--accent); background: var(--accent-soft); }
.collect-pop .cp-item .cp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collect-pop .cp-item .cp-count { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.collect-pop .cp-empty { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); padding: 8px 6px; }
.collect-pop .cp-new { display: flex; gap: 6px; margin-top: 8px; border-top: 1px solid var(--rule-soft); padding-top: 10px; }
.collect-pop .cp-new input { font-size: 13px; padding: 7px 9px; }
.collect-pop .cp-msg { font-family: var(--mono); font-size: 11px; color: var(--bad); min-height: 0; margin-top: 6px; }
.collect-pop .cp-msg:empty { display: none; }

/* ── Pagina «Le mie raccolte» ──────────────────────────────────────────── */
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.coll-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 18px; min-height: 120px;
}
.coll-card .coll-open { display: block; color: var(--ink); }
.coll-card .coll-open:hover { text-decoration: none; }
.coll-card .coll-open:hover .coll-name { color: var(--accent); }
.coll-name { display: block; font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.coll-count { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-top: 4px; }
.coll-actions, .coll-tools { display: flex; gap: 14px; }
.coll-tools { margin-top: 12px; }
button.linklike {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--link);
  background: none; border: none; cursor: pointer; padding: 0;
}
button.linklike:hover { text-decoration: underline; }
button.linklike.danger { color: var(--bad); }
.result-row .rremove {
  flex: 0 0 auto; align-self: center; width: 30px; height: 30px; cursor: pointer;
  background: none; border: 1px solid var(--rule); border-radius: 3px; color: var(--ink-faint);
  font-size: 18px; line-height: 1; transition: .16s;
}
.result-row .rremove:hover { color: var(--bad); border-color: var(--bad); }