/* LEO Core V4 — interfaccia isolata, fluida e funzionale */
:root {
  --leo-v4-ink: #25312f;
  --leo-v4-muted: #697571;
  --leo-v4-line: rgba(255, 255, 255, .76);
  --leo-v4-glass: rgba(255, 255, 255, .49);
  --leo-v4-glass-strong: rgba(255, 255, 255, .68);
  --leo-v4-shadow: 0 28px 80px rgba(75, 70, 63, .14);
  --leo-v4-active-tone: #d4ae83;
}

html.leoCoreV4Root {
  min-height: 100%;
  color-scheme: light;
  background: #f5f0e8;
}

body.leoCoreV4 {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--leo-v4-ink);
  background:
    radial-gradient(circle at 7% 8%, rgba(255, 190, 153, .38), transparent 28%),
    radial-gradient(circle at 87% 13%, rgba(144, 188, 174, .32), transparent 30%),
    radial-gradient(circle at 76% 86%, rgba(158, 179, 208, .25), transparent 30%),
    radial-gradient(circle at 18% 82%, rgba(240, 194, 170, .28), transparent 29%),
    linear-gradient(125deg, #fbf3e9 0%, #f5f3ec 40%, #e8efea 72%, #f1ebe5 100%) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.leoCoreV4::before,
body.leoCoreV4::after {
  position: fixed;
  z-index: -1;
  content: "";
  pointer-events: none;
  filter: blur(34px);
  opacity: .78;
}

body.leoCoreV4::before {
  top: -18vw;
  left: -12vw;
  width: 72vw;
  height: 52vw;
  border: clamp(54px, 8vw, 126px) solid rgba(255, 213, 190, .34);
  border-radius: 42% 58% 67% 33% / 56% 38% 62% 44%;
  transform: rotate(13deg);
  animation: leoV4BodyDriftOne 17s ease-in-out infinite alternate;
}

body.leoCoreV4::after {
  right: -17vw;
  bottom: -21vw;
  width: 70vw;
  height: 55vw;
  border: clamp(52px, 7.5vw, 118px) solid rgba(139, 199, 191, .27);
  border-radius: 58% 42% 36% 64% / 44% 61% 39% 56%;
  transform: rotate(-17deg);
  animation: leoV4BodyDriftTwo 19s ease-in-out infinite alternate;
}

body.leoCoreV4 *,
body.leoCoreV4 *::before,
body.leoCoreV4 *::after {
  box-sizing: border-box;
}

body.leoCoreV4 button,
body.leoCoreV4 input,
body.leoCoreV4 textarea,
body.leoCoreV4 select {
  font: inherit;
}

body.leoCoreV4 .app {
  position: relative;
  width: min(1580px, calc(100% - 32px)) !important;
  max-width: none !important;
  min-height: 100vh;
  margin: 0 auto !important;
  padding: 18px 0 22px !important;
}

/* Header: marchio, navigazione e profilo */
body.leoCoreV4 .topbar {
  position: relative !important;
  z-index: 500 !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  display: flex !important;
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 0 28px !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.leoCoreV4 .brand {
  position: relative;
  display: flex !important;
  min-width: 250px;
  gap: 12px !important;
  align-items: center !important;
  color: #536965 !important;
}

body.leoCoreV4 .brand .leoV4OldHomeButton {
  display: none !important;
}

body.leoCoreV4 .brand .sharkLogo,
body.leoCoreV4 .brand .leoV4HomeControl {
  position: relative !important;
  display: grid !important;
  width: 88px !important;
  height: 62px !important;
  padding: 3px 8px 14px !important;
  place-items: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 24px !important;
  color: #566e6a !important;
  background: rgba(255, 255, 255, .26) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .46) !important;
  cursor: pointer !important;
  transition: transform .3s ease, color .3s ease, background .3s ease, box-shadow .3s ease !important;
}

body.leoCoreV4 .brand .sharkLogo:hover,
body.leoCoreV4 .brand .leoV4HomeControl:hover,
body.leoCoreV4 .brand .sharkLogo:focus-visible {
  color: #385b55 !important;
  background: rgba(255, 255, 255, .58) !important;
  box-shadow: 0 15px 36px rgba(66, 88, 82, .14), inset 0 0 0 1px rgba(255, 255, 255, .9) !important;
  transform: translateY(-2px) scale(1.02) !important;
}

body.leoCoreV4 .leoV4Shark {
  display: block;
  width: 68px;
  height: 34px;
  overflow: visible;
  filter: drop-shadow(0 6px 8px rgba(57, 86, 79, .16));
}

body.leoCoreV4 .leoV4HomeCue {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  color: currentColor;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .17em;
  text-align: center;
}

body.leoCoreV4 .brand .leoName {
  color: #3b4542 !important;
  font-size: 30px !important;
  font-weight: 380 !important;
  line-height: 1 !important;
  letter-spacing: .34em !important;
  cursor: pointer;
  outline: none;
}

body.leoCoreV4 .brand .leoName:focus-visible {
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(91, 160, 147, .18);
}

body.leoCoreV4 .profilePill,
body.leoCoreV4 #profileName {
  display: grid !important;
  min-width: 150px !important;
  min-height: 52px !important;
  padding: 0 24px !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, .86) !important;
  border-radius: 999px !important;
  color: #33413d !important;
  background: rgba(255, 255, 255, .54) !important;
  box-shadow: 0 13px 34px rgba(72, 78, 72, .10) !important;
  backdrop-filter: blur(24px) saturate(1.18) !important;
  font-weight: 700 !important;
}

body.leoCoreV4 .tabs {
  position: absolute !important;
  z-index: 510 !important;
  top: 22px !important;
  left: 50% !important;
  display: grid !important;
  width: min(660px, 48vw) !important;
  height: 60px !important;
  margin: 0 !important;
  padding: 7px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, .84) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .45) !important;
  box-shadow: 0 18px 46px rgba(72, 78, 72, .10), inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(28px) saturate(1.16) !important;
  transform: translateX(-50%) !important;
}

body.leoCoreV4 .tabs .tab {
  display: grid !important;
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 12px !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #586764 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: color .25s ease, background .25s ease, transform .25s ease !important;
}

body.leoCoreV4 .tabs .tab:hover {
  color: #30423e !important;
  background: rgba(255, 255, 255, .46) !important;
  transform: translateY(-1px);
}

body.leoCoreV4 .tabs .tab.active {
  color: #3f4946 !important;
  background: linear-gradient(115deg, rgba(169, 202, 188, .58), rgba(248, 192, 165, .59)) !important;
  box-shadow: 0 12px 28px rgba(116, 99, 84, .10), inset 0 1px 0 rgba(255, 255, 255, .56) !important;
}

body.leoCoreV4 .main {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.leoCoreV4 .main > .page {
  display: none !important;
}

body.leoCoreV4 .main > .page.active {
  display: block !important;
}

/* HOME: universo perlaceo */
body.leoCoreV4 #leoV4HomePage {
  width: 100%;
  margin: 0;
  padding: 0;
}

body.leoCoreV4 .leoV4HomeGrid {
  display: grid;
  width: 100%;
  height: calc(100dvh - 112px);
  min-height: 720px;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: stretch;
}

body.leoCoreV4 .leoV4Universe {
  --leo-v4-mx: 0px;
  --leo-v4-my: 0px;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .84);
  border-radius: 48px 64px 50px 58px / 54px 46px 62px 48px;
  background:
    radial-gradient(circle at 51% 52%, color-mix(in srgb, var(--leo-v4-active-tone) 25%, transparent), transparent 23%),
    radial-gradient(circle at 20% 20%, rgba(255, 202, 174, .44), transparent 30%),
    radial-gradient(circle at 80% 21%, rgba(215, 221, 239, .47), transparent 31%),
    radial-gradient(circle at 76% 78%, rgba(117, 193, 185, .34), transparent 30%),
    radial-gradient(circle at 19% 78%, rgba(239, 181, 193, .32), transparent 27%),
    linear-gradient(136deg, rgba(255, 250, 243, .88), rgba(236, 239, 234, .77) 44%, rgba(225, 236, 233, .76) 69%, rgba(247, 228, 219, .79));
  box-shadow: 0 30px 100px rgba(75, 70, 63, .14), inset 0 1px 0 rgba(255, 255, 255, .88);
  backdrop-filter: blur(30px) saturate(1.2);
}

body.leoCoreV4 .leoV4Universe::before {
  position: absolute;
  z-index: -3;
  inset: -8%;
  content: "";
  background:
    conic-gradient(from 36deg at 52% 48%, rgba(255, 255, 255, .05), rgba(255, 211, 184, .34), rgba(255, 255, 255, .54), rgba(136, 202, 195, .27), rgba(186, 169, 217, .24), rgba(255, 255, 255, .10)),
    repeating-radial-gradient(ellipse at 52% 50%, rgba(255, 255, 255, .18) 0 1px, transparent 1px 36px);
  filter: blur(4px) saturate(1.2);
  opacity: .88;
  transform: translate3d(calc(var(--leo-v4-mx) * -.18), calc(var(--leo-v4-my) * -.18), 0) rotate(-3deg) scale(1.12);
  transition: transform .65s cubic-bezier(.2, .8, .2, 1);
}

body.leoCoreV4 .leoV4Universe::after {
  position: absolute;
  z-index: 40;
  inset: 0;
  content: "";
  border-radius: inherit;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, .40), transparent 19% 70%, rgba(255, 255, 255, .24)),
    radial-gradient(circle at 50% 50%, transparent 0 22%, rgba(255, 255, 255, .08) 32%, transparent 61%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

body.leoCoreV4 .leoV4Fluid {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  filter: saturate(1.15);
}

body.leoCoreV4 .leoV4Ribbon {
  position: absolute;
  display: block;
  border-style: solid;
  opacity: .76;
  filter: blur(15px);
  mix-blend-mode: screen;
}

body.leoCoreV4 .leoV4RibbonOne {
  top: 5%;
  left: 7%;
  width: 89%;
  height: 74%;
  border-width: 68px;
  border-color: rgba(255, 223, 202, .31) rgba(255, 255, 255, .43) rgba(134, 205, 197, .25) rgba(207, 185, 225, .25);
  border-radius: 61% 39% 63% 37% / 42% 61% 39% 58%;
  transform: translate3d(calc(var(--leo-v4-mx) * .25), calc(var(--leo-v4-my) * .25), 0) rotate(-8deg);
  animation: leoV4RibbonOne 13s ease-in-out infinite alternate;
}

body.leoCoreV4 .leoV4RibbonTwo {
  right: -16%;
  bottom: -24%;
  width: 79%;
  height: 72%;
  border-width: 82px;
  border-color: rgba(138, 203, 198, .23) rgba(255, 255, 255, .38) rgba(248, 193, 170, .29) rgba(173, 164, 220, .23);
  border-radius: 38% 62% 45% 55% / 58% 35% 65% 42%;
  transform: translate3d(calc(var(--leo-v4-mx) * -.33), calc(var(--leo-v4-my) * -.33), 0) rotate(17deg);
  animation: leoV4RibbonTwo 15s ease-in-out infinite alternate;
}

body.leoCoreV4 .leoV4Pearl {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, .84);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff, rgba(255, 255, 255, .42) 22%, rgba(176, 207, 200, .18) 50%, rgba(255, 187, 164, .25));
  box-shadow: inset -16px -18px 33px rgba(95, 124, 117, .14), 0 0 54px rgba(255, 240, 224, .66);
  opacity: .54;
}

body.leoCoreV4 .leoV4PearlOne {
  top: 4%;
  right: 17%;
  width: 116px;
  height: 116px;
  animation: leoV4PearlFloat 8s ease-in-out infinite;
}

body.leoCoreV4 .leoV4PearlTwo {
  bottom: 18%;
  left: 7%;
  width: 74px;
  height: 74px;
  animation: leoV4PearlFloat 10s ease-in-out -3s infinite reverse;
}

body.leoCoreV4 .leoV4Presence {
  position: absolute;
  z-index: 52;
  top: 34px;
  left: 42px;
  width: min(310px, 31%);
  color: var(--leo-v4-ink);
  pointer-events: none;
}

body.leoCoreV4 .leoV4Presence h1 {
  margin: 0;
  color: #2e3a37;
  font-size: clamp(24px, 1.7vw, 30px);
  font-weight: 520;
  line-height: 1.1;
  letter-spacing: -.035em;
}

body.leoCoreV4 .leoV4Presence > p {
  margin: 6px 0 18px;
  color: #66736f;
  font-size: 14px;
}

body.leoCoreV4 .leoV4Health {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #4d5c58;
  font-size: 13px;
  font-weight: 650;
}

body.leoCoreV4 .leoV4Health i,
body.leoCoreV4 .leoV4ModeDock i,
body.leoCoreV4 .leoV4BrainBadge i {
  display: block;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: #35c89d;
  box-shadow: 0 0 0 4px rgba(53, 200, 157, .11), 0 0 16px rgba(53, 200, 157, .52);
}

body.leoCoreV4 .leoV4Joke {
  display: flex;
  margin-top: 16px;
  flex-direction: column;
  gap: 5px;
}

body.leoCoreV4 .leoV4JokeLabel {
  color: #a27761;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.leoCoreV4 .leoV4Joke strong {
  color: #34413e;
  font-size: clamp(14px, 1.08vw, 17px);
  font-weight: 580;
  line-height: 1.38;
}

body.leoCoreV4 .leoV4Stage {
  position: absolute;
  z-index: 20;
  inset: 16px 12px 112px;
  transform: translate3d(calc(var(--leo-v4-mx) * .12), calc(var(--leo-v4-my) * .12), 0);
  transition: transform .65s cubic-bezier(.2, .8, .2, 1);
}

body.leoCoreV4 .leoV4NeuralLines {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

body.leoCoreV4 .leoV4NeuralLines path {
  fill: none;
  stroke: rgba(255, 255, 255, .78);
  stroke-width: 2.2;
  stroke-linecap: round;
  filter: url(#leoV4LineGlow);
  opacity: .68;
  stroke-dasharray: .12 .07;
  animation: leoV4NeuralFlow 6.4s linear infinite;
  transition: opacity .45s ease;
}

body.leoCoreV4 .leoV4NeuralLines path:nth-of-type(3n + 1) { stroke: rgba(248, 196, 168, .74); animation-duration: 7.2s; }
body.leoCoreV4 .leoV4NeuralLines path:nth-of-type(3n + 2) { stroke: rgba(121, 196, 188, .68); animation-duration: 6.7s; }
body.leoCoreV4 .leoV4NeuralLines path:nth-of-type(3n) { stroke: rgba(188, 169, 218, .65); animation-duration: 7.8s; }
body.leoCoreV4 .leoV4NeuralLines path.is-drained { opacity: .08; }

body.leoCoreV4 .leoV4Brain {
  position: absolute;
  z-index: 10;
  top: var(--y);
  left: var(--x);
  display: flex;
  width: 92px;
  height: 114px;
  margin: 0;
  padding: 0;
  flex-direction: column;
  align-items: center;
  border: 0;
  outline: none;
  color: #34413e;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition:
    top .9s cubic-bezier(.18, .84, .2, 1),
    left .9s cubic-bezier(.18, .84, .2, 1),
    transform .9s cubic-bezier(.18, .84, .2, 1),
    filter .35s ease,
    opacity .35s ease;
  animation: leoV4BrainFloat 5.6s ease-in-out var(--delay) infinite;
}

body.leoCoreV4 .leoV4Brain:hover,
body.leoCoreV4 .leoV4Brain:focus-visible {
  z-index: 16;
  transform: translate(-50%, -55%) scale(1.08);
}

body.leoCoreV4 .leoV4Brain:focus-visible .leoV4BrainOrb {
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .48), 0 0 0 8px color-mix(in srgb, var(--tone) 40%, transparent), 0 20px 52px color-mix(in srgb, var(--tone) 45%, transparent);
}

body.leoCoreV4 .leoV4BrainOrb {
  position: relative;
  display: grid;
  width: 78px;
  height: 78px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .34) 19%, transparent 42%),
    radial-gradient(circle at 51% 58%, color-mix(in srgb, var(--tone) 78%, white), color-mix(in srgb, var(--tone) 42%, transparent) 54%, rgba(255, 255, 255, .22));
  box-shadow:
    inset -13px -15px 24px color-mix(in srgb, var(--tone) 22%, rgba(74, 89, 85, .12)),
    inset 10px 12px 19px rgba(255, 255, 255, .68),
    0 0 0 5px rgba(255, 255, 255, .20),
    0 16px 39px color-mix(in srgb, var(--tone) 36%, rgba(62, 82, 76, .13)),
    0 0 30px color-mix(in srgb, var(--tone) 30%, transparent);
  backdrop-filter: blur(8px) saturate(1.3);
  transition: box-shadow .32s ease, filter .32s ease;
}

body.leoCoreV4 .leoV4BrainOrb::before,
body.leoCoreV4 .leoV4Core::before {
  position: absolute;
  content: "";
  inset: 8%;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 50%;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, .33);
}

body.leoCoreV4 .leoV4BrainOrb svg {
  position: relative;
  z-index: 2;
  width: 39px;
  height: 39px;
  overflow: visible;
  fill: none;
  stroke: rgba(255, 255, 255, .92);
  stroke-width: 1.45;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, .78));
}

body.leoCoreV4 .leoV4BrainName {
  display: flex;
  margin-top: 8px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-shadow: 0 1px 12px rgba(255, 255, 255, .94);
}

body.leoCoreV4 .leoV4BrainName strong {
  color: #35423f;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.05;
}

body.leoCoreV4 .leoV4BrainName small {
  margin-top: 3px;
  color: #72807c;
  font-size: 9px;
  font-weight: 620;
  line-height: 1;
}

body.leoCoreV4 .leoV4Brain.is-selected:not(.is-inside) .leoV4BrainOrb {
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .32), 0 0 0 10px color-mix(in srgb, var(--tone) 32%, transparent), 0 20px 52px color-mix(in srgb, var(--tone) 48%, transparent);
}

body.leoCoreV4 .leoV4Brain.is-checking .leoV4BrainOrb {
  filter: saturate(.45);
  animation: leoV4Checking 1.3s ease-in-out infinite alternate;
}

body.leoCoreV4 .leoV4Brain.is-unavailable {
  opacity: .28;
  filter: grayscale(.8);
  cursor: not-allowed;
}

body.leoCoreV4 .leoV4Brain.is-inside {
  z-index: 32;
  top: 50% !important;
  left: 50% !important;
  pointer-events: none;
  animation: none;
  transform: translate(-50%, -50%) scale(1.12);
}

body.leoCoreV4 .leoV4Brain.is-inside .leoV4BrainOrb {
  box-shadow:
    inset -13px -15px 24px color-mix(in srgb, var(--tone) 20%, rgba(74, 89, 85, .09)),
    inset 10px 12px 19px rgba(255, 255, 255, .72),
    0 0 0 8px rgba(255, 255, 255, .26),
    0 0 42px 18px color-mix(in srgb, var(--tone) 47%, transparent),
    0 25px 60px rgba(73, 80, 77, .18);
}

body.leoCoreV4 .leoV4Brain.is-inside .leoV4BrainName {
  margin-top: 5px;
}

body.leoCoreV4 .leoV4Core {
  position: absolute;
  z-index: 20;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(176px, 16vw, 226px);
  height: clamp(176px, 16vw, 226px);
  padding: 0;
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .91);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 33% 24%, rgba(255, 255, 255, .88), transparent 17%),
    radial-gradient(circle at 50% 54%, rgba(110, 137, 129, .76), rgba(88, 112, 106, .83) 54%, rgba(205, 169, 133, .52));
  box-shadow:
    inset -28px -32px 54px rgba(58, 78, 73, .20),
    inset 23px 24px 46px rgba(255, 255, 255, .42),
    0 0 0 12px rgba(255, 255, 255, .26),
    0 0 0 25px rgba(238, 208, 179, .21),
    0 0 78px 26px rgba(253, 213, 180, .38),
    0 28px 80px rgba(77, 92, 86, .20);
  backdrop-filter: blur(14px) saturate(1.2);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform .34s ease, box-shadow .4s ease, background .4s ease;
  animation: leoV4CoreBreathe 4.8s ease-in-out infinite;
}

body.leoCoreV4 .leoV4Core::after {
  position: absolute;
  z-index: -1;
  inset: -28%;
  content: "";
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 46% 54% 57% 43% / 51% 41% 59% 49%;
  background: conic-gradient(from 30deg, transparent, rgba(255, 215, 189, .28), transparent 38%, rgba(128, 200, 192, .24), transparent 72%, rgba(190, 172, 221, .23), transparent);
  filter: blur(3px);
  animation: leoV4CoreOrbit 14s linear infinite;
}

body.leoCoreV4 .leoV4Core:hover,
body.leoCoreV4 .leoV4Core:focus-visible {
  outline: none;
  transform: translate(-50%, -50%) scale(1.035);
  box-shadow:
    inset -28px -32px 54px rgba(58, 78, 73, .18),
    inset 23px 24px 46px rgba(255, 255, 255, .48),
    0 0 0 13px rgba(255, 255, 255, .32),
    0 0 0 28px rgba(238, 208, 179, .22),
    0 0 100px 34px color-mix(in srgb, var(--leo-v4-active-tone) 42%, transparent),
    0 32px 88px rgba(77, 92, 86, .23);
}

body.leoCoreV4 .leoV4CoreHalo {
  position: absolute;
  inset: 4%;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 50%;
  box-shadow: inset 0 0 38px rgba(255, 255, 255, .25);
}

body.leoCoreV4 .leoV4CoreCopy {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-shadow: 0 3px 18px rgba(52, 70, 64, .24);
  transition: opacity .34s ease, transform .34s ease;
}

body.leoCoreV4 .leoV4CoreCopy small {
  font-size: clamp(19px, 1.8vw, 27px);
  font-style: normal;
  font-weight: 470;
  line-height: 1;
  letter-spacing: .13em;
}

body.leoCoreV4 .leoV4CoreCopy strong {
  margin-top: 8px;
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 780;
  line-height: 1;
  letter-spacing: .12em;
}

body.leoCoreV4 .leoV4CoreCopy em {
  margin-top: 12px;
  font-size: 9px;
  font-style: normal;
  font-weight: 720;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .83;
}

body.leoCoreV4 .leoV4Stage.has-inside-brain .leoV4CoreCopy {
  opacity: .08;
  transform: scale(.88);
}

body.leoCoreV4 .leoV4ModeDock {
  position: absolute;
  z-index: 56;
  right: 24px;
  bottom: 104px;
  display: flex;
  width: min(390px, 38%);
  min-height: 68px;
  padding: 13px 16px;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 20px;
  background: rgba(255, 255, 255, .54);
  box-shadow: 0 18px 45px rgba(75, 70, 63, .11), inset 0 1px 0 rgba(255, 255, 255, .72);
  backdrop-filter: blur(22px) saturate(1.22);
}

body.leoCoreV4 .leoV4ModeDock > span {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #374540;
  font-size: 12px;
}

body.leoCoreV4 .leoV4ModeDock i {
  width: 8px;
  height: 8px;
  background: var(--leo-v4-active-tone);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--leo-v4-active-tone) 16%, transparent), 0 0 15px color-mix(in srgb, var(--leo-v4-active-tone) 58%, transparent);
}

body.leoCoreV4 .leoV4ModeDock small {
  margin: 5px 0 0 16px;
  color: #73807c;
  font-size: 10px;
  line-height: 1.25;
}

body.leoCoreV4 .leoV4ChooseHint {
  position: absolute;
  z-index: 54;
  right: 0;
  bottom: 82px;
  left: 0;
  margin: 0;
  color: #5c6965;
  font-size: 12px;
  font-weight: 520;
  text-align: center;
  pointer-events: none;
}

body.leoCoreV4 .leoV4HomeComposer {
  position: absolute;
  z-index: 60;
  right: max(30px, 13%);
  bottom: 20px;
  left: max(30px, 13%);
  display: grid;
  height: 54px;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

body.leoCoreV4 .leoV4Plus,
body.leoCoreV4 .leoV4Send,
body.leoCoreV4 .leoV4ChatBack {
  border: 1px solid rgba(255, 255, 255, .86);
  color: #3a4945;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 14px 34px rgba(75, 70, 63, .11), inset 0 1px 0 rgba(255, 255, 255, .74);
  backdrop-filter: blur(24px) saturate(1.18);
  cursor: pointer;
  transition: transform .26s ease, box-shadow .26s ease, background .26s ease;
}

body.leoCoreV4 .leoV4Plus:hover,
body.leoCoreV4 .leoV4Send:hover,
body.leoCoreV4 .leoV4ChatBack:hover {
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 40px rgba(75, 70, 63, .15), inset 0 1px 0 rgba(255, 255, 255, .84);
  transform: translateY(-2px);
}

body.leoCoreV4 .leoV4Plus {
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 50%;
  color: #4d7c73;
  font-size: 25px;
  font-weight: 350;
}

body.leoCoreV4 #leoV4HomePrompt {
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 999px;
  outline: none;
  color: #34423e;
  background: rgba(255, 255, 255, .65);
  box-shadow: 0 14px 36px rgba(75, 70, 63, .11), inset 0 1px 0 rgba(255, 255, 255, .75);
  backdrop-filter: blur(24px) saturate(1.15);
}

body.leoCoreV4 #leoV4HomePrompt::placeholder {
  color: #74807d;
}

body.leoCoreV4 #leoV4HomePrompt:focus {
  border-color: rgba(86, 151, 138, .48);
  box-shadow: 0 0 0 5px rgba(86, 151, 138, .11), 0 14px 36px rgba(75, 70, 63, .12);
}

body.leoCoreV4 .leoV4Send {
  min-width: 92px;
  height: 48px;
  margin-right: 3px;
  padding: 0 21px;
  border-radius: 999px;
  color: #56483f;
  background: linear-gradient(115deg, rgba(213, 187, 221, .68), rgba(242, 183, 162, .68));
  font-weight: 730;
}

/* Rail destro: sempre verticale, mai compresso */
body.leoCoreV4 .leoV4Rail {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

body.leoCoreV4 .leoV4Rail > .sidePanel,
body.leoCoreV4 .leoV4SidePanel {
  position: static !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 5px 8px 0 !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 14px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  transform: none !important;
  scrollbar-color: rgba(98, 166, 156, .48) transparent;
  scrollbar-width: thin;
}

body.leoCoreV4 .leoV4SidePanel::-webkit-scrollbar { width: 5px; }
body.leoCoreV4 .leoV4SidePanel::-webkit-scrollbar-track { background: transparent; }
body.leoCoreV4 .leoV4SidePanel::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(98, 166, 156, .48); }

body.leoCoreV4 .leoV4SidePanel > .card,
body.leoCoreV4 .leoV4SidePanel > .privateBox,
body.leoCoreV4 .leoV4SidePanel #privateBox {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .84) !important;
  border-radius: 34px 44px 35px 40px / 37px 34px 46px 36px !important;
  color: var(--leo-v4-ink) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, .52), transparent 28%),
    linear-gradient(138deg, rgba(255, 255, 255, .55), rgba(248, 244, 238, .48)) !important;
  box-shadow: 0 22px 60px rgba(75, 70, 63, .10), inset 0 1px 0 rgba(255, 255, 255, .82) !important;
  backdrop-filter: blur(24px) saturate(1.18) !important;
  transform: none !important;
}

body.leoCoreV4 .leoV4SidePanel > .card::before,
body.leoCoreV4 .leoV4SidePanel > .privateBox::before {
  position: absolute;
  z-index: -1;
  top: -45px;
  right: -35px;
  width: 120px;
  height: 120px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(211, 185, 223, .25), transparent 65%);
  pointer-events: none;
}

body.leoCoreV4 .leoV4SidePanel h3,
body.leoCoreV4 .leoV4SidePanel strong {
  color: #2f3b38 !important;
}

body.leoCoreV4 .leoV4SidePanel h3 {
  margin: 0 0 5px !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  letter-spacing: -.025em !important;
}

body.leoCoreV4 .leoV4SidePanel .card > p,
body.leoCoreV4 .leoV4SidePanel #privateSub,
body.leoCoreV4 .leoV4SidePanel .privateBox span {
  display: block !important;
  margin: 0 0 14px !important;
  color: #6f7b77 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

body.leoCoreV4 .leoV4SidePanel .quickGrid {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.leoCoreV4 .leoV4SidePanel .quickBtn {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 138px !important;
  margin: 0 !important;
  padding: 14px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .83) !important;
  border-radius: 28px 34px 29px 35px / 34px 28px 36px 30px !important;
  color: #33413d !important;
  background: linear-gradient(145deg, rgba(216, 233, 226, .61), rgba(255, 255, 255, .39)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70), 0 13px 28px rgba(75, 70, 63, .07) !important;
  text-align: left !important;
  transform: none !important;
  cursor: pointer !important;
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease !important;
}

body.leoCoreV4 .leoV4SidePanel .quickBtn:nth-child(2) { background: linear-gradient(145deg, rgba(249, 209, 193, .59), rgba(255, 255, 255, .39)) !important; }
body.leoCoreV4 .leoV4SidePanel .quickBtn:nth-child(3) { background: linear-gradient(145deg, rgba(221, 210, 235, .61), rgba(255, 255, 255, .39)) !important; }
body.leoCoreV4 .leoV4SidePanel .quickBtn:nth-child(4) { background: linear-gradient(145deg, rgba(241, 217, 174, .61), rgba(255, 255, 255, .39)) !important; }

body.leoCoreV4 .leoV4SidePanel .quickBtn:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 18px 38px rgba(75, 70, 63, .12) !important;
  transform: translateY(-3px) !important;
}

body.leoCoreV4 .leoV4QuickIcon {
  position: absolute;
  top: 13px;
  left: 13px;
  display: block;
  width: 36px;
  height: 36px;
  color: #566b66;
}

body.leoCoreV4 .leoV4QuickIcon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.leoCoreV4 .leoV4SidePanel .quickBtn strong {
  display: block !important;
  width: 100%;
  font-size: 14px !important;
  font-weight: 720 !important;
  line-height: 1.15 !important;
}

body.leoCoreV4 .leoV4SidePanel .quickBtn small {
  display: block !important;
  margin-top: 5px !important;
  color: #8297bd !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

body.leoCoreV4 .leoV4SidePanel .ghostBtn,
body.leoCoreV4 .leoV4SidePanel #privateBtn {
  min-height: 38px !important;
  margin: 0 6px 8px 0 !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 255, 255, .84) !important;
  border-radius: 999px !important;
  color: #3b4945 !important;
  background: rgba(255, 255, 255, .48) !important;
  box-shadow: 0 9px 22px rgba(75, 70, 63, .07) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.leoCoreV4 .leoV4SidePanel #privateBtn {
  background: linear-gradient(115deg, rgba(191, 218, 207, .68), rgba(235, 194, 212, .66)) !important;
}

body.leoCoreV4 .leoV4SidePanel .chatRow,
body.leoCoreV4 .leoV4SidePanel [class*="historyRow" i] {
  border: 1px solid rgba(102, 188, 211, .31) !important;
  border-radius: 20px !important;
  background: rgba(222, 240, 245, .49) !important;
}

/* CHAT: spazio separato con messaggi a due lati */
body.leoCoreV4.leoV4ChatMode {
  overflow: hidden;
}

body.leoCoreV4.leoV4ChatMode .main {
  height: calc(100dvh - 96px) !important;
  overflow: hidden !important;
}

body.leoCoreV4.leoV4ChatMode #chatPage,
body.leoCoreV4.leoV4ChatMode #chatPage .chatLayout {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.leoCoreV4.leoV4ChatMode #chatPage .chatLayout {
  display: block !important;
  grid-template-columns: none !important;
}

body.leoCoreV4.leoV4ChatMode #chatPage .chatPanel {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-direction: column !important;
  overflow: hidden !important;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .87) !important;
  border-radius: 44px 55px 46px 58px / 50px 43px 59px 46px !important;
  background:
    radial-gradient(circle at 84% 12%, rgba(154, 205, 197, .24), transparent 26%),
    radial-gradient(circle at 9% 88%, rgba(248, 189, 164, .23), transparent 28%),
    linear-gradient(134deg, rgba(255, 249, 242, .88), rgba(245, 246, 240, .79) 46%, rgba(231, 240, 236, .80)) !important;
  box-shadow: 0 28px 90px rgba(75, 70, 63, .13), inset 0 1px 0 rgba(255, 255, 255, .90) !important;
  backdrop-filter: blur(26px) saturate(1.14) !important;
}

body.leoCoreV4.leoV4ChatMode #chatPage .chatPanel::before {
  position: absolute;
  z-index: -1;
  top: -38%;
  right: -14%;
  width: 70%;
  height: 90%;
  content: "";
  border: 74px solid rgba(255, 255, 255, .20);
  border-radius: 43% 57% 62% 38% / 57% 42% 58% 43%;
  filter: blur(20px);
  transform: rotate(19deg);
  animation: leoV4ChatFluid 15s ease-in-out infinite alternate;
}

body.leoCoreV4.leoV4ChatMode #chatPage .leoV4ChatHead {
  position: static !important;
  z-index: 5 !important;
  display: grid !important;
  width: 100% !important;
  min-height: 94px !important;
  padding: 18px 24px !important;
  flex: 0 0 auto !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(104, 126, 120, .10) !important;
  background: rgba(255, 255, 255, .25) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.leoCoreV4 .leoV4ChatBack {
  display: flex;
  height: 48px;
  padding: 0 17px;
  gap: 8px;
  align-items: center;
  border-radius: 999px;
  font-size: 12px;
}

body.leoCoreV4 .leoV4ChatBack > span {
  font-size: 17px;
  line-height: 1;
}

body.leoCoreV4.leoV4ChatMode #chatPage .titleBlock,
body.leoCoreV4.leoV4ChatMode #chatPage .panelHead > div:not(.leoV4BrainBadge) {
  position: static !important;
  min-width: 0 !important;
  transform: none !important;
}

body.leoCoreV4.leoV4ChatMode #chatPage .panelHead h1,
body.leoCoreV4.leoV4ChatMode #chatPage .panelHead h2 {
  margin: 0 !important;
  color: #2e3b37 !important;
  font-size: 24px !important;
  font-weight: 560 !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em !important;
}

body.leoCoreV4.leoV4ChatMode #chatPage .panelHead p {
  margin: 5px 0 0 !important;
  color: #6c7874 !important;
  font-size: 12px !important;
}

body.leoCoreV4 .leoV4BrainBadge {
  --brain-tone: #d4ae83;
  position: static !important;
  display: flex !important;
  min-width: 230px !important;
  min-height: 44px !important;
  padding: 0 17px !important;
  gap: 9px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, .84) !important;
  border-radius: 999px !important;
  color: #384540 !important;
  background: rgba(255, 255, 255, .58) !important;
  box-shadow: 0 13px 30px rgba(75, 70, 63, .09), inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(20px) saturate(1.18) !important;
  transform: none !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  white-space: nowrap;
}

body.leoCoreV4 .leoV4BrainBadge i {
  width: 10px;
  height: 10px;
  background: var(--brain-tone);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brain-tone) 16%, transparent), 0 0 17px color-mix(in srgb, var(--brain-tone) 60%, transparent);
}

body.leoCoreV4 .leoV4BrainBadge.is-pending i {
  animation: leoV4Pending 1s ease-in-out infinite alternate;
}

body.leoCoreV4.leoV4ChatMode #chatPage #chatBox {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 28px clamp(24px, 4vw, 64px) 22px !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-behavior: smooth;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  scrollbar-color: rgba(98, 166, 156, .48) transparent;
  scrollbar-width: thin;
}

body.leoCoreV4.leoV4ChatMode #chatPage #chatBox::-webkit-scrollbar { width: 5px; }
body.leoCoreV4.leoV4ChatMode #chatPage #chatBox::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(98, 166, 156, .48); }

body.leoCoreV4.leoV4ChatMode #chatPage #chatBox > .msg,
body.leoCoreV4.leoV4ChatMode #chatPage #chatBox .msg {
  position: relative !important;
  display: block !important;
  width: fit-content !important;
  min-width: 110px !important;
  max-width: min(72%, 780px) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 15px 18px !important;
  border: 1px solid rgba(255, 255, 255, .76) !important;
  border-radius: 24px 24px 24px 9px !important;
  color: #34413e !important;
  background: rgba(255, 255, 255, .68) !important;
  box-shadow: 0 13px 32px rgba(75, 70, 63, .10), inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(20px) saturate(1.12) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  text-align: left !important;
  transform: none !important;
  animation: leoV4MessageIn .32s ease both !important;
}

body.leoCoreV4.leoV4ChatMode #chatPage #chatBox > .msg:not(.user),
body.leoCoreV4.leoV4ChatMode #chatPage #chatBox .msg.assistant,
body.leoCoreV4.leoV4ChatMode #chatPage #chatBox .msg.leo {
  margin-right: auto !important;
  margin-left: 0 !important;
  align-self: flex-start !important;
  border-radius: 24px 24px 24px 9px !important;
  color: #33413d !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(238, 244, 240, .69)) !important;
}

body.leoCoreV4.leoV4ChatMode #chatPage #chatBox > .msg.user,
body.leoCoreV4.leoV4ChatMode #chatPage #chatBox .msg.user {
  margin-right: 0 !important;
  margin-left: auto !important;
  align-self: flex-end !important;
  border-radius: 24px 24px 9px 24px !important;
  color: #263733 !important;
  background: linear-gradient(135deg, rgba(160, 205, 190, .76), rgba(238, 202, 181, .69)) !important;
  box-shadow: 0 13px 32px rgba(81, 112, 101, .13), inset 0 1px 0 rgba(255, 255, 255, .58) !important;
}

body.leoCoreV4.leoV4ChatMode #chatPage #chatBox .leoActivityCard {
  width: min(76%, 820px) !important;
  max-width: min(76%, 820px) !important;
  margin-right: auto !important;
  margin-left: 0 !important;
  align-self: flex-start !important;
  border: 1px solid rgba(255, 255, 255, .70) !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, .56) !important;
  box-shadow: 0 14px 34px rgba(75, 70, 63, .09) !important;
  transform: none !important;
}

body.leoCoreV4.leoV4ChatMode #chatPage .inputRow {
  position: relative !important;
  z-index: 6 !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: grid !important;
  width: auto !important;
  min-height: 74px !important;
  margin: 0 clamp(18px, 3vw, 44px) 20px !important;
  padding: 9px !important;
  flex: 0 0 auto !important;
  grid-template-columns: 54px minmax(0, 1fr) auto !important;
  gap: 9px !important;
  align-items: center !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, .85) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .57) !important;
  box-shadow: 0 18px 45px rgba(75, 70, 63, .11), inset 0 1px 0 rgba(255, 255, 255, .78) !important;
  backdrop-filter: blur(26px) saturate(1.18) !important;
  transform: none !important;
}

body.leoCoreV4.leoV4ChatMode #chatPage .inputRow .plusBtn {
  width: 54px !important;
  height: 54px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .84) !important;
  border-radius: 50% !important;
  color: #47776e !important;
  background: rgba(211, 233, 225, .73) !important;
  box-shadow: none !important;
  font-size: 23px !important;
}

body.leoCoreV4.leoV4ChatMode #chatPage .chatInput,
body.leoCoreV4.leoV4ChatMode #chatPage #chatText {
  width: 100% !important;
  min-width: 0 !important;
  height: 54px !important;
  padding: 0 18px !important;
  border: 0 !important;
  outline: none !important;
  color: #33413d !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

body.leoCoreV4.leoV4ChatMode #chatPage .sendBtn {
  min-width: 92px !important;
  height: 50px !important;
  padding: 0 21px !important;
  border: 1px solid rgba(255, 255, 255, .73) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(115deg, #68998d, #c59e80) !important;
  box-shadow: 0 12px 28px rgba(83, 116, 105, .18) !important;
  font-size: 15px !important;
  font-weight: 760 !important;
}

body.leoCoreV4 .leoV4ChatHistoryHidden {
  display: none !important;
}

body.leoCoreV4.leoV4ChatMode #chatPage .sidePanel,
body.leoCoreV4.leoV4ChatMode #chatPage #privateBox,
body.leoCoreV4.leoV4ChatMode #chatPage #leoCoreStage,
body.leoCoreV4.leoV4ChatMode #chatPage .leoCoreStage {
  display: none !important;
}

/* Pagine Immagini, Voce e Impostazioni: reset pulito */
body.leoCoreV4.leoV4SecondaryMode {
  overflow-y: auto;
}

body.leoCoreV4 .leoV4SecondaryPage.active {
  width: 100% !important;
  min-height: calc(100dvh - 120px) !important;
  padding: 0 !important;
}

body.leoCoreV4 .leoV4SecondaryPage > .panel,
body.leoCoreV4 .leoV4SecondaryPage > .card,
body.leoCoreV4 .leoV4SecondaryPage .panel.voicePanel,
body.leoCoreV4 .leoV4SecondaryPage .settingsGrid {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 28px !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, .84) !important;
  border-radius: 42px !important;
  color: var(--leo-v4-ink) !important;
  background: linear-gradient(136deg, rgba(255, 250, 244, .82), rgba(238, 244, 240, .75)) !important;
  box-shadow: 0 27px 82px rgba(75, 70, 63, .12), inset 0 1px 0 rgba(255, 255, 255, .82) !important;
  backdrop-filter: blur(24px) saturate(1.14) !important;
  transform: none !important;
}

body.leoCoreV4 .leoV4SecondaryPage .panelHead,
body.leoCoreV4 .leoV4SecondaryPage .titleBlock {
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  transform: none !important;
}

body.leoCoreV4 .leoV4SecondaryPage h1,
body.leoCoreV4 .leoV4SecondaryPage h2,
body.leoCoreV4 .leoV4SecondaryPage h3 {
  position: static !important;
  margin-top: 0 !important;
  color: #2e3b37 !important;
  transform: none !important;
}

body.leoCoreV4 #imagesPage .gridPage {
  position: static !important;
  display: grid !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  transform: none !important;
}

body.leoCoreV4 #imagesPage .toolCard {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 116px !important;
  margin: 0 !important;
  padding: 20px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .82) !important;
  border-radius: 28px !important;
  color: #33413d !important;
  background: rgba(255, 255, 255, .52) !important;
  box-shadow: 0 13px 32px rgba(75, 70, 63, .07), inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  text-align: left !important;
  transform: none !important;
}

body.leoCoreV4 #imagesPage .toolCard.wide {
  grid-column: 1 / -1 !important;
}

body.leoCoreV4 #imagesPage .toolCard strong {
  display: block !important;
  margin: 0 0 6px !important;
  color: #2f3b38 !important;
  font-size: 17px !important;
}

body.leoCoreV4 #imagesPage .toolCard span {
  display: block !important;
  color: #7c91ba !important;
  font-size: 12px !important;
}

body.leoCoreV4 #settingsPage .settingsGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body.leoCoreV4 #settingsPage .card,
body.leoCoreV4 #voicePage .card,
body.leoCoreV4 #songPage .card {
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 22px !important;
  border: 1px solid rgba(255, 255, 255, .82) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, .49) !important;
  box-shadow: 0 13px 34px rgba(75, 70, 63, .07) !important;
  transform: none !important;
}

/* Login coerente con l’universo, senza il vecchio riquadro scuro */
body.leoCoreV4 #leoLoginOverlay {
  background:
    radial-gradient(circle at 14% 14%, rgba(255, 187, 151, .52), transparent 32%),
    radial-gradient(circle at 87% 16%, rgba(119, 192, 181, .40), transparent 31%),
    radial-gradient(circle at 73% 86%, rgba(186, 166, 218, .36), transparent 31%),
    linear-gradient(135deg, #fbf3e9, #e8efea) !important;
  backdrop-filter: blur(12px) saturate(1.14) !important;
}

body.leoCoreV4 #leoLoginOverlay .leoV4LoginCard {
  width: min(470px, calc(100vw - 34px)) !important;
  padding: 36px !important;
  border: 1px solid rgba(255, 255, 255, .88) !important;
  border-radius: 44px !important;
  color: #2f3b38 !important;
  background: rgba(255, 255, 255, .55) !important;
  box-shadow: 0 38px 110px rgba(75, 70, 63, .16), inset 0 1px 0 rgba(255, 255, 255, .86) !important;
  backdrop-filter: blur(30px) saturate(1.2) !important;
}

body.leoCoreV4 .leoV4LoginShark {
  display: grid;
  width: 98px;
  height: 58px;
  margin: -5px auto 12px;
  place-items: center;
  color: #56706a;
}

body.leoCoreV4 .leoV4LoginShark .leoV4Shark {
  width: 94px;
  height: 45px;
}

body.leoCoreV4 #leoLoginOverlay h2 {
  color: #2e3b37 !important;
  text-align: center;
}

body.leoCoreV4 #leoLoginOverlay p {
  color: #687570 !important;
  text-align: center;
}

body.leoCoreV4 #leoLoginOverlay input {
  width: 100% !important;
  border: 1px solid rgba(95, 132, 122, .22) !important;
  border-radius: 18px !important;
  color: #33413d !important;
  background: rgba(255, 255, 255, .62) !important;
  box-shadow: inset 0 1px 2px rgba(65, 82, 77, .04) !important;
}

body.leoCoreV4 #leoLoginBtn {
  width: 100% !important;
  border: 1px solid rgba(255, 255, 255, .74) !important;
  border-radius: 18px !important;
  color: #fff !important;
  background: linear-gradient(115deg, #68998d, #c89d82) !important;
  box-shadow: 0 14px 32px rgba(83, 116, 105, .19) !important;
}

/* Responsive: il rail scende sotto, non si schiaccia lateralmente */
@media (max-width: 1180px) {
  body.leoCoreV4 .app { width: min(100% - 22px, 1120px) !important; }
  body.leoCoreV4 .brand { min-width: 190px; }
  body.leoCoreV4 .tabs { width: min(590px, 55vw) !important; }
  body.leoCoreV4 .leoV4HomeGrid {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }
  body.leoCoreV4 .leoV4Universe { min-height: 760px; }
  body.leoCoreV4 .leoV4Rail { overflow: visible; }
  body.leoCoreV4 .leoV4Rail > .sidePanel,
  body.leoCoreV4 .leoV4SidePanel {
    display: grid !important;
    height: auto !important;
    padding: 0 0 14px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }
  body.leoCoreV4 .leoV4SidePanel > .privateBox,
  body.leoCoreV4 .leoV4SidePanel #privateBox { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  body.leoCoreV4 .app { width: calc(100% - 14px) !important; padding-top: 8px !important; }
  body.leoCoreV4 .topbar { height: 64px !important; min-height: 64px !important; padding: 0 9px !important; }
  body.leoCoreV4 .brand { min-width: 0; }
  body.leoCoreV4 .brand .sharkLogo,
  body.leoCoreV4 .brand .leoV4HomeControl { width: 70px !important; height: 54px !important; }
  body.leoCoreV4 .leoV4Shark { width: 55px; }
  body.leoCoreV4 .brand .leoName { font-size: 22px !important; }
  body.leoCoreV4 .profilePill,
  body.leoCoreV4 #profileName { min-width: 98px !important; min-height: 44px !important; padding: 0 13px !important; font-size: 12px !important; }
  body.leoCoreV4 .tabs {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 56px !important;
    margin: 4px 0 9px !important;
    transform: none !important;
  }
  body.leoCoreV4 .tabs .tab { height: 40px !important; padding: 0 6px !important; font-size: 12px !important; }
  body.leoCoreV4 .main { margin-top: 0 !important; }
  body.leoCoreV4 .leoV4HomeGrid { min-height: 0; }
  body.leoCoreV4 .leoV4Universe { min-height: 700px; border-radius: 32px; }
  body.leoCoreV4 .leoV4Presence { top: 24px; left: 24px; width: calc(100% - 48px); }
  body.leoCoreV4 .leoV4Presence h1 { font-size: 23px; }
  body.leoCoreV4 .leoV4Joke { max-width: 310px; }
  body.leoCoreV4 .leoV4Stage { inset: 110px 0 110px; transform: scale(.83); transform-origin: center; }
  body.leoCoreV4 .leoV4ModeDock { right: 16px; bottom: 92px; width: calc(100% - 32px); }
  body.leoCoreV4 .leoV4ChooseHint { display: none; }
  body.leoCoreV4 .leoV4HomeComposer { right: 14px; bottom: 16px; left: 14px; }
  body.leoCoreV4 .leoV4SidePanel { grid-template-columns: 1fr !important; }
  body.leoCoreV4 .leoV4SidePanel > .privateBox,
  body.leoCoreV4 .leoV4SidePanel #privateBox { grid-column: auto; }
  body.leoCoreV4.leoV4ChatMode .main { height: calc(100dvh - 139px) !important; }
  body.leoCoreV4.leoV4ChatMode #chatPage .leoV4ChatHead {
    min-height: 118px !important;
    padding: 13px !important;
    grid-template-columns: auto 1fr !important;
    gap: 10px !important;
  }
  body.leoCoreV4 .leoV4ChatBack { height: 44px; padding: 0 12px; }
  body.leoCoreV4 .leoV4BrainBadge { min-width: 0 !important; width: 100% !important; grid-column: 1 / -1; min-height: 40px !important; white-space: normal; text-align: center; }
  body.leoCoreV4.leoV4ChatMode #chatPage #chatBox { padding: 17px 14px !important; }
  body.leoCoreV4.leoV4ChatMode #chatPage #chatBox > .msg,
  body.leoCoreV4.leoV4ChatMode #chatPage #chatBox .msg { max-width: 87% !important; }
  body.leoCoreV4.leoV4ChatMode #chatPage .inputRow { margin: 0 9px 10px !important; grid-template-columns: 45px minmax(0, 1fr) auto !important; }
  body.leoCoreV4.leoV4ChatMode #chatPage .inputRow .plusBtn { width: 45px !important; height: 45px !important; }
  body.leoCoreV4.leoV4ChatMode #chatPage .sendBtn { min-width: 68px !important; padding: 0 12px !important; }
  body.leoCoreV4 #imagesPage .gridPage,
  body.leoCoreV4 #settingsPage .settingsGrid { grid-template-columns: 1fr !important; }
}

@media (max-width: 540px) {
  body.leoCoreV4 .brand .leoName { letter-spacing: .23em !important; }
  body.leoCoreV4 .leoV4Universe { min-height: 650px; }
  body.leoCoreV4 .leoV4Stage { inset: 125px -80px 105px; transform: scale(.67); }
  body.leoCoreV4 .leoV4ModeDock { min-height: 59px; padding: 9px 12px; }
  body.leoCoreV4 .leoV4HomeComposer { grid-template-columns: 45px minmax(0, 1fr) auto; height: 48px; gap: 6px; }
  body.leoCoreV4 .leoV4Plus { width: 45px; height: 45px; }
  body.leoCoreV4 #leoV4HomePrompt { height: 48px; padding: 0 14px; font-size: 12px; }
  body.leoCoreV4 .leoV4Send { min-width: 62px; height: 44px; padding: 0 11px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  body.leoCoreV4 *,
  body.leoCoreV4 *::before,
  body.leoCoreV4 *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@keyframes leoV4BodyDriftOne {
  from { transform: translate3d(-2%, -2%, 0) rotate(10deg) scale(.96); }
  to { transform: translate3d(5%, 4%, 0) rotate(17deg) scale(1.06); }
}

@keyframes leoV4BodyDriftTwo {
  from { transform: translate3d(2%, 3%, 0) rotate(-20deg) scale(.97); }
  to { transform: translate3d(-5%, -3%, 0) rotate(-12deg) scale(1.07); }
}

@keyframes leoV4RibbonOne {
  from { border-radius: 61% 39% 63% 37% / 42% 61% 39% 58%; margin: -1% 0 0 -2%; }
  to { border-radius: 44% 56% 38% 62% / 58% 41% 59% 42%; margin: 3% 0 0 3%; }
}

@keyframes leoV4RibbonTwo {
  from { border-radius: 38% 62% 45% 55% / 58% 35% 65% 42%; }
  to { border-radius: 59% 41% 61% 39% / 37% 58% 42% 63%; }
}

@keyframes leoV4PearlFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(13px, -19px, 0) scale(1.08); }
}

@keyframes leoV4NeuralFlow {
  to { stroke-dashoffset: -1; }
}

@keyframes leoV4BrainFloat {
  0%, 100% { margin-top: -3px; }
  50% { margin-top: 5px; }
}

@keyframes leoV4CoreBreathe {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.12) brightness(1.05); }
}

@keyframes leoV4CoreOrbit {
  to { transform: rotate(360deg); }
}

@keyframes leoV4Checking {
  from { opacity: .55; filter: saturate(.45); }
  to { opacity: 1; filter: saturate(.8); }
}

@keyframes leoV4Pending {
  from { transform: scale(.72); opacity: .55; }
  to { transform: scale(1.18); opacity: 1; }
}

@keyframes leoV4MessageIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes leoV4ChatFluid {
  from { transform: translate3d(0, -2%, 0) rotate(16deg); border-radius: 43% 57% 62% 38% / 57% 42% 58% 43%; }
  to { transform: translate3d(-4%, 5%, 0) rotate(23deg); border-radius: 61% 39% 42% 58% / 39% 58% 42% 61%; }
}