/* Z-GRVS SOUND SYSTEM — look: 2030 spinto, cult fine '70 / inizio '80 (fosforo ambra, cromo, rosso Goblin). Sopra base.css */
:root{--amb:#FFB000;--red:#FF1F3D;--chrome:linear-gradient(180deg,#fff 0%,#c9c7bf 45%,#6f6d66 50%,#e8e6df 100%);--ink:#EDEEEA;--ink2:#a7a49c;--ink3:#67645d;
  --bg:#050506;--bg2:#0d0d10;--bg3:#151519;--line:#222228;--r:8px;--ease:cubic-bezier(.22,1,.36,1);--ease-star:cubic-bezier(.7,0,.2,1)}
[data-theme=white]{--amb:#C97A00;--red:#D8102F;--ink:#141412;--ink2:#514e47;--ink3:#8a867d;--bg:#d9d7d1;--bg2:#eceae5;--bg3:#f6f5f1;--line:#cfcdc6;
  --chrome:linear-gradient(180deg,#3a3936 0%,#151412 45%,#6a6862 50%,#2a2926 100%)}
html,body{overflow:hidden;background:var(--bg);color:var(--ink)}
.app{display:grid;grid-template-rows:56px 1fr 92px 22px;height:100dvh}
.app::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.07;background:repeating-linear-gradient(0deg,transparent 0 3px,#000 3px 4px)}
[data-theme=white] .app::before{opacity:.035}
/* ---------- testata ---------- */
.top{display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--bg2);border-bottom:1px solid var(--line);z-index:5}
.lock{display:flex;align-items:center;gap:.3em;font:700 20px/1 var(--brand);letter-spacing:-.022em;color:var(--ink);white-space:nowrap;cursor:pointer}
.lock .zv{font-size:18px}
.lock small{font:400 9px var(--f);letter-spacing:.2em;color:var(--amb);margin-left:8px;margin-top:2px}
.tabs{display:flex;gap:2px;margin-left:10px}
.tabs button{height:34px;padding:0 14px;font:700 11px var(--f);letter-spacing:.14em;color:var(--ink2);border-bottom:2px solid transparent;transition:color .15s}
.tabs button:hover{color:var(--ink)}.tabs button.on{color:var(--amb);border-color:var(--amb)}
.search{flex:0 1 300px;min-width:120px;position:relative}
.search input{width:100%;height:34px;padding:0 12px 0 32px;background:var(--bg3);color:var(--ink);border:1px solid var(--line);border-radius:17px;font:12px var(--mono);outline:0}
.search input:focus{border-color:var(--amb)}
.search::before{content:"";position:absolute;left:12px;top:11px;width:12px;height:12px;background:currentColor;color:var(--ink3);-webkit-mask:var(--zv) center/contain no-repeat;mask:var(--zv) center/contain no-repeat}
.top .bst{font:10px var(--mono);letter-spacing:.06em;color:var(--ink3);white-space:nowrap}
.admin{display:none!important}.is-admin .admin{display:inline-flex!important}
/* ---------- bottoni: pochi, netti ---------- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:19px;font:700 11px var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--bg3);border:1px solid var(--line);cursor:pointer;transition:transform .12s,background .15s,color .15s,border-color .15s;white-space:nowrap}
.b:hover{border-color:var(--ink2)}.b:active{transform:scale(.97)}
.b.pri{background:var(--amb);color:#000;border-color:var(--amb)}.b.pri:hover{background:#ffc43d;border-color:#ffc43d}
.b.red{background:var(--red);color:#fff;border-color:var(--red)}
.b.ghost{background:transparent}
.b.ico{width:38px;padding:0}.b.ico.big{width:56px;height:56px}
.b .ic{width:16px;height:16px;fill:currentColor}.b.big .ic{width:24px;height:24px}
.b.on{color:var(--amb);border-color:var(--amb)}
.b:disabled{opacity:.4;cursor:default}
/* ---------- viste ---------- */
.view{min-height:0;overflow:auto;scrollbar-width:thin;scroll-behavior:smooth}
.wrap{padding:26px 28px 40px;display:flex;flex-direction:column;gap:34px}
.sec{display:flex;flex-direction:column;gap:14px}
.sec h2{display:flex;align-items:baseline;gap:14px;font:700 22px/1 var(--brand);letter-spacing:-.03em;color:var(--ink)}
.sec h2 small{font:10px var(--mono);letter-spacing:.14em;color:var(--ink3);text-transform:uppercase}
.sec h2 .more{margin-left:auto;font:700 10px var(--f);letter-spacing:.14em;color:var(--amb);cursor:pointer}
.eyebrow{font:10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--amb)}
.monster{font:700 clamp(40px,7vw,96px)/.86 var(--brand);letter-spacing:-.04em;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:60ch;font:15px/1.55 var(--f);color:var(--ink2)}
/* hero: l'ultimo entrato nel registro */
.hero{position:relative;display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:34px;align-items:end;padding:34px;border-radius:14px;overflow:hidden;background:var(--bg2);border:1px solid var(--line);min-height:320px}
.hero .bgc{position:absolute;inset:-20%;background:var(--cov) center/cover;filter:blur(60px) saturate(1.4);opacity:.38;pointer-events:none}
.hero>*{position:relative}
.hero .cv{width:100%;aspect-ratio:1;border-radius:10px;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.hero h1{font:700 clamp(30px,4.6vw,64px)/.92 var(--brand);letter-spacing:-.035em;color:var(--ink);margin:6px 0 10px}
.hero .meta{display:flex;flex-wrap:wrap;gap:8px 18px;font:11px var(--mono);letter-spacing:.06em;color:var(--ink2)}
.hero .act{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
/* categorie: la vetrina, non un menu */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cat{--hue:#FFB000;position:relative;aspect-ratio:1.35;padding:18px;border-radius:12px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--hue) 34%,var(--bg2)),var(--bg2) 70%);border:1px solid color-mix(in srgb,var(--hue) 35%,var(--line));transition:transform .35s var(--ease),border-color .2s}
.cat:hover{transform:translateY(-4px);border-color:var(--hue)}
.cat .num{position:absolute;right:14px;top:8px;font:700 78px/1 var(--brand);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--hue) 70%,transparent);opacity:.9}
.cat .vu{position:absolute;left:18px;top:18px;display:flex;gap:3px;align-items:flex-end;height:22px}
.cat .vu i{width:4px;background:var(--hue);height:calc(var(--h) * 100%);opacity:.75;border-radius:1px}
.cat:hover .vu i{animation:vu .9s ease-in-out infinite alternate}
@keyframes vu{to{height:calc(var(--h) * 45%)}}
.cat b{font:700 clamp(15px,1.5vw,21px)/1 var(--brand);letter-spacing:-.02em;color:var(--ink)}
.cat span{font:11px/1.35 var(--f);color:var(--ink2);max-width:28ch}
.cat em{font:10px var(--mono);letter-spacing:.14em;font-style:normal;color:var(--hue)}
/* rail orizzontale e griglia di card */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 10px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .card{flex:0 0 180px;scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.card{--gc:#888;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);cursor:pointer;transition:transform .3s var(--ease),border-color .2s,box-shadow .3s;min-width:0}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--gc) 55%,var(--line))}
.card.now{border-color:var(--amb);box-shadow:0 0 0 1px var(--amb),0 16px 40px rgba(0,0,0,.4)}
.card.sel{border-color:var(--ink2)}
.cv{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#0D0F12}
.cv img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .cv img{transform:scale(1.04)}
.cv .pl{position:absolute;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;background:var(--amb);color:#000;display:grid;place-items:center;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .25s var(--ease);box-shadow:0 8px 20px rgba(0,0,0,.5)}
.cv .pl .ic{width:18px;height:18px;fill:currentColor}
.card:hover .cv .pl,.card.now .cv .pl{opacity:1;transform:none}
.cv .tag{position:absolute;left:10px;top:10px;font:700 9px var(--f);letter-spacing:.14em;padding:4px 7px;border-radius:4px;background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(6px)}
.card .t{font:700 13px/1.2 var(--brand);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .m{font:10px var(--mono);letter-spacing:.04em;color:var(--ink3);display:flex;justify-content:space-between;gap:6px;white-space:nowrap;overflow:hidden}
.card .m b{color:var(--gc);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{height:28px;padding:0 12px;border-radius:14px;border:1px solid var(--line);font:11px var(--mono);letter-spacing:.06em;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip.on{border-color:var(--amb);color:var(--amb)}.chip:hover{border-color:var(--ink2)}
.empty{display:grid;place-content:center;justify-items:center;gap:18px;text-align:center;color:var(--ink3);font:12px/1.7 var(--mono);padding:60px 20px;min-height:50vh}
.empty .zvf{width:min(30vh,220px);height:min(30vh,220px);color:var(--ink);opacity:.1}
/* scheda laterale: card, crate, dashboard */
.sheet{position:fixed;right:0;top:56px;bottom:114px;width:min(440px,100vw);z-index:6;overflow:auto;scrollbar-width:thin;background:var(--bg2);border-left:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:-30px 0 60px rgba(0,0,0,.35);transform:translateX(102%);transition:transform .35s var(--ease)}
.sheet.open{transform:none}
.sheet .x{position:absolute;right:14px;top:14px}
.sheet .cv{max-width:240px}
.sheet h3{font:700 26px/1 var(--brand);letter-spacing:-.03em;color:var(--ink);margin:0}
.sheet .id{font:11px var(--mono);letter-spacing:.06em;color:var(--ink3);display:flex;align-items:center;gap:8px}
.sheet .id i{width:9px;height:9px;border-radius:50%;background:var(--gc);box-shadow:0 0 8px var(--gc)}
.sheet p{margin:0;font:14px/1.55 var(--f);color:var(--ink2)}
.sheet .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font:11px var(--mono);letter-spacing:.04em;color:var(--ink)}
.kv span:nth-child(odd){color:var(--ink3);text-transform:uppercase;letter-spacing:.12em;font-size:9px;padding-top:2px}
.vers{display:flex;flex-direction:column;gap:5px}
.vers .vr{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:6px;background:var(--bg3);border:1px solid var(--line);font:11px var(--mono);cursor:pointer}
.vers .vr.now{border-color:var(--amb)}.vers .vr:hover{border-color:var(--ink2)}
.f label{display:block;font:9px var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin:8px 0 4px}
.f input[type=text],.f select,.f textarea{width:100%;background:var(--bg3);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:8px 10px;font:12px var(--mono);outline:0}
.f input:focus,.f textarea:focus,.f select:focus{border-color:var(--amb)}
.f textarea{min-height:70px;resize:vertical}
.f .chk{display:flex;flex-wrap:wrap;gap:10px}.f .chk label{display:inline-flex;align-items:center;gap:6px;margin:0;font:11px var(--mono);letter-spacing:0;text-transform:none;color:var(--ink)}
.mint{border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:11px/1.8 var(--mono)}
.mint b{display:block;font:700 10px var(--f);letter-spacing:.16em;color:var(--ink2)}
.mint.ok{border-color:#39FF14}.mint.ok b{color:#39FF14}
.mint i{font-style:normal;display:block;color:var(--ink3)}.mint i.ok{color:var(--ink)}.mint i.ok::before{content:"✓ "}.mint i:not(.ok)::before{content:"· "}
.dash{display:flex;flex-direction:column;gap:6px}
.drow{display:grid;grid-template-columns:44px 1fr 120px 90px 80px 70px;gap:12px;align-items:center;padding:6px 10px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);font:11px var(--mono);cursor:pointer}
.drow:hover{border-color:var(--ink2)}.drow.sel{border-color:var(--amb)}
.drow img{width:44px;height:44px;border-radius:6px;display:block}
.drow .t{font:700 13px var(--brand);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow .t small{display:block;font:10px var(--mono);color:var(--ink3);font-weight:400}
.pill{display:inline-block;padding:3px 8px;border-radius:4px;font:700 9px var(--f);letter-spacing:.12em;text-transform:uppercase}
.pill.vis{background:#39FF14;color:#000}.pill.hid{background:var(--bg3);color:var(--ink3);border:1px solid var(--line)}
/* ---------- transport ---------- */
.pbar{--gc:#888;display:grid;grid-template-columns:64px minmax(140px,260px) auto 1fr auto 70px;gap:16px;align-items:center;padding:0 18px;background:var(--bg2);border-top:1px solid var(--line);z-index:5}
.pbar .cv{width:64px;height:64px;border-radius:6px}
.pbar .np{min-width:0;display:flex;flex-direction:column;gap:3px}
.pbar .np .t{font:700 14px var(--brand);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar .np .m{font:10px var(--mono);letter-spacing:.05em;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar .np .m b{color:var(--amb);font-weight:600}
.pbar .tr{display:flex;gap:8px;align-items:center}
.pbar .wave{position:relative;height:64px;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.pbar canvas{width:100%;height:40px;display:block;cursor:pointer;touch-action:none}
.pbar .tm{display:flex;justify-content:space-between;font:10px var(--mono);color:var(--ink3)}
.pbar .side{display:flex;gap:8px;align-items:center}
.pbar .mm{display:flex;justify-content:center;gap:8px;height:60px;padding:2px 0}
.pbar .mm .leds{width:7px;--lc:linear-gradient(to top,var(--amb) 0 62%,#FFE600 62% 84%,var(--red) 84%)}
.pbar .mm b{font:700 9px var(--f);letter-spacing:.1em;color:var(--ink3);align-self:flex-end}
.inst{display:flex;align-items:center;gap:16px;padding:0 14px;font:9px/1 var(--mono);letter-spacing:.06em;color:var(--ink3);border-top:1px solid var(--line);background:var(--bg2);white-space:nowrap;overflow:hidden}
.inst .chain{display:flex;align-items:center;gap:6px;color:var(--ink2)}
.inst nav{display:flex;gap:14px}.inst nav button{font:inherit;color:inherit;letter-spacing:.1em}.inst nav button:hover{color:var(--ink)}
.inst .cr{overflow:hidden;text-overflow:ellipsis}.inst .eth{color:var(--amb)}
.grow{flex:1}
dialog#modal{background:var(--bg2);color:var(--ink);border-color:var(--line);font:13px/1.5 var(--f)}
dialog#modal h2{color:var(--amb)}
dialog#modal .btn{border-radius:19px;height:38px}
/* ---------- telefono e iPad ---------- */
@media (max-width:1000px){.cats{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr;min-height:0}.hero .cv{max-width:200px}.drow{grid-template-columns:44px 1fr 80px}.drow>:nth-child(n+4){display:none}}
@media (max-width:760px){
  .app{grid-template-rows:56px 1fr 80px 22px}
  .top{gap:8px;padding:0 10px}.lock small,.top .bst,.tabs button span{display:none}.tabs button{padding:0 9px}.search{flex-basis:120px}
  .wrap{padding:16px 14px 30px;gap:24px}.rail .card{flex-basis:150px}.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .cat{aspect-ratio:1.2;padding:12px}.cat .num{font-size:54px}.cat span{display:none}
  .sheet{top:56px;bottom:102px;width:100vw}
  .pbar{grid-template-columns:52px 1fr auto;gap:10px;padding:0 10px}.pbar .cv{width:52px;height:52px}.pbar .wave,.pbar .side,.pbar .mm{display:none}
  .inst .cr,.inst nav{display:none}
}