/* Aggiunte della versione cloud allo stile dello Studio (variabili e tema: vedi <style> in index.html). */

/* ---------- schermata di login: un cielo stellato, un pianeta enorme e il rover che ci cammina sopra ---------- */
#login{--D:max(170vw,1000px);--rise:clamp(140px,25vh,290px);--W:clamp(76px,8.5vw,120px);
  position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;overflow:hidden;
  padding:24px 16px calc(var(--rise) + 10px);
  background:linear-gradient(180deg,#070C22 0%,#141638 38%,#3A1F3B 68%,#7A3023 100%);
  transition:opacity .6s ease .15s}
body.locked #login{display:flex}
body.locked .app{display:none}
#login.leaving{opacity:0;pointer-events:none}

.lp-sky{position:absolute;inset:0;pointer-events:none}
.lp-stars{position:absolute;inset:0}
.lp-stars i{position:absolute;width:var(--sz);height:var(--sz);border-radius:50%;background:var(--c);opacity:var(--o);
  box-shadow:0 0 calc(var(--sz) * 3) var(--c);animation:lp-twinkle var(--d) ease-in-out var(--dl) infinite}
.lp-glow{position:absolute;left:50%;bottom:0;width:min(1500px,150vw);height:50vh;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,rgba(240,140,90,.5) 0%,rgba(180,70,50,.22) 38%,transparent 70%)}
.lp-moon{position:absolute;top:11%;right:13%;width:clamp(30px,4.4vw,58px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 32%,#FFF8E8,#DCCBA6 58%,#A6957A);
  box-shadow:0 0 50px rgba(255,238,205,.35),inset -6px -6px 12px rgba(80,60,40,.35);animation:lp-moon 22s ease-in-out infinite alternate}
.lp-shoot{position:absolute;left:var(--x);top:var(--y);width:130px;height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,0));transform:rotate(24deg);animation:lp-shoot 12s linear var(--dl) infinite}

.lp-orbit{position:absolute;left:50%;top:calc(100% - var(--rise));width:var(--D);height:var(--D);margin-left:calc(var(--D) / -2);
  pointer-events:none;transition:transform .8s ease}
#login.leaving .lp-orbit{transform:translateY(60px) scale(1.04)}
.lp-planet{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lp-surf{animation:lp-spin 150s linear infinite}
.lp-walker{position:absolute;inset:0;transform-origin:50% 50%;animation:lp-walk 52s ease-in-out infinite}
.lp-rover{position:absolute;left:50%;top:calc(var(--W) * -0.675);width:var(--W);margin-left:calc(var(--W) / -2)}
.lp-face{animation:lp-face 52s step-end infinite}
.lp-face .rv{display:block;width:100%;height:auto}
.lp-face .rv .trail{opacity:.9}

.login-card{width:min(392px,100%);position:relative;z-index:3;padding:26px 26px 18px;border-radius:20px;
  background:rgba(251,244,226,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,232,196,.6);
  box-shadow:0 34px 80px -24px rgba(0,0,0,.7),0 0 0 1px rgba(179,67,42,.22),0 0 70px -12px rgba(233,150,110,.38);
  transition:opacity .45s ease,transform .6s ease}
#login.leaving .login-card{opacity:0;transform:translateY(-18px) scale(.97)}
.login-card.shake{animation:lp-shake .45s}
.login-card .brand{padding:0 0 4px}
.lp-title{margin:10px 0 2px;font-size:25px;letter-spacing:-.03em;line-height:1.15}
.login-card p.hint{margin:0 0 4px;color:var(--mut);font-size:13.5px}
.login-card label{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cy);font-weight:700;margin:14px 0 6px}
.login-card input{margin-bottom:0}
.login-card button.b.p{width:100%;margin-top:18px;padding:12px 14px}
.login-err{color:var(--bad);font-size:13.5px;min-height:20px;margin-top:10px}
.pwrap{position:relative}
.pwrap input{padding-right:46px}
.eye{all:unset;box-sizing:border-box;position:absolute;right:5px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;
  border-radius:9px;cursor:pointer;color:var(--mut)}
.eye:hover{color:var(--txt);background:rgba(179,67,42,.08)}
.eye:focus-visible{outline:2px solid var(--cy)}
.eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.eye[aria-pressed=true] svg{stroke:var(--cy)}
.lp-status{display:flex;align-items:center;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mut)}
.lp-status i{width:8px;height:8px;border-radius:50%;background:var(--line2);flex:none}
.lp-status[data-s=ok] i{background:var(--ok);box-shadow:0 0 0 0 rgba(62,123,90,.5);animation:lp-ping 2.4s ease-out infinite}
.lp-status[data-s=down] i{background:var(--bad)}
.lp-status[data-s=down]{color:var(--bad)}
input[type=password]{width:100%;background:rgba(255,251,240,.9);color:var(--txt);border:1px solid var(--line2);border-radius:11px;
  padding:11px 13px;font:15px/1.4 inherit;font-family:inherit;outline:none}
input[type=password]:focus{border-color:var(--cy)}

@keyframes lp-twinkle{0%,100%{opacity:var(--o);transform:scale(1)}50%{opacity:calc(var(--o) * .25);transform:scale(.7)}}
@keyframes lp-moon{from{transform:translate(0,0)}to{transform:translate(-36px,14px)}}
@keyframes lp-shoot{0%,90%{opacity:0;translate:0 0}91%{opacity:1}100%{opacity:0;translate:280px 125px}}
@keyframes lp-spin{to{transform:translateX(-1000px)}}
@keyframes lp-walk{0%{rotate:-17deg}46%{rotate:17deg}50%{rotate:17deg}96%{rotate:-17deg}100%{rotate:-17deg}}
@keyframes lp-face{0%{transform:scaleX(1)}48%{transform:scaleX(-1)}98%{transform:scaleX(1)}}
@keyframes lp-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@keyframes lp-ping{0%{box-shadow:0 0 0 0 rgba(62,123,90,.5)}70%,100%{box-shadow:0 0 0 8px rgba(62,123,90,0)}}
@media(prefers-reduced-motion:reduce){
 .lp-stars i,.lp-moon,.lp-shoot,.lp-surf,.lp-walker,.lp-face,.login-card.shake,.lp-status i{animation:none!important}
 #login,.lp-orbit,.login-card{transition:none!important}
}

/* ---------- barra laterale: utente ---------- */
.userbox{display:flex;align-items:center;gap:8px;padding:8px 6px 0;margin-top:4px;border-top:1px solid var(--line);color:var(--mut);font-size:13px}
.userbox span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userbox b{color:var(--txt)}

/* ---------- mobile: barra in alto + menu laterale a scomparsa ---------- */
.mbar,#scrim{display:none}
@media(max-width:900px){
 .app{display:block}
 .mbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30;padding:10px 14px;
  background:rgba(251,244,226,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
 .mbar .brand{padding:0;gap:9px}
 .mmenu{all:unset;box-sizing:border-box;width:44px;height:44px;display:grid;place-items:center;border-radius:11px;cursor:pointer;
  border:1px solid var(--line2);background:var(--panel2)}
 .mmenu:hover{border-color:var(--cy)}
 .mmenu:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
 .mmenu svg{width:22px;height:22px;stroke:var(--txt);fill:none;stroke-width:2;stroke-linecap:round}
 /* la barra laterale diventa un cassetto che scorre da sinistra */
 aside{position:fixed;top:0;left:0;bottom:0;height:100vh;height:100dvh;width:min(300px,86vw);z-index:40;
  flex-direction:column;flex-wrap:nowrap;align-items:stretch;padding:22px 16px;overflow-y:auto;background:rgba(251,244,226,.99);
  transform:translateX(-105%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
 body.menu-open aside{transform:none;visibility:visible;transition:transform .22s ease;box-shadow:0 0 44px rgba(42,27,16,.38)}
 .nav{flex-direction:column;flex-wrap:nowrap}
 .brand span{display:block}
 .side-actions{margin-top:auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch}
 #scrim{display:block;position:fixed;inset:0;z-index:35;background:rgba(42,27,16,.45);opacity:0;pointer-events:none;transition:opacity .22s ease}
 body.menu-open #scrim{opacity:1;pointer-events:auto}
 body.menu-open{overflow:hidden}
 main{padding:18px 16px 90px}
}
@media(prefers-reduced-motion:reduce){aside,#scrim{transition:none!important}}

/* ---------- cuoricino e scadenza ---------- */
button.b.heart svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
button.b.heart.on{color:var(--cy);border-color:var(--cy)}
button.b.heart.on svg{fill:var(--cy);stroke:var(--cy)}
.exp{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:20px;
  color:var(--gold);background:rgba(90,67,44,.07);border:1px solid rgba(90,67,44,.3)}
.exp.keep{color:var(--cy);background:rgba(179,67,42,.08);border-color:rgba(179,67,42,.35)}
.exp.warn{color:var(--bad);background:rgba(155,44,44,.08);border-color:rgba(155,44,44,.35)}
.expnote{font-size:12.5px;color:var(--mut);margin-top:6px}
.vidbox{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.vidbox video{max-width:100%}

/* ---------- upload ---------- */
.prog{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:10px}
.prog>i{display:block;height:100%;background:var(--cy);width:0;transition:width .15s}
.drop.busy{cursor:progress;border-style:solid}
.file small{color:var(--mut);margin-left:6px;font-weight:500}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}