:root{
  --red:#BC0812;
  --red-hot:#E11020;
  --ink:#0A0A0A;
  --ink-2:#141414;
  --line:rgba(238,237,233,.14);
  --paper:#EEEDE9;
  --muted:rgba(238,237,233,.55);
  --display:'Anton',Impact,sans-serif;
  --mono:'Space Mono',monospace;
  --sans:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:15px;min-height:100vh}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
@media(max-width:480px){.wrap{padding:0 14px}}

#loginScreen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-card{background:var(--ink-2);border:1px solid var(--line);padding:32px 24px;width:100%;max-width:400px;text-align:center;border-radius:4px;box-shadow:0 12px 32px rgba(0,0,0,.6)}
.login-card img{width:52px;margin:0 auto 14px}
.login-card h1{font-family:var(--display);font-size:24px;text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px}
.login-card p{color:var(--muted);font-size:13px;margin:0 0 20px;line-height:1.5}
.login-card input{margin-bottom:16px;text-align:center;font-size:16px;letter-spacing:.1em;min-height:46px}
.login-card .btn{width:100%;justify-content:center;min-height:46px}
.login-error{color:var(--red-hot);font-family:var(--mono);font-size:11px;margin-top:12px;display:none}

#adminApp{display:none}
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(10,10,10,.92);backdrop-filter:blur(14px);z-index:20}
header .wrap{display:flex;align-items:center;gap:10px;height:68px;flex-wrap:wrap}
header img{width:34px}
header b{font-family:var(--display);font-size:18px;text-transform:uppercase;letter-spacing:.06em;margin-right:auto}
@media(max-width:640px){header .wrap{height:auto;padding-top:10px;padding-bottom:10px;gap:8px}header b{width:100%;margin-right:0;font-size:16px}}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:11px 16px;min-height:44px;border:1px solid var(--red);background:var(--red);color:#fff;cursor:pointer;border-radius:3px;text-decoration:none;transition:.18s}
.btn:hover{background:var(--red-hot);border-color:var(--red-hot)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--paper)}
.btn.ghost:hover{border-color:var(--paper);background:transparent}
.btn.mini{padding:6px 10px;min-height:36px;font-size:10px}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:20px 0 20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:12px 16px;min-height:44px;white-space:nowrap;border:0;background:transparent;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.tab.on{color:var(--paper);border-bottom-color:var(--red)}
.panel{display:none}.panel.on{display:block}

.card-item{border:1px solid var(--line);background:var(--ink-2);padding:18px;margin-bottom:16px;border-radius:4px;display:grid;grid-template-columns:190px 1fr;gap:18px;align-items:start}
@media(max-width:768px){.card-item{grid-template-columns:1fr;padding:14px;gap:14px}}
.dropzone{aspect-ratio:4/3;border:2px dashed var(--line);background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px;position:relative;cursor:pointer;overflow:hidden;border-radius:4px;transition:border-color .2s, background .2s;min-height:140px}
.dropzone.video-dz{aspect-ratio:16/9;min-height:180px}
.dropzone:hover,.dropzone.dragover{border-color:var(--red);background:rgba(188,8,18,.06)}
.dropzone img,.dropzone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dropzone .dz-msg{z-index:2;pointer-events:none}
.dropzone .dz-msg span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-top:4px}
.dropzone .dz-msg b{font-size:12px;color:var(--paper);display:block}
.dropzone input[type="file"]{display:none}
.dropzone .btn-remove-img{position:absolute;top:6px;right:6px;z-index:10;background:rgba(0,0,0,.85);color:#fff;border:0;padding:6px 10px;font-family:var(--mono);font-size:9px;cursor:pointer;border-radius:2px}
.card-content{display:flex;flex-direction:column;gap:12px}
.card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px}
.card-head strong{font-size:15px;margin-right:auto}
.grid-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:900px){.grid-fields{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.grid-fields{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:4px}
.brand-hint{font-family:var(--sans);font-size:11px;line-height:1.4;color:var(--muted)}
.f.wide{grid-column:span 2}
@media(max-width:540px){.f.wide{grid-column:span 1}}
.f label{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
input,select{background:var(--ink);border:1px solid var(--line);color:var(--paper);font-family:var(--sans);font-size:16px;padding:10px 12px;min-height:44px;border-radius:3px;width:100%}
input:focus,select:focus{outline:none;border-color:var(--red)}
.chk{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer;padding:4px 0}
.chk input{width:auto;cursor:pointer;min-height:auto}
.bar{position:sticky;bottom:0;background:rgba(10,10,10,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:14px 0;margin-top:24px;z-index:20}
.bar .wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bar .kicker{margin-right:auto}
.help{border:1px solid var(--line);border-left:3px solid var(--red);padding:14px 16px;margin:0 0 18px;color:rgba(238,237,233,.78);font-size:13px;line-height:1.6}
.admin-search{margin-bottom:16px;background:var(--ink-2);border:1px solid var(--line);color:var(--paper);font-family:var(--sans);font-size:16px;padding:12px 14px;min-height:46px;width:100%;border-radius:3px}
.ok{position:fixed;left:50%;transform:translateX(-50%);bottom:80px;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:12px 20px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:60;border-radius:3px;white-space:nowrap}
.ok.show{opacity:1}

/* --- Indicatore di salvataggio ------------------------------------------ */
.save-status{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.save-status::before{
  content:'';flex:none;width:7px;height:7px;border-radius:50%;
  background:currentColor;opacity:.7;
}
.save-status.ok{color:#5BD07F;border-color:rgba(91,208,127,.4)}
.save-status.pending{color:#E8B234;border-color:rgba(232,178,52,.4)}
.save-status.saving{color:var(--paper)}
.save-status.saving::before{animation:snksPulse 1s ease-in-out infinite}
.save-status.error{color:var(--red-hot);border-color:rgba(225,16,32,.5)}

@keyframes snksPulse{0%,100%{opacity:.25}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.save-status.saving::before{animation:none}}
@media(max-width:640px){.save-status{order:10;width:100%;justify-content:center}}

/* --- Riquadro foto durante il caricamento -------------------------------- */
.dropzone.uploading{pointer-events:none;border-style:solid;border-color:var(--red)}
.dropzone.uploading::after{
  content:'Caricamento in corso';
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  padding-top:44px;text-align:center;
  background:rgba(10,10,10,.85);color:var(--paper);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
.dropzone.uploading::before{
  content:'';position:absolute;z-index:21;top:50%;left:50%;
  width:28px;height:28px;margin:-32px 0 0 -14px;border-radius:50%;
  border:2px solid rgba(238,237,233,.22);border-top-color:var(--red-hot);
  animation:snksSpin .8s linear infinite;
}
@keyframes snksSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.dropzone.uploading::before{animation:none}}
.login-card .btn{width:100%;margin-top:12px;text-decoration:none}