/* GlassRemote — Liquid Glass: sfondo colorato da rifrangere, vetro con riflessi sui bordi, tipografia sottile */
:root {
  --bg: #05060b;
  --text: #f5f7fb;
  --muted: rgba(235, 240, 255, .58);
  --faint: rgba(235, 240, 255, .34);
  --accent: #62c8ff;
  --accent-2: #8a84ff;
  --ok: #3ddc97;
  --warn: #ffb547;
  --bad: #ff6b72;
  --glass: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 55%, rgba(255,255,255,.08));
  --glass-solid: linear-gradient(160deg, rgba(58,64,90,.96), rgba(24,27,42,.98));
  --rim: inset 1px 1px 0 rgba(255,255,255,.34), inset -1px -1px 0 rgba(255,255,255,.10), inset 0 0 24px rgba(255,255,255,.04);
  --drop: 0 10px 28px rgba(0,0,0,.30);
  --blur: blur(26px) saturate(190%) brightness(1.08);
  --spring: cubic-bezier(.3, 1.12, .55, 1);
  --glide: cubic-bezier(.22, 1, .36, 1);
  --app-height: 100dvh;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--frame-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--frame-bottom, 0px));
  --top-h: 66px;
  --tab-h: 68px;
}
.mock { --frame-top: 54px; --frame-bottom: 22px; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: var(--app-height); background: var(--bg); color: var(--text); overflow: hidden;
  font: 400 16px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", system-ui, sans-serif;
  letter-spacing: -.005em; overscroll-behavior: none; -webkit-touch-callout: none; touch-action: manipulation; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
input, select { font: inherit; color: inherit; -webkit-user-select: text; user-select: text; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.fill { fill: currentColor; stroke: none; }
[hidden] { display: none !important; }
b { font-weight: 600; }

.app { position: relative; height: var(--app-height); overflow: hidden; }

/* ===== Sfondo: macchie di colore lente, così il vetro ha qualcosa da rifrangere ===== */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: var(--bg); }
.aurora i { position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%; opacity: .32; will-change: transform; animation: drift 38s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { left: -40%; top: -34%; background: radial-gradient(circle, rgba(52,120,255,.75), transparent 62%); }
.aurora i:nth-child(2) { right: -55%; top: 6%; background: radial-gradient(circle, rgba(138,92,255,.62), transparent 62%); animation-duration: 46s; animation-delay: -12s; }
.aurora i:nth-child(3) { left: -30%; bottom: -46%; background: radial-gradient(circle, rgba(0,196,226,.5), transparent 62%); animation-duration: 52s; animation-delay: -20s; }
.aurora i:nth-child(4) { right: -60%; bottom: -26%; width: 90%; background: radial-gradient(circle, rgba(255,92,160,.34), transparent 62%); animation-duration: 60s; animation-delay: -6s; }
@keyframes drift { to { transform: translate3d(9%, 7%, 0) scale(1.1); } }
/* Luce soffusa dal bordo sinistro verso il centro: corallo a metà schermo, verde acqua più in basso */
.aurora::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 24% at 0% 40%, rgba(255,122,150,.17), transparent 72%),
    radial-gradient(55% 22% at 0% 72%, rgba(52,214,172,.12), transparent 72%),
    radial-gradient(58% 22% at 100% 26%, rgba(255,176,92,.13), transparent 72%),
    radial-gradient(56% 24% at 100% 62%, rgba(122,138,255,.15), transparent 72%); }

/* ===== Vetro ===== */
.glass, .tv-card, .group, .hero-card, .scene-tile, .app-tile, .tv-chip, .kvs {
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 0; box-shadow: var(--rim), var(--drop);
}
.glass { transition: transform .18s var(--spring), background .15s; }
.glass:active, .d:active, .rocker button:active, .tv-card:active, .scene-tile:active, .app-tile:active { transform: scale(.95); }
.glass.round { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; }
.glass.pill { height: 44px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 500; }
.glass.pill svg { width: 18px; height: 18px; }
.glass.on-press, .rocker button.on-press, .d.on-press { background: linear-gradient(160deg, rgba(98,200,255,.40), rgba(138,132,255,.22)); }
.power { color: var(--bad); }

.cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; border-radius: 25px; font-size: 16px; font-weight: 600; color: #04121c;
  background: linear-gradient(160deg, #a6dfff, #84b4ff); box-shadow: inset 1px 1px 0 rgba(255,255,255,.65), 0 6px 16px rgba(0,0,0,.25); transition: transform .18s var(--spring); }
.cta:active { transform: scale(.97); }
.link { color: var(--accent); font-size: 16px; font-weight: 400; min-height: 44px; padding: 0 6px; }
.link.strong { font-weight: 600; }
.link.danger { color: var(--bad); }
.link.center { display: flex; margin: 0 auto; align-items: center; justify-content: center; }

/* ===== Struttura ===== */
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: block; animation: fade .24s var(--glide) both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }
.topbar { position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: calc(var(--safe-top) + var(--top-h));
  padding: calc(var(--safe-top) + 6px) 20px 0; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(to bottom, rgba(5,6,11,.98) 72%, rgba(5,6,11,0)); }
.remote-top { background: none; }
.topbar h1 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -.03em; }
.topbar .glass.round { width: 44px; height: 44px; }
.scroll { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; padding: calc(var(--safe-top) + var(--top-h) + 6px) 18px calc(var(--safe-bottom) + var(--tab-h) + 34px);
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--safe-top) + 26px), #000 calc(var(--safe-top) + var(--top-h)), #000 calc(100% - var(--safe-bottom) - var(--tab-h) - 8px), transparent calc(100% - var(--safe-bottom) - var(--tab-h) + 22px));
  mask-image: linear-gradient(to bottom, transparent calc(var(--safe-top) + 26px), #000 calc(var(--safe-top) + var(--top-h)), #000 calc(100% - var(--safe-bottom) - var(--tab-h) - 8px), transparent calc(100% - var(--safe-bottom) - var(--tab-h) + 22px)); }
.scroll::-webkit-scrollbar { display: none; }
.sect-head { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 4px 10px; }
.sect-head h2 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.sect-head .link { min-height: 0; font-size: 15px; }
.footnote { text-align: center; color: var(--faint); font-size: 13px; margin: 16px 0 0; }
.hint { margin: 0; font-size: 13px; color: var(--muted); }
.hint b { color: var(--text); font-weight: 600; }
.hint.pad { padding: 0 8px; margin: 8px 0 4px; }
.hint.err { color: var(--bad); min-height: 1.2em; }
.span2 { grid-column: 1 / -1; }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); display: inline-block; flex: none; }
.dot.on { background: var(--ok); box-shadow: 0 0 9px var(--ok); }
.dot.warn { background: var(--warn); box-shadow: 0 0 9px var(--warn); }
.dot.reach { background: var(--accent); box-shadow: 0 0 9px var(--accent); }
.dot.off { background: var(--bad); }

/* ===== Carta principale ===== */
.hero-card { border-radius: 30px; padding: 16px; position: relative; overflow: hidden; }
.hero-card::before { display: none; }
.hero-top { display: flex; align-items: center; gap: 12px; position: relative; }
.tv-glyph { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: linear-gradient(150deg, rgba(255,255,255,.26), rgba(255,255,255,.06)); box-shadow: inset 1px 1px 0 rgba(255,255,255,.4); }
.hero-title { flex: 1; min-width: 0; }
h2.hero-name { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-status { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); margin-top: 2px; }
.power-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--bad); flex: none;
  background: rgba(255,107,114,.14); box-shadow: inset 1px 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,107,114,.28); transition: transform .18s var(--spring); }
.power-btn:active { transform: scale(.92); }
.now { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 10px; border-radius: 16px; background: rgba(0,0,0,.22); position: relative; }
.now i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 15px; color: #fff; flex: none; }
.now small { display: block; font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.now b { font-size: 15px; font-weight: 600; }
.vol-row { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 12px; margin-top: 14px; position: relative; }
.vbtn { height: 48px; border-radius: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 500; }
.vbtn svg { width: 20px; height: 20px; }
.vbtn.mute { color: var(--muted); }
.hero-card .cta { margin-top: 16px; position: relative; }

/* ===== Scene ===== */
.scene-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 18px; margin: 0 -18px; padding: 4px 18px 14px; scrollbar-width: none; }
.scene-row::-webkit-scrollbar { display: none; }
.scene-tile { position: relative; flex: none; width: 118px; min-height: 124px; padding: 14px; border-radius: 26px; text-align: left; display: flex; flex-direction: column; gap: 2px; scroll-snap-align: start;
  transition: transform .18s var(--spring); overflow: hidden; --c1: #8b8bff; --c2: #5b5bf0; }
.scene-tile::before { display: none; }
.scene-tile .ico { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; margin-bottom: auto;
  background: linear-gradient(150deg, var(--c1), var(--c2)); box-shadow: inset 1px 1px 0 rgba(255,255,255,.45); }
.scene-tile .ico svg { width: 22px; height: 22px; stroke-width: 1.8; }
.scene-tile b { position: relative; font-size: 15px; font-weight: 600; margin-top: 12px; }
.scene-tile small { position: relative; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-tile .pencil { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.4); }
.scene-tile .pencil svg { width: 14px; height: 14px; }
.scene-tile.add { align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--accent); font-size: 14px; font-weight: 500; }
.scene-tile.add::before { display: none; }
.scene-tile.add svg { width: 28px; height: 28px; }
.scene-tile.timer { --c1: #5ad8f0; --c2: #2a8fd8; }
.scene-tile.active { box-shadow: var(--rim), 0 0 0 1.5px rgba(140,225,255,.7), var(--drop); }
.editing .scene-tile:not(.add) { animation: wiggle .38s ease-in-out infinite alternate; }
@keyframes wiggle { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }
.scene-tile.big { width: 132px; min-height: 134px; pointer-events: none; }

/* ===== Carte TV ===== */
.tv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tv-card { position: relative; display: flex; flex-direction: column; text-align: left; min-height: 160px; padding: 14px; border-radius: 26px; transition: transform .18s var(--spring); }
.tv-card.sel { box-shadow: var(--rim), 0 0 0 1.5px rgba(140,225,255,.55), var(--drop); }
.card-open { position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.tv-card > .top-row, .tv-card > .brand, .tv-card > .name, .tv-card > .meta { position: relative; z-index: 1; pointer-events: none; }
.top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tv-card .brand { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tv-card .brand.thin { font-weight: 400; }
.tv-card .name { font-size: 18px; font-weight: 650; letter-spacing: -.02em; margin-top: 4px; line-height: 1.2; }
.tv-card .meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; font-size: 12.5px; color: var(--muted); }
.tv-card .status { display: flex; align-items: center; gap: 6px; }
.tv-card.add { align-items: center; justify-content: center; gap: 8px; color: var(--accent); font-weight: 500; font-size: 15px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16); -webkit-backdrop-filter: none; backdrop-filter: none; }
.tv-card.add svg { width: 30px; height: 30px; }
.mini { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.10); display: grid; place-items: center; color: var(--muted); position: relative; flex: none; }
.mini svg { width: 17px; height: 17px; }
.mini.star.on { color: #ffd36b; }
.mini.star.on svg { fill: #ffd36b; filter: drop-shadow(0 0 5px rgba(255,211,107,.6)); }
.mini::after, .tog::after, .switch::after { content: ""; position: absolute; inset: -8px; }
.badge { font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 5px 10px; border-radius: 999px; background: rgba(98,200,255,.2); color: var(--accent); }
.tog { position: relative; width: 44px; height: 26px; border-radius: 13px; flex: none; background: rgba(255,255,255,.16); transition: background .2s; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.tog i { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform .24s var(--spring); }
.tog.on { background: #3ddc97; }
.tog.on i { transform: translateX(18px); }
.segmented.two { grid-template-columns: repeat(2, 1fr); max-width: none; margin-bottom: 14px; }

/* ===== Gruppi (liste in stile iOS) ===== */
.group { border-radius: 22px; overflow: hidden; margin-bottom: 8px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 0 16px; font-size: 16px; position: relative; width: 100%; text-align: left; }
.row + .row { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.row > span:first-child { flex: none; }
.row input[type=text], .row select { flex: 1; min-width: 0; text-align: right; background: none; border: 0; outline: none; font-size: 16px; color: var(--accent); padding: 14px 0; -webkit-appearance: none; appearance: none; }
.row input::placeholder { color: var(--faint); }
.row.col { flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 16px 12px; }
.row.col input[type=text] { text-align: left; padding: 4px 0; }
.row-top { display: flex; justify-content: space-between; }
.row-top b { color: var(--accent); font-weight: 500; font-size: 15px; }
.row .link { min-height: 0; padding: 0; }
.row.item { min-height: 54px; }
.row .rt { color: var(--muted); font-size: 14px; }
.row > .hint:only-child { flex: 1; white-space: normal; line-height: 1.4; padding: 14px 0; }
.lang-row { cursor: pointer; }
.lang-row .lang-cur { display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: 16px; }
.lang-row .lang-cur b { font-weight: 500; }
.lang-row .lang-cur svg { width: 18px; height: 18px; color: var(--muted); }
.switch-row.sel .sw-name { color: var(--accent); }
.switch { position: relative; width: 51px; height: 31px; border-radius: 16px; flex: none; background: rgba(255,255,255,.16); transition: background .2s; }
.switch i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .24s var(--spring); }
.switch[aria-checked=true] { background: #3ddc97; }
.switch[aria-checked=true] i { transform: translateX(20px); }
.adv { margin-top: 18px; }
.adv summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 16px; border-radius: 22px; cursor: pointer; background: var(--glass); box-shadow: var(--rim), var(--drop); font-size: 16px; }
.adv summary::-webkit-details-marker { display: none; }
.adv summary svg { width: 18px; height: 18px; color: var(--muted); transition: transform .2s; }
.adv[open] summary svg { transform: rotate(90deg); }
.adv .group { margin-top: 10px; }
.siri-row .link { font-size: 15px; }
.sc-name { display: inline-flex; align-items: center; gap: 12px; }

/* ===== Telecomando ===== */
.remote-top { gap: 10px; }
.tv-title { flex: 1; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 16px; min-width: 0; }
#tvName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-title .chev { width: 15px; height: 15px; opacity: .6; }
.remote { position: absolute; inset: 0; padding: calc(var(--safe-top) + var(--top-h) + 8px) 18px calc(var(--safe-bottom) + var(--tab-h) + 20px);
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 8px; }
.remote .quick { order: 1; } .remote .media { order: 2; } .remote .controls { order: 3; } .remote .mode-pane { order: 4; } .remote .segmented { order: 5; }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 360px; }
.media { display: flex; justify-content: center; gap: 20px; width: 100%; }
.media .glass.round { width: 64px; height: 46px; border-radius: 23px; }
.controls { display: grid; grid-template-columns: 76px 1fr 76px; gap: 10px; align-items: center; width: 100%; max-width: 360px; }
.rocker { display: flex; flex-direction: column; align-items: center; height: 148px; border-radius: 38px; padding: 4px; }
.rocker button { flex: 1; width: 100%; border-radius: 34px; display: grid; place-items: center; transition: transform .16s var(--spring), background .15s; }
.rocker span { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.center-keys { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.center-keys .glass.pill { height: 44px; font-size: 13.5px; }
.mode-pane { display: none; width: 100%; height: 240px; align-items: center; justify-content: center; }
.mode-pane.active { display: flex; animation: fade .2s ease both; }

.dpad { position: relative; width: 236px; height: 236px; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, rgba(98,200,255,.16), transparent 72%), var(--glass); box-shadow: var(--rim), var(--drop); }
.d { position: absolute; width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; color: #eaf6ff; transition: transform .16s var(--spring), background .15s; }
.d svg { width: 26px; height: 26px; }
.d.up { top: 6px; left: 78px; } .d.down { bottom: 6px; left: 78px; } .d.left { left: 6px; top: 78px; } .d.right { right: 6px; top: 78px; }
.d.ok { top: 78px; left: 78px; font-weight: 600; font-size: 17px; letter-spacing: .06em; background: linear-gradient(150deg, rgba(255,255,255,.26), rgba(255,255,255,.07)); box-shadow: inset 1px 1px 0 rgba(255,255,255,.5), 0 6px 16px rgba(0,0,0,.3); }

.touchpad { position: relative; width: 100%; max-width: 340px; height: 232px; border-radius: 34px; display: grid; place-items: center; text-align: center; touch-action: none;
  background: radial-gradient(circle at 50% 40%, rgba(98,200,255,.10), transparent 70%), var(--glass); }
.tp { position: absolute; width: 11px; height: 11px; border: solid var(--faint); border-width: 0 2px 2px 0; transition: border-color .15s; }
.tp.up { top: 18px; left: calc(50% - 6px); transform: rotate(-135deg); } .tp.down { bottom: 18px; left: calc(50% - 6px); transform: rotate(45deg); }
.tp.left { left: 18px; top: calc(50% - 6px); transform: rotate(135deg); } .tp.right { right: 18px; top: calc(50% - 6px); transform: rotate(-45deg); }
.tp.on { border-color: var(--accent); }
.tp-hint { font-size: 15px; font-weight: 500; line-height: 1.5; }
.tp-hint small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.tp-dot { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; pointer-events: none; background: rgba(98,200,255,.28); box-shadow: inset 1px 1px 0 rgba(255,255,255,.5), 0 0 24px rgba(98,200,255,.4); }
.touchpad.tap { box-shadow: var(--rim), inset 0 0 0 2px rgba(140,225,255,.6); }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 300px; }
.numpad .glass { height: 52px; border-radius: 18px; font-size: 22px; font-weight: 300; }

.kb { width: 100%; max-width: 372px; display: flex; flex-direction: column; gap: 8px; align-self: flex-end; }
.kb-field { display: flex; gap: 8px; }
.kb-field input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 22px; border: 0; outline: none; font-size: 16px; background: rgba(0,0,0,.30); box-shadow: inset 0 1px 0 rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.10); }
.kb-field input:focus { box-shadow: inset 0 0 0 1.5px rgba(140,225,255,.6); }
.kb-field .glass { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.kb-field .glass svg { width: 19px; height: 19px; }
.kb-rows { display: flex; flex-direction: column; gap: 6px; }
.kb-row { display: flex; justify-content: center; gap: 5px; }
.kb-row .k { flex: 1; height: 42px; min-width: 0; border-radius: 9px; font-size: 18px; font-weight: 400; display: grid; place-items: center; background: rgba(255,255,255,.13);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.18), 0 1px 0 rgba(0,0,0,.35); transition: transform .1s, background .15s; }
.kb-row .k:active, .kb-row .k.on-press { transform: scale(.93); background: rgba(98,200,255,.38); }
.kb-row .k.fn { flex: 1.5; font-size: 14px; font-weight: 500; background: rgba(255,255,255,.07); }
.kb-row .k.fn.active { background: rgba(98,200,255,.38); }
.kb-row .k.space { flex: 5; font-size: 14px; color: var(--muted); }
.kb-row .k.enter { flex: 2.4; font-size: 14px; font-weight: 600; color: #04121c; background: linear-gradient(160deg, #a6dfff, #84b4ff); }

/* Controllo segmentato con lente scorrevole */
.segmented { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; max-width: 360px; padding: 4px; border-radius: 25px; isolation: isolate; }
.segmented::before { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 0; width: var(--lw, 0px); box-sizing: border-box; border-radius: 21px;
  background: linear-gradient(160deg, rgba(255,255,255,.30), rgba(255,255,255,.12)); box-shadow: inset 1px 1px 0 rgba(255,255,255,.5), 0 4px 12px rgba(0,0,0,.25); transform: translateX(var(--lx, 0px)); }
.lens-ready .segmented::before { transition: transform .28s var(--glide), width .28s var(--glide); }
.segmented button { height: 40px; border-radius: 21px; font-size: 14px; font-weight: 500; color: var(--muted); transition: color .15s; }
.segmented button.on { color: var(--text); font-weight: 600; }

.remote-off { position: absolute; z-index: 6; left: 0; right: 0; top: calc(var(--safe-top) + var(--top-h)); bottom: 0; display: grid; place-items: center; padding: 0 28px calc(var(--safe-bottom) + var(--tab-h) + 20px);
  background: rgba(5,6,11,.5); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.off-card { width: 100%; max-width: 310px; text-align: center; padding: 28px 22px 18px; border-radius: 32px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.off-ico { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: rgba(255,255,255,.08); margin-bottom: 4px; }
.off-ico svg { width: 28px; height: 28px; }
.off-card h3 { margin: 4px 0 0; font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.off-card p { margin: 0 0 10px; font-size: 14px; color: var(--muted); }

/* ===== App ===== */
.tv-chip { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 16px; border-radius: 25px; font-size: 15px; font-weight: 500; }
.tv-chip small { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 400; }
.tv-chip svg { width: 16px; height: 16px; opacity: .6; }
.apps-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.recents { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.app-tile { position: relative; aspect-ratio: 1; border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; font-size: 12.5px; font-weight: 500; transition: transform .18s var(--spring); }
.app-tile i { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 22px; box-shadow: inset 1px 1px 0 rgba(255,255,255,.35), 0 4px 12px rgba(0,0,0,.3); }
.app-tile i.logo svg { width: 30px; height: 30px; }
.app-tile i.photo { position: relative; overflow: hidden; }
.app-tile i.photo img, .now i.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.app-tile i.photo { box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.app-tile i.glyph.wide { font-size: 17px; letter-spacing: -.02em; }
.recents .app-tile { border-radius: 20px; font-size: 11px; gap: 6px; padding: 4px; }
.recents .app-tile i { width: 38px; height: 38px; font-size: 17px; border-radius: 12px; }
.recents .app-tile i.logo svg { width: 22px; height: 22px; }
.app-tile .x { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(60,64,84,.96); color: #fff; display: grid; place-items: center; font-size: 18px; line-height: 1; z-index: 2;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.4); }
.app-tile .x::after { content: ""; position: absolute; inset: -10px; }
.app-tile.add i { background: rgba(255,255,255,.08); color: var(--accent); font-weight: 300; font-size: 30px; box-shadow: none; }
.apps-big.editing .app-tile:not(.add) { animation: wiggle .38s ease-in-out infinite alternate; }
.apps-big.editing .app-tile:nth-child(even):not(.add) { animation-delay: -.19s; }
#screen-apps.dim .app-tile, #screen-apps.dim .recents { opacity: .5; }
#appsRestore { margin-top: 10px; font-size: 14px; }
#appsEdit { font-size: 16px; }
.now i { position: relative; overflow: hidden; width: 32px; height: 32px; border-radius: 10px; font-size: 15px; box-shadow: none; display: grid; place-items: center; font-style: normal; font-weight: 700; flex: none; }
.now i.logo svg { width: 18px; height: 18px; }

/* ===== Tab bar ===== */
.tabbar { position: absolute; z-index: 30; left: 18px; right: 18px; bottom: calc(var(--safe-bottom) + 6px); height: var(--tab-h);
  display: grid; grid-template-columns: repeat(4, 1fr); padding: 5px; border-radius: 34px; isolation: isolate; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); -webkit-backdrop-filter: blur(36px) saturate(200%) brightness(1.1); backdrop-filter: blur(36px) saturate(200%) brightness(1.1);
  box-shadow: var(--rim), 0 16px 40px rgba(0,0,0,.5); }
.tabbar::before { content: ""; position: absolute; z-index: -1; top: 5px; bottom: 5px; left: 0; width: var(--lw, 0px); box-sizing: border-box; border-radius: 29px;
  background: linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,.10)); box-shadow: inset 1px 1px 0 rgba(255,255,255,.5), 0 4px 14px rgba(0,0,0,.25); transform: translateX(var(--lx, 0px)); }
.lens-ready .tabbar::before { transition: transform .3s var(--glide), width .3s var(--glide); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 29px; color: var(--muted); font-size: 10.5px; font-weight: 500; transition: color .18s, transform .14s; }
.tab:active { transform: scale(.94); }
.tab.on { color: var(--text); }
.tab.on svg { color: var(--accent); filter: drop-shadow(0 0 6px rgba(98,200,255,.55)); }

/* ===== Fogli ===== */
.sheet-backdrop { position: absolute; inset: 0; z-index: 40; background: rgba(2,3,8,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fade .2s ease both; }
.sheet { position: absolute; z-index: 50; left: 8px; right: 8px; bottom: calc(var(--safe-bottom) + 4px); padding: 8px 16px 18px; border-radius: 36px; max-height: calc(100% - var(--safe-top) - 24px); overflow-y: auto; scrollbar-width: none;
  background: linear-gradient(160deg, rgba(72,80,112,.94), rgba(26,29,46,.97)); box-shadow: var(--rim), 0 -10px 50px rgba(0,0,0,.55); animation: rise .32s var(--glide) both; }
.sheet::-webkit-scrollbar { display: none; }
@keyframes rise { from { transform: translateY(48px); opacity: 0; } }
.sheet h3 { margin: 6px 4px 14px; font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.sheet > .cta { margin-top: 14px; }
.grabber { width: 38px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.28); margin: 2px auto 8px; }
.sheet-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 4px -6px 4px; }
.sheet-head h3 { margin: 0; font-size: 17px; font-weight: 600; text-align: center; letter-spacing: -.01em; }
.sheet-head .link:first-child { justify-self: start; } .sheet-head .link:last-child { justify-self: end; }
.code-input { width: 100%; height: 64px; border-radius: 20px; border: 0; outline: none; text-align: center; font-size: 30px; font-weight: 600; letter-spacing: .3em; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: var(--text); margin-top: 12px; }
.code-input:focus { box-shadow: inset 0 0 0 1.5px rgba(140,225,255,.6); }
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.brand-chip { padding: 12px 4px; border-radius: 16px; font-size: 14px; font-weight: 600; text-align: center; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px transparent; }
.brand-chip small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); margin-top: 2px; }
.brand-chip.sel { background: rgba(98,200,255,.2); box-shadow: inset 0 0 0 1.5px rgba(140,225,255,.7); }
.brand-chip.soon { opacity: .5; }

.switch-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 16px; font-size: 16px; text-align: left; }
.switch-row + .switch-row { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.switch-row .sw-name { flex: 1; font-weight: 500; }
.switch-row small { color: var(--muted); font-size: 13px; }
.switch-row svg { width: 20px; height: 20px; color: var(--accent); }
.switch-row.add { color: var(--accent); }
.timer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.timer-grid .glass { height: 84px; border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.timer-grid b { font-size: 30px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.timer-grid small { font-size: 12px; color: var(--muted); }
.timer-grid .cancel b, .timer-grid .cancel small { color: var(--bad); }

/* Editor scene */
.scene-preview { display: grid; place-items: center; padding: 14px 0 18px; }
.grp-title { margin: 18px 6px 8px; font-size: 13px; color: var(--muted); letter-spacing: .02em; }
.icon-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.icon-grid button { aspect-ratio: 1; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: var(--muted); transition: transform .16s var(--spring), background .15s; }
.icon-grid button svg { width: 24px; height: 24px; }
.icon-grid button[aria-checked=true] { color: #fff; background: rgba(255,255,255,.2); box-shadow: inset 1px 1px 0 rgba(255,255,255,.45), inset 0 0 0 1.5px rgba(255,255,255,.55); }
.icon-grid button:active { transform: scale(.92); }
.swatches { display: flex; justify-content: space-between; padding: 4px 6px; }
.swatches button { width: 40px; height: 40px; border-radius: 50%; position: relative; box-shadow: inset 1px 1px 0 rgba(255,255,255,.55), 0 4px 10px rgba(0,0,0,.3); transition: transform .16s var(--spring); }
.swatches button[aria-checked=true]::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.swatches button:active { transform: scale(.9); }
select option { background: #1b1e2e; color: #fff; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); }
input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; }
.form { display: flex; flex-direction: column; gap: 12px; }

/* ===== Scheda dettagli (carta che si gira) ===== */
.flip-wrap { position: absolute; z-index: 60; perspective: 1500px; left: 12px; right: 12px; top: calc(var(--safe-top) + 6px); bottom: calc(var(--safe-bottom) + var(--tab-h) + 20px); }
.flip-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.flip-face { position: absolute; inset: 0; border-radius: 32px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(160deg, rgba(68,76,108,.985), rgba(22,25,40,.995)); box-shadow: var(--rim), 0 28px 70px rgba(0,0,0,.6); }
/* Safari draws children that have their own layer even when the face is turned away: hide them with the face */
.flip-face * { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-face.front { transform: rotateY(0deg) translateZ(1px); }
.flip-face.back { transform: rotateY(180deg) translateZ(1px); display: flex; flex-direction: column; padding: 18px 16px 14px; position: absolute; }
.flip-face.front .tv-card { width: 100%; height: 100%; border-radius: 0; box-shadow: none; min-height: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.d-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.d-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.d-brand { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.d-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.d-title h3, .d-title input { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.d-name-row h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-title input { padding: 4px 10px; flex: 1; min-width: 0; border: 0; outline: none; border-radius: 12px; background: rgba(0,0,0,.3); color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(140,225,255,.55); }
.d-sub { font-size: 13px; color: var(--muted); }
.mini.ok { color: var(--ok); }
.mini.trash { color: var(--bad); width: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; transition: width .2s var(--spring), background .15s; border-radius: 16px; }
.mini.trash.armed { width: auto; padding: 0 12px; background: rgba(255,107,114,.22); }
.mini.trash .lbl { font-size: 12px; font-weight: 600; }
.d-menu { position: absolute; z-index: 5; top: 84px; left: 16px; min-width: 214px; padding: 6px; border-radius: 20px; background: linear-gradient(160deg, rgba(86,95,130,.99), rgba(34,38,58,.99)); box-shadow: var(--rim), 0 16px 36px rgba(0,0,0,.55); }
.d-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 12px; border-radius: 14px; font-size: 15px; text-align: left; }
.d-menu button:active { background: rgba(255,255,255,.1); }
.d-menu svg { width: 18px; height: 18px; color: var(--accent); }
.d-bar { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; padding: 10px 12px; border-radius: 20px; background: rgba(255,255,255,.07); }
.d-bar .status { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; margin-right: auto; }
.d-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; margin-top: 4px; scrollbar-width: none; }
.d-body::-webkit-scrollbar { display: none; }
.d-body h4 { margin: 16px 6px 6px; font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--muted); }
.kvs { border-radius: 20px; padding: 0 14px; background: rgba(255,255,255,.06); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.kv { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; font-size: 14.5px; }
.kv + .kv { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.kv span { color: var(--muted); flex: none; }
.kv b { font-weight: 500; text-align: right; word-break: break-word; }
.d-body .hint { margin: 14px 6px 4px; font-size: 12px; }
.tech { margin-top: 14px; }
.tech summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; border-radius: 20px; background: rgba(255,255,255,.06); font-size: 14.5px; color: var(--muted); }
.tech summary::-webkit-details-marker { display: none; }
.tech summary::after { content: "›"; font-size: 20px; transition: transform .2s; }
.tech[open] summary::after { transform: rotate(90deg); }
.tech[open] summary { border-radius: 20px 20px 0 0; }
.tech .kvs { border-radius: 0 0 20px 20px; }
.d-foot { margin-top: 10px; }
.skeleton { height: 54px; border-radius: 18px; margin-bottom: 10px; background: linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.05) 70%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.skeleton.short { width: 60%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.d-error { text-align: center; padding: 26px 10px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.d-error p { margin: 0; }

/* Fogli: vetro "smerigliato" opaco, stesso linguaggio dell'app ma senza vedere cosa c'è sotto */
.sheet, .flip-face, .d-menu, .toast {
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(98,200,255,.13), transparent 60%),
    radial-gradient(110% 70% at 100% 100%, rgba(138,132,255,.12), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 55%),
    #12151f;
  box-shadow: var(--rim), 0 -10px 50px rgba(0,0,0,.55);
}
.sheet .group, .sheet .kvs, .flip-face .kvs { background: rgba(255,255,255,.07); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 1px 1px 0 rgba(255,255,255,.14), inset -1px -1px 0 rgba(255,255,255,.04); }
.sheet .timer-grid .glass, .sheet .brand-chip, .sheet .icon-grid button { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.07); box-shadow: inset 1px 1px 0 rgba(255,255,255,.14); }
.sheet .brand-chip.sel { background: rgba(98,200,255,.18); box-shadow: inset 1px 1px 0 rgba(255,255,255,.2), inset 0 0 0 1.5px rgba(140,225,255,.65); }
.sheet .icon-grid button[aria-checked=true] { background: rgba(255,255,255,.16); }
.sheet .scene-tile.big { background: rgba(255,255,255,.07); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 1px 1px 0 rgba(255,255,255,.16); }
.sheet .code-input, .sheet .kb-field input { background: rgba(0,0,0,.28); }
.sheet-backdrop { background: rgba(3,4,10,.62); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); }
.sheet { border-radius: 38px; }

/* ===== Nitidezza: meno schiarimento, meno bagliore, vetro più scuro e netto ===== */
:root {
  --glass: linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.03) 60%, rgba(255,255,255,.05));
  --rim: inset 1px 1px 0 rgba(255,255,255,.22), inset -1px -1px 0 rgba(255,255,255,.06);
  --drop: 0 8px 22px rgba(0,0,0,.34);
  --blur: blur(18px) saturate(115%);
}
.aurora i { opacity: .2; }
.glass, .tv-card, .group, .hero-card, .scene-tile, .app-tile, .tv-chip, .kvs { background-color: rgba(10,12,20,.52); }
.tabbar { background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)), rgba(10,12,20,.62);
  -webkit-backdrop-filter: blur(22px) saturate(115%); backdrop-filter: blur(22px) saturate(115%); box-shadow: var(--rim), 0 12px 30px rgba(0,0,0,.45); }
.tabbar::before, .segmented::before { background: rgba(255,255,255,.16); box-shadow: inset 1px 1px 0 rgba(255,255,255,.3); }
.dpad { background: radial-gradient(circle at 50% 36%, rgba(98,200,255,.08), transparent 72%), var(--glass); background-color: rgba(10,12,20,.52); }
.touchpad { background: radial-gradient(circle at 50% 40%, rgba(98,200,255,.05), transparent 70%), var(--glass); background-color: rgba(10,12,20,.52); }
.d.ok { background: rgba(255,255,255,.12); box-shadow: inset 1px 1px 0 rgba(255,255,255,.3); }
.scroll { -webkit-mask-image: none; mask-image: none; }
.app::after { content: ""; position: absolute; z-index: 29; left: 0; right: 0; bottom: 0; height: calc(var(--safe-bottom) + var(--tab-h) + 34px); pointer-events: none;
  background: linear-gradient(to top, rgba(5,6,11,.96) 45%, rgba(5,6,11,0)); }
.sheet-backdrop { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero-card .cta, .cta { box-shadow: inset 1px 1px 0 rgba(255,255,255,.5), 0 4px 12px rgba(0,0,0,.25); }
.glass.pill, .vbtn { background-color: rgba(10,12,20,.45); }

/* ===== Tocco: il feedback parte subito, il rilascio è morbido ===== */
.glass:active, .d:active, .rocker button:active, .tv-card:active, .scene-tile:active, .app-tile:active, .cta:active, .power-btn:active, .tab:active,
.icon-grid button:active, .swatches button:active, .btn-s:active, .glass.on-press, .rocker button.on-press, .d.on-press { transition-duration: .07s; }
summary, label, select, input, .row, .switch-row, .sort-chip { touch-action: manipulation; }

/* ===== Salute del TV ===== */
.health-top { justify-content: flex-start; gap: 12px; }
.health-top h1 { flex: 1; min-width: 0; font-size: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.h-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 16px; max-width: 100%; font-size: 13px; font-weight: 500;
  background: rgba(255,255,255,.07); box-shadow: inset 1px 1px 0 rgba(255,255,255,.14); }
.h-pill .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-pill.demo { color: var(--accent); background: rgba(98,200,255,.14); }
.h-nodata { margin: -2px 6px 12px; }
#healthSeg:active, .h-card:active, .verdict:active { transform: none; }
.verdict { display: flex; gap: 12px; padding: 14px 16px; border-radius: 24px; margin-bottom: 12px; --vc: var(--ok); }
.verdict.ok { --vc: var(--ok); background-image: linear-gradient(rgba(61,220,151,.14), rgba(61,220,151,.14)), var(--glass); }
.verdict.warn { --vc: var(--warn); background-image: linear-gradient(rgba(255,181,71,.15), rgba(255,181,71,.15)), var(--glass); }
.verdict.bad { --vc: var(--bad); background-image: linear-gradient(rgba(255,107,114,.17), rgba(255,107,114,.17)), var(--glass); }
.v-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--vc); background: rgba(255,255,255,.08); box-shadow: inset 1px 1px 0 rgba(255,255,255,.2); }
.v-ico svg { width: 22px; height: 22px; }
.v-text { min-width: 0; }
.v-text b { display: block; font-size: 16px; font-weight: 650; color: var(--vc); margin-top: 1px; }
.v-text ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: 14px; line-height: 1.38; }
.v-text li + li { margin-top: 4px; }
.h-card { border-radius: 26px; padding: 14px 16px 16px; margin-bottom: 12px; }
.h-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.h-head h3 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.h-meta { font-size: 12.5px; color: var(--muted); text-align: right; }
.h-big { font-size: 38px; font-weight: 300; letter-spacing: -.03em; line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; }
.h-big small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.h-chart { display: block; width: 100%; height: 108px; margin-top: 8px; border-radius: 14px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.h-axis { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; font-size: 11px; color: var(--faint); }
.h-legend { display: inline-flex; align-items: center; gap: 5px; }
.h-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.h-legend i.ram { background: var(--accent-2); }
.h-legend i.swap { background: var(--warn); margin-left: 6px; }
.h-sub { margin: 14px 2px 8px; font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--muted); }
.cores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.core { display: grid; grid-template-columns: 12px 1fr 34px; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.core i { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.core b { display: block; height: 100%; border-radius: 3px; background: var(--accent); transform: scaleX(var(--v, 0)); transform-origin: left; transition: transform .28s var(--glide), background .2s; }
.core b[data-l=warn] { background: var(--warn); }
.core b[data-l=bad] { background: var(--bad); }
.core em { font-style: normal; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.h-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.h-stats div { min-width: 0; padding: 9px 12px; border-radius: 14px; background: rgba(255,255,255,.06); }
.h-stats small { display: block; font-size: 11.5px; color: var(--muted); }
.h-stats b { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.h-search { margin-bottom: 4px; }
.sort-row { display: flex; gap: 6px; margin: 10px 0; overflow-x: auto; scrollbar-width: none; }
.sort-row::-webkit-scrollbar { display: none; }
.sort-chip { flex: none; height: 32px; padding: 0 12px; border-radius: 16px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--muted);
  background: rgba(255,255,255,.07); box-shadow: inset 1px 1px 0 rgba(255,255,255,.12); transition: background .15s, color .15s, transform .14s var(--spring); }
.sort-chip:active { transform: scale(.95); transition-duration: .07s; }
.sort-chip.on { color: var(--text); background: rgba(98,200,255,.2); box-shadow: inset 0 0 0 1.5px rgba(140,225,255,.55); }
.sort-chip i { font-style: normal; font-size: 12px; }
.proc { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
.proc + .proc { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.proc.empty { justify-content: center; padding: 22px 16px; color: var(--muted); }
.p-main { min-width: 0; }
.p-main b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-main small { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-nums { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.p-nums b { display: block; font-size: 15px; font-weight: 600; }
.p-nums b.hot { color: var(--warn); }
.p-nums small { font-size: 12px; color: var(--muted); }

.row.tall { padding: 12px 16px; }
.row .stack { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row .stack b { font-size: 16px; font-weight: 500; }
.row .stack small { font-size: 12.5px; color: var(--muted); }
.btn-s { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 76px; height: 38px; padding: 0 16px; border-radius: 19px; font-size: 14px; font-weight: 600; color: #04121c;
  background: linear-gradient(160deg, #a6dfff, #84b4ff); box-shadow: inset 1px 1px 0 rgba(255,255,255,.5), 0 4px 12px rgba(0,0,0,.25); transition: transform .18s var(--spring), opacity .15s; }
.btn-s:active { transform: scale(.96); }
.btn-s:disabled, .cta:disabled { opacity: .65; }
.spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(4,18,28,.25); border-top-color: #04121c; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#mGroup > * + *, .m-dep > * + * { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.m-dep { transition: opacity .2s; }
#mGroup.off .m-dep { opacity: .4; pointer-events: none; }
.m-block { padding: 10px 14px; }
.segmented.three { grid-template-columns: repeat(3, 1fr); max-width: none; }
.m-block .segmented { background: rgba(0,0,0,.26); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day-grid button { height: 38px; border-radius: 12px; font-size: 13px; font-weight: 500; color: var(--muted); background: rgba(255,255,255,.07); transition: background .15s, color .15s, transform .14s var(--spring); }
.day-grid button:active { transform: scale(.94); transition-duration: .07s; }
.day-grid button[aria-pressed=true] { color: var(--text); font-weight: 600; background: rgba(98,200,255,.24); box-shadow: inset 0 0 0 1.5px rgba(140,225,255,.55); }
.time-in { min-height: 38px; padding: 7px 12px; border: 0; border-radius: 12px; outline: none; font-size: 16px; color: var(--accent); color-scheme: dark; -webkit-appearance: none; appearance: none;
  background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.time-in:focus { box-shadow: inset 0 0 0 1.5px rgba(140,225,255,.6); }
#mWrap > .cta { margin-top: 12px; }
#mLoading { margin-top: 4px; }

/* tappable cards and the "what is using it" sheet */
.h-card[data-detail] { cursor: pointer; }
.h-card[data-detail]:active { transform: scale(.985); transition-duration: .07s; background-color: rgba(30,34,52,.6); }
.h-more { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--accent); }
.h-more svg { width: 16px; height: 16px; }
#detailSheet { display: flex; flex-direction: column; overflow: hidden; height: min(760px, calc(100% - var(--safe-top) - 24px)); }
.dt-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.dt-body::-webkit-scrollbar { display: none; }
.dt-body > .hint { margin: 6px 4px 0; }
.dt-body > .hint.dt-note { margin: 14px 4px 4px; }
.dt-head { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 6px 8px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dt-head b { color: var(--text); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 13px; }
.dt-idle { margin-top: 12px; font-size: 15px; }

/* open a link on the TV (Apps screen) */
.link-card { border-radius: 26px; padding: 14px 16px 16px; margin-bottom: 14px; }
.link-card:active { transform: none; }
.link-card h3 { margin: 0 0 10px; font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.link-field { display: flex; gap: 8px; }
.link-field input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 22px; border: 0; outline: none; font-size: 16px; background: rgba(0,0,0,.30); box-shadow: inset 0 1px 0 rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.10); }
.link-field input:focus { box-shadow: inset 0 0 0 1.5px rgba(140,225,255,.6); }
.link-field input::placeholder { color: var(--faint); }
.link-field .glass.pill { flex: none; padding: 0 14px; }
.link-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.link-lbl { font-size: 12px; color: var(--muted); margin-right: 2px; }
.link-chip { min-width: 0; max-width: 100%; flex: 0 1 auto; }
.link-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-card .cta { margin-top: 12px; }
.link-card .hint { margin-top: 10px; font-size: 12px; }
.dt-list { border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.07); box-shadow: inset 1px 1px 0 rgba(255,255,255,.14); }
.dt-item + .dt-item { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.dt-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; text-align: left; transition: background .15s; }
.dt-row:active { background: rgba(255,255,255,.06); transition-duration: .07s; }
.dt-row > i { position: relative; overflow: hidden; width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 17px; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.dt-row > i.logo svg { width: 22px; height: 22px; }
.dt-row > i.glyph.wide { font-size: 13px; letter-spacing: -.02em; }
.dt-row > i.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.dt-row > i.sys { background: rgba(255,255,255,.1); color: var(--muted); box-shadow: inset 1px 1px 0 rgba(255,255,255,.14); }
.dt-row > i.sys svg { width: 20px; height: 20px; }
.dt-main { flex: 1; min-width: 0; }
.dt-main > b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-main > small { display: block; font-size: 12px; color: var(--muted); }
.dt-bar { display: block; height: 5px; margin-top: 6px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.1); }
.dt-bar b { display: block; height: 100%; border-radius: 3px; background: var(--accent); transform: scaleX(var(--v, 0)); transform-origin: left; }
.dt-bar.mem b { background: var(--accent-2); }
.dt-val { flex: none; min-width: 64px; text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dt-chev { width: 16px; height: 16px; color: var(--muted); transition: transform .2s var(--glide); }
.dt-item.open .dt-chev { transform: rotate(90deg); }
.dt-procs { padding: 0 14px 10px 64px; }
.dt-p { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 12.5px; }
.dt-p span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.dt-p small { color: var(--faint); font-size: 11.5px; flex: none; }
.dt-p b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ===== Avvisi, una mano, accessibilità ===== */
.toast { position: absolute; z-index: 70; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-bottom) + var(--tab-h) + 22px); max-width: calc(100% - 36px); padding: 12px 18px; border-radius: 22px; text-align: center; font-size: 14px; font-weight: 500;
  background: linear-gradient(160deg, rgba(80,88,122,.96), rgba(30,34,54,.98));   box-shadow: var(--rim), 0 12px 30px rgba(0,0,0,.5); animation: toast-in .26s var(--glide) both; }
  @keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(14px); } }
  /* Modalità a una mano: tutta la schermata si rimpicciolisce e scende verso il pollice (come la Raggiungibilità di iOS) */
  .app .screen { transition: scale .3s var(--glide); transform-origin: 50% calc(100% - var(--safe-bottom) - var(--tab-h) - 22px); }
.onehand .screen { scale: .78; }
.onehand .topbar { background: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@supports (font: -apple-system-body) { html, body { font: -apple-system-body; } .tab { font-size: max(10.5px, .66rem); } .footnote, .hint, .tv-card .meta, .kv, .d-sub { font-size: max(12.5px, .8rem); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .spinner { animation: pulse-dot 1.2s ease-in-out infinite !important; border-color: #04121c; }
}
@keyframes pulse-dot { 50% { opacity: .35; } }