/* L.O.O.T. — la schermata Console dell'app vera (tema scuro "blu notte" + arancio).
   Colori, raggi e testi presi da fullstack_app/lib/theme/expressive.dart e dalle schermate di test.
   Tela 22em x 26em: 1dp dell'app = .0594em. */
.fr-loot[data-ui] {
  --cl-fondo: #0b0f17;      /* surfaceDim */
  --cl-g1: #172032;         /* containerLow: i gruppi */
  --cl-g3: #27334f;         /* containerHigh */
  --cl-testo: #e6edf7;      /* onSurface */
  --cl-var: #b9c4d6;        /* onSurfaceVariant */
  --cl-pri: #ff6a33;        /* primary */
  --cl-onpri: #300b00;      /* onPrimary */
  --cl-sec: #2b3363;        /* secondaryContainer */
  --cl-onsec: #dde0ff;      /* onSecondaryContainer */
  --cl-err: #ffb4ab;        /* error */
  --cl-live: #ffc2a8;       /* tones.live */
  --cl-term: #080605;       /* terminalSurface */
  --cl-ink: #f2b473;        /* terminalInk */
  --cl-muto: #8a7871;       /* terminalMuted */
  --cl-mono: 'Space Mono', 'Courier New', Courier, 'Liberation Mono', monospace; /* taste-skill-ignore: il terminale dell'app e' davvero monospace */
  position: relative;
  width: 22em;
  height: 26em;
  font-size: var(--fr-fs, 14px);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--cl-testo);
  line-height: 1.2;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
.fr-loot[data-ui] *, .fr-loot[data-ui] *::before, .fr-loot[data-ui] *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fr-loot[data-ui] b, .fr-loot[data-ui] i, .fr-loot[data-ui] em { font-style: normal; font-weight: inherit; }
.fr-loot[data-ui] svg { display: block; }
.fr-loot[data-ui] i.fa-solid { font-weight: 900; }
.fr-loot[data-ui] button { font: inherit; color: inherit; border: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fr-loot[data-ui] .cl-m { font-family: var(--cl-mono); /* taste-skill-ignore: terminale e PID dell'app, monospace davvero */ }

/* ---------- il telefono ---------- */
/* proporzioni da telefono vero (13,6 × 26 em, circa 1:1,9); dentro, la stessa schermata in unità ridotte (.618) */
.fr-loot[data-ui] .cl-tel {
  position: absolute; left: 19.1%; top: 0; width: 61.8%; height: 100%; font-size: .618em; border-radius: 2.5em;
  /* la cornice in metallo scuro: un filo lucido fuori, la fascia, il bordo nero del vetro dentro */
  background: #273042;
  box-shadow: inset 0 0 0 .1em #56637d, inset .2em 0 .3em -.1em #3b4760, inset -.2em 0 .3em -.1em #161c28, 0 1.4em 2.6em -1em rgba(22, 11, 4, .6);
  transform-origin: 50% 55%;
}
/* i tasti sul fianco destro: accensione e bilanciere del volume */
.fr-loot[data-ui] .cl-tel::before,
.fr-loot[data-ui] .cl-tel::after {
  content: ''; position: absolute; right: -.26em; width: .3em; border-radius: 0 .2em .2em 0; background: #2f394d;
  box-shadow: inset -.06em 0 0 #56637d, inset .08em 0 .1em rgba(0, 0, 0, .45);
}
.fr-loot[data-ui] .cl-tel::before { top: 9.5em; height: 3.4em; }
.fr-loot[data-ui] .cl-tel::after { top: 14.6em; height: 6.2em; }
.fr-loot[data-ui] .cl-schermo { position: absolute; inset: .42em; border-radius: 2.08em; background: var(--cl-fondo); overflow: hidden; box-shadow: 0 0 0 .16em #05070b; }
/* il vetro: un riflesso obliquo appena accennato, sopra tutto e senza toccare i tocchi */
.fr-loot[data-ui] .cl-schermo::after {
  content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 9; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 32%, rgba(255, 255, 255, 0) 46%); /* taste-skill-ignore: il riflesso del vetro del telefono disegnato */
}
/* il lampo della notifica: lo schermo si accende per un istante */
.fr-loot[data-ui] .cl-schermo::before {
  content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 8; pointer-events: none; opacity: 0;
  background: rgba(255, 138, 80, .16);
}

/* ---------- la vibrazione: due colpi, gli archi ai lati, le onde dal profilo del telefono ---------- */
.fr-loot[data-ui].vibra .cl-tel { animation: cl-vibra 1s linear both; }
.fr-loot[data-ui].vibra .cl-schermo::before { animation: cl-lampo 1s ease-out both; }
.fr-loot[data-ui] .cl-eco {
  position: absolute; left: 19.1%; top: 0; width: 61.8%; height: 100%; border-radius: 1.55em; pointer-events: none;
  border: .22em solid var(--cap-ink, #160b04); opacity: 0;
}
.fr-loot[data-ui].vibra .cl-eco { animation: cl-eco .9s cubic-bezier(.2, .7, .3, 1) both; }
.fr-loot[data-ui].vibra .cl-eco + .cl-eco { animation-delay: .5s; }
.fr-loot[data-ui] .cl-buzz { position: absolute; top: 21%; width: 2.6em; height: 4.2em; pointer-events: none; opacity: 0; color: var(--cap-ink, #160b04); }
.fr-loot[data-ui] .cl-buzz svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.fr-loot[data-ui] .cl-buzz-sx { left: 13.5%; margin-left: -2.6em; }
.fr-loot[data-ui] .cl-buzz-dx { right: 13.5%; margin-right: -2.6em; transform: scaleX(-1); }
.fr-loot[data-ui].vibra .cl-buzz-sx { animation: cl-buzz-sx 1s linear both; }
.fr-loot[data-ui].vibra .cl-buzz-dx { animation: cl-buzz-dx 1s linear both; }

.fr-loot[data-ui] .cl-stato { position: relative; height: 1.3em; color: var(--cl-testo); }
.fr-loot[data-ui] .cl-ora { position: absolute; left: 1.6em; top: .42em; font-size: .8em; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.fr-loot[data-ui] .cl-foro { position: absolute; left: 50%; top: .38em; width: .6em; height: .6em; margin-left: -.3em; border-radius: 50%; background: #000; }
.fr-loot[data-ui] .cl-seg { position: absolute; right: 1.5em; top: .42em; width: 2.5em; height: .74em; fill: currentColor; }

/* ---------- pagina: Console ---------- */
.fr-loot[data-ui] .cl-pagina { padding: 0 0.594em; }
.fr-loot[data-ui] .cl-etb { padding: .35em .4em .4em; }
.fr-loot[data-ui] .cl-etb--2 { padding-top: .75em; }
.fr-loot[data-ui] .cl-eti { display: block; font-size: .8em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cl-var); line-height: 1.1; }
.fr-loot[data-ui] .cl-gruppo { background: var(--cl-g1); border-radius: 1.663em; overflow: hidden; }

.fr-loot[data-ui] .cl-proc { display: flex; align-items: center; gap: 0.475em; padding: 0.594em 0.653em 0.475em 0.891em; }
.fr-loot[data-ui] .cl-pulse { position: relative; flex: none; width: 2.02em; height: 2.02em; display: flex; align-items: center; justify-content: center; }
.fr-loot[data-ui] .cl-onda { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; border: .1em solid var(--cl-live); opacity: 0; animation: cl-onda 2.4s cubic-bezier(.2, 0, 0, 1) infinite; }
.fr-loot[data-ui] .cl-dot { width: 0.594em; height: 0.594em; border-radius: 50%; background: var(--cl-live); }
.fr-loot[data-ui] .cl-stx { flex: 1; min-width: 0; font-size: .86em; color: var(--cl-onsec); white-space: nowrap; overflow: hidden; }
.fr-loot[data-ui] .cl-sv { font-weight: 800; color: var(--cl-live); }
.fr-loot[data-ui] .cl-pid { font-size: .93em; opacity: .75; }
.fr-loot[data-ui] .cl-ic { position: relative; flex: none; width: 2.376em; height: 2.376em; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.fr-loot[data-ui] .cl-ic::before { content: ''; position: absolute; left: -.42em; right: -.42em; top: -.42em; bottom: -.42em; }
.fr-loot[data-ui] .cl-cest::before { left: -.6em; right: -.6em; top: -.6em; bottom: -.6em; }
.fr-loot[data-ui] .cl-ic i { font-size: 1.069em; color: var(--cl-onsec); opacity: .8; }
.fr-loot[data-ui] .cl-ic:hover { background: rgba(230, 237, 247, .08); }

.fr-loot[data-ui] .cl-bott { display: flex; gap: 0.594em; padding: 0 0.891em 0.891em; }
.fr-loot[data-ui] .cl-b {
  position: relative; flex: 1 1 0; min-width: 0; height: 2.376em; display: flex; align-items: center; justify-content: center; gap: 0.535em;
  border-radius: 0.832em; background: var(--cl-sec); color: var(--cl-onsec); font-size: .83em; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
}
.fr-loot[data-ui] .cl-b::before { content: ''; position: absolute; left: 0; right: 0; top: -.42em; bottom: -.42em; }
.fr-loot[data-ui] .cl-b i { font-size: 1.15em; }
.fr-loot[data-ui] .cl-b:hover { background: #3a4272; }
.fr-loot[data-ui] .cl-b2 { background: transparent; color: var(--cl-err); box-shadow: inset 0 0 0 .09em rgba(255, 180, 171, .55); }
.fr-loot[data-ui] .cl-b2:hover { background: rgba(255, 180, 171, .12); box-shadow: inset 0 0 0 .09em var(--cl-err); }
.fr-loot[data-ui] .cl-b1 .cl-i-p, .fr-loot[data-ui] .cl-b1 .cl-t-a, .fr-loot[data-ui] .cl-b1 .cl-sp { display: none; }
.fr-loot[data-ui] .cl-sp { width: 1.1em; height: 1.1em; border-radius: 50%; border: .16em solid currentColor; border-right-color: transparent; animation: cl-gira .7s linear infinite; }
.fr-loot[data-ui] .cl-b1[data-occupato] .cl-sp { display: block; }
.fr-loot[data-ui] .cl-b1[data-occupato] i, .fr-loot[data-ui] .cl-b1[data-occupato] span:not(.cl-sp) { display: none !important; }

/* arrestato: l'unico comando e' "Avvia Monitoraggio", pieno e arancio */
.fr-loot[data-ui][data-stato="fermo"] .cl-b1 { background: var(--cl-pri); color: var(--cl-onpri); }
.fr-loot[data-ui][data-stato="fermo"] .cl-b1:hover { background: #ff7d4f; }
.fr-loot[data-ui][data-stato="fermo"] .cl-b1 .cl-i-r, .fr-loot[data-ui][data-stato="fermo"] .cl-b1 .cl-t-r { display: none; }
.fr-loot[data-ui][data-stato="fermo"] .cl-b1 .cl-i-p, .fr-loot[data-ui][data-stato="fermo"] .cl-b1 .cl-t-a { display: inline; }
.fr-loot[data-ui][data-stato="fermo"] .cl-b2, .fr-loot[data-ui][data-stato="fermo"] .cl-pid { display: none; }
.fr-loot[data-ui][data-stato="fermo"] .cl-sv { color: var(--cl-err); }
.fr-loot[data-ui][data-stato="fermo"] .cl-dot { background: var(--cl-err); }
.fr-loot[data-ui][data-stato="fermo"] .cl-onda { display: none; }
.fr-loot[data-ui][data-stato="fermo"] .cl-b1[data-occupato] { background: var(--cl-g3); color: rgba(185, 196, 214, .6); }

/* ---------- terminale ---------- */
.fr-loot[data-ui] .cl-conn { background: var(--cl-term); }
.fr-loot[data-ui] .cl-tbar { display: flex; align-items: center; height: 2.376em; padding: 0 0.594em 0 0.832em; background: rgba(255, 255, 255, .045); }
.fr-loot[data-ui] .cl-d { flex: none; width: 0.535em; height: 0.535em; margin-right: 0.297em; border-radius: 50%; }
.fr-loot[data-ui] .cl-d1 { background: #e5654f; }
.fr-loot[data-ui] .cl-d2 { background: #e0a33c; }
.fr-loot[data-ui] .cl-d3 { background: #c4703a; margin-right: 0.653em; }
.fr-loot[data-ui] .cl-ttit { flex: 1; min-width: 0; font-size: .8em; color: var(--cl-muto); white-space: nowrap; overflow: hidden; }
.fr-loot[data-ui] .cl-cest { width: 2.02em; height: 2.02em; margin-right: 0.238em; }
.fr-loot[data-ui] .cl-cest i { font-size: 1.01em; color: var(--cl-muto); opacity: 1; }
.fr-loot[data-ui] .cl-cest:hover { background: rgba(255, 255, 255, .07); }
.fr-loot[data-ui] .cl-ind { flex: none; width: 0.535em; height: 0.535em; margin-right: 0.238em; border-radius: 50%; background: var(--cl-ink); }
.fr-loot[data-ui] .cl-ind.batte { animation: cl-batte .5s ease-out; }
.fr-loot[data-ui] .cl-tx { position: relative; height: 21.4em; overflow: hidden; }   /* il terminale prende l'altezza del telefono lungo */
.fr-loot[data-ui] .cl-log { position: absolute; left: 0; right: 0; bottom: 0; min-height: 100%; padding: 0.475em 0.713em 0.594em; will-change: transform; }
.fr-loot[data-ui] .cl-ln { font-size: .8em; line-height: 1.55; color: var(--cl-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.fr-loot[data-ui] .cl-ln--v { height: .65em; }
.fr-loot[data-ui] .cl-ln.nuova { animation: cl-riga .35s ease-out both; }

/* ---------- barra in basso (aspetto Android: bolla senza bordo) ---------- */
.fr-loot[data-ui] .cl-barra {
  position: absolute; left: 0.713em; right: 0.713em; bottom: 1.544em; height: 4.039em; display: flex; padding: 0 0.282em;
  background: var(--cl-g1); border-radius: 1.663em;
}
.fr-loot[data-ui] .cl-voce { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .26em; color: var(--cl-var); }
.fr-loot[data-ui] .cl-voce i { font-size: 1.307em; line-height: 1; }
.fr-loot[data-ui] .cl-voce b { font-size: .74em; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; white-space: nowrap; }
.fr-loot[data-ui] .cl-voce.cl-sel { color: var(--cl-pri); }
.fr-loot[data-ui] .cl-voce.cl-sel::before { content: ''; position: absolute; left: 0; right: 0; top: 0.365em; bottom: 0.282em; border-radius: 1.663em; background: rgba(255, 106, 51, .16); z-index: -1; }
.fr-loot[data-ui] .cl-barra { isolation: isolate; }
.fr-loot[data-ui] .cl-gesto { position: absolute; left: 50%; bottom: .45em; width: 6.4em; height: .3em; margin-left: -3.2em; border-radius: .15em; background: rgba(230, 237, 247, .55); }

/* ---------- notifica del telefono (testi veri: affare_titolo / affare_corpo) ---------- */
.fr-loot[data-ui] .cl-notifica {
  position: absolute; left: .7em; right: .7em; top: 1.4em; display: flex; gap: .75em; align-items: flex-start; padding: .85em .95em .9em .85em;
  border-radius: 1.5em; background: #272c38; color: #e8ebf2;
  transform: translateY(-9em); opacity: 0; pointer-events: none;
  box-shadow: 0 .5em 1.2em rgba(0, 0, 0, .5);
}
.fr-loot[data-ui] .cl-notifica.su { transform: translateY(0); opacity: 1; transition: transform .55s cubic-bezier(.2, .9, .25, 1.06), opacity .2s linear; }
.fr-loot[data-ui] .cl-notifica.giu { transform: translateY(-9em); opacity: 0; transition: transform .4s cubic-bezier(.5, 0, .8, .4), opacity .4s linear; }
.fr-loot[data-ui] .cl-nicona { flex: none; width: 2.1em; height: 2.1em; border-radius: .6em; background: #0a0807; display: flex; align-items: center; justify-content: center; }
.fr-loot[data-ui] .cl-nicona svg { width: 1.45em; height: 1.45em; fill: none; stroke: var(--cl-pri); stroke-width: 2.4; stroke-linecap: square; }
.fr-loot[data-ui] .cl-ncorpo { flex: 1; min-width: 0; }
.fr-loot[data-ui] .cl-nsu { display: block; font-size: .8em; color: #aab1c0; line-height: 1.2; }
.fr-loot[data-ui] .cl-ntit { display: block; font-size: .92em; font-weight: 700; line-height: 1.25; margin-top: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-loot[data-ui] .cl-ntxt { display: block; font-size: .85em; line-height: 1.3; margin-top: .1em; color: #d4d8e2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- avviso in app (AvvisoLoot) ---------- */
.fr-loot[data-ui] .cl-avviso {
  position: absolute; left: .7em; right: .7em; top: 1.5em; display: flex; align-items: center; gap: .65em; padding: .75em .95em;
  border-radius: 1em; font-size: .86em; font-weight: 700; line-height: 1.25; background: #5e3524; color: #ffdccf; border: 1px solid rgba(255, 220, 207, .12);
  opacity: 0; transform: translateY(-1.4em); pointer-events: none; box-shadow: 0 .4em 1em rgba(0, 0, 0, .45);
}
.fr-loot[data-ui] .cl-avviso.su { opacity: 1; transform: translateY(0); transition: transform .45s cubic-bezier(.2, .9, .25, 1.1), opacity .2s linear; }
.fr-loot[data-ui] .cl-avviso.giu { opacity: 0; transform: translateY(-1em); transition: transform .3s ease-out, opacity .3s linear; }
.fr-loot[data-ui] .cl-avviso--att { background: #4c3a12; color: #fff3d6; border-color: rgba(255, 233, 174, .14); }
.fr-loot[data-ui] .cl-avviso i { flex: none; width: 1.55em; height: 1.55em; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #ffdccf; color: #5e3524; font-size: .8em; }
.fr-loot[data-ui] .cl-avviso--att i { background: none; color: #ffe9ae; font-size: 1.05em; width: 1.4em; }
.fr-loot[data-ui] .cl-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- movimento ---------- */
@keyframes cl-onda { 0% { opacity: .55; transform: scale(.55); } 100% { opacity: 0; transform: scale(1); } }
@keyframes cl-gira { to { transform: rotate(360deg); } }
@keyframes cl-batte { 0% { opacity: .3; } 100% { opacity: 1; } }
@keyframes cl-riga { 0% { opacity: 0; } 100% { opacity: 1; } }
/* due colpi come la vibrazione vera (bzz, pausa, bzz): scosse rapide di lato con un filo di rotazione */
@keyframes cl-vibra {
  0% { transform: translate(0, 0) rotate(0); }
  4% { transform: translate(-.32em, 0) rotate(-1.6deg); } 8% { transform: translate(.32em, -.05em) rotate(1.6deg); }
  12% { transform: translate(-.3em, 0) rotate(-1.4deg); } 16% { transform: translate(.28em, .05em) rotate(1.3deg); }
  20% { transform: translate(-.22em, 0) rotate(-1deg); } 24% { transform: translate(.16em, 0) rotate(.7deg); }
  28%, 46% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(-.3em, 0) rotate(-1.5deg); } 54% { transform: translate(.3em, -.05em) rotate(1.5deg); }
  58% { transform: translate(-.26em, 0) rotate(-1.2deg); } 62% { transform: translate(.22em, .05em) rotate(1deg); }
  66% { transform: translate(-.14em, 0) rotate(-.6deg); } 70% { transform: translate(.08em, 0) rotate(.3deg); }
  76%, 100% { transform: translate(0, 0) rotate(0); }
}
@keyframes cl-lampo { 0% { opacity: 0; } 8% { opacity: 1; } 40% { opacity: .35; } 54% { opacity: .8; } 100% { opacity: 0; } }
@keyframes cl-eco { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.16, 1.08); } }
@keyframes cl-buzz-sx {
  0% { opacity: 0; transform: translateX(.6em); } 6%, 22% { opacity: .9; transform: translateX(0); } 30%, 46% { opacity: 0; transform: translateX(-.3em); }
  52%, 68% { opacity: .9; transform: translateX(0); } 80%, 100% { opacity: 0; transform: translateX(-.4em); }
}
@keyframes cl-buzz-dx {
  0% { opacity: 0; transform: scaleX(-1) translateX(.6em); } 6%, 22% { opacity: .9; transform: scaleX(-1) translateX(0); } 30%, 46% { opacity: 0; transform: scaleX(-1) translateX(-.3em); }
  52%, 68% { opacity: .9; transform: scaleX(-1) translateX(0); } 80%, 100% { opacity: 0; transform: scaleX(-1) translateX(-.4em); }
}
.fr-loot[data-ui] .cl-agg.gira i { animation: cl-gira .6s ease-in-out; }

.fr[data-attivo="false"].fr-loot[data-ui] *, .fr[data-attivo="false"].fr-loot[data-ui] *::before, .fr[data-attivo="false"].fr-loot[data-ui] *::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .fr-loot[data-ui] *, .fr-loot[data-ui] *::before, .fr-loot[data-ui] *::after { animation: none !important; transition: none !important; }
  .fr-loot[data-ui] .cl-sp { animation: none !important; }
}
html.leggero .fr-loot[data-ui] *, html.leggero .fr-loot[data-ui] *::before, html.leggero .fr-loot[data-ui] *::after { animation: none !important; transition: none !important; }
/* la fotocamera: lente scura con l'anello e un punto di luce */
.fr-loot[data-ui] .cl-foro { background: #05070b; box-shadow: inset 0 0 0 .1em #222b3c; }
.fr-loot[data-ui] .cl-foro::after { content: ''; position: absolute; left: 28%; top: 26%; width: 22%; height: 22%; border-radius: 50%; background: #3d4f78; }