/* ======================================================
   RESET + BASE
====================================================== */
*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; height:100%; }

body{
  font-family:'Segoe UI',sans-serif;
  background:#0f0f1a;
  color:#fff;
  line-height:1.45;
}

/* ======================================================
   VARIABILI GLOBALI
====================================================== */
:root{
  --nav-h: 56px;
  --max-w: 1200px;
  --accent: #3db1ff;
  --panel: #181828;
  --border: #2a2a3d;
}

/* ======================================================
   WRAPPER PAGINA
   - offset unico per navbar fixed
====================================================== */
.page-wrapper{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-top: 0;           
}

/* ======================================================
   NAVBAR (DESKTOP)
   Markup: .navbar .nav-brand img | ul.nav-links | .nav-actions
====================================================== */
.navbar{
  position: fixed;
  top:0; left:0; right:0;
  height: var(--nav-h);
  z-index: 9999;

  display:flex;
  align-items:center;
  gap: 1rem;

  padding: 0 1.2rem;
  background:#111;
  border-bottom: 1px solid var(--border);
}

.nav-brand{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.nav-brand img{
  height: 28px;
  width:auto;
  display:block;
}

/* burger (solo mobile) -> su desktop NON si vede */
.nav-toggle{ display:none; }

/* menu */
.nav-links{
  list-style:none;
  margin:0;
  padding:0;

  display:flex;
  align-items:center;
  gap: 1.2rem;

  flex: 1;
  justify-content: center;
}

.nav-links > li{ position: relative; }

.nav-links a{
  color:#fff;
  text-decoration:none;
  font-weight:500;
  font-size: .95rem;
  padding: .35rem .2rem;
  display:inline-flex;
  align-items:center;
}

.nav-links a:hover{ color: var(--accent); }

/* dropdown desktop (stabile) */
.dropdown{ position:relative; }

/* ponte anti “hover che cade” */
.dropdown::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height: 12px;
}

.dropdown-menu{
  list-style:none;
  margin:0;
  padding:.5rem;

  position:absolute;
  top:100%;
  margin-top: 8px;
  left:0;
  min-width: 220px;

  background:#141424;
  border:1px solid var(--border);
  border-radius: 10px;

  display:none;
  z-index: 10000;
}

.dropdown:hover > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu{
  display:block;
}

.dropdown-menu li a{
  width:100%;
  display:flex;
  padding:.5rem .6rem;
  border-radius: 8px;
  color:#fff;
  text-decoration:none;
}

.dropdown-menu li a:hover{
  background: rgba(61,177,255,.12);
  color:#fff;
}

/* azioni destra */
.nav-actions{
  display:flex;
  align-items:center;
  gap:.9rem;
}

.cart-btn{
  position:relative;
  color:#fff;
  text-decoration:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:36px;
  height:36px;
  border-radius:10px;
}

.cart-btn:hover{ background: rgba(255,255,255,.06); }

.cart-count{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;

  border-radius:999px;
  background: var(--accent);
  color:#fff;
  font-size:.75rem;
  line-height:18px;
  text-align:center;
}

/* user dropdown */
.user{ position:relative; }

.user-btn{
  background:transparent;
  border:0;
  color:#fff;
  cursor:pointer;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:36px;
  height:36px;
  border-radius:10px;
}

.user-btn:hover{ background: rgba(255,255,255,.06); }

.dropdown-right{ right:0; left:auto; }

.user.open > .dropdown-menu{ display:block; }

.user-email{
  padding:.55rem .65rem;
  color:#bbb;
  font-size:.85rem;
}

/* backdrop (solo mobile) */
.nav-backdrop{ display:none; }

/* ======================================================
   HERO / BANNER
   Markup hero: .hero video.hero-bg + .hero-overlay + .hero-container
====================================================== */
.hero{
  position:relative;
  width:100%;
  height: clamp(220px, 32vh, 360px); /* pagine interne */
  overflow:hidden;
  background:#000;
}

/* video bg */
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}

/* overlay */
.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65));
  z-index:2;
}

/* contenuto sopra */
.hero-container{
  position:relative;
  z-index:3;

  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;

  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 3rem;
}

/* testo */
.hero-text h1{
  font-size: 2.8rem;
  margin: 0 0 .7rem;
}

.hero-text p{
  font-size: 1.1rem;
  color:#ddd;
  max-width: 720px;
  margin: 0;
}

.hero-cta{
  margin-top: 1.4rem;
  display:flex;
  gap: 1rem;
}

/* logo immagine */
.hero-img{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.hero-img img{
  width: 100%;
  max-width: 380px;
  height:auto;
  display:block;
  opacity:.95;
}

/* HOME hero: grande */
.hero.hero-home{
  height: 100vh;
}

/* HOME: forziamo layout in riga (sx testo, dx logo) */
.hero.hero-home .hero-container{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items:center;
}

/* ======================================================
   MAIN CONTENT
====================================================== */
main{
  flex:1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 2.5rem) 1.5rem 2.5rem;
}

/* ======================================================
   SEZIONI GENERICHE
====================================================== */
.section{ margin-bottom: 3rem; }

.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem;
}

/* ======================================================
   BOTTONI
====================================================== */
.btn,
.cta{
  display:inline-block;
  padding:.65rem 1.2rem;
  border-radius:8px;
  background: var(--accent);
  color:#fff;
  font-weight:600;
  text-decoration:none;
  border: 1px solid transparent;
}

.btn.ghost,
.cta.ghost{
  background:transparent;
  border:1px solid var(--accent);
  color: var(--accent);
}

.cta:hover{ filter: brightness(1.05); }

/* ======================================================
   FOOTER (DESKTOP)
   Markup: .site-footer > .footer-container(.footer-brand + .footer-nav) + .footer-bottom
====================================================== */
.site-footer{
  background:#111;
  border-top:1px solid var(--border);
  padding: 2.5rem 1.5rem;
  margin-top:auto;
}

.footer-container{
  max-width: var(--max-w);
  margin: 0 auto;

  display:grid;
  grid-template-columns: auto 1fr auto; /* logo | centro | spacer */
  align-items:center;
  gap: 2rem;
}

.footer-brand{ justify-self: start; }

.footer-logo{
  height: 44px;
  width:auto;
  display:block;
}

/* link centrati */
.footer-nav{
  justify-self:center;
  display:flex;
  gap: 1.2rem;
  flex-wrap:wrap;
}

/* forza colori link (niente blu/viola) */
.site-footer a,
.site-footer a:visited{
  color:#cfcfcf;
  text-decoration:none;
}

.site-footer a:hover{
  color: var(--accent);
  text-decoration:none;
}

.footer-bottom{
  max-width: var(--max-w);
  margin: 1.5rem auto 0;
  padding-top: 1rem;
  border-top:1px solid rgba(255,255,255,.08);
  color:#9aa0aa;
  font-size:.9rem;
  text-align:center;
}

/* ======================================================
   UTILITY
====================================================== */
img{ max-width:100%; display:block; }
.hidden{ display:none; }

.page-wrapper{
  padding-top: var(--nav-h);
}

/* ===================== GALLERIA (page) ===================== */

/* usa il tuo banner-wrapper globale: qui solo fix per non avere “spazio” */
.banner-wrapper{
  margin: 0;
  padding: 0;
  line-height: 0;
}
.banner-wrapper img{
  display:block;
  width:100%;
  height:auto;
}

/* container pagina */
.galleria-container{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

/* se la navbar è fixed/sticky e ti copre il banner, gestisci da qui:
   sostituisci var(--nav-h) con l’altezza reale della tua navbar (es: 72px) */
:root{ --nav-h: 72px; }
body.has-fixed-navbar .banner-wrapper{
  padding-top: var(--nav-h);
}

/* sezioni */
.galleria-section{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
  margin-top: 1.25rem;
}
.galleria-section h2{
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  letter-spacing: .2px;
  display:flex;
  align-items:center;
  gap: .6rem;
  color: #fff;
}

/* carousel */
.carousel{
  position: relative;
  width: 100%;
  border-radius: 14px;
}

/* track scroll */
.carousel-track{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 10px 48px; /* spazio per bottoni */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.carousel-track::-webkit-scrollbar{ height: 10px; }
.carousel-track::-webkit-scrollbar-track{ background: transparent; }
.carousel-track::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
.carousel-track > *{
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* elementi */
.carousel-image,
.carousel-video{
  border-radius: 12px;
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* immagini */
.carousel-image{
  width: clamp(220px, 28vw, 360px);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform .2s ease, border-color .2s ease;
}
.carousel-image:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
}

/* video */
.carousel-video{
  width: clamp(260px, 36vw, 520px);
  aspect-ratio: 16 / 9;
}
.carousel-video:focus{
  outline: 2px solid rgba(255,255,255,.18);
  outline-offset: 2px;
}

/* bottoni prev/next */
.carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 22px;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  transition: background .15s ease, transform .15s ease, border-color .15s ease, opacity .15s ease;
  user-select: none;
}
.carousel-btn:hover{
  background: rgba(0,0,0,.72);
  border-color: rgba(255,255,255,.26);
}
.carousel-btn:active{
  transform: translateY(-50%) scale(.98);
}
.carousel-btn.prev{ left: 10px; }
.carousel-btn.next{ right: 10px; }

/* nascondi bottoni su touch (swipe) */
@media (hover: none){
  .carousel-btn{ opacity: .0; pointer-events: none; }
  .carousel-track{ padding: 10px 6px; }
}

/* LIGHTBOX */
.lightbox-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 9999;
}
.lightbox-overlay img{
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.6);
}
.close-lightbox{
  position: fixed;
  top: 14px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-size: 28px;
  line-height: 42px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.close-lightbox:hover{
  background: rgba(0,0,0,.72);
  border-color: rgba(255,255,255,.26);
}

/* mobile spacing */
@media (max-width: 560px){
  .galleria-container{ padding: 1.25rem 1rem 2.5rem; }
  .galleria-section{ padding: 1rem; }
  .galleria-section h2{ font-size: 1.1rem; }
}

/* ===================== CONTATTI (page) ===================== */

/* banner attaccato alla navbar (come galleria) */
.banner-wrapper{
  margin: 0;
  padding: 0;
  line-height: 0;
}
.banner-wrapper img{
  display: block;
  width: 100%;
  height: auto;
}

/* se navbar è fixed/sticky e copre il banner */
:root{ --nav-h: 72px; }
body.has-fixed-navbar .banner-wrapper{
  padding-top: var(--nav-h);
}

/* layout pagina */
.contatti-container{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* card generica */
.contatti-info,
.contatti-form-wrapper{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
}

/* INFO */
.contatti-info h2{
  margin: 0 0 .6rem 0;
  color: #fff;
  font-size: 1.35rem;
  letter-spacing: .2px;
}
.contatti-info p{
  margin: 0 0 1rem 0;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
  font-size: .98rem;
}

.contatti-info ul{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  gap: .75rem;
}
.contatti-info li{
  display: flex;
  align-items: center;
  gap: .7rem;
  color: rgba(255,255,255,.88);
  font-size: .98rem;
  padding: .65rem .75rem;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}
.contatti-info li i{
  width: 20px;
  text-align: center;
  color: var(--accent);
  opacity: .95;
}

.contatti-info a{
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.contatti-info a:hover{
  color: var(--accent);
  border-bottom-color: rgba(255,255,255,.35);
}

/* FORM */
.contatti-form{
  display: grid;
  gap: .9rem;
}

.contatti-form input,
.contatti-form textarea{
  width: 100%;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: .85rem .95rem;
  color: #fff;
  font-size: .98rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.contatti-form textarea{
  min-height: 150px;
  resize: vertical;
  line-height: 1.5;
}

.contatti-form input::placeholder,
.contatti-form textarea::placeholder{
  color: rgba(255,255,255,.55);
}

.contatti-form input:focus,
.contatti-form textarea:focus{
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
  background: rgba(0,0,0,.32);
}

/* bottone */
.contatti-form button{
  border: 0;
  border-radius: 12px;
  padding: .9rem 1rem;
  cursor: pointer;

  background: var(--accent);
  color: #0b0b0b;
  font-weight: 700;
  letter-spacing: .2px;

  transition: transform .12s ease, filter .12s ease;
}
.contatti-form button:hover{
  filter: brightness(1.05);
}
.contatti-form button:active{
  transform: scale(.99);
}

/* responsive */
@media (max-width: 980px){
  .contatti-container{
    grid-template-columns: 1fr;
    padding: 1.75rem 1.25rem 2.5rem;
  }
  .contatti-info,
  .contatti-form-wrapper{
    padding: 1.25rem;
  }
}

@media (max-width: 560px){
  .contatti-container{
    padding: 1.25rem 1rem 2.25rem;
  }
  .contatti-info h2{
    font-size: 1.2rem;
  }
}

/* ===================== LAVORA CON NOI (page) ===================== */

/* banner attaccato alla navbar */
.banner-wrapper{
  margin: 0;
  padding: 0;
  line-height: 0;
}
.banner-wrapper img{
  display:block;
  width:100%;
  height:auto;
}

/* se navbar è fixed/sticky e copre il banner */
:root{ --nav-h: 72px; }
body.has-fixed-navbar .banner-wrapper{
  padding-top: var(--nav-h);
}

/* container pagina */
.lavora-container{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;

  display: grid;
  gap: 1.25rem;
}

/* sezione (immagine + testo) */
.lavora-section{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 1.25rem;
  align-items: center;

  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
}

/* inverti layout */
.lavora-section.reverse{
  grid-template-columns: 1fr 1.05fr;
}
.lavora-section.reverse .lavora-img-wrapper{ order: 2; }
.lavora-section.reverse .lavora-text{ order: 1; }

/* immagine */
.lavora-img-wrapper{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.lavora-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

/* testo */
.lavora-text h2,
.lavora-text h3{
  margin: 0 0 .6rem 0;
  color: #fff;
  letter-spacing: .2px;
}
.lavora-text h2{ font-size: 1.5rem; }
.lavora-text h3{ font-size: 1.2rem; }

.lavora-text p{
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  font-size: .98rem;
}

/* blocco form */
.form-container{
  width: 100%;
}
.form-container h3{
  margin: 0 0 .5rem 0;
  color: #fff;
  font-size: 1.25rem;
  letter-spacing: .2px;
}
.form-container p{
  margin: 0 0 1rem 0;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  font-size: .98rem;
}

/* form */
.lavora-form{
  display: grid;
  gap: .9rem;
}

.lavora-form input,
.lavora-form textarea{
  width: 100%;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: .85rem .95rem;
  color: #fff;
  font-size: .98rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.lavora-form textarea{
  min-height: 160px;
  resize: vertical;
  line-height: 1.5;
}

.lavora-form input::placeholder,
.lavora-form textarea::placeholder{
  color: rgba(255,255,255,.55);
}

.lavora-form input:focus,
.lavora-form textarea:focus{
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
  background: rgba(0,0,0,.32);
}

/* upload */
.file-upload{
  display: grid;
  gap: .5rem;
  padding: .9rem 1rem;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}
.file-upload label{
  color: rgba(255,255,255,.82);
  font-size: .95rem;
}
.file-upload input[type="file"]{
  padding: .55rem .2rem;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.78);
}
.file-upload input[type="file"]::-webkit-file-upload-button{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: #fff;
  padding: .55rem .8rem;
  border-radius: 10px;
  cursor: pointer;
}
.file-upload input[type="file"]::-webkit-file-upload-button:hover{
  border-color: rgba(255,255,255,.24);
}

/* bottone submit */
.btn-submit{
  border: 0;
  border-radius: 12px;
  padding: .95rem 1rem;
  cursor: pointer;

  background: var(--accent);
  color: #0b0b0b;
  font-weight: 800;
  letter-spacing: .2px;

  transition: transform .12s ease, filter .12s ease;
}
.btn-submit:hover{ filter: brightness(1.05); }
.btn-submit:active{ transform: scale(.99); }

/* responsive */
@media (max-width: 980px){
  .lavora-container{
    padding: 1.75rem 1.25rem 2.5rem;
  }

  .lavora-section,
  .lavora-section.reverse{
    grid-template-columns: 1fr;
  }
  .lavora-section.reverse .lavora-img-wrapper{ order: 0; }
  .lavora-section.reverse .lavora-text{ order: 0; }

  .lavora-img{
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 560px){
  .lavora-container{
    padding: 1.25rem 1rem 2.25rem;
  }
  .lavora-section{
    padding: 1rem;
  }
  .lavora-text h2{ font-size: 1.3rem; }
}

/* ===================== ADMIN: NUOVO PRODOTTO NEDRALAB ===================== */

/* banner attaccato alla navbar */
.banner-wrapper{
  margin: 0;
  padding: 0;
  line-height: 0;
}
.banner-wrapper img{
  display: block;
  width: 100%;
  height: auto;
}

/* se navbar è fixed/sticky e copre il banner */
:root{ --nav-h: 72px; }
body.has-fixed-navbar .banner-wrapper{
  padding-top: var(--nav-h);
}

/* wrapper pagina */
.admin-form-wrapper{
  max-width: 980px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;

  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 16px;
}

/* titolo */
.admin-form-title{
  margin: 0 0 1.25rem 0;
  color: #fff;
  font-size: 1.35rem;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  gap: .65rem;
}
.admin-form-title i{
  color: var(--accent);
  opacity: .95;
}

/* form */
.admin-form{
  display: grid;
  gap: 1rem;
}

/* gruppi */
.form-group{
  display: grid;
  gap: .45rem;
}

.form-group label{
  color: rgba(255,255,255,.88);
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.form-group label i{
  color: var(--accent);
  opacity: .95;
}

/* input/select/textarea */
.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form select,
.admin-form textarea{
  width: 100%;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: .85rem .95rem;
  color: #fff;
  font-size: .98rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.admin-form textarea{
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

.admin-form input::placeholder,
.admin-form textarea::placeholder{
  color: rgba(255,255,255,.55);
}

.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus{
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
  background: rgba(0,0,0,.32);
}

/* file input (coerente e non brutto) */
.admin-form input[type="file"]{
  width: 100%;
  padding: .55rem .25rem;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
}

.admin-form input[type="file"]::-webkit-file-upload-button{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: #fff;
  padding: .55rem .8rem;
  border-radius: 10px;
  cursor: pointer;
}
.admin-form input[type="file"]::-webkit-file-upload-button:hover{
  border-color: rgba(255,255,255,.24);
}

/* helper text */
.admin-form small{
  margin-top: .25rem;
  color: rgba(255,255,255,.55) !important;
  font-size: .85rem;
}

/* due colonne */
.form-two{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* bottone salva */
.btn-save{
  margin-top: .25rem;
  border: 0;
  border-radius: 12px;
  padding: .95rem 1rem;
  cursor: pointer;

  background: var(--accent);
  color: #0b0b0b;
  font-weight: 800;
  letter-spacing: .2px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;

  transition: transform .12s ease, filter .12s ease;
}
.btn-save:hover{ filter: brightness(1.05); }
.btn-save:active{ transform: scale(.99); }

/* responsive */
@media (max-width: 980px){
  .admin-form-wrapper{
    margin: 0 1rem;
    padding: 2rem 1.25rem 2.5rem;
  }
}
@media (max-width: 640px){
  .form-two{
    grid-template-columns: 1fr;
  }
  .admin-form-wrapper{
    padding: 1.5rem 1rem 2.25rem;
  }
  .admin-form-title{
    font-size: 1.2rem;
  }
}

/* ===== ADMIN ADD BUTTON ===== */
.btn-add-account{
  display: inline-flex;
  align-items: center;
  gap: .55rem;

  padding: .7rem .95rem;
  border-radius: 10px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;

  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;

  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.btn-add-account i{
  font-size: .85rem;
  opacity: .9;
}

.btn-add-account:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
}

.btn-add-account:active{
  transform: scale(.98);
}

/* ===================== CARRELLO (page) ===================== */

/* banner attaccato alla navbar */
.banner-wrapper{
  margin: 0;
  padding: 0;
  line-height: 0;
}
.banner-wrapper img{
  display:block;
  width:100%;
  height:auto;
}

/* se navbar è fixed/sticky e copre il banner */
:root{ --nav-h: 72px; }
body.has-fixed-navbar .banner-wrapper{
  padding-top: var(--nav-h);
}

/* container */
.carrello-container{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
}

.carrello-container h2{
  margin: 0 0 1rem 0;
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: .2px;
}

/* tabella */
.carrello-tabella{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;

  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.carrello-tabella thead th{
  text-align: left;
  padding: 1rem .95rem;
  font-size: .9rem;
  color: rgba(255,255,255,.78);
  background: rgba(0,0,0,.28);
  border-bottom: 1px solid rgba(255,255,255,.10);
  white-space: nowrap;
}

.carrello-tabella tbody td{
  padding: .95rem .95rem;
  color: rgba(255,255,255,.90);
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: middle;
}

.carrello-tabella tbody tr:last-child td{
  border-bottom: 0;
}

.carrello-tabella tbody tr:hover td{
  background: rgba(255,255,255,.03);
}

/* allineamenti colonne numeriche */
.carrello-tabella th:nth-child(3),
.carrello-tabella td:nth-child(3),
.carrello-tabella th:nth-child(4),
.carrello-tabella td:nth-child(4),
.carrello-tabella th:nth-child(5),
.carrello-tabella td:nth-child(5){
  text-align: right;
}

/* bottone rimuovi */
.btn-remove{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: #fff;
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, background .15s ease, opacity .15s ease;
}
.btn-remove:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.26);
}
.btn-remove:active{
  transform: scale(.98);
}

/* totale */
.carrello-totale{
  margin-top: 1rem;
  padding: 1rem 1.1rem;

  display: flex;
  justify-content: flex-end;
  gap: .5rem;

  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 14px;

  color: rgba(255,255,255,.88);
  font-weight: 700;
}
.carrello-totale #cart-total{
  color: #fff;
}

/* azioni */
.carrello-azioni{
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

/* checkout */
.btn-checkout{
  border: 0;
  border-radius: 12px;
  padding: .95rem 1.1rem;
  cursor: pointer;

  background: var(--accent);
  color: #0b0b0b;
  font-weight: 900;
  letter-spacing: .2px;

  transition: transform .12s ease, filter .12s ease;
}
.btn-checkout:hover{ filter: brightness(1.05); }
.btn-checkout:active{ transform: scale(.99); }

/* responsive: tabella scrollabile */
@media (max-width: 860px){
  .carrello-tabella{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .carrello-tabella thead,
  .carrello-tabella tbody,
  .carrello-tabella tr{
    width: 100%;
  }
  .carrello-tabella thead th,
  .carrello-tabella tbody td{
    white-space: nowrap;
  }
}

/* mobile spacing */
@media (max-width: 560px){
  .carrello-container{
    padding: 1.25rem 1rem 2.25rem;
  }
  .carrello-container h2{
    font-size: 1.2rem;
  }
}

/* ===================== CHECKOUT (page) ===================== */
/* (markup: checkout-wrapper, checkout-title, checkout-preview, checkout-form, pm-*) :contentReference[oaicite:0]{index=0} */

/* banner attaccato alla navbar */
.banner-wrapper{ margin:0; padding:0; line-height:0; }
.banner-wrapper img{ display:block; width:100%; height:auto; }

/* se navbar è fixed/sticky e copre il banner */
:root{ --nav-h: 72px; }
body.has-fixed-navbar .banner-wrapper{ padding-top: var(--nav-h); }

/* layout */
.checkout-wrapper{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
  display: grid;
  gap: 1.25rem;
}

.checkout-title{
  margin: 0;
  color: #fff;
  font-size: 1.45rem;
  letter-spacing: .2px;
}

/* card base */
.checkout-preview,
.checkout-form{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
}

.checkout-preview h3,
.checkout-form h3{
  margin: 0 0 .85rem 0;
  color:#fff;
  font-size: 1.1rem;
  letter-spacing: .2px;
}

/* tabella riepilogo */
.checkout-preview table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.checkout-preview thead th{
  text-align: left;
  padding: .85rem .85rem;
  font-size: .88rem;
  color: rgba(255,255,255,.78);
  background: rgba(0,0,0,.28);
  border-bottom: 1px solid rgba(255,255,255,.10);
  white-space: nowrap;
}

.checkout-preview tbody td{
  padding: .85rem .85rem;
  color: rgba(255,255,255,.90);
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: middle;
}

.checkout-preview tbody tr:last-child td{ border-bottom: 0; }

.checkout-preview th:nth-child(2),
.checkout-preview td:nth-child(2),
.checkout-preview th:nth-child(3),
.checkout-preview td:nth-child(3),
.checkout-preview th:nth-child(4),
.checkout-preview td:nth-child(4){
  text-align: right;
}

.checkout-preview tfoot th{
  padding: .9rem .85rem;
  color:#fff;
  background: rgba(0,0,0,.28);
  border-top: 1px solid rgba(255,255,255,.10);
}
.checkout-preview tfoot th:last-child{ text-align: right; }

/* form */
.checkout-form{ display: grid; gap: 1rem; }

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}

.checkout-form input,
.checkout-form textarea,
.checkout-form select{
  width: 100%;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: .85rem .95rem;
  color: #fff;
  font-size: .98rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.checkout-form input::placeholder,
.checkout-form textarea::placeholder{
  color: rgba(255,255,255,.55);
}

.checkout-form input:focus,
.checkout-form textarea:focus,
.checkout-form select:focus{
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
  background: rgba(0,0,0,.32);
}

.checkout-note{
  margin: .25rem 0 0 0;
  padding: .9rem 1rem;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
  line-height: 1.55;
}

/* bottone checkout (riusa se già esiste .btn-checkout dal carrello) */
.btn-checkout{
  border: 0;
  border-radius: 12px;
  padding: .95rem 1.1rem;
  cursor: pointer;

  background: var(--accent);
  color: #0b0b0b;
  font-weight: 900;
  letter-spacing: .2px;

  transition: transform .12s ease, filter .12s ease;
}
.btn-checkout:hover{ filter: brightness(1.05); }
.btn-checkout:active{ transform: scale(.99); }

/* ===================== PAYPAL MODAL (pm-*) ===================== */
.pm-modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.82);
  z-index: 9999;
}
.pm-modal.hidden{ display: none; }

.pm-box{
  width: min(520px, 100%);
  background: rgba(15,15,26,.96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 1.6rem 1.6rem;
  color: #fff;
  box-shadow: 0 20px 70px rgba(0,0,0,.65);
  position: relative;
}

.pm-close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.75);
  font-size: 22px;
  cursor: pointer;
}
.pm-close:hover{
  color:#fff;
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.06);
}

.pm-step{
  margin: 0 0 1rem 0;
  font-size: 1.15rem;
  letter-spacing: .2px;
}

.pm-info{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: .95rem;
}
.pm-info td{
  padding: .55rem .2rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
}
.pm-info td:first-child{ color: rgba(255,255,255,.72); }

#pm-total{
  color: var(--accent);
  font-weight: 800;
}
#pm-note{
  display: inline-block;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: .2rem .45rem;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.pm-steps{
  margin: 0 0 1.1rem 1.15rem;
  color: rgba(255,255,255,.78);
  line-height: 1.5;
  font-size: .92rem;
}

/* azioni modale */
.pm-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}

.pm-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;

  padding: .7rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;

  font-weight: 700;
  font-size: .92rem;

  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.pm-btn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
}
.pm-btn:active{ transform: scale(.99); }

.pm-primary{
  background: var(--accent);
  border: 0;
  color: #0b0b0b;
}
.pm-primary:hover{ filter: brightness(1.05); }

.pm-done-wrapper{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* spinner */
.spinner{
  width: 18px;
  height: 18px;
  border: 3px solid var(--accent);
  border-top: 3px solid transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.hidden{ display:none !important; }

/* toast */
.toast-notify{
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: rgba(20,20,30,.95);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  padding: .9rem 1.1rem;
  border-radius: 12px;
  font-size: .92rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  z-index: 10000;
}

/* responsive */
@media (max-width: 860px){
  .form-grid{ grid-template-columns: 1fr; }
  .checkout-preview table{ display:block; overflow-x:auto; -webkit-overflow-scrolling: touch; }
  .checkout-preview thead th,
  .checkout-preview tbody td{ white-space: nowrap; }
}
@media (max-width: 560px){
  .checkout-wrapper{ padding: 1.25rem 1rem 2.25rem; }
  .checkout-title{ font-size: 1.25rem; }
  .checkout-preview,
  .checkout-form{ padding: 1rem; }
  .pm-box{ padding: 1.25rem 1.1rem; }
}

/* ===================== HOME (desktop) ===================== */

/* base */
img{max-width:100%;height:auto;display:block}

/* HERO */
.hero{position:relative;min-height:62vh;display:flex;align-items:center;overflow:hidden;background:#0f0f1a}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(3px) brightness(.45);z-index:1}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,#0008 0%,#0006 40%,#000 90%);z-index:2}
.hero-container{position:relative;z-index:3;max-width:1200px;margin:auto;padding:2rem;display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.hero-text h1{font-size:3.0rem;line-height:1.1;margin:0 0 .8rem}
.hero-text p{font-size:1.12rem;margin:0 0 1.2rem;color:#d7d7d7}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.cta{display:inline-block;padding:.7rem 1.2rem;border-radius:8px;background:#3db1ff;color:#fff;text-decoration:none;font-weight:600}
.cta:hover{background:#3399e6}
.cta.ghost{background:transparent;border:1px solid #3db1ff;color:#3db1ff}
.cta.ghost:hover{background:#0b2740}
.hero-img img{width:220px;max-width:28vw;filter: drop-shadow(0 0 14px rgba(61,177,255,0.25))}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.slide-up{animation:slideUp .9s ease-out forwards;opacity:0}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
.pulse{animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #3db1ff80}50%{box-shadow:0 0 0 8px #3db1ff00}}
@media (prefers-reduced-motion: reduce){.float,.slide-up,.pulse{animation:none}}

/* CONTAINER GENERALE */
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}

/* TRUST BAND */
.trust-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2.2rem 0}
.trust-item{background:#181828;border:1px solid #2a2a3d;border-radius:12px;padding:1.2rem;text-align:center}
.trust-item i{font-size:1.4rem;color:#3db1ff;margin-bottom:.4rem}
.trust-item h4{margin:.3rem 0 .2rem}
.trust-item p{color:#cfcfcf;font-size:.95rem}

/* SERVIZI */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:2.4rem 0}
.service-card{background:#181828;border:1px solid #2a2a3d;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.service-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.service-card img{height:160px;width:100%;object-fit:cover}
.svc-body{padding:1rem}
.svc-body h3{margin:.2rem 0 .4rem}
.svc-body p{color:#cfcfcf;margin:0 0 .8rem}
.svc-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.btn-link{display:inline-block;color:#3db1ff;font-weight:600;text-decoration:none}
.btn-link:hover{text-decoration:underline}

/* SHOWCASE 3D */
.showcase{margin:3rem 0}
.showcase-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.showcase-head h2{margin:0}
.showcase-head p{margin:0;color:#cfcfcf}
.showcase-row{display:flex;gap:1rem;overflow-x:auto;padding:1rem 0 .2rem;scroll-snap-type:x mandatory}
.show-item{flex:0 0 240px;scroll-snap-align:center;background:#181828;border-radius:10px;border:1px solid #2a2a3d;overflow:hidden}
.show-item img{width:100%;height:180px;object-fit:cover}
.show-actions{display:flex;gap:.8rem;margin-top:1rem}
.btn-primary{background:#3db1ff;color:#fff;padding:.7rem 1.1rem;border-radius:8px;text-decoration:none}
.btn-primary:hover{background:#3399e6}
.btn-ghost{background:transparent;border:1px solid #3db1ff;color:#3db1ff;padding:.7rem 1.1rem;border-radius:8px;text-decoration:none}
.btn-ghost:hover{background:#0b2740}

/* PROCESS */
.process{margin:3rem 0;text-align:center}
.process h2{margin:0 0 1.2rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.step{background:#181828;border:1px solid #2a2a3d;border-radius:12px;padding:1.1rem}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#3db1ff;color:#fff;font-weight:800;margin-bottom:.5rem}

/* MERCH */
.merchandising-wrapper{position:relative;margin:4rem 0;padding:3rem 1rem;border-radius:12px;background:#181828;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.6);overflow:hidden}
.merch-gradient{position:absolute;inset:0;z-index:0;background:linear-gradient(130deg,#3db1ff33 10%,#00e0c633 50%,#ff3deb33 90%);animation:bgShift 8s linear infinite alternate;filter:blur(40px)}
@keyframes bgShift{to{transform:translate(-10%,-10%)}}
.merch-title{position:relative;z-index:1}
.merch-title h2{font-size:2.4rem;margin:0 0 1.4rem;font-weight:900;letter-spacing:4px;color:transparent;-webkit-text-stroke:2px #fff}
.anim-stroke h2{background-image:linear-gradient(90deg,#fff 0,#fff 50%,transparent 50%);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;animation:strokeAnim 6s linear infinite}
@keyframes strokeAnim{to{background-position:-200% 0}}
.merch-carousel{position:relative;z-index:1;display:flex;gap:1.2rem;overflow-x:auto;padding:1rem 0 1.3rem;scroll-snap-type:x mandatory}
.merch-item{flex:0 0 160px;scroll-snap-align:center}
.merch-item img{width:100%;border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,.5);transition:transform .25s}
.merch-item img:hover{transform:scale(1.06)}
.merch-text{position:relative;z-index:1;font-size:1.02rem;color:#ddd;max-width:720px;margin:0 auto 1.2rem;line-height:1.55}
.merch-btn{position:relative;z-index:1;background:#3db1ff;color:#fff;padding:.85rem 1.6rem;border-radius:8px;font-weight:600;text-decoration:none;display:inline-block}
.merch-btn:hover{background:#3399e6}

/* ABOUT + CTA */
.about-quick{margin:3rem auto;text-align:center;max-width:900px}
.about-quick h2{font-size:2rem;margin-bottom:.6rem}
.about-quick p{line-height:1.6;margin-bottom:1rem;color:#ddd}
.cta-banner{background:#202035;border-radius:12px;text-align:center;padding:2.2rem 1rem;margin-bottom:4rem}
.cta-banner h2{margin:0 0 .6rem;font-size:1.8rem}
.cta-banner p{margin:0 0 1.1rem;color:#ccc}
.cta.big{background:#3db1ff;color:#fff;padding:.9rem 2.0rem;border-radius:8px;font-weight:600;text-decoration:none}
.cta.big:hover{background:#3399e6}

/* TOAST */
.toast-notify{position:fixed;top:30px;left:50%;transform:translateX(-50%);background:#21124d;color:#fff;padding:.9rem 1.2rem;border-radius:8px;box-shadow:0 0 8px rgba(0,0,0,.4);font-size:.95rem;z-index:10000}

/* ===== “hero più grande” SOLO desktop, ma senza rompere mobile ===== */
@media (min-width: 1100px){
  .hero-container{max-width: 1500px;}
  .hero-text h1{font-size: 4.0rem;}
  .hero-text p{font-size: 1.22rem;}
  .hero-img img{width: min(450px, 34vw); max-width: 100%;}
}

/* ===================== AUTH (desktop) ===================== */
.auth-page{
  min-height: 100vh;
  background: #0f0f1a;
  color: #fff;
  font-family: 'Segoe UI', sans-serif;
  overflow-x: hidden;
}

.auth-logo{
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.auth-logo img{
  height: 34px;
  width: auto;
  display: block;
}

.auth-wrapper{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 1.25rem 2.5rem;
}

.auth-container{
  width: 100%;
  max-width: 420px;
  background: #181828;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 2rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.auth-container h2{
  margin: 0 0 1.25rem;
  font-size: 1.55rem;
}

.auth-container form{
  display: grid;
  gap: .85rem;
}

.auth-container input{
  width: 100%;
  padding: .9rem 1rem;
  border-radius: 12px;
  background: #111120;
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  outline: none;
}

.auth-container input:focus{
  border-color: rgba(61,177,255,.45);
  box-shadow: 0 0 0 3px rgba(61,177,255,.16);
}

.auth-container button{
  width: 100%;
  padding: .95rem 1rem;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  background: var(--accent);
  color: #fff;
}

.auth-container button:hover{
  filter: brightness(.95);
}

.auth-container p{
  margin: .9rem 0 0;
  color: rgba(255,255,255,.82);
  font-size: .95rem;
  text-align: center;
}

.auth-container a{
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}

.auth-container a:hover{
  text-decoration: underline;
}

.forgot-link{
  display: block;
  text-align: center;
  font-weight: 600;
  font-size: .92rem;
  margin-top: .25rem;
}

/* toast */
.toast-container{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 99999;
  display: grid;
  gap: 10px;
}

.toast{
  background: rgba(24,24,40,.96);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  padding: .75rem .9rem;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  max-width: 360px;
}