/* App Hub – enhanced visuals */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
  color:#eaf3ff; background:#0b1524; overflow-x:hidden;
}
:root{
  --bg1:#0b1524; --bg2:#0f2138; --bg3:#0a1a2a;
  --brand:#00c2ff; --brand2:#38f2e8; --accent:#a8ffef;
  --text:#eaf3ff; --muted:#98b3d4; --card-bg:rgba(255,255,255,.06); --card-stroke:rgba(255,255,255,.16);
  --glow: 0 20px 60px rgba(0,194,255,.18);
}
.is-hidden{display:none !important}

/* Background mist */
#bg::before,#bg::after{content:'';position:fixed;inset:-20% -10%;z-index:-2;filter:blur(60px)}
#bg::before{
  background:
    radial-gradient(40% 40% at 20% 30%, rgba(0,194,255,.35), transparent 60%),
    radial-gradient(35% 35% at 80% 20%, rgba(103,247,230,.25), transparent 60%),
    radial-gradient(60% 60% at 50% 90%, rgba(25,95,255,.16), transparent 60%);
}
#bg::after{background:radial-gradient(30% 30% at 75% 80%, rgba(97,184,255,.12), transparent 60%)}

/* Header (mobile-first, con "hero" leggero) */
.site-header{
  display:grid; grid-template-columns:1fr; gap:10px;
  padding:14px 14px; position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(140%) blur(12px);
  background:
    radial-gradient(1200px 400px at 10% -20%, rgba(56,242,232,.14), transparent 60%),
    radial-gradient(900px 300px at 90% -10%, rgba(0,194,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(3,10,22,.95), rgba(3,10,22,.55) 70%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
/* rende .logo un box-ritaglio quadrato */
.logo{
  width:36px; height:36px; border-radius:10px; overflow:hidden; display:grid; place-items:center;
}
.logo > img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit }

.titles h1{margin:0; font-size:clamp(18px,5vw,24px); letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.titles .subtitle{margin:2px 0 0; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.actions{display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center}
.search-wrap{position:relative; display:flex; align-items:center}
.search-wrap input{
  width:100%; padding:12px 40px 12px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12); color:var(--text); background:rgba(255,255,255,.06);
  outline:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)
}
.search-wrap .icon{position:absolute; right:10px; width:20px;height:20px; opacity:.8; fill:none; stroke:#c8defb; stroke-width:1.8}

.btn{padding:10px 12px; border-radius:12px; border:1px solid var(--card-stroke); background:var(--card-bg); color:var(--text); cursor:pointer}
.btn.ghost{background:transparent}
.btn:active{transform:scale(.98)}

.toggle{display:flex; align-items:center; gap:6px; justify-self:end}
.toggle input{accent-color:var(--brand)}

.container{width:min(1200px,94vw); margin:14px auto 40px}
.stats{color:var(--muted); font-size:14px; padding:6px 2px 12px}

/* Grid & cards */
.grid{display:grid; grid-template-columns:1fr; gap:12px}
.card{
  --accent-h: 190; position:relative; padding:14px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid var(--card-stroke); box-shadow:var(--glow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display:flex; flex-direction:column; gap:8px; min-height:120px;
}
.card:active{transform:scale(.998)}
.card:hover{border-color: rgba(56,242,232,.35); box-shadow: 0 12px 40px rgba(0,194,255,.14)}

.card::before{
  content:""; position:absolute; inset:-1px; border-radius:18px;
  background:linear-gradient(140deg, rgba(56,242,232,.25), rgba(0,194,255,.2), rgba(56,242,232,.12));
  opacity:0; transition:opacity .2s ease; z-index:-1;
}
.card:hover::before{ opacity:1; }

.card::after{
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:4px; border-radius:4px;
  background:linear-gradient(180deg, hsl(var(--accent-h),90%,60%), transparent);
  opacity:.7;
}

.card .top{display:flex; gap:10px; align-items:center; min-width:0}

/* ==== ICONA: box sempre quadrato + icona centrata, senza crop ==== */
.iconwrap{
  width:40px;height:40px; aspect-ratio:1/1;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex:0 0 auto;
}
.iconwrap img{
  width:100%; height:100%;
  object-fit:contain;            /* (fix) niente taglio */
  object-position:center;
  display:block;
  transition: transform .25s ease;
}
/* hover: niente scale per evitare clip visivo */
.card:hover .iconwrap img{ transform: translateY(-1px); }
.iconwrap .emoji{font-size:20px; opacity:.9}

/* ========== TITLE / MARQUEE ========== */
.card .top > div{ flex:1 1 auto; min-width:0 } /* evita overflow */
.card h3{
  margin:0; font-size:16px; letter-spacing:.2px;
  white-space:nowrap; overflow:visible; text-overflow:ellipsis; min-width:0;
}
.marquee-wrap{ display:block; width:100%; overflow:hidden; position:relative; min-width:0; }
.marquee-inner{ display:inline-block; white-space:nowrap; will-change:transform; transform:translateX(0); padding-right:0; }
.marquee-wrap.needs-marquee .marquee-inner{ animation: marqueeAnim var(--marquee-duration, 6s) linear infinite; }

/* === Install PWA – pulsante più visibile === */
.btn-install{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; font-weight:700; border:0; color:#05121d;
  background:linear-gradient(135deg,#00c2ff,#38f2e8);
  box-shadow:0 8px 24px rgba(0,194,255,.25), inset 0 1px 0 rgba(255,255,255,.25);
  text-decoration:none;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-install:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,194,255,.32), inset 0 1px 0 rgba(255,255,255,.3) }
.btn-install:active{ transform:translateY(0) scale(.99) }
.btn-install:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(0,194,255,.25), 0 8px 24px rgba(0,194,255,.25), inset 0 1px 0 rgba(255,255,255,.25);
}

/* === Refresh – rotazione dell’icona interna === */
.btn-refresh{
  width:36px; height:36px; padding:0; display:inline-grid; place-items:center;
  border-radius:999px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  font-weight:700;
}
.btn-refresh:hover{ border-color:#2ad8ff; box-shadow:0 0 0 3px rgba(42,216,255,.12) inset }
.btn-refresh:active{ transform:scale(.98) }
.btn-refresh .spin-target{ display:inline-block }
@keyframes apphub-spin{ to { transform: rotate(360deg); } }
.btn-refresh.spinning .spin-target{ animation: apphub-spin 1s linear infinite }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-install, .btn-refresh{ transition:none }
  .btn-refresh.spinning .spin-target{ animation: none }
}

/* marquee keyframes: move left by the computed shift, pause, then reset */
@keyframes marqueeAnim {
  0%   { transform: translateX(0); }
  45%  { transform: translateX(calc(var(--marquee-shift, 100px) * -1)); }
  55%  { transform: translateX(calc(var(--marquee-shift, 100px) * -1)); }
  100% { transform: translateX(0); }
}

/* path and badges */
.card .path{color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.card .badges{display:flex; flex-wrap:wrap; gap:6px; font-size:11px; color:#a6d0ff}

/* Badge “chip” */
.badge{
  padding:4px 8px; border:1px solid rgba(255,255,255,.14); border-radius:999px;
  background:rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.card .bottom{margin-top:auto; display:flex; gap:8px; align-items:center; justify-content:space-between}
.card a.open{
  flex:1 1 auto; text-align:center; text-decoration:none; padding:10px 12px; border-radius:12px;
  border:1px solid var(--card-stroke); color:var(--text);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.card a.open:hover{ border-color:#2ad8ff; box-shadow:0 0 0 3px rgba(42,216,255,.15) inset; }
.card a.open:active{ transform:scale(.995) }

.card .host{font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40%}

.footer{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; color:var(--muted); font-size:12px; padding:20px 8px}
.footer .sep{opacity:.5}

/* Breakpoints */
@media (min-width:640px){
  .site-header{grid-template-columns:1fr auto; align-items:center}
  .actions{grid-template-columns:auto 1fr auto auto}
  .grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px}
  .card h3{font-size:17px}
  .card .host{max-width:30%}
}
@media (min-width:960px){
  .grid{grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
}
@media (min-width:1280px){
  .grid{grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px}
  .titles h1{font-size:24px}
}