/* ================================================================
   AREA RISERVATA · stile "Giada" (verde scuro con esagoni)
   ================================================================ */
:root{
  --bg:#0b4a44; --bg2:#093f3a;
  --tx:#ffffff; --mu:rgba(255,255,255,.70); --line:rgba(255,255,255,.12);
  --tile:rgba(255,255,255,.06); --fbd:rgba(255,255,255,.34); --ficon:#cdeee8; --fch:rgba(255,255,255,.38);
  --acc:#3fd4c2; --accdk:#04201c; --tab:rgba(3,30,27,.94); --tabic:#86cfc4;
  --sheet:#0d3b36; --danger:#ff8a8a;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg)}
body{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--tx);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;min-height:100vh;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90'%3E%3Cpath d='M26 0l26 15v30L26 60 0 45V15zM26 60v30' fill='none' stroke='%233fd4c2' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E"),var(--bg);
  padding-top:var(--safe-t);padding-bottom:calc(120px + var(--safe-b))}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit;color:inherit}
svg.i{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.w{max-width:560px;margin:0 auto;padding:0 22px}
.hidden{display:none!important}

/* ---------- intestazione ---------- */
.bar{display:flex;justify-content:space-between;align-items:center;padding-top:22px}
.bar small{font-size:.8rem;color:var(--mu);font-weight:500}
.av{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:600}
h1.hi{font-size:2.3rem;font-weight:600;letter-spacing:-.045em;line-height:1.05;margin:28px 0 10px}
h1.hi span{color:rgba(255,255,255,.72);font-weight:400}
.safe{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--mu);font-weight:500}
.safe::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc)}
.sec{display:flex;align-items:baseline;justify-content:space-between;margin:34px 0 14px;gap:10px}
.sec h2{font-size:1.2rem;font-weight:600;letter-spacing:-.03em}
.sec h2 small{font-size:.78rem;color:var(--mu);font-weight:500;letter-spacing:-.005em;margin-left:8px}
.sec a{font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap}
.sec a svg{width:16px;height:16px;stroke-width:2}

/* ---------- APP: riquadri colorati da avviare ---------- */
.apps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.app{height:196px;border-radius:26px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;color:#fff;transition:transform .15s}
.app:active{transform:scale(.97)}
.app::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='55'%3E%3Cpath d='M16 0l16 9.2v18.5L16 37 0 27.7V9.2zM16 37v18' fill='none' stroke='%23ffffff' stroke-opacity='.10'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 60%);mask-image:linear-gradient(200deg,#000,transparent 60%)}
.app.c-blu{background:linear-gradient(150deg,#2a86e6,#0F4C81 70%);box-shadow:0 14px 34px -12px rgba(42,134,230,.55)}
.app.c-ambra{background:linear-gradient(150deg,#f8c653,#c9800c 78%);box-shadow:0 14px 30px -14px rgba(160,100,0,.6)}
.app.c-rosso{background:linear-gradient(150deg,#e2557a,#8a1538 78%)}
.app.c-viola{background:linear-gradient(150deg,#8b6cf0,#3717a6 78%)}
.app .top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.aic{width:48px;height:48px;border-radius:15px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.aic svg{width:24px;height:24px;stroke-width:1.9}
.kind{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:rgba(0,0,0,.2);padding:5px 8px;border-radius:20px}
.app .bt{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.app h3{font-size:1.12rem;font-weight:600;letter-spacing:-.025em}
.app p{font-size:.74rem;opacity:.8;margin-top:3px;line-height:1.35}
.play{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.play svg{width:18px;height:18px;margin-left:2px}
.c-blu .play{color:#0F4C81}.c-ambra .play{color:#8a5a00}.c-rosso .play{color:#8a1538}.c-viola .play{color:#3717a6}
.soonlab{font-size:.7rem;font-weight:600;background:rgba(255,255,255,.2);padding:6px 10px;border-radius:20px;white-space:nowrap}

/* ---------- FILE: righe neutre ---------- */
.stor{display:flex;align-items:center;gap:12px;font-size:.72rem;color:var(--mu);font-weight:500;margin:-4px 0 6px}
.stor .l{flex:1;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.stor .l i{display:block;height:100%;background:var(--acc);min-width:2px}
.frow{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
.frow:last-child{border-bottom:0}
.frow .tx{flex:1;min-width:0}
.frow h4{font-size:.95rem;font-weight:500;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .m{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:.74rem;color:var(--mu);flex-wrap:wrap}
.doc{width:42px;height:50px;flex:0 0 42px;position:relative;border:1.3px solid var(--fbd);border-radius:6px 13px 6px 6px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:7px;font-size:.54rem;font-weight:700;letter-spacing:.05em;color:var(--ficon);text-transform:uppercase}
.doc::before{content:"";position:absolute;right:-1px;top:-1px;width:13px;height:13px;border-left:1.3px solid var(--fbd);border-bottom:1.3px solid var(--fbd);border-radius:0 12px 0 5px;background:var(--bg)}
.fold{width:42px;height:42px;flex:0 0 42px;display:flex;align-items:center;justify-content:center;color:var(--ficon)}
.fold svg{width:30px;height:30px;stroke-width:1.3}
.use{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:600;padding:2px 8px 2px 6px;border-radius:20px;background:rgba(255,255,255,.92);white-space:nowrap}
.use::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.use.c-blu{color:#0F4C81}.use.c-ambra{color:#8a5a00}.use.c-rosso{color:#8a1538}.use.c-viola{color:#3717a6}
.frow .ch{color:var(--fch);width:18px;height:18px}
.more{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--mu);flex:0 0 36px}
.more:active{background:var(--tile)}
.empty{padding:34px 10px;text-align:center;color:var(--mu);font-size:.88rem;line-height:1.6}
.empty svg{width:40px;height:40px;opacity:.6;margin-bottom:8px}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:26px;border:1.3px dashed var(--fbd);font-weight:500;font-size:.9rem;margin-top:14px;width:100%}
.cta svg{width:18px;height:18px}

/* ---------- barra di navigazione ---------- */
.tab{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(22px + var(--safe-b));display:flex;align-items:center;gap:4px;padding:6px;border-radius:32px;background:var(--tab);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.45);z-index:40}
.tab a{height:48px;min-width:52px;border-radius:24px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--tabic);font-size:.84rem;font-weight:600}
.tab a span{display:none}
.tab a.on{background:var(--acc);color:var(--accdk);padding:0 18px}
.tab a.on span{display:inline}

/* ---------- pagine interne ---------- */
.nav{display:flex;justify-content:space-between;align-items:center;padding-top:18px;gap:10px;min-height:58px}
.nav .bk{display:flex;align-items:center;gap:4px;color:var(--mu);font-size:.92rem;font-weight:500;min-width:0}
.nav .bk span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .bk svg{transform:rotate(180deg);width:18px;height:18px}
.nav .rt{display:flex;align-items:center;gap:8px}
.txtbtn{font-size:.85rem;font-weight:600;color:var(--acc);padding:8px 4px}
.plus{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--accdk);display:flex;align-items:center;justify-content:center}
.plus svg{width:19px;height:19px;stroke-width:2}
h1.big{font-size:2.1rem;font-weight:600;letter-spacing:-.045em;margin:12px 0 16px;line-height:1.1;word-break:break-word}
.crumb{font-size:.76rem;color:var(--mu);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search{display:flex;align-items:center;gap:10px;height:46px;border-radius:14px;background:var(--tile);border:1px solid var(--line);padding:0 14px;color:var(--mu)}
.search svg{width:18px;height:18px}
.search input{flex:1;background:none;border:0;outline:0;font-size:.95rem;color:var(--tx);min-width:0}
.search input::placeholder{color:var(--mu)}
.chips{display:flex;gap:8px;margin:14px 0 4px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chips button{height:34px;padding:0 14px;border-radius:17px;border:1px solid var(--line);display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:500;color:var(--mu);white-space:nowrap}
.chips button.on{background:#fff;color:var(--accdk);border-color:#fff}
.chips button .dot{width:6px;height:6px;border-radius:50%}
.lab{display:flex;justify-content:space-between;align-items:center;font-size:.74rem;color:var(--mu);font-weight:500;margin:22px 0 0}
.lab button{color:var(--mu);font-size:.74rem;font-weight:500}
.cb{width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:1.5px solid var(--fbd);display:flex;align-items:center;justify-content:center}
.sel .cb{background:var(--acc);border-color:var(--acc);color:var(--accdk)}
.cb svg{width:14px;height:14px;stroke-width:3;opacity:0}.sel .cb svg{opacity:1}
.bulk{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + var(--safe-b));display:flex;gap:8px;padding:8px;border-radius:22px;background:#06302b;border:1px solid var(--line);z-index:41;box-shadow:0 12px 30px rgba(0,0,0,.45);align-items:center}
.bulk span{font-size:.8rem;color:var(--mu);padding:0 8px;white-space:nowrap}
.bulk button{height:40px;padding:0 14px;border-radius:14px;background:rgba(255,255,255,.08);font-size:.84rem;font-weight:600;display:flex;align-items:center;gap:6px}
.bulk button.red{color:var(--danger)}
.bulk svg{width:17px;height:17px}

/* ---------- pannello dal basso / finestre ---------- */
.dim{position:fixed;inset:0;background:rgba(0,12,10,.62);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}
.dim.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--sheet);border-radius:28px 28px 0 0;padding:10px 22px calc(26px + var(--safe-b));border-top:1px solid rgba(255,255,255,.1);transform:translateY(105%);transition:transform .25s cubic-bezier(.2,.8,.2,1);max-height:88vh;overflow:auto;max-width:560px;margin:0 auto}
.sheet.show{transform:none}
.grab{width:40px;height:5px;border-radius:5px;background:rgba(255,255,255,.2);margin:0 auto 18px}
.fh{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.fh .tx{min-width:0}
.fh h4{font-size:1.05rem;font-weight:600;word-break:break-word}
.fh small{font-size:.76rem;color:var(--mu)}
.fh .doc::before{background:var(--sheet)}
.run{display:flex;align-items:center;gap:14px;margin:16px 0 6px;padding:14px;border-radius:20px;color:#fff;width:100%;text-align:left}
.run.c-blu{background:linear-gradient(150deg,#2a86e6,#0F4C81 75%);box-shadow:0 14px 30px -14px rgba(42,134,230,.7)}
.run.c-ambra{background:linear-gradient(150deg,#f8c653,#c9800c 78%)}
.run.c-rosso{background:linear-gradient(150deg,#e2557a,#8a1538 78%)}
.run.c-viola{background:linear-gradient(150deg,#8b6cf0,#3717a6 78%)}
.run .aic{width:44px;height:44px;border-radius:13px}
.run b{font-size:.98rem;font-weight:600;display:block}.run small{font-size:.74rem;opacity:.85}
.run .play{margin-left:auto}
.run.off{opacity:.55}
.act{display:flex;align-items:center;gap:14px;padding:14px 4px;font-size:.95rem;border-top:0;width:100%;text-align:left}
.act+.act{border-top:1px solid var(--line)}
.act svg{color:var(--mu)}
.act.red,.act.red svg{color:var(--danger)}
.sheet h3{font-size:1.15rem;font-weight:600;margin-bottom:6px}
.sheet p.sub{font-size:.84rem;color:var(--mu);margin-bottom:16px;line-height:1.5;word-break:break-word}
.sheet .inp,.sheet select{width:100%;height:50px;border-radius:14px;border:1px solid var(--fbd);background:rgba(255,255,255,.06);padding:0 14px;font-size:1rem;outline:0;margin-bottom:14px}
.sheet select option{color:#000}
.sheet .inp:focus,.sheet select:focus{border-color:var(--acc)}
.row2{display:flex;gap:10px}
.btn{flex:1;height:50px;border-radius:25px;font-weight:600;font-size:.95rem;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--fbd)}
.btn.pri{background:var(--acc);color:var(--accdk);border-color:var(--acc)}
.btn.red{background:#ff8a8a;color:#3a0a0a;border-color:#ff8a8a}

/* ---------- caricamenti ---------- */
#queue{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + var(--safe-b));width:min(360px,calc(100vw - 28px));background:var(--sheet);border:1px solid var(--line);border-radius:20px;box-shadow:0 14px 40px rgba(0,0,0,.5);z-index:50;overflow:hidden}
#queue .qh{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-weight:600;font-size:.85rem;border-bottom:1px solid var(--line)}
#queue .qh button{color:var(--mu);font-size:1.3rem;line-height:1;padding:0 4px}
#queue .ql{max-height:220px;overflow:auto}
.qi{padding:10px 14px;font-size:.8rem;border-bottom:1px solid var(--line)}
.qi:last-child{border-bottom:0}
.qi .qn{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px}
.qi .qn span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.qi .qs{color:var(--mu);white-space:nowrap}
.qi .pb{height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.qi .pb i{display:block;height:100%;width:0;background:var(--acc);transition:width .15s}
.qi.err .pb i{background:var(--danger);width:100%!important}.qi.err .qs{color:var(--danger)}
.drop{position:fixed;inset:14px;border:2px dashed var(--acc);border-radius:26px;background:rgba(11,74,68,.85);display:none;align-items:center;justify-content:center;font-weight:600;font-size:1.1rem;z-index:70;pointer-events:none}
body.dragging .drop{display:flex}
#toast{position:fixed;left:50%;top:calc(16px + var(--safe-t));transform:translate(-50%,-20px);background:#fff;color:var(--accdk);padding:11px 18px;border-radius:22px;font-size:.86rem;font-weight:600;opacity:0;transition:all .25s;z-index:80;pointer-events:none;max-width:90vw;box-shadow:0 10px 30px rgba(0,0,0,.35)}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.err{background:#ff8a8a;color:#3a0a0a}

/* ---------- moduli (login, password) ---------- */
.form label{display:block;font-size:.8rem;color:var(--mu);font-weight:500;margin:0 0 8px 4px}
.fld{position:relative;margin-bottom:16px}
.fld input{width:100%;height:54px;border-radius:16px;border:1px solid var(--fbd);background:rgba(255,255,255,.06);padding:0 52px 0 18px;font-size:1.05rem;outline:0;color:var(--tx)}
.fld input:focus{border-color:var(--acc);background:rgba(255,255,255,.09)}
.fld input::placeholder{color:rgba(255,255,255,.45)}
.fld .eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--mu)}
.go{width:100%;height:56px;border-radius:28px;background:var(--acc);color:var(--accdk);font-size:1rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;box-shadow:0 12px 26px -12px rgba(63,212,194,.7)}
.go:active{transform:scale(.98)}
.msg{padding:12px 16px;border-radius:16px;font-size:.86rem;line-height:1.5;margin-bottom:18px}
.msg.error{background:rgba(255,138,138,.14);border:1px solid rgba(255,138,138,.4);color:#ffd0d0}
.msg.info{background:rgba(63,212,194,.12);border:1px solid rgba(63,212,194,.35);color:#c9f5ee}
.msg.ok{background:rgba(63,212,194,.14);border:1px solid rgba(63,212,194,.4);color:#c9f5ee}
.hint{font-size:.76rem;color:var(--mu);margin:-8px 0 16px 4px}
.code{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;background:rgba(0,0,0,.25);padding:2px 6px;border-radius:6px}

/* login */
body.login{padding-bottom:calc(30px + var(--safe-b));display:flex;flex-direction:column}
.login .w{flex:1;display:flex;flex-direction:column;width:100%;max-width:440px}
.login .brand{padding-top:30px;display:flex;justify-content:space-between;align-items:center}
.login .brand b{font-size:.95rem;font-weight:700;letter-spacing:.04em}
.login .brand small{display:block;font-size:.72rem;color:var(--mu);font-weight:500;letter-spacing:.02em;margin-top:3px}
.login .lk{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--acc)}
.login h1{font-size:2.6rem;font-weight:600;letter-spacing:-.05em;line-height:1.02;margin:64px 0 12px}
.login h1 span{display:block;color:rgba(255,255,255,.72);font-weight:400}
.login .lead{color:var(--mu);font-size:.95rem;margin-bottom:34px;line-height:1.5}
.login .foot{margin-top:auto;padding-top:34px;display:flex;justify-content:space-between;font-size:.8rem;color:var(--mu)}
.login .foot a{display:flex;align-items:center;gap:6px}
.login .foot a svg{transform:rotate(180deg);width:16px;height:16px}

/* account */
.card{border:1px solid var(--line);border-radius:22px;background:var(--tile);padding:4px 16px;margin-top:10px}
.card .act .v{margin-left:auto;color:var(--mu);font-size:.85rem}
.prof{display:flex;align-items:center;gap:16px;margin:26px 0 8px}
.prof .av{width:62px;height:62px;font-size:1.1rem;background:rgba(255,255,255,.06)}
.prof b{font-size:1.2rem;font-weight:600;display:block}.prof small{color:var(--mu);font-size:.82rem}

/* ================================================================
   COMPUTER (schermo largo)
   ================================================================ */
@media (min-width:900px){
  body{padding-bottom:60px}
  .w{max-width:1040px;padding:0 44px}
  .bar{padding-top:30px;padding-right:430px;min-height:78px}
  .bar .av{display:none}
  h1.hi{font-size:3rem;margin-top:34px}
  .apps{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
  .app{height:220px;padding:20px}
  a.app:hover{transform:translateY(-3px)}
  .tab{top:22px;bottom:auto;left:auto;right:max(24px,calc(50vw - 520px));transform:none;box-shadow:0 8px 24px rgba(0,0,0,.3)}
  .tab a span{display:inline}
  .tab a{padding:0 16px}
  .tab a:not(.on):hover{background:rgba(255,255,255,.07);color:#fff}
  .frow:hover h4{color:var(--acc)}
  .nav{padding-right:430px;padding-top:26px;min-height:80px}
  h1.big{font-size:2.6rem}
  .bulk{bottom:28px}
  #queue{left:auto;right:28px;transform:none;bottom:28px}
  .sheet{left:50%;right:auto;bottom:auto;top:50%;width:460px;border-radius:26px;transform:translate(-50%,-46%) scale(.97);opacity:0;pointer-events:none;transition:all .2s;border:1px solid rgba(255,255,255,.1)}
  .sheet.show{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
  .grab{display:none}
  .sheet{padding-top:24px}
  .home-cols{display:grid;grid-template-columns:1fr;gap:0}
  body.login{padding-bottom:30px}
  .login h1{margin-top:90px;font-size:3rem}
  .acc-wrap{max-width:560px}
}
.act .ch{margin-left:auto;color:var(--fch);width:18px;height:18px}
.card .act .v{text-align:right;max-width:55%}
.crumbs{display:flex;flex-wrap:wrap;gap:2px 6px;font-size:.76rem;color:var(--mu);margin-top:6px}
.crumbs a{color:var(--mu)}.crumbs a:hover{color:#fff}
.crumbs i{font-style:normal;opacity:.5}
.foot-note{margin:22px 0 0;font-size:.74rem;color:var(--mu);display:flex;flex-direction:column;gap:8px}
.foot-note .stor{margin:0}
body.selecting .more{display:none}
.frow .cb{display:none}
body.selecting .frow .cb{display:flex}
body.selecting{padding-bottom:calc(190px + var(--safe-b))}
.bulk button{background:rgba(255,255,255,.1)}