/* ===== Schermate app (mockup dispositivi) ===== */
.screens-eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #4f46e5; background: rgba(79,70,229,.1); padding: .3rem .8rem; border-radius: 999px; margin-bottom: .75rem; }
.screens-stage { position: relative; max-width: 1100px; margin: 0 auto; padding: 2rem 0 3rem; }
.screens-stage::before { content: ""; position: absolute; inset: 10% 5% 0; background: radial-gradient(closest-side, rgba(99,102,241,.35), transparent); filter: blur(40px); z-index: 0; }

.device-tablet { position: relative; z-index: 1; margin: 0; width: 88%; aspect-ratio: 4 / 3; max-height: 640px; background: #0f172a; border-radius: 2.2rem; padding: 1.4rem; box-shadow: 0 0 0 2px #334155, 0 40px 80px -20px rgba(15,23,42,.6); transform: perspective(1800px) rotateY(8deg) rotateX(3deg); transition: transform .5s ease; }
.device-tablet:hover { transform: perspective(1800px) rotateY(0) rotateX(0); }
.device-camera { position: absolute; top: .55rem; left: 50%; width: .5rem; height: .5rem; border-radius: 50%; background: #1e293b; transform: translateX(-50%); }
.device-screen { width: 100%; height: 100%; border-radius: 1rem; overflow: hidden; font-family: Inter, system-ui, sans-serif; }

/* Classifiche TV */
.tvx { background: radial-gradient(900px 400px at 20% -10%, #1e293b 0%, #0b1120 60%); color: #e2e8f0; display: flex; flex-direction: column; }
.tvx-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid rgba(148,163,184,.15); background: rgba(15,23,42,.8); }
.tvx-title { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.05rem; color: #f8fafc; }
.tvx-ico { width: 1.9rem; height: 1.9rem; border-radius: .55rem; display: grid; place-items: center; background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; font-size: .9rem; }
.tvx-chip { font-size: .72rem; color: #cbd5e1; background: #1e293b; border: 1px solid #334155; border-radius: 999px; padding: .25rem .7rem; display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.tvx-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #22c55e; animation: tvxPulse 1.8s infinite; }
@keyframes tvxPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 70%, 100% { box-shadow: 0 0 0 .5rem rgba(34,197,94,0); } }
.tvx-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding: .9rem; min-height: 0; }
.tvx-panel { background: rgba(30,41,59,.75); border: 1px solid rgba(148,163,184,.14); border-radius: .8rem; overflow: hidden; display: flex; flex-direction: column; }
.tvx-panel-h { padding: .55rem .75rem; background: linear-gradient(90deg, rgba(99,102,241,.28), rgba(139,92,246,.05)); display: flex; flex-direction: column; }
.tvx-panel-h b { color: #f8fafc; font-size: .9rem; }
.tvx-panel-h small { color: #94a3b8; font-size: .68rem; }
.tvx-list { list-style: none; margin: 0; padding: .4rem; display: flex; flex-direction: column; gap: .2rem; }
.tvx-list li { display: flex; align-items: center; gap: .55rem; padding: .32rem .45rem; border-radius: .5rem; font-size: .8rem; }
.tvx-list li:nth-child(odd) { background: rgba(255,255,255,.03); }
.tvx-list .pos { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .72rem; background: #1e293b; color: #cbd5e1; }
.tvx-list .nm { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvx-list .pt { font-weight: 800; font-size: .78rem; padding: .12rem .5rem; border-radius: .4rem; background: rgba(139,92,246,.2); color: #ddd6fe; border: 1px solid rgba(139,92,246,.4); font-variant-numeric: tabular-nums; }
.tvx-list .gold { background: rgba(245,158,11,.12) !important; }
.tvx-list .gold .pos { background: linear-gradient(135deg,#fde68a,#f59e0b); color: #422006; }
.tvx-list .silver .pos { background: linear-gradient(135deg,#f1f5f9,#94a3b8); color: #1e293b; }
.tvx-list .bronze .pos { background: linear-gradient(135deg,#fdba74,#c2410c); color: #431407; }

/* Smartphone */
.device-phone { position: absolute; z-index: 2; right: 0; bottom: 0; margin: 0; width: 230px; aspect-ratio: 9 / 19; background: #0f172a; border-radius: 2.2rem; padding: .6rem; box-shadow: 0 0 0 2px #334155, 0 30px 60px -15px rgba(15,23,42,.65); transform: rotate(-4deg); transition: transform .5s ease; }
.device-phone:hover { transform: rotate(0) translateY(-6px); }
.device-notch { position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); width: 34%; height: 1.1rem; background: #0f172a; border-radius: 0 0 .8rem .8rem; z-index: 3; }
.device-phone .device-screen { border-radius: 1.7rem; }
.phx { background: #f4f5fb; color: #0f172a; display: flex; flex-direction: column; gap: .55rem; padding: 1.6rem .6rem .6rem; font-size: .72rem; }
.phx-bar { font-weight: 800; color: #4338ca; font-size: .8rem; }
.phx-hero { border-radius: .9rem; padding: .7rem; color: #fff; background: linear-gradient(135deg,#4f46e5,#7c3aed); display: flex; flex-direction: column; box-shadow: 0 10px 20px -8px rgba(79,70,229,.55); }
.phx-hero small { font-size: .55rem; letter-spacing: .08em; opacity: .8; }
.phx-hero b { font-size: .95rem; }
.phx-hero span { opacity: .85; font-size: .62rem; }
.phx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.phx-tile { background: #fff; border: 1px solid #e2e8f0; border-radius: .7rem; padding: .55rem; display: flex; flex-direction: column; gap: .3rem; box-shadow: 0 4px 10px -6px rgba(15,23,42,.2); }
.phx-tile i { width: 1.6rem; height: 1.6rem; border-radius: .5rem; display: grid; place-items: center; color: #fff; font-size: .8rem; }
.t-blue { background: linear-gradient(135deg,#3b82f6,#4f46e5); }
.t-violet { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.t-amber { background: linear-gradient(135deg,#fbbf24,#f97316); }
.t-green { background: linear-gradient(135deg,#34d399,#059669); }
.phx-card { background: #fff; border-radius: .7rem; border: 1px solid #e2e8f0; border-top: 3px solid #4f46e5; padding: .5rem; display: flex; flex-direction: column; gap: .35rem; }
.phx-card-h { display: flex; justify-content: space-between; font-weight: 700; }
.phx-card-h em { font-style: normal; color: #64748b; font-weight: 600; }
.phx-row { display: flex; align-items: center; gap: .4rem; }
.phx-row span:first-child { flex: 1; font-weight: 600; }
.phx-row b { color: #4338ca; }
.phx-shots { display: flex; gap: .15rem; }
.phx-shots i { width: .5rem; height: .5rem; border-radius: 50%; }
.phx-shots .h { background: #22c55e; }
.phx-shots .m { background: #ef4444; }

.phx-profile { display: flex; align-items: center; gap: .55rem; background: linear-gradient(135deg,#4f46e5,#7c3aed); color: #fff; border-radius: .9rem; padding: .65rem; box-shadow: 0 10px 20px -8px rgba(79,70,229,.55); }
.phx-profile b { display: block; font-size: .9rem; }
.phx-profile small { font-size: .58rem; opacity: .85; }
.phx-avatar { width: 2.2rem; height: 2.2rem; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.6); }
.phx-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .35rem; }
.phx-stats div { background: #fff; border: 1px solid #e2e8f0; border-radius: .6rem; padding: .35rem; text-align: center; display: flex; flex-direction: column; }
.phx-stats small { font-size: .5rem; color: #64748b; line-height: 1.1; }
.phx-stats b { font-size: .9rem; color: #4338ca; }
.phx-res { display: flex; align-items: center; gap: .35rem; padding: .2rem 0; border-bottom: 1px dashed #e2e8f0; }
.phx-res:last-child { border-bottom: 0; }
.phx-res > span:first-child { flex: 1; font-weight: 600; line-height: 1.1; display: flex; flex-direction: column; }
.phx-res small { font-size: .55rem; color: #64748b; font-weight: 500; }
.phx-res b { color: #4338ca; font-size: .7rem; white-space: nowrap; }
.phx-res .gold { color: #f59e0b; }
.phx-res .silver { color: #94a3b8; }
.phx-pos { font-size: .6rem; font-weight: 700; color: #475569; background: #f1f5f9; border-radius: .3rem; padding: 0 .3rem; }
.phx-trend { display: flex; align-items: flex-end; gap: .3rem; height: 2.4rem; padding: .3rem .4rem; background: #fff; border-radius: .6rem; border: 1px solid #e2e8f0; }
.phx-trend i { flex: 1; border-radius: .2rem .2rem 0 0; background: linear-gradient(180deg,#8b5cf6,#4f46e5); }

.hero-browser { position: relative; margin: 1.5rem auto; max-width: 92%; padding: 0; border-radius: .9rem; background: #fff; box-shadow: 0 30px 60px -20px rgba(15,23,42,.45), 0 0 0 1px rgba(15,23,42,.06); transform: perspective(1600px) rotateY(-9deg) rotateX(4deg) rotateZ(1deg); transition: transform .5s ease; }
.hero-browser:hover { transform: perspective(1600px) rotateY(-3deg) rotateX(1deg); }
.hero-browser-bar { display: flex; align-items: center; gap: .35rem; background: #f1f5f9; border-radius: .8rem .8rem 0 0; padding: .55rem .8rem; }
.hero-browser-bar i { width: .65rem; height: .65rem; border-radius: 50%; background: #ef4444; }
.hero-browser-bar i:nth-child(2) { background: #f59e0b; }
.hero-browser-bar i:nth-child(3) { background: #22c55e; }
.hero-browser-bar span { margin-left: .6rem; flex: 1; font-size: .72rem; color: #64748b; background: #fff; border-radius: 999px; padding: .15rem .7rem; }
.brx { background: #f4f5fb; border-radius: 0 0 .8rem .8rem; padding: .9rem; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; font-size: .8rem; color: #0f172a; }
.brx-col { display: flex; flex-direction: column; gap: .6rem; }
.brx .phx-trend { flex: 1; min-height: 3rem; }
.hero-browser { max-width: 100%; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-browser { transition: none; } }

.cgx { background: #f4f5fb; border-radius: 0 0 .8rem .8rem; overflow: hidden; color: #0f172a; font-size: .72rem; }
.cgx-nav { display: flex; align-items: center; gap: .8rem; padding: .5rem .8rem; background: linear-gradient(90deg,#0f172a,#312e81); color: #e2e8f0; white-space: nowrap; overflow: hidden; }
.cgx-nav b { color: #fff; font-size: .85rem; display: flex; align-items: center; gap: .3rem; }
.cgx-nav span i { margin-right: .2rem; }
.cgx-logo { width: .6rem; height: .6rem; border-radius: 50%; background: #f97316; display: inline-block; }
.cgx-body { padding: .7rem; display: flex; flex-direction: column; gap: .55rem; }
.cgx-title { display: flex; align-items: center; gap: .5rem; }
.cgx-title b { display: block; font-size: .95rem; }
.cgx-title small { color: #64748b; font-size: .62rem; }
.cgx-ico { width: 1.8rem; height: 1.8rem; border-radius: .5rem; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,#6366f1,#8b5cf6); }
.cgx-filters { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; background: #fff; border: 1px solid #e2e8f0; border-radius: .6rem; padding: .5rem; }
.cgx-filters small { display: block; font-size: .52rem; font-weight: 700; text-transform: uppercase; color: #475569; margin-bottom: .15rem; }
.cgx-filters span { display: flex; gap: .35rem; border: 1px solid #e2e8f0; border-radius: .4rem; padding: .25rem .4rem; white-space: nowrap; overflow: hidden; }
.cgx-filters i { color: #64748b; }
.cgx-player { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid #6366f1; border-radius: .6rem; padding: .5rem .6rem; }
.cgx-player b { display: block; font-size: .85rem; }
.cgx-player small { color: #64748b; font-size: .6rem; }
.cgx-badges { display: flex; flex-wrap: wrap; gap: .25rem; }
.cgx-badges span { font-size: .56rem; font-weight: 700; border-radius: 999px; padding: .1rem .45rem; }
.b-blue { background: #e0e7ff; color: #4338ca; }
.b-gray { background: #f1f5f9; color: #334155; }
.b-green { background: #dcfce7; color: #15803d; }
.b-cyan { background: #e0f2fe; color: #0369a1; }
.cgx-table { background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid #6366f1; border-radius: .6rem; overflow: hidden; }
.cgx-th { font-weight: 700; padding: .45rem .6rem; border-bottom: 1px solid #e2e8f0; }
.cgx-th i { color: #6366f1; }
.cgx-row { display: grid; grid-template-columns: 1.1fr 1.3fr 1.2fr .7fr .8fr; gap: .4rem; align-items: center; padding: .35rem .6rem; border-bottom: 1px solid #f1f5f9; }
.cgx-row:last-child { border-bottom: 0; }
.cgx-head { background: #f8fafc; font-size: .52rem; font-weight: 700; text-transform: uppercase; color: #64748b; }
.cgx-row em { display: block; width: max-content; font-style: normal; font-size: .5rem; font-weight: 700; background: #dcfce7; color: #15803d; border-radius: .3rem; padding: 0 .3rem; margin-top: .1rem; }
.cgx-row em.run { background: #fef3c7; color: #b45309; }
.cgx-bar { height: .35rem; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.cgx-bar i { display: block; height: 100%; background: #22c55e; border-radius: 999px; }
.cgx-bar i.run { background: #f59e0b; }
.cgx-pt { justify-self: start; font-weight: 700; color: #4338ca; background: #eef2ff; border-radius: 999px; padding: .05rem .4rem; white-space: nowrap; }
@media (max-width: 575.98px) { .cgx-nav span:nth-child(n+4) { display: none; } .cgx-filters { grid-template-columns: 1fr; } .cgx-row { grid-template-columns: 1fr 1.2fr .9fr; } .cgx-row > :nth-child(3), .cgx-row > :nth-child(4) { display: none; } }

.menux { margin: 0; border-radius: 1rem; overflow: hidden; background: #f4f5fb; box-shadow: 0 30px 60px -25px rgba(15,23,42,.45), 0 0 0 1px rgba(15,23,42,.06); font-size: .74rem; color: #0f172a; transform: perspective(1600px) rotateY(6deg) rotateX(3deg); transition: transform .5s ease; }
.menux:hover { transform: none; }
.menux-nav { display: flex; align-items: center; gap: .75rem; padding: .55rem .8rem; background: linear-gradient(90deg,#0f172a,#312e81); color: #cbd5e1; white-space: nowrap; overflow: hidden; }
.menux-nav b { color: #fff; display: flex; align-items: center; gap: .3rem; font-size: .85rem; }
.menux-nav i { margin-right: .2rem; }
.menux-nav .on { color: #fff; background: rgba(255,255,255,.14); border-radius: .4rem; padding: .15rem .4rem; }
.menux-nav em { font-style: normal; font-size: .55rem; font-weight: 800; background: #ef4444; color: #fff; border-radius: 999px; padding: 0 .3rem; margin-left: .2rem; }
.menux-stage { display: grid; grid-template-columns: 1.05fr 1fr; gap: .8rem; padding: .8rem; }
.menux-drop { background: #fff; border-radius: .7rem; padding: .4rem; box-shadow: 0 14px 30px -12px rgba(15,23,42,.35); border: 1px solid #e2e8f0; display: flex; flex-direction: column; }
.menux-drop small { font-size: .52rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; padding: .35rem .45rem .15rem; }
.menux-drop span { display: flex; align-items: center; gap: .45rem; padding: .28rem .45rem; border-radius: .4rem; }
.menux-drop span i { color: #6366f1; }
.menux-drop span:nth-of-type(2) { background: #eef2ff; color: #4338ca; font-weight: 600; }
.menux-drop .stop { margin-top: .25rem; color: #b91c1c; background: #fef2f2; font-weight: 700; }
.menux-drop .stop i { color: #dc2626; }
.menux-drop .sw { margin-left: auto; width: 1.5rem; height: .8rem; border-radius: 999px; background: #cbd5e1; position: relative; }
.menux-drop .sw::after { content: ""; position: absolute; top: .1rem; left: .1rem; width: .6rem; height: .6rem; border-radius: 50%; background: #fff; }
.menux-side { display: flex; flex-direction: column; gap: .7rem; }
.menux-chat { background: #fff; border-radius: .7rem; border: 1px solid #e2e8f0; padding: .5rem; display: flex; flex-direction: column; gap: .4rem; box-shadow: 0 14px 30px -14px rgba(15,23,42,.3); }
.menux-chat-h { font-weight: 700; color: #4338ca; }
.menux-chat p { margin: 0; padding: .35rem .5rem; border-radius: .7rem; max-width: 90%; font-size: .66rem; line-height: 1.25; }
.menux-chat p b { display: block; font-size: .56rem; color: #6366f1; }
.menux-chat .in { background: #f1f5f9; border-bottom-left-radius: .15rem; }
.menux-chat .out { align-self: flex-end; color: #fff; background: linear-gradient(135deg,#6366f1,#8b5cf6); border-bottom-right-radius: .15rem; }
.menux-pills { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.menux-pills span { background: #fff; border: 1px solid #e2e8f0; border-radius: .6rem; padding: .45rem; display: flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .64rem; }
.menux-pills i { color: #fff; width: 1.3rem; height: 1.3rem; flex: 0 0 auto; border-radius: .4rem; display: grid; place-items: center; background: linear-gradient(135deg,#3b82f6,#4f46e5); }
.menux-pills span:nth-child(2) i { background: linear-gradient(135deg,#34d399,#059669); }
.menux-pills span:nth-child(3) i { background: linear-gradient(135deg,#fbbf24,#f97316); }
.menux-pills span:nth-child(4) i { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
@media (max-width: 575.98px) { .menux { transform: none; } .menux-stage { grid-template-columns: 1fr; } .menux-nav span:nth-child(n+3):not(.on) { display: none; } }
@media (prefers-reduced-motion: reduce) { .menux { transition: none; } }

@media (max-width: 991.98px) {
    .device-tablet { width: 100%; transform: none; }
    .device-phone { position: relative; margin: -4rem auto 0; transform: none; width: 200px; }
}
@media (max-width: 575.98px) {
    .device-tablet { padding: .7rem; border-radius: 1.3rem; aspect-ratio: auto; }
    .tvx-grid { grid-template-columns: 1fr; }
    .tvx-panel:nth-child(2), .tvx-chip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .device-tablet, .device-phone { transition: none; }
    .tvx-dot { animation: none; }
}