/* ===== Tema v2: hub più chiaro, barra di navigazione, superfici rifinite ===== */
:root{--surf:rgba(20,12,48,.72);--surf2:rgba(255,255,255,.055);--bd:rgba(170,150,255,.22);--sh:0 14px 40px rgba(2,0,20,.5)}
html,body{background:radial-gradient(1100px 700px at 85% -10%,rgba(123,77,255,.55),transparent 60%),radial-gradient(900px 600px at -10% 110%,rgba(255,46,147,.28),transparent 60%),linear-gradient(180deg,#0d0829,#07061a)}
/* barra di ricerca + filtri hub */
.hubtools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-radius:20px;background:var(--surf);border:1px solid var(--bd);backdrop-filter:blur(14px);box-shadow:var(--sh);position:sticky;top:0;z-index:6}
.hubtools .srch{position:relative;flex:1 1 200px;min-width:150px}
.hubtools .srch input{padding:9px 12px 9px 36px;border-radius:14px;font-weight:700;background:rgba(0,0,0,.28)}
.hubtools .srch::before{content:"🔍";position:absolute;left:11px;top:50%;translate:0 -50%;font-size:14px;opacity:.75;pointer-events:none}
.hubtools .fl{display:flex;gap:6px;flex-wrap:wrap}
.hubtools .fl button{border:1px solid var(--bd);background:var(--surf2);color:var(--ink);font-weight:800;font-size:13px;padding:7px 13px;border-radius:999px;transition:.2s}
.hubtools .fl button:hover{background:rgba(255,255,255,.12)}
.hubtools .fl button.on{background:linear-gradient(135deg,var(--violet),var(--pink));border-color:transparent;box-shadow:0 4px 16px rgba(255,46,147,.35)}
/* tile: Story in evidenza, preferiti, notifiche */
#hubTiles .tile[data-k=story]{grid-column:span 2;min-height:150px;background:linear-gradient(120deg,rgba(255,200,61,.22),rgba(123,77,255,.2) 60%,rgba(255,46,147,.18)),rgba(18,10,46,.85);border-color:rgba(255,200,61,.6)}
#hubTiles .tile[data-k=story] b{font-size:22px}
#hubTiles .tile[data-k=story]::after{content:"CONTINUA ▸";position:absolute;right:14px;bottom:12px;font-family:var(--font-h);letter-spacing:1.5px;font-size:15px;color:var(--gold);text-shadow:0 0 14px rgba(255,200,61,.6)}
.tile .fav{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:15px;background:rgba(0,0,0,.35);color:#fff;opacity:0;transition:.2s;z-index:3}
.tile:hover .fav,.tile .fav.on{opacity:1}.tile .fav.on{color:var(--gold)}
@media (pointer:coarse){.tile .fav{opacity:.6}}
.tile .dot{position:absolute;top:10px;left:10px;width:12px;height:12px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 3px rgba(255,46,147,.3),0 0 14px var(--pink);animation:dotp 1.6s ease-in-out infinite;z-index:3}
@keyframes dotp{50%{box-shadow:0 0 0 6px rgba(255,46,147,.12),0 0 20px var(--pink)}}
.tile{transition:transform .14s,box-shadow .25s,border-color .25s,opacity .25s}
.tile.hide,.tgh.hide{display:none!important}
.hubempty{grid-column:1/-1;text-align:center;padding:30px;color:var(--mut);font-weight:800}
/* pannelli e pagine */
.panel,.hubside{box-shadow:var(--sh)}
.phead{backdrop-filter:blur(10px)}
.phead h2{background:linear-gradient(90deg,var(--gold),#fff3b0);-webkit-background-clip:text;background-clip:text;color:transparent}
.iconbtn{border-radius:14px;border:1px solid var(--bd);background:var(--surf)}
.pill{border:1px solid var(--bd);background:var(--surf)}
.hero3d::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,rgba(39,225,255,.14),rgba(255,46,147,.14),rgba(255,200,61,.12),rgba(123,77,255,.16),rgba(39,225,255,.14));animation:aur 22s linear infinite;pointer-events:none;filter:blur(40px)}
@keyframes aur{to{rotate:360deg}}
/* barra inferiore mobile */
#mkNav{display:none}
@media (max-width:860px){
  #mkNav{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:30;display:none;grid-template-columns:repeat(5,1fr);padding:6px;border-radius:22px;background:rgba(14,8,38,.88);border:1px solid var(--bd);backdrop-filter:blur(18px);box-shadow:0 12px 40px rgba(0,0,0,.6)}
  #mkNav button{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;color:var(--mut);font-size:10.5px;font-weight:800;padding:6px 0;border-radius:16px;transition:.2s}
  #mkNav button i{font-style:normal;font-size:21px;filter:grayscale(.4)}
  #mkNav button.on{color:#fff;background:linear-gradient(135deg,rgba(123,77,255,.7),rgba(255,46,147,.6))}
  #mkNav button.on i{filter:none}
  body.on-hub .hubwrap{padding-bottom:16px}
  #hubTiles .tile[data-k=story]{grid-column:span 2}
  .hubtools{top:0;border-radius:16px;padding:8px}.hubtools .fl{width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.hubtools .fl button{flex:none}
}

/* ===== pagine interne ===== */
body.on-page #bg3d{opacity:.28;filter:blur(3px) saturate(.9);transition:opacity .5s,filter .5s}
#bg3d{transition:opacity .5s,filter .5s}
.pgwrap{width:min(980px,100%)}
.pgwrap .panel,.pgwrap .st,.pgwrap .shi{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015)),rgba(16,10,42,.82);border:1px solid var(--bd);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--sh)}
.pgwrap .panel h3{display:flex;align-items:center;gap:10px;font-size:19px}
.pgwrap .panel h3::before{content:"";width:5px;height:18px;border-radius:3px;background:linear-gradient(var(--cyan),var(--pink));flex:none}
.pgwrap .panel{border-radius:22px;transition:transform .2s,border-color .2s}
.pgwrap .shi{transition:transform .2s,border-color .2s,box-shadow .2s}.pgwrap .shi:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 14px 32px rgba(0,0,0,.5),0 0 22px rgba(255,200,61,.25)}
.pgwrap #pageBody>.chips:first-child{position:sticky;top:46px;z-index:4;padding:6px;border-radius:18px;background:rgba(14,8,38,.8);border:1px solid var(--bd);backdrop-filter:blur(14px);width:fit-content;max-width:100%;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.pgwrap #pageBody>.chips:first-child .chip{flex:none}
.phead{padding:8px 0}.phead .iconbtn{width:42px;height:42px}
.lbrow{transition:transform .15s,background .2s}.lbrow:hover{transform:translateX(3px);background:rgba(255,255,255,.1)}
.lbrow.r1 .n{background:linear-gradient(135deg,#ffd34d,#ff9d00);color:#3b2300}.lbrow.r2 .n{background:linear-gradient(135deg,#e8eefc,#9aa6c4);color:#16203a}.lbrow.r3 .n{background:linear-gradient(135deg,#ffb27a,#b5651d);color:#2a1100}
.lbrow.r1,.lbrow.r2,.lbrow.r3{padding:11px 12px}
.stats div{border:1px solid var(--bd);background:rgba(255,255,255,.05);transition:transform .2s}.stats div:hover{transform:translateY(-2px)}
.stats b{background:linear-gradient(180deg,#fff,#cfc4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
/* stato vuoto "serve l'account" */
.mkempty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:34px 20px;border-radius:24px;border:1px dashed rgba(170,150,255,.4);background:rgba(16,10,42,.7);backdrop-filter:blur(14px)}
.mkempty i{font-style:normal;font-size:54px;filter:drop-shadow(0 6px 14px rgba(123,77,255,.6));animation:havf 4s ease-in-out infinite}
.mkempty b{font-family:var(--font-h);font-size:26px;letter-spacing:1px;color:var(--gold)}
.mkempty p{margin:0;color:var(--mut);font-weight:700;max-width:420px;line-height:1.5}
.mkempty .row2{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
@media (max-width:860px){
  body.on-page .pgwrap{padding-bottom:16px}
}
@media (max-width:860px){.pgwrap #pageBody>.chips:first-child{flex-wrap:wrap;position:static;width:100%;overflow:visible}}

#mkNav{display:none!important}