/* ---------- Palette & parametri con supporto dark/light ---------- */

:root {
  --bg:#000;
  --ink:#fff;
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.16);
  --line-strong:rgba(255,255,255,.26);

  --card:#0b0b0b;
  --well:#0f0f0f;
  --input:#0e0e0e;
  --gloss:rgba(255,255,255,.08);
  --gloss-2:rgba(255,255,255,.12);

  --accent:#fff;

  --radius:10px;
  --radius-sm:8px;

  --shadow-outer:0 14px 46px rgba(0,0,0,.65);
  --shadow-inner:inset 0 0 44px rgba(255,255,255,.06);
}

/* Auto-LIGHT se il sistema è chiaro e l'utente NON ha forzato dark */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#ffffff;
    --ink:#000000;
    --muted:rgba(0,0,0,.65);
    --line:rgba(0,0,0,.10);
    --line-strong:rgba(0,0,0,.20);

    --card:#f7f7f7;
    --well:#f0f0f0;
    --input:#f5f5f5;

    --accent:#000;

    --shadow-outer:0 8px 26px rgba(0,0,0,.10);
    --shadow-inner:inset 0 0 26px rgba(0,0,0,.03);
  }
}

/* Forza DARK manuale */
html[data-theme="dark"] {
  --bg:#000;
  --ink:#fff;
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.16);
  --line-strong:rgba(255,255,255,.26);

  --card:#0b0b0b;
  --well:#0f0f0f;
  --input:#0e0e0e;

  --accent:#fff;

  --shadow-outer:0 14px 46px rgba(0,0,0,.65);
  --shadow-inner:inset 0 0 44px rgba(255,255,255,.06);
}

/* Forza LIGHT manuale */
html[data-theme="light"] {
  --bg:#ffffff;
  --ink:#000000;
  --muted:rgba(0,0,0,.65);
  --line:rgba(0,0,0,.10);
  --line-strong:rgba(0,0,0,.20);

  --card:#f7f7f7;
  --well:#f0f0f0;
  --input:#f5f5f5;

  --accent:#000;

  --shadow-outer:0 8px 26px rgba(0,0,0,.10);
  --shadow-inner:inset 0 0 26px rgba(0,0,0,.03);
}

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

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;   /* ← blocca il movimento laterale */
}

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

/* ---------- Layout due colonne ---------- */
.verify-layout{
  max-width:1280px;
  margin:0 auto;
  padding:22px 18px 18px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:24px;
  align-items:stretch;
}
@media (max-width:1024px){
  .verify-layout{
    grid-template-columns:1fr;
    gap:18px;
  }
}

/* ---------- Nav + Toggle tema ---------- */
.nav-home{
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 10px 18px;
  margin-bottom: -6px;
  background: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,0));
  backdrop-filter: blur(4px);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* in modalità chiara alleggeriamo il gradiente */
html[data-theme="light"] .nav-home{
  background: linear-gradient(to bottom,
    rgba(255,255,255,.96),
    rgba(255,255,255,0)
  );
}

.home-link{
  color: var(--ink);
  font-weight: 800;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  display: inline-block;
  background: transparent;
  box-shadow: none;
}
.home-link:hover{
  background: rgba(0,0,0,.06);
  border-color: var(--line-strong);
}


/* Toggle tema ☾ / ☀︎ */
.theme-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-size: 11px;
  cursor: pointer;
  box-shadow: none;
}

.theme-toggle:hover{
  background: rgba(0,0,0,.06);
}

/* Icone come testo monocromatico (no emoji colorate) */
.theme-icon{
  font-family: "Segoe UI Symbol","Noto Sans Symbols","Apple Symbols",system-ui,sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
  text-shadow: none;
  filter: grayscale(1);
}

/* Mostra ☾ in dark / default */
html:not([data-theme]) .theme-icon-moon,
html[data-theme="dark"] .theme-icon-moon{
  display: inline;
}
html:not([data-theme]) .theme-icon-sun,
html[data-theme="dark"] .theme-icon-sun{
  display: none;
}

/* Mostra ☀︎ in light */
html[data-theme="light"] .theme-icon-moon{
  display: none;
}
html[data-theme="light"] .theme-icon-sun{
  display: inline;
}

/* ---------- Pannelli ---------- */
.left-panel,
.right-panel{
  background:linear-gradient(180deg, var(--card), var(--well));
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow: var(--shadow-outer), var(--shadow-inner);
  padding:18px;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* ---------- Brand ---------- */
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
}
.brand-title{
  margin:0;
  font-size:clamp(22px,2.3vw,30px);
  letter-spacing:.02em;
}
.brand-subtitle{
  margin:0;
  color:var(--muted);
  font-size:1rem;
}

/* ---------- Scheda form ---------- */
.form-card{
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  padding:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    var(--card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1 1 auto;
}
.section-title{
  margin:6px 0 6px;
  font-weight:800;
}

/* ---------- Form ---------- */
#tokenForm{
  display:flex;
  flex-direction:column;
  gap:10px;
}
#contractSelect,
#tokenId,
#frameNumber{
  width:100%;
  padding:12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  background:var(--input);
  color:var(--ink);
  outline:0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .18s, box-shadow .18s, background .18s;
}
#contractSelect:focus,
#tokenId:focus,
#frameNumber:focus{
  border-color:var(--accent);
  box-shadow: 0 0 0 4px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.08);
}
.inputs-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width:560px){
  .inputs-row{ grid-template-columns:1fr; }
}
.input-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.actions{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
#previewButton,
#propertyButton{
  width:100%;
}

/* ---------- Bottoni ---------- */
.btn{
  display:inline-block;
  padding:12px 16px;
  border-radius:var(--radius-sm);
  font-weight:800;
  border:1px solid transparent;
  cursor:pointer;
  transition: filter .18s, transform .06s, border-color .18s, background .18s, box-shadow .18s;
}
.btn:active{
  transform: translateY(1px);
}
.btn.primary{
  color:#000;
  background:linear-gradient(180deg, #ffffff, #e9e9e9);
  border-color:#fff;
  box-shadow:
    0 12px 26px rgba(0,0,0,.16),
    inset 0 0 0 1px rgba(0,0,0,.06);
}
.btn.primary:hover{
  filter:brightness(1.03);
}
.btn.ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  color:var(--ink);
  border-color:var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.btn.ghost:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
}
.btn.small{
  padding:8px 10px;
  font-size:.8rem;
}

/* ---------- Card NFT (destra) ---------- */
.nft-card{
  position:relative;
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--card), var(--well));
  border:1px solid var(--line-strong);
  box-shadow: var(--shadow-outer), var(--shadow-inner);
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  overflow:hidden;
}
.nft-inner{
  width:100%;
  padding:14px;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}

/* niente "respiro" */
.nft-card.breathing{ animation:none !important; }

/* griglia interna */
.nft-flex{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
  align-items:start;
  flex:1 1 auto;
}
@media (max-width:900px){
  .nft-flex{ grid-template-columns:1fr; }
}

/* media box */
.nft-media{
  display:none;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)), var(--well);
  border:1px solid var(--line);
  box-shadow: inset 0 0 44px rgba(255,255,255,.06), 0 0 0 1px rgba(255,255,255,.04);
}
.nft-media.has-media{
  display:block;
}
.nft-media:empty{
  display:none;
}
#resultCard:not(.has-result) .nft-media{
  display:none;
}
/* L’immagine riempie tutto il box, senza bordo interno */
.nft-media.has-media img,
.nft-media.has-media video{
  display:block;
  width:100%;
  height:100%;
  margin:0;
  object-fit:contain;       /* o "cover" se vuoi ZERO bande ma un po' di taglio */
  image-rendering:auto;
  filter:brightness(1.08) contrast(1.08) saturate(1.12);
}

/* titoli sotto media */
.title-under-media{
  display:none;
  text-align:center;
  margin-top:8px;
}
#titlePrimary{
  font-weight:900;
  font-size:clamp(18px,2.1vw,26px);
  letter-spacing:.01em;
}
#titleSecondary{
  margin-top:2px;
  color:var(--muted);
  font-size:.95rem;
}

/* specifiche */
.nft-side{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
}
.spec-vertical{
  display:grid;
  gap:10px;
  grid-auto-rows:min-content;
  overflow:auto;
}
.spec{
  display:none;
  padding:8px 2px;
  border-bottom:1px dashed var(--line);
}
.spec:last-child{
  border-bottom:none;
}
.spec-k{
  display:block;
  font-size:.78rem;
  letter-spacing:.06em;
  opacity:.65;
  color:var(--muted);
  margin-bottom:4px;
  text-transform:uppercase;
}
.spec-v{
  display:block;
  font-weight:850;
  font-size:1rem;
  color:var(--ink);
}

/* ---------- Placeholder logo Biesse ---------- */
#boatPlaceholder{
  position:absolute;
  inset:0;
  margin:auto;
  width:100%;
  max-width:500px;
  max-height:100%;
  opacity:1;
  pointer-events:none;
  display:block;
  object-fit:contain;
}

/* Mobile: solo dimensioni, niente cambi di colore/opacità */
@media (max-width:600px){
  #resultCard:not(.has-result) #boatPlaceholder{
    max-width:82vw;
    max-height:52vh;
  }
}

.hidden{
  display:none !important;
}

/* ---------- Footer ---------- */
.verify-footer{
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:14px;
  color:var(--muted);
  text-align:center;
}
.verify-footer__by{
  font-size:.75rem;
  letter-spacing:.02em;
}
.verify-footer a{
  color:var(--ink);
  font-weight:900;
  border-bottom:1px solid transparent;
}
.verify-footer a:hover{
  border-bottom-color:var(--ink);
}
/* ---------- Social footer ---------- */
.social-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:6px;
}

.social-footer__icon{
  width:30px;
  height:30px;
  border-radius:50%;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--card);
  border:1px solid var(--line-strong);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

.social-footer__icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.social-footer__icon:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 8px 20px rgba(0,0,0,.45);
  border-color:var(--accent);
  background:var(--well);
}

/* ---------- Overlay video ---------- */
#introVideoOverlay{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:540px;
  height:auto;
  display:block;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)), var(--well);
  box-shadow: inset 0 0 44px rgba(255,255,255,.06), 0 0 0 1px rgba(255,255,255,.04);
  z-index:2;
  pointer-events:auto;
  object-fit:contain;
}
@media (min-width:900px){
  #introVideoOverlay{
    top:50%;
    transform:translate(-50%, -50%);
    max-height:calc(100% - 40px);
  }
}

/* ---------- Info button ---------- */
.brand{
  position:relative;
  padding-right:52px;
}
.info-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:18px;
  color:#000;
  background:#fff;
  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;
  box-shadow:0 8px 22px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.10);
  text-decoration:none;
  transition: transform .08s, filter .18s, box-shadow .18s, background .18s;
}
.info-btn:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(0,0,0,.30), inset 0 0 0 1px rgba(0,0,0,.12);
}
.info-btn:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
}
@media (max-width:560px){
  .brand{ padding-right:44px; }
  .info-btn{
    width:30px;
    height:30px;
    font-size:16px;
    top:8px;
    right:8px;
  }
}

/* ---------- Mobile layout NFT card ---------- */
@media (max-width:600px){
  #resultCard:not(.has-result){
    min-height:15vh;
  }
  #resultCard:not(.has-result) .nft-inner{
    padding-top:24px;
    padding-bottom:28px;
  }
  #resultCard:not(.has-result) #boatPlaceholder{
    max-width:82vw;
    max-height:52vh;
    opacity:.66;
  }
  #resultCard:not(.has-result) .nft-media{
    display:none !important;
  }
  #resultCard.has-result{
    min-height:unset;
  }
}

/* ---------- QR actions ---------- */
.mobile-only{
  display:none;
}
@media (max-width:768px){
  .mobile-only{
    display:block;
  }
}
.qr-actions{
  display:none;
  margin-top:4px;
  gap:8px;
}
.qr-actions .btn{
  flex:1;
  text-align:center;
}
@media (max-width:768px){
  .qr-actions{
    display:flex;
  }
}

/* ---------- QR overlay ---------- */
.qr-reader.hidden{
  display:none;
}
.qr-reader{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  z-index:9999;
  display:grid;
  place-items:center;
  overflow: hidden;
}
.qr-reader-inner{
  width:90vw;
  max-width:420px;
  padding:14px;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-outer), var(--shadow-inner);
  display:flex;
  flex-direction:column;
  gap:10px;
}
#qrReader{
  width:100%;
  min-height:260px;
}

/* ---------- Gradiente testo ---------- */
.grad-txt{
  background:linear-gradient(135deg, #fff 0%, #dcdcdc 55%, #c7c7c7 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow:0 0 10px rgba(255,255,255,.12), 0 0 18px rgba(255,255,255,.10);
}
.btn:hover .grad-txt{
  filter:brightness(1.06);
}

/* ---------- Hint tooltip ---------- */
.hint{
  margin-top:6px;
  max-width:520px;
}
.hint-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.8rem;
  color:var(--muted);
  cursor:pointer;
  padding:4px 0;
  border:none;
  background:transparent;
}
.hint-toggle .arrow{
  display:inline-block;
  width:14px;
  text-align:center;
  transition:transform .18s;
  font-size:.8rem;
}
.hint-bubble{
  display:none;
  margin-top:6px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--line-strong);
  background:var(--bg);
  box-shadow:0 12px 26px rgba(0,0,0,.35);
  line-height:1.5;
  font-size:.8rem;
  color:var(--muted);
}
.hint-bubble strong{
  font-weight:700;
}
.hint-bubble.is-visible{
  display:block;
}

/* ---------- Focus visibile ---------- */
:where(button,[type="button"],select,input,a):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}