/* ============================================================
   macos.css — Design System unico del progetto PCTO · Maturità 2026
   Obiettivo: linguaggio universale ispirato a macOS (vetro, hairline,
   dock, finestre, centro di controllo, motion coerente).
   Questo è l'unico CSS caricato da login e desktop.ss
   ============================================================ */
@font-face { font-family: "SF Pro Display"; src: url("assets/fonts/SFPRODISPLAYREGULAR.OTF") format("opentype"); font-weight: 100 450; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("assets/fonts/SFPRODISPLAYMEDIUM.OTF") format("opentype"); font-weight: 451 650; font-display: swap; }
@font-face { font-family: "SF Pro Display"; src: url("assets/fonts/SFPRODISPLAYBOLD.OTF") format("opentype"); font-weight: 651 900; font-display: swap; }

:root {
  --text: #18181B;
  --muted: #5F5F66;
  --faint: #9C9CA3;
  --border: rgba(20,22,40,0.10);
  --hairline: rgba(255,255,255,0.42);
  --surface: rgba(255,255,255,0.62);
  --surface-press: rgba(255,255,255,0.82);
  --container: rgba(244,244,248,0.72);
  --glass: linear-gradient(155deg, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.34) 48%, rgba(255,255,255,0.46) 100%);
  --glass-bar: rgba(250,250,253,0.46);
  --tml-bg: rgba(18,18,22,0.86);
  --shadow-win: 0 36px 80px -20px rgba(12,16,40,0.42), 0 6px 18px rgba(12,16,40,0.12);
  --shadow-pop: 0 10px 26px rgba(12,16,40,0.16);
  --edge: inset 0 1px 0 var(--hairline), inset 0 0 0 1px rgba(255,255,255,0.20), inset 0 -1px 0 rgba(20,22,40,0.06);
  --spring: cubic-bezier(0.3, 1.36, 0.46, 1);
  --spring-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.8s;
  --ok: #22C55E;
  --blue: #0A84FF; --orange: #FF9500; --green: #34C759; --indigo: #5856D6;
  --pink: #FF375F; --teal: #30B0C7; --purple: #AF52DE; --red: #FF3B30;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #F5F5F7;
    --muted: rgba(235,235,245,0.64);
    --faint: rgba(235,235,245,0.36);
    --border: rgba(255,255,255,0.10);
    --hairline: rgba(255,255,255,0.16);
    --surface: rgba(58,58,64,0.46);
    --surface-press: rgba(72,72,80,0.6);
    --container: rgba(28,28,32,0.6);
    --glass: linear-gradient(155deg, rgba(44,44,52,0.66) 0%, rgba(30,30,36,0.52) 48%, rgba(38,38,46,0.6) 100%);
    --glass-bar: rgba(22,22,26,0.5);
    --tml-bg: rgba(12,12,14,0.92);
    --shadow-win: 0 36px 80px -20px rgba(0,0,0,0.7), 0 6px 18px rgba(0,0,0,0.4);
    --shadow-pop: 0 10px 26px rgba(0,0,0,0.5);
    --edge: inset 0 1px 0 var(--hairline), inset 0 0 0 1px rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.25);
  }
}
.a-blue { --acc: #0A84FF; } .a-orange { --acc: #FF9500; } .a-green { --acc: #34C759; }
.a-indigo { --acc: #5856D6; } .a-pink { --acc: #FF375F; } .a-teal { --acc: #30B0C7; }
.a-purple { --acc: #AF52DE; } .a-dark { --acc: #1C1C1E; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
svg { display: block; }
img { -webkit-user-drag: none; }

.bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    url("assets/optimized/bg.webp") center / cover no-repeat,
    linear-gradient(165deg, #1B4FA0 0%, #5A39A8 52%, #C8527E 100%);
}
.bg .blob { display: none; }
@media (prefers-color-scheme: dark) {
  .bg {
    background:
      url("assets/optimized/bg.webp") center / cover no-repeat,
      linear-gradient(165deg, #0C1F42 0%, #221647 52%, #43203A 100%);
  }
}

#boot {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 46px;
  background: #000;
  transition: opacity .7s ease;
}
#boot.done { opacity: 0; pointer-events: none; }
#boot img { height: 96px; border-radius: 18px; animation: bootIn .9s var(--spring-soft) both; }
#boot .bfall { width: 88px; height: 88px; color: #fff; fill: currentColor; animation: bootIn .9s var(--spring-soft) both; }
#boot .bbar {
  width: 230px; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.22);
  animation: bootIn .9s var(--spring-soft) .3s both;
}
#boot .bbar span { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; }
@keyframes bootIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
body.booting .menubar, body.booting .dock, body.booting .dicon,
body.booting .win.open, body.booting .win.open * { animation-play-state: paused; }

.lgcard {
  position: relative; overflow: hidden;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--edge), 0 2px 8px rgba(12,16,40,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lgcard::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, -40%), rgba(255,255,255,0.42), transparent 62%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.lgcard:hover::after { opacity: 1; }
@media (prefers-color-scheme: dark) {
  .lgcard::after { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, -40%), rgba(255,255,255,0.14), transparent 62%); }
}

.ai {
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; text-decoration: none;
  border-radius: 24.5%;
  color: var(--acc, var(--muted));
  background: color-mix(in srgb, var(--acc, #888) 12%, var(--surface-press));
  box-shadow: var(--edge);
}

.menubar {
  position: fixed; top: 0; left: 0; right: 0; height: 34px; z-index: 1000;
  display: flex; align-items: center; gap: 1px; padding: 0 12px;
  background: var(--glass-bar);
  backdrop-filter: blur(16px) saturate(1.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.9);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12), 0 1px 12px rgba(12,16,40,0.10);
  font-size: 13px; font-weight: 600;
  animation: barIn var(--dur) var(--spring) both;
}
@keyframes barIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.menubar .logo {
  display: flex; align-items: center; padding: 4px 8px; color: var(--text);
  background: none; border: none; border-radius: 8px;
  transition: background .2s ease, transform .35s var(--spring);
}
.menubar .logo:hover { background: rgba(255,255,255,0.22); box-shadow: var(--edge); }
.menubar .logo:active { transform: scale(.92); }
.menubar .logo svg { width: 16px; height: 16px; }
.menubar .appname { font-weight: 800; letter-spacing: -0.02em; padding: 3px 8px; }
.menubar .mitem {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 8px;
  background: none; border: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--text); text-decoration: none;
  transition: background .2s ease, transform .35s var(--spring);
}
.menubar .mitem:hover { background: rgba(255,255,255,0.22); box-shadow: var(--edge); }
.menubar .mitem:active { transform: scale(.94); }
.menubar .right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.menubar .sico { display: flex; align-items: center; gap: 4px; padding: 4px 7px; color: var(--text); }
.menubar .bpct { font-size: 11px; font-weight: 650; }
.menubar .ccbtn { display: flex; align-items: center; padding: 4px 7px; color: var(--text); background: none; border: none; border-radius: 8px; transition: background .2s ease, transform .35s var(--spring); }
.menubar .ccbtn:hover, .menubar .ccbtn.on { background: rgba(255,255,255,0.22); box-shadow: var(--edge); }
.menubar .ccbtn:active { transform: scale(.92); }
.menubar .ccbtn svg { width: 15px; height: 15px; }
.menubar .sico svg { width: 15px; height: 15px; }
.menubar .who { display: flex; align-items: center; gap: 6px; font-weight: 700; padding: 4px 9px; }
.menubar .who .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.menubar .clock { font-variant-numeric: tabular-nums; padding: 0 8px; white-space: nowrap; }
.menubar .clock.timer-on { font-weight: 600; letter-spacing: .3px; }
.menubar .clock.timer-quasi { color: #FF9F0A; }
.menubar .clock.timer-finito { color: #FF453A; }
.menubar .exit svg { width: 14px; height: 14px; }

.deskicons { position: fixed; top: 52px; right: 14px; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.dicon {
  width: 112px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 6px 8px; border-radius: 16px;
  background: none; border: none; cursor: pointer; font: inherit;
  transition: background .25s ease, box-shadow .25s ease, transform .35s var(--spring);
  animation: dIn .7s var(--spring) both;
}
.deskicons .dicon:nth-child(1) { animation-delay: .45s; }
.deskicons .dicon:nth-child(2) { animation-delay: .55s; }
@keyframes dIn { from { opacity: 0; transform: translateY(-12px) scale(.94); } to { opacity: 1; transform: none; } }
.dicon:hover { background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); backdrop-filter: blur(6px); }
.dicon:active { transform: scale(.93); }
.dicon .fico { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }
.dicon .fico img { width: 100%; height: 100%; display: block; pointer-events: none; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3)); }
.dicon span:last-child { font-size: 11.5px; font-weight: 650; text-align: center; line-height: 1.3; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }

.win {
  position: fixed; z-index: 10; display: none; flex-direction: column;
  height: auto; max-height: calc(100vh - 118px);
  border-radius: 24px;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.9);
  -webkit-backdrop-filter: blur(18px) saturate(1.9);
  box-shadow: var(--shadow-win), inset 0 1px 0 var(--hairline), inset 0 0 0 1px rgba(255,255,255,0.16), inset 0 -1px 0 rgba(20,22,40,0.08);
  overflow: hidden; min-width: 320px;
}
.win.open { display: flex; animation: winIn .55s var(--spring) both; }
.win.closing { animation: winOut .26s var(--spring-soft) both; }
@keyframes winIn  { from { opacity: 0; transform: scale(.86) translateY(22px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes winOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.88) translateY(14px); } }
.win.maxi { left: 8px !important; top: 42px !important; width: calc(100vw - 16px) !important; height: calc(100vh - 132px) !important; max-height: none; }

.titlebar {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px; flex-shrink: 0;
  cursor: grab; touch-action: none;
  box-shadow: 0 1px 0 var(--border);
}
.titlebar:active { cursor: grabbing; }
.lights { display: flex; gap: 8px; }
.lights button {
  width: 12.5px; height: 12.5px; border-radius: 50%; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,0,0,0.55);
  box-shadow: inset 0 0.5px 1px rgba(255,255,255,0.5);
  transition: transform .35s var(--spring), filter .15s ease;
}
.lights button svg { width: 7px; height: 7px; opacity: 0; transition: opacity .12s ease; }
.titlebar:hover .lights button svg { opacity: 1; }
.lights button:hover { filter: brightness(.92); }
.lights button:active { transform: scale(.85); }
.lights .c-close { background: #FF5F57; border: 0.5px solid #E0443E; }
.lights .c-min   { background: #FEBC2E; border: 0.5px solid #D9A022; }
.lights .c-max   { background: #28C840; border: 0.5px solid #1EAA33; }
.titlebar .wt {
  flex: 1; text-align: center;
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--muted); margin-right: 53px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wbody { flex: 1; overflow-y: auto; min-height: 0; }
.wbody::-webkit-scrollbar { width: 8px; }
.wbody::-webkit-scrollbar-thumb { background: rgba(127,127,135,0.3); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }

.split { flex: 1; display: flex; min-height: 0; }
.sidebar {
  width: 168px; flex-shrink: 0; padding: 10px 8px;
  background: color-mix(in srgb, var(--container) 60%, transparent);
  box-shadow: 1px 0 0 var(--border);
  overflow-y: auto;
}
.sb-title { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); padding: 10px 10px 5px; }
.sb-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text);
  background: none; border: none; text-align: left;
  padding: 6px 10px; border-radius: 9px; white-space: nowrap;
  transition: background .2s ease, transform .3s var(--spring);
}
.sb-item:not(.on):hover { background: rgba(255,255,255,0.18); }
.sb-item:active { transform: scale(.97); }
.sb-item.on { background: rgba(255,255,255,0.34); box-shadow: var(--edge); }
@media (prefers-color-scheme: dark) {
  .sb-item.on { background: rgba(255,255,255,0.10); }
  .sb-item:not(.on):hover { background: rgba(255,255,255,0.07); }
}
.sb-item .ic {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; color: #fff;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.4);
}
.sb-item .dotk { width: 11px; height: 11px; margin: 0 4.5px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0.5px 1px rgba(255,255,255,0.5); }
.sb-item .cnt { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--faint); }
.main { flex: 1; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; }
.main::-webkit-scrollbar { width: 8px; }
.main::-webkit-scrollbar-thumb { background: rgba(127,127,135,0.3); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }

.ftools { display: flex; align-items: baseline; gap: 7px; padding: 16px 20px 4px; }
.ftools b { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.ftools > span { font-size: 12.5px; color: var(--muted); font-weight: 550; }
.fseg {
  margin-left: auto; display: flex; gap: 2px; padding: 2.5px;
  border-radius: 9px; background: var(--container); box-shadow: var(--edge);
  font-size: 11.5px; font-weight: 700;
}
.fseg button {
  padding: 3px 11px; border-radius: 7px; color: var(--muted);
  background: none; border: none; font: inherit; font-size: 11.5px; font-weight: 700;
  transition: background .25s ease, color .25s ease;
}
.fseg button.on { background: var(--surface-press); color: var(--text); box-shadow: 0 1px 4px rgba(12,16,40,0.12); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 20px 10px; }
.fitem {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 13px 14px 11px; text-align: left;
  border: none; font: inherit; color: var(--text); cursor: pointer;
  transition: transform .4s var(--spring), box-shadow .25s ease;
  animation: tileIn .6s var(--spring) both;
}
@keyframes tileIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fitem:hover { transform: translateY(-3px) scale(1.012); box-shadow: var(--edge), var(--shadow-pop); }
.fitem:active { transform: scale(.97); }
.fitem.hl { transform: translateY(-3px); box-shadow: var(--edge), 0 0 0 2px var(--acc, var(--blue)), var(--shadow-pop); }
.fitem .fbadge {
  width: 30px; height: 30px; border-radius: 9px; margin-bottom: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 6px rgba(12,16,40,0.18);
}
.fitem b { font-size: 13.5px; font-weight: 750; letter-spacing: -0.01em; }
.fitem > span { font-size: 12px; color: var(--muted); font-weight: 500; line-height: 1.45; }
.fitem .tt { margin-top: 5px; font-size: 10.5px; font-weight: 750; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.fgrid.list { grid-template-columns: 1fr; gap: 7px; }
.fgrid.list .fitem { flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px; }
.fgrid.list .fitem .fbadge { margin-bottom: 0; }
.fgrid.list .fitem b { flex-shrink: 0; min-width: 148px; font-size: 13px; }
.fgrid.list .fitem > span { flex: 1; }
.fgrid.list .fitem .tt { margin: 0 0 0 auto; flex-shrink: 0; }
.pathbar { margin-top: auto; padding: 9px 20px; font-size: 11.5px; font-weight: 600; color: var(--faint); box-shadow: 0 -1px 0 var(--border); }
.pathbar i { font-style: normal; padding: 0 5px; }

.cmain { padding: 18px 20px 16px; gap: 12px; }
.chead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cavatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--text);
  background: var(--surface-press);
  box-shadow: var(--edge), 0 0 0 3px rgba(255,255,255,0.28), 0 4px 12px rgba(12,16,40,0.14);
  animation: pop var(--dur) var(--spring) .15s both;
}
@keyframes pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.cid h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.cid p { font-size: 12.5px; color: var(--muted); font-weight: 550; margin-top: 1px; }
.cacts { margin-left: auto; display: flex; gap: 8px; }
.cact {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700; color: var(--blue); text-decoration: none;
  padding: 7px 11px 5px; border-radius: 12px;
  background: var(--surface); box-shadow: var(--edge);
  transition: transform .35s var(--spring), box-shadow .25s ease;
}
.cact:hover { transform: translateY(-2px); box-shadow: var(--edge), var(--shadow-pop); }
.cact:active { transform: scale(.94); }
.crows { display: flex; flex-direction: column; gap: 8px; }
.crow { display: flex; gap: 13px; padding: 12px 14px; }
.crow .k { width: 86px; flex-shrink: 0; font-size: 11px; font-weight: 800; color: var(--acc, var(--blue)); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.crow b { font-size: 13.5px; font-weight: 750; letter-spacing: -0.01em; display: block; }
.crow p { font-size: 12.5px; color: var(--muted); font-weight: 500; line-height: 1.55; margin-top: 2px; }
.cnote {
  font-size: 12.5px; line-height: 1.6; color: var(--muted); font-weight: 500;
  padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--orange) 9%, var(--surface));
  box-shadow: var(--edge);
}
.cnote b { color: var(--text); font-weight: 800; }

.cal-tb { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px 8px; }
.cal-tb h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.cal-tb h3 span { color: var(--green); }
.cal-stats { margin-left: auto; display: flex; gap: 7px; }
.cstat { min-width: 78px; padding: 8px 12px 7px; text-align: center; border-radius: 13px; }
.cstat b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; color: var(--green); }
.cstat span { font-size: 9.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.agenda { display: flex; flex-direction: column; gap: 14px; padding: 8px 20px 18px; }
.agroup h4 { font-size: 12px; font-weight: 650; color: var(--muted); margin-bottom: 7px; }
.agroup h4 b { color: var(--text); font-weight: 800; }
.evts { display: flex; flex-direction: column; gap: 7px; }
.evt { display: flex; gap: 11px; padding: 11px 13px; align-items: flex-start; }
.evt .bar { width: 4px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }
.evt .tm { width: 64px; flex-shrink: 0; font-size: 11px; font-weight: 750; color: var(--faint); padding-top: 2px; }
.evt b { font-size: 13px; font-weight: 750; letter-spacing: -0.01em; display: block; }
.evt p { font-size: 12px; color: var(--muted); font-weight: 500; line-height: 1.5; margin-top: 2px; }

.as-body { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.as-kicker { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; opacity: .82; }
.as-hero {
  position: relative; overflow: hidden;
  padding: 20px 22px; border-radius: 18px; color: #fff;
  background: var(--indigo);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 26px color-mix(in srgb, var(--indigo) 38%, transparent);
}
.as-hero h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.025em; margin: 5px 0 7px; }
.as-hero p { font-size: 12.5px; line-height: 1.6; font-weight: 500; opacity: .94; max-width: 58ch; }
.as-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.as-mini {
  position: relative; overflow: hidden;
  padding: 15px 16px; border-radius: 16px; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 20px rgba(12,16,40,0.16);
  transition: transform .4s var(--spring);
}
.as-mini:hover { transform: translateY(-3px); }
.as-mini h4 { font-size: 14.5px; font-weight: 800; letter-spacing: -0.015em; margin: 4px 0 5px; }
.as-mini p { font-size: 11.5px; line-height: 1.55; font-weight: 500; opacity: .94; }
.as-sec { font-size: 14px; font-weight: 800; letter-spacing: -0.015em; margin-top: 4px; }
.aprows { display: flex; flex-direction: column; gap: 7px; }
.aprow { display: flex; align-items: center; gap: 12px; padding: 10px 13px; }
.apic {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 6px rgba(12,16,40,0.18);
}
.aprow b { font-size: 13px; font-weight: 750; letter-spacing: -0.01em; display: block; }
.aprow p { font-size: 11.5px; color: var(--muted); font-weight: 500; line-height: 1.45; }
.getb {
  margin-left: auto; flex-shrink: 0; min-width: 78px; text-align: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--blue);
  padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  box-shadow: var(--edge);
}

.tsplit { flex: 1; display: flex; min-height: 0; }
.tml {
  width: 46%; flex-shrink: 0; overflow-y: auto;
  padding: 16px 18px;
  background: var(--tml-bg);
  backdrop-filter: blur(12px);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.75; color: #E8E8ED;
}
.tprompt { color: #6FE3A0; font-weight: 700; }
.tpath { color: #7CC7FF; }
.tcmd { color: #fff; font-weight: 700; }
.tout { color: rgba(235,235,245,0.66); margin: 2px 0 0 0; }
.tok { color: #6FE3A0; font-weight: 700; }
.tgap { margin-top: 13px; }
.tstep {
  display: inline-flex; width: 17px; height: 17px; margin-right: 7px;
  align-items: center; justify-content: center; vertical-align: -3px;
  border-radius: 6px; font-size: 10.5px; font-weight: 800; color: #fff;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.4);
}
.tstep.b { background: var(--blue); } .tstep.g { background: var(--green); } .tstep.o { background: var(--orange); }
.tcur { display: inline-block; width: 8px; height: 14px; vertical-align: -2px; background: #E8E8ED; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.texp { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 18px; }
.texp h4 { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.tlead { font-size: 12px; color: var(--muted); font-weight: 550; margin: 3px 0 11px; }
.xcard { display: flex; gap: 11px; padding: 12px 13px; margin-bottom: 8px; }
.xn {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; color: #fff;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.4);
}
.xn.b { background: var(--blue); } .xn.g { background: var(--green); } .xn.o { background: var(--orange); }
.xcard b { font-size: 13px; font-weight: 750; letter-spacing: -0.01em; display: block; }
.xcard p { font-size: 12px; color: var(--muted); font-weight: 500; line-height: 1.55; margin-top: 2px; }
.xchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.xchips i { font-style: normal; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); margin-right: 2px; }
.xchips span {
  font-size: 11.5px; font-weight: 650; padding: 5px 11px; border-radius: 999px;
  color: var(--muted); background: var(--surface); box-shadow: var(--edge);
}

.stb { display: flex; align-items: center; gap: 10px; padding: 0 14px 10px; flex-shrink: 0; box-shadow: 0 1px 0 var(--border); }
.snav { display: flex; gap: 4px; }
.snav button {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--muted); font-size: 15px; font-weight: 600;
  background: none; border: none; font-family: inherit;
  transition: background .2s ease, transform .3s var(--spring);
}
.snav button:hover { background: rgba(255,255,255,0.25); box-shadow: var(--edge); }
.snav button:active { transform: scale(.88); }
.urlfield {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; border-radius: 10px;
  background: var(--container); box-shadow: var(--edge);
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.sf-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.sf-body h3 { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.favgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.favcard {
  display: block; padding: 14px 15px; text-decoration: none; color: var(--text);
  transition: transform .4s var(--spring), box-shadow .25s ease;
}
a.favcard:hover { transform: translateY(-4px) scale(1.015); box-shadow: var(--edge), var(--shadow-pop); }
.favcard:active { transform: scale(.97); }
.favtop { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.favico {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 6px rgba(12,16,40,0.18);
}
.favtop b { font-size: 13.5px; font-weight: 750; letter-spacing: -0.01em; display: block; }
.favtop small { font-size: 11px; font-weight: 600; color: var(--faint); }
.favcard > p { font-size: 12px; color: var(--muted); font-weight: 500; line-height: 1.55; }
.favcard > p b { color: var(--text); font-weight: 700; }
.favgo {
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--faint); background: var(--container); box-shadow: var(--edge);
  opacity: 0; transform: translate(-4px, 4px) scale(.7);
  transition: opacity .25s ease, transform .4s var(--spring), color .2s ease;
}
a.favcard:hover .favgo { opacity: 1; transform: translate(0,0) scale(1); color: var(--acc, var(--blue)); }
.favsay {
  position: absolute; left: 14px; right: 14px; bottom: 10px; z-index: 2;
  padding: 8px 12px; border-radius: 12px 12px 12px 3px;
  background: var(--acc, var(--blue)); color: #fff;
  font-size: 11.5px; font-weight: 700; line-height: 1.4; letter-spacing: -0.005em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 20px color-mix(in srgb, var(--acc, var(--blue)) 42%, transparent);
  opacity: 0; transform: translateY(8px) scale(.92); transform-origin: left bottom;
  pointer-events: none;
  transition: opacity .22s ease, transform .45s var(--spring);
}
a.favcard:hover .favsay { opacity: 1; transform: translateY(0) scale(1); }
.sf-note { margin-top: 12px; font-size: 11.5px; color: var(--faint); font-weight: 550; line-height: 1.55; }

.mapwrap { flex: 1; display: flex; min-height: 0; }
.mpanel { width: 46%; flex-shrink: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.msearch {
  display: flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px; border-radius: 10px;
  background: var(--container); box-shadow: var(--edge);
  font-size: 12.5px; font-weight: 600; color: var(--faint);
  flex-shrink: 0;
}
.stop { display: flex; gap: 11px; padding: 11px 13px; }
.pinz { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.pin {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 6px rgba(12,16,40,0.22);
}
.lne { flex: 1; width: 2px; margin-top: 4px; border-radius: 2px; background: var(--border); }
.stop b { font-size: 13px; font-weight: 750; letter-spacing: -0.01em; display: block; }
.stop p { font-size: 12px; color: var(--muted); font-weight: 500; line-height: 1.5; margin-top: 2px; }
.eta { font-size: 12px; color: var(--muted); font-weight: 550; line-height: 1.55; padding: 11px 13px; border-radius: 13px; background: color-mix(in srgb, var(--blue) 8%, var(--surface)); box-shadow: var(--edge); }
.eta span { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); margin-bottom: 2px; }
.mappane { flex: 1; position: relative; min-width: 0; min-height: 320px; overflow: hidden; }
.mappane > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mpin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mdot { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(12,16,40,0.35); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 2px 8px rgba(12,16,40,0.35), 0 0 0 0 rgba(255,255,255,0.45); } 70% { box-shadow: 0 2px 8px rgba(12,16,40,0.35), 0 0 0 11px rgba(255,255,255,0); } 100% { box-shadow: 0 2px 8px rgba(12,16,40,0.35), 0 0 0 0 rgba(255,255,255,0); } }
.mtag {
  white-space: nowrap; font-size: 10.5px; font-weight: 750; color: var(--text);
  padding: 4px 9px; border-radius: 8px;
  background: var(--surface-press); box-shadow: var(--edge), 0 3px 10px rgba(12,16,40,0.18);
  backdrop-filter: blur(8px);
}

.dock {
  position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%);
  z-index: 900; display: flex; align-items: flex-end; gap: 5px;
  height: 60px; padding: 0 10px 7px; border-radius: 26px;
  background: var(--glass-bar);
  backdrop-filter: blur(16px) saturate(1.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.9);
  box-shadow: inset 0 1px 0 var(--hairline), inset 0 0 0 1px rgba(255,255,255,0.16), 0 16px 38px rgba(12,16,40,0.26);
  animation: dockIn var(--dur) var(--spring) .15s both;
}
@keyframes dockIn { from { transform: translate(-50%, 140%); } to { transform: translate(-50%, 0); } }
.dapp { position: relative; display: flex; flex-direction: column; align-items: center; }
.dock .ai {
  width: calc(50px * var(--s, 1)); height: calc(50px * var(--s, 1));
  padding: 0; background: none; box-shadow: none; border-radius: 0;
  transition: none;
  will-change: width, height;
}
.dock .ai img { width: 100%; height: 100%; display: block; pointer-events: none; }
.dock .ai:active { filter: brightness(.85); }
.dock .ai.bounce { animation: bounce .7s var(--spring-soft); }
@keyframes bounce { 0%, 100% { translate: 0 0; } 30% { translate: 0 -22px; } 60% { translate: 0 0; } 80% { translate: 0 -8px; } }
.dsep { width: 1px; align-self: stretch; margin: 8px 4px; background: rgba(255,255,255,0.28); border-radius: 1px; }
.dapp .dot { position: absolute; bottom: -6px; width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .3s ease; }
.dapp.running .dot { opacity: .75; }
.dapp .tip {
  position: absolute; left: 50%; bottom: calc(100% + 14px);
  padding: 5px 12px; border-radius: 9px;
  background: var(--surface-press);
  backdrop-filter: blur(14px);
  box-shadow: var(--edge), var(--shadow-pop);
  font-size: 12px; font-weight: 700; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 5px) scale(.9); pointer-events: none;
  transition: opacity .2s ease, transform .35s var(--spring);
}
.dapp:hover .tip { opacity: 1; transform: translate(-50%, 0) scale(1); }


#dim { position: fixed; inset: 0; z-index: 6000; background: #000; opacity: 0; pointer-events: none; transition: opacity .22s linear; }
.ccpanel {
  position: fixed; top: 40px; right: 10px; z-index: 4500;
  width: 330px; padding: 10px;
  display: flex; flex-direction: column; gap: 10px;
  border-radius: 20px;
  background: var(--glass-bar);
  backdrop-filter: blur(18px) saturate(1.9);
  -webkit-backdrop-filter: blur(18px) saturate(1.9);
  box-shadow: inset 0 1px 0 var(--hairline), inset 0 0 0 1px rgba(255,255,255,0.16), 0 18px 44px rgba(12,16,40,0.3);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.96); transform-origin: top right;
  transition: opacity .18s ease, transform .35s var(--spring), visibility .2s;
}
.ccpanel.show { opacity: 1; visibility: visible; transform: none; }
.ccgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ccmod { border-radius: 15px; background: var(--surface); box-shadow: var(--edge), 0 2px 8px rgba(12,16,40,0.08); padding: 7px; }
.ccconn { display: flex; flex-direction: column; gap: 1px; }
.ccrow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; border-radius: 11px; background: none; border: none; font: inherit; text-align: left; color: var(--text); transition: background .2s ease; }
.ccrow:hover { background: rgba(127,127,135,0.16); }
.ccrow:active { background: rgba(127,127,135,0.26); }
.ccico { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(127,127,135,0.36); color: #fff; transition: background .25s ease; }
.ccico svg { width: 15px; height: 15px; }
.ccico.on { background: var(--blue); }
.cctxt { min-width: 0; }
.cctxt b { display: block; font-size: 12px; font-weight: 700; letter-spacing: -0.01em; }
.cctxt small { display: block; font-size: 10.5px; font-weight: 550; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cccol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ccfocus { flex: 1; display: flex; align-items: center; gap: 8px; border: none; font: inherit; text-align: left; color: var(--text); padding: 7px 8px; transition: transform .3s var(--spring); }
.ccfocus:active { transform: scale(.97); }
.ccduo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ccmini { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 9px 4px 8px; border-radius: 15px; background: var(--surface); box-shadow: var(--edge), 0 2px 8px rgba(12,16,40,0.08); border: none; font: inherit; font-size: 10px; font-weight: 650; line-height: 1.25; text-align: center; color: var(--text); transition: transform .3s var(--spring), background .25s ease, color .25s ease; }
.ccmini svg { width: 17px; height: 17px; }
.ccmini:active { transform: scale(.94); }
.ccmini.on { background: var(--blue); color: #fff; }
.cclab { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: -0.01em; padding: 2px 4px 7px; }
.ccsl { padding: 9px 10px 11px; }
.ccrange { position: relative; }
.ccrange input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin: 0; border-radius: 999px; background: linear-gradient(to right, #fff var(--val, 100%), rgba(127,127,135,0.32) var(--val, 100%)); box-shadow: inset 0 0 0 0.5px rgba(20,22,40,0.12); outline: none; cursor: url("assets/cursors/pointer.svg") 10 5, pointer; }
.ccrange input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.14), 0 1px 4px rgba(12,16,40,0.32); }
.ccrange input::-moz-range-thumb { width: 20px; height: 20px; border: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.14), 0 1px 4px rgba(12,16,40,0.32); }
.ccrange .cic { position: absolute; left: 6px; top: 50%; translate: 0 -50%; width: 11px; height: 11px; color: rgba(60,60,67,0.55); pointer-events: none; }
.ccrange .cic svg { width: 11px; height: 11px; }

@media (max-width: 760px) {
  .menubar .hideS { display: none; }
  .deskicons { display: none; }
  .win { left: 3vw !important; top: 44px !important; width: 94vw !important; height: calc(100vh - 140px) !important; max-height: none; }
  .sidebar { display: none; }
  .fgrid, .favgrid, .as-duo { grid-template-columns: 1fr; }
  .tsplit { flex-direction: column; }
  .tml { width: 100%; max-height: 46%; }
  .mapwrap { flex-direction: column; }
  .mpanel { width: 100%; }
  .mappane { min-height: 180px; }
  .cacts { display: none; }
  .ccpanel { right: 6px; width: min(330px, 94vw); }
  .dock { height: 48px; padding: 0 8px 5px; gap: 3px; }
  .dock .ai { width: calc(38px * var(--s, 1)); height: calc(38px * var(--s, 1)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

body { cursor: url("assets/cursors/arrow.svg") 9 4, default; }
button, a, .ai, .mitem, .fitem, .dicon, .pillbtn, .lights button, .dapp .ai, a.favcard { cursor: url("assets/cursors/pointer.svg") 10 5, pointer; }
.titlebar, .titlebar:active { cursor: url("assets/cursors/arrow.svg") 9 4, default; }
input, textarea { cursor: url("assets/cursors/text.svg") 14 14, text; }


/* ---- Rifiniture Apple consolidate ---- */
/* Rifiniture grafiche stile Apple consolidate nel design system. */

:root{
  --ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
  --spring-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== Finestre: apertura più morbida e materica ===== */
@keyframes winIn{
  0%{opacity:0;transform:scale(.9) translateY(26px);filter:blur(7px)}
  55%{filter:blur(0)}
  100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
}
@keyframes winOut{
  from{opacity:1;transform:scale(1);filter:blur(0)}
  to{opacity:0;transform:scale(.93) translateY(12px);filter:blur(5px)}
}
.win.open{animation:winIn .52s var(--ease-apple) both}
.win.closing{animation:winOut .28s var(--spring-soft) both}
.win{transition:box-shadow .4s var(--ease-apple)}

/* ===== Ingresso a cascata dei contenuti all'apertura ===== */
@keyframes riseIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
.win.open .as-hero,
.win.open .crow,
.win.open .evt,
.win.open .stop,
.win.open .aprow,
.win.open .as-duo>*,
.win.open .cstat,
.win.open .favcard,
.win.open .cnote,
.win.open .eta,
.win.open .sf-note{animation:riseIn .5s var(--ease-apple) both}
.win.open .crow:nth-child(1),.win.open .evt:nth-child(1),.win.open .aprow:nth-child(1),.win.open .as-duo>*:nth-child(1),.win.open .cstat:nth-child(1),.win.open .favcard:nth-child(1){animation-delay:.05s}
.win.open .crow:nth-child(2),.win.open .evt:nth-child(2),.win.open .aprow:nth-child(2),.win.open .as-duo>*:nth-child(2),.win.open .cstat:nth-child(2),.win.open .favcard:nth-child(2){animation-delay:.10s}
.win.open .crow:nth-child(3),.win.open .aprow:nth-child(3),.win.open .cstat:nth-child(3),.win.open .favcard:nth-child(3){animation-delay:.15s}
.win.open .crow:nth-child(4),.win.open .aprow:nth-child(4),.win.open .favcard:nth-child(4){animation-delay:.20s}
.win.open .crow:nth-child(5),.win.open .aprow:nth-child(5){animation-delay:.25s}
.win.open .agroup:nth-child(2) .evt{animation-delay:.10s}
.win.open .agroup:nth-child(3) .evt{animation-delay:.16s}
.win.open .agroup:nth-child(4) .evt{animation-delay:.22s}
.win.open .stop:nth-child(2){animation-delay:.06s}
.win.open .stop:nth-child(3){animation-delay:.12s}
.win.open .stop:nth-child(4){animation-delay:.18s}

/* ===== Righe e schede: hover/press più precisi ===== */
.crow,.evt,.stop,.aprow{transition:transform .38s var(--spring-soft),box-shadow .3s ease,background .25s ease}
.crow:hover,.evt:hover,.stop:hover,.aprow:hover{transform:translateY(-2px);box-shadow:var(--edge),var(--shadow-pop)}
.crow:active,.evt:active,.stop:active,.aprow:active{transform:translateY(0) scale(.992)}

/* ===== Sidebar: selezione con tinta d'accento (stile Finder) ===== */
.sb-item.on{background:color-mix(in srgb, var(--acc,#0A84FF) 18%, var(--surface-press))}
.sb-item.on .ic{box-shadow:inset 0 .5px 0 rgba(255,255,255,.45),0 1px 5px color-mix(in srgb, var(--acc,#0A84FF) 45%, transparent)}
.sb-item:not(.on):hover{transform:translateX(1px)}
@media (prefers-color-scheme: dark){
  .sb-item.on{background:color-mix(in srgb, var(--acc,#0A84FF) 26%, transparent)}
}

/* ===== Segmented control: più reattivo ===== */
.fseg button{transition:background .28s var(--ease-apple),color .2s ease,transform .2s var(--spring-pop)}
.fseg button:active{transform:scale(.93)}
.fseg button.on{box-shadow:0 1px 4px rgba(12,16,40,.14),inset 0 0 0 .5px rgba(255,255,255,.5)}

/* ===== Semafori titlebar: scala morbida ===== */
.lights button{transition:transform .3s var(--spring-pop),filter .15s ease}
.lights button:hover{transform:scale(1.14)}
.lights button:active{transform:scale(.82)}

/* ===== Badge e pin: pop d'ingresso ===== */
@keyframes badgePop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.win.open .fbadge,.win.open .apic,.win.open .pin,.win.open .favico{animation:badgePop .5s var(--spring-pop) .12s both}
@keyframes pinDrop{from{opacity:0;transform:translate(-50%,-132%)}to{opacity:1;transform:translate(-50%,-100%)}}
.win.open .mpin{animation:pinDrop .62s var(--spring-pop) .2s both}
.win.open .mpin:nth-of-type(2){animation-delay:.42s}
.win.open .mpin:nth-of-type(3){animation-delay:.62s}

/* ===== Dock: ombre icone più morbide e profonde ===== */
.dock .ai img{filter:drop-shadow(0 3px 7px rgba(0,0,0,.30))}
.dock .ai:active img{filter:drop-shadow(0 1px 3px rgba(0,0,0,.30)) brightness(.9)}
.dapp .dot{height:5px;width:5px;bottom:-7px;box-shadow:0 0 5px rgba(255,255,255,.7)}

/* ===== Pulsanti contatto e Centro di Controllo: feedback più vivo ===== */
.cact{transition:transform .35s var(--spring-pop),box-shadow .25s ease}
.cact:hover{transform:translateY(-3px) scale(1.03)}
.ccrow,.ccmini,.ccfocus{transition:transform .25s var(--spring-pop),background .2s ease,color .2s ease}
.ccrow:active{transform:scale(.97)}

/* ===== Stat calendario: micro-lift ===== */
.cstat{transition:transform .35s var(--spring-pop),box-shadow .25s ease}
.cstat:hover{transform:translateY(-2px);box-shadow:var(--edge),var(--shadow-pop)}

/* ===== Chip e pillole: hover pulito ===== */
.xchips span,.getb{transition:transform .25s var(--spring-pop),box-shadow .2s ease}
.xchips span:hover,.getb:hover{transform:translateY(-1px);box-shadow:var(--edge),var(--shadow-pop)}

/* ===== Focus ring d'accento (precisione e accessibilità) ===== */
:focus-visible{outline:2px solid color-mix(in srgb, var(--acc,#0A84FF) 70%, transparent);outline-offset:2px;border-radius:8px}
.titlebar:focus-visible,.lights button:focus-visible,.dock .ai:focus-visible{outline:none}

/* ===== Scrollbar: più discreta, accentua all'hover ===== */
.wbody::-webkit-scrollbar-thumb,.main::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb,.mpanel::-webkit-scrollbar-thumb{transition:background .2s ease}
.wbody:hover::-webkit-scrollbar-thumb,.main:hover::-webkit-scrollbar-thumb{background:rgba(127,127,135,.5)}
#w-fine .nav-map::-webkit-scrollbar{display:none}

/* ===== Menubar e tooltip dock: transizioni leggermente più fluide ===== */
.dapp .tip{transition:opacity .2s ease,transform .4s var(--spring-pop)}

/* ===== Navigatore "Mappe" — navigazione turn-by-turn stile Apple Maps ===== */
#w-fine .nav{position:relative;flex:1;min-height:580px;overflow:hidden;background:#e7e3d8;border-radius:0 0 23px 23px;isolation:isolate}
#w-fine .nav::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.13),transparent 20%,transparent 70%,rgba(0,0,0,.17));mix-blend-mode:soft-light}
#w-fine .nav-map{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#w-fine #nav-cam{transition:transform 1.25s var(--ease-apple);transform-box:fill-box;transform-origin:0 0}
#w-fine #nav-puck{transition:transform 1.15s var(--ease-apple)}
#w-fine #nav-route-done{transition:stroke-dashoffset 1.15s var(--ease-apple)}
#w-fine #nav-route{filter:drop-shadow(0 1px 3px rgba(0,80,170,.32))}

#w-fine .mk{transition:opacity .35s ease,filter .35s ease,transform .35s var(--spring-pop)}
#w-fine .mk:not(.on){opacity:.6;filter:saturate(.72)}
#w-fine .mk.done{opacity:.92;filter:saturate(.9)}
#w-fine .mk.on{opacity:1;filter:drop-shadow(0 4px 9px rgba(0,0,0,.2))}
#w-fine .mlab{fill:#1d1d1f;font-size:14px;font-weight:700;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;paint-order:stroke;stroke:rgba(255,255,255,.95);stroke-width:4px;stroke-linejoin:round;letter-spacing:-.015em}
#w-fine .mlab.small{font-size:12px;font-weight:750}
#w-fine .mnum{fill:#fff;font-size:12px;font-weight:800;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif}
#w-fine .nav button{-webkit-appearance:none;appearance:none;font-family:inherit;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* ===== Riquadro manovra in alto a sinistra (al posto dei km: anni / mesi / giorni) ===== */
#w-fine .nav-stack{position:absolute;left:16px;top:16px;width:344px;max-width:calc(100% - 116px);z-index:6;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
#w-fine .nav-bar{width:100%;display:flex;gap:14px;padding:15px 17px 16px;border-radius:21px;color:#fff;background:linear-gradient(180deg,#2fb551,#15913a);box-shadow:0 20px 48px rgba(8,82,30,.36),inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.34);animation:navBarIn .5s var(--ease-apple) both}
@keyframes navBarIn{from{opacity:0;transform:translateX(-16px) scale(.97);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
#w-fine .nav-man{flex:none;width:52px;height:52px;display:flex;align-items:center;justify-content:center;color:#fff}
#w-fine .nav-man svg{width:48px;height:48px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}
#w-fine .nav-meta{min-width:0;flex:1}
#w-fine .nav-kick{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:1px}
#w-fine .nav-dist{font-size:32px;font-weight:800;line-height:1.02;letter-spacing:-.03em;text-shadow:0 1px 2px rgba(0,0,0,.16)}
#w-fine .nav-instr{margin-top:3px;font-size:16px;font-weight:750;line-height:1.18;letter-spacing:-.02em;color:#fff}
#w-fine .nav-expl{margin:9px 0 0;font-size:12.8px;line-height:1.5;font-weight:520;color:rgba(255,255,255,.95);letter-spacing:-.004em}

/* ===== Mini-banner "Poi" (manovra successiva) ===== */
#w-fine .nav-then{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:14px;color:#fff;font-size:13px;font-weight:600;line-height:1.2;background:linear-gradient(180deg,#15833a,#0e6c2f);box-shadow:0 12px 28px rgba(8,70,26,.3),inset 0 0 0 1px rgba(255,255,255,.14);max-width:100%;animation:navBarIn .5s var(--ease-apple) .06s both}
#w-fine .nav-then-l{font-weight:800;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.78)}
#w-fine .nav-then-ic{flex:none;display:inline-flex;width:20px;height:20px;color:#fff}
#w-fine .nav-then-ic svg{width:20px;height:20px;display:block}
#w-fine .nav-then b{font-weight:800}
#w-fine .nav-then-sep{opacity:.55}
#w-fine .nav-then>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== Controlli mappa (zoom + bussola) ===== */
#w-fine .nav-ctrl{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;gap:10px;align-items:center;z-index:6}
#w-fine .nav-zoom{display:flex;flex-direction:column;width:38px;border-radius:12px;overflow:hidden;background:rgba(246,246,248,.74);backdrop-filter:blur(14px) saturate(1.65);-webkit-backdrop-filter:blur(14px) saturate(1.65);box-shadow:0 10px 30px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.55)}
#w-fine .nav-zoom button{width:38px;height:38px;border:0;background:transparent;color:#1d1d1f;font-size:21px;font-weight:420;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .18s ease,transform .22s var(--spring-pop)}
#w-fine .nav-zoom button:hover{background:rgba(118,118,128,.14)}
#w-fine .nav-zoom button:active{background:rgba(118,118,128,.24);transform:scale(.92)}
#w-fine .nav-zoom span{height:1px;background:rgba(60,60,67,.16);margin:0 7px}
#w-fine .nav-comp{width:38px;height:38px;border-radius:50%;border:0;background:rgba(246,246,248,.74);backdrop-filter:blur(14px) saturate(1.65);-webkit-backdrop-filter:blur(14px) saturate(1.65);box-shadow:0 10px 30px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;transition:transform .28s var(--spring-pop),background .18s ease}
#w-fine .nav-comp:hover{background:rgba(255,255,255,.82)}
#w-fine .nav-comp:active{transform:scale(.9)}
#w-fine .nav-comp svg{width:20px;height:20px;display:block}

/* ===== Foglio di arrivo in basso ===== */
#w-fine .nav-sheet{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:16px;padding:12px 14px 12px 18px;border-radius:20px;background:rgba(248,248,250,.78);backdrop-filter:blur(16px) saturate(1.7);-webkit-backdrop-filter:blur(16px) saturate(1.7);box-shadow:0 18px 50px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.55);color:#1d1d1f;z-index:6;animation:navSheetIn .55s var(--ease-apple) both}
@keyframes navSheetIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
#w-fine .nav-sheet-main{min-width:0}
#w-fine .nav-eta{display:block;font-size:19px;font-weight:800;letter-spacing:-.025em;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#w-fine .nav-sheet small{display:block;margin-top:2px;font-size:12px;font-weight:600;color:#6e6e73;letter-spacing:-.005em}
#w-fine .nav-dots{display:flex;gap:9px;margin-left:auto}
#w-fine .nav-dot{width:11px;height:11px;border-radius:50%;border:0;padding:0;background:rgba(120,120,128,.32);transition:transform .25s var(--spring-pop),background .2s ease}
#w-fine .nav-dot:hover{transform:scale(1.2)}
#w-fine .nav-dot.done{background:#34C759}
#w-fine .nav-dot.on{background:#0A84FF;transform:scale(1.3)}
#w-fine .nav-end{flex:none;padding:9px 20px;border:0;border-radius:13px;background:#FF3B30;color:#fff;font-size:14.5px;font-weight:750;letter-spacing:-.01em;box-shadow:0 6px 16px rgba(255,59,48,.34);transition:transform .22s var(--spring-pop),filter .18s ease}
#w-fine .nav-end:hover{filter:brightness(1.06)}
#w-fine .nav-end:active{transform:scale(.93)}

@media (max-width:760px){
  #w-fine .nav{min-height:440px}
  #w-fine .nav-stack{width:300px;max-width:calc(100% - 92px)}
  #w-fine .nav-dist{font-size:28px}
}
/* ============================================================
   index.php — SCHERMATA DI BLOCCO IN STILE macOS
   - sfondo video (assets/lock.mp4, poster bg.png)
   - orologio live, utente "Filippo Corsini" con foto
   - preloader col logo della scuola: blocca finché gli asset
     non sono caricati completamente
   Backend invariato (POST nome + codice → login.php → hub.php).
   ============================================================ */
:root {
  --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --spring: cubic-bezier(0.3, 1.3, 0.5, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ok: #34C759;
  --err: #FF4D4D;
}
body.login-screen * { margin: 0; padding: 0; box-sizing: border-box; }
body.login-screen, body.login-screen { height: 100%; }
body.login-screen {
  font-family: var(--font);
  color: #fff;
  background: #000;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.login-screen.demo { overflow-y: auto; }

/* ------------------------------------------------------------
   PRELOADER — logo della scuola + barra (stile boot di hub.php)
   Visibile subito all'arrivo sul sito; sfuma solo a fine caricamento.
   ------------------------------------------------------------ */
body.login-screen #boot {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 46px;
  background: #000;
  transition: opacity 0.7s ease;
}
body.login-screen #boot.done { opacity: 0; pointer-events: none; }
body.login-screen #boot img { height: 96px; border-radius: 18px; animation: bootIn 0.9s var(--spring) both; }
body.login-screen #boot .bbar {
  width: 230px; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.22);
  animation: bootIn 0.9s var(--spring) 0.3s both;
}
body.login-screen #boot .bbar span {
  display: block; width: 0; height: 100%; border-radius: inherit; background: #fff;
  transition: width 0.35s var(--ease);
}
body.login-screen @keyframes bootIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }

/* ------------------------------------------------------------
   SFONDO VIDEO + velature per la leggibilità
   ------------------------------------------------------------ */
body.login-screen .wallpaper {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.1s var(--ease), filter 0.9s var(--ease);
  z-index: 0;
  will-change: transform, filter;
  background: #0a1626;
}
/* leggera vignettatura + dim in alto e in basso, come su macOS */
body.login-screen .scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 64%, rgba(0,0,0,0.28) 100%),
    radial-gradient(120% 80% at 50% 84%, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 60%);
}

/* ------------------------------------------------------------
   MENU BAR (sottile, translucida)
   ------------------------------------------------------------ */
body.login-screen .menubar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 28px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 0 16px;
  color: rgba(255,255,255,0.95);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}
body.login-screen .menubar .mb-item { display: flex; align-items: center; }
body.login-screen .menubar .lang {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
body.login-screen .menubar svg { display: block; }

/* ------------------------------------------------------------
   STRUTTURA DEL LOCK SCREEN
   ------------------------------------------------------------ */
body.login-screen .lock {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100dvh;
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease), filter 0.7s var(--ease);
}

/* Orologio — ancorato in alto, centrato */
body.login-screen .clock {
  position: absolute;
  top: 8.5vh;
  left: 0; right: 0;
  text-align: center;
  user-select: none;
}
body.login-screen .clock .date {
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  margin-bottom: 2px;
  opacity: 0.98;
}
body.login-screen .clock .time {
  font-size: clamp(76px, 12vw, 138px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 18px rgba(0,0,0,0.28);
}

/* Cluster utente — ancorato in basso, centrato */
body.login-screen .user {
  position: absolute;
  left: 0; right: 0;
  bottom: 9.5vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.login-screen .avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(180deg, #dcdce1 0%, #a6a6ad 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.3),
    inset 0 0 0 0.5px rgba(255,255,255,0.55);
  margin-bottom: 12px;
}
body.login-screen .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.login-screen .avatar-mono {
  display: none;
  align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 27px; font-weight: 600; letter-spacing: 0.01em;
  color: #fff;
}
body.login-screen .avatar.no-photo { background: linear-gradient(180deg, #8a8a92 0%, #5f5f66 100%); }
body.login-screen .avatar.no-photo .avatar-img { display: none; }
body.login-screen .avatar.no-photo .avatar-mono { display: flex; }
body.login-screen #form { display: flex; flex-direction: column; align-items: center; }
body.login-screen .name {
  text-align: center;
  font-family: var(--font);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.34);
  margin-bottom: 14px;
  user-select: none;
}

/* riga del campo password: pillola centrata + “?” a destra */
body.login-screen .pwd-wrap {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
body.login-screen .pwd {
  position: relative;
  display: flex;
  align-items: center;
  width: 232px;
  height: 34px;
  border-radius: 999px;
  padding: 0 4px 0 4px;
  background: rgba(255,255,255,0.17);
  border: 0.5px solid rgba(255,255,255,0.5);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.16),
    inset 0 0.5px 0 rgba(255,255,255,0.4),
    inset 0 -0.5px 0 rgba(0,0,0,0.06);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
body.login-screen .pwd:focus-within {
  background: rgba(255,255,255,0.24);
  border-color: rgba(255,255,255,0.7);
}
body.login-screen .pwd input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  padding: 0 24px;
  letter-spacing: 0.06em;
}
body.login-screen .pwd input::placeholder { color: rgba(255,255,255,0.88); font-weight: 500; letter-spacing: 0.005em; }
body.login-screen .pwd input::-ms-reveal { display: none; }

/* freccia di invio: compare solo quando c’è testo */
body.login-screen .go {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 26px;
  height: 26px;
  border: 0.5px solid rgba(255,255,255,0.45);
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%) scale(0.5);
  transition: opacity 0.25s var(--ease), transform 0.4s var(--spring), background 0.2s var(--ease);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.login-screen .pwd.has-text .go { opacity: 1; transform: translateY(-50%) scale(1); }
body.login-screen .go:hover { background: rgba(255,255,255,0.5); }
body.login-screen .go:active { transform: translateY(-50%) scale(0.9); }
body.login-screen .go svg { width: 14px; height: 14px; }

/* bottone “?” — a destra della pillola, senza spostarla dal centro */
body.login-screen .hint {
  position: absolute;
  top: 50%;
  left: calc(50% + 132px);
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0.5px solid rgba(255,255,255,0.42);
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  transition: background 0.2s var(--ease), transform 0.4s var(--spring);
}
body.login-screen .hint:hover { background: rgba(255,255,255,0.3); }
body.login-screen .hint:active { transform: translateY(-50%) scale(0.9); }

/* didascalia / hint / errore */
body.login-screen .caption {
  margin-top: 18px;
  height: 16px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  text-align: center;
  transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}
body.login-screen .caption.error { color: #ffd2d2; }

/* bottone “Apri il desktop” (solo modalità demo, dopo l’accesso) */
body.login-screen .enter-desktop {
  margin-top: 16px;
  border: 0.5px solid rgba(255,255,255,0.45);
  border-radius: 999px;
  padding: 9px 20px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  transition: background 0.2s var(--ease), transform 0.4s var(--spring), opacity 0.4s var(--ease);
  animation: rise 0.5s var(--spring) both;
}
body.login-screen .enter-desktop:hover { background: rgba(255,255,255,0.32); }
body.login-screen .enter-desktop:active { transform: scale(0.96); }
body.login-screen @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* shake del campo password — identico a macOS */
body.login-screen @keyframes shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-10px); }
  30% { transform: translateX(10px); }
  45% { transform: translateX(-8px); }
  60% { transform: translateX(8px); }
  75% { transform: translateX(-4px); }
  90% { transform: translateX(4px); }
}
body.login-screen .pwd.shake { animation: shake 0.5s var(--ease); }

/* entrata morbida del cluster (dopo il preloader) */
body.login-screen.ready .user, body.login-screen.ready .clock { animation: fadeUp 0.9s var(--ease) both; }
body.login-screen.ready .clock { animation-delay: 0.05s; }
body.login-screen.ready .user { animation-delay: 0.12s; }
body.login-screen @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* sblocco: dissolvenza del lock + leggero zoom dello sfondo */
body.login-screen.unlock .lock { opacity: 0; transform: scale(1.04); filter: blur(8px); pointer-events: none; }
body.login-screen.unlock .wallpaper { transform: scale(1.1); filter: brightness(1.05); }

/* ============================================================
   DEMO (?demo=1) — widget “dietro le quinte” in vetro macOS
   ============================================================ */
body.login-screen .demo-widget {
  display: none;
  position: relative;
  z-index: 4;
  width: min(390px, calc(100vw - 32px));
  margin: 0 auto;
  border-radius: 22px;
  padding: 18px 18px 14px;
  background: rgba(28,28,34,0.46);
  border: 0.5px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 50px -12px rgba(0,0,0,0.55), inset 0 0.5px 0 rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  color: #fff;
}
body.login-screen.demo .demo-widget {
  display: block;
  margin-top: calc(100vh - 250px);
  margin-bottom: 40px;
  animation: rise 0.7s var(--spring) 0.2s both;
}
body.login-screen .demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px;
  margin-bottom: 14px;
}
body.login-screen .demo-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
}
body.login-screen .dcount {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 3px 10px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.4s var(--spring);
}
body.login-screen .dcount.show { opacity: 1; transform: scale(1); }
body.login-screen .schema { display: flex; align-items: flex-start; gap: 8px; padding: 0 4px; margin-bottom: 16px; }
body.login-screen .node { display: flex; flex-direction: column; align-items: center; gap: 7px; transition: transform 0.5s var(--spring); }
body.login-screen .node .nico {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 0.5px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  transition: color 0.3s ease, box-shadow 0.35s ease, background 0.3s ease;
}
body.login-screen .node .nico svg { width: 19px; height: 19px; }
body.login-screen .node .nlab {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: rgba(255,255,255,0.55); transition: color 0.3s ease;
}
body.login-screen .node.on, body.login-screen .node.ko { transform: translateY(-2px); }
body.login-screen .node.on .nico, body.login-screen .node.ko .nico { color: #fff; background: rgba(255,255,255,0.16); }
body.login-screen .node.on .nlab, body.login-screen .node.ko .nlab { color: #fff; }
body.login-screen .node.on .nico { box-shadow: 0 0 0 1.5px rgba(52,199,89,0.65), 0 4px 18px -2px rgba(52,199,89,0.45); }
body.login-screen .node.ko .nico { box-shadow: 0 0 0 1.5px rgba(255,77,77,0.6), 0 4px 18px -2px rgba(255,77,77,0.4); }
body.login-screen .wire { position: relative; flex: 1; height: 1.5px; border-radius: 1px; background: rgba(255,255,255,0.16); margin-top: 23px; }
body.login-screen .wire .pk {
  position: absolute; top: 50%; left: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 8px rgba(52,199,89,0.6);
  transform: translate(-50%, -50%); opacity: 0;
}
body.login-screen .wire.ko .pk { background: var(--err); box-shadow: 0 0 8px rgba(255,77,77,0.6); }
body.login-screen .wire.fwd .pk { animation: pkFwd 1.3s var(--ease) infinite; }
body.login-screen .wire.rev .pk { animation: pkRev 1.3s var(--ease) infinite; }
body.login-screen @keyframes pkFwd { 0% { left: 0; opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
body.login-screen @keyframes pkRev { 0% { left: 100%; opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { left: 0; opacity: 0; } }
body.login-screen .dstep {
  background: rgba(255,255,255,0.08);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 14px 16px;
  min-height: 78px;
  transition: opacity 0.3s var(--ease), transform 0.45s var(--spring), filter 0.3s var(--ease);
}
body.login-screen .dstep.swap { opacity: 0; transform: translateY(6px) scale(0.98); filter: blur(4px); }
body.login-screen .dhead { display: flex; align-items: center; gap: 8px; }
body.login-screen .ddot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); flex-shrink: 0; transition: background 0.3s ease, box-shadow 0.3s ease; }
body.login-screen .ddot.ok { background: var(--ok); box-shadow: 0 0 8px rgba(52,199,89,0.55); }
body.login-screen .ddot.ko { background: var(--err); box-shadow: 0 0 8px rgba(255,77,77,0.5); }
body.login-screen .dt { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; flex: 1; color: #fff; }
body.login-screen .dms {
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.12);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
body.login-screen .dd { font-size: 12.5px; color: rgba(255,255,255,0.66); font-weight: 400; margin-top: 4px; padding-left: 16px; line-height: 1.5; }
body.login-screen #dsql {
  margin: 8px 0 2px 16px;
  background: rgba(0,0,0,0.28);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.55; color: #eaeaea;
  white-space: pre-wrap; word-break: break-word;
}
body.login-screen .ctrl { display: flex; align-items: center; gap: 7px; padding: 12px 2px 2px; }
body.login-screen .cbtn {
  width: 36px; height: 36px;
  border: 0.5px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.4s var(--spring), background 0.3s ease, opacity 0.3s ease;
}
body.login-screen .cbtn:hover { background: rgba(255,255,255,0.2); }
body.login-screen .cbtn:active { transform: scale(0.88); }
body.login-screen .cbtn:disabled { opacity: 0.32; cursor: default; }
body.login-screen .cbtn svg { width: 13px; height: 13px; }
body.login-screen .cbtn.main { width: 44px; height: 44px; }
body.login-screen .cbtn.main svg { width: 16px; height: 16px; }
body.login-screen .dots { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; padding-right: 4px; }
body.login-screen .dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); cursor: pointer; transition: background 0.3s ease, transform 0.4s var(--spring); }
body.login-screen .dots i:hover { background: rgba(255,255,255,0.45); }
body.login-screen .dots i.done { background: rgba(255,255,255,0.5); }
body.login-screen .dots i.on { background: var(--ok); transform: scale(1.4); }
body.login-screen @media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ------------------------------------------------------------
   CURSORI — i cursori reali di macOS (apple_cursor di ful1e5, MIT)
   ------------------------------------------------------------ */
body.login-screen { cursor: url("assets/cursors/arrow.svg") 9 4, default; }
body.login-screen button, body.login-screen a, body.login-screen .dots i { cursor: url("assets/cursors/pointer.svg") 10 5, pointer; }
body.login-screen input, body.login-screen textarea { cursor: url("assets/cursors/text.svg") 14 14, text; }

/* ============================================================
   LOGIN — rifinitura: vetro più materico, meno bianco, unlock rapido
   ============================================================ */
body.login-screen .pwd {
  width: 246px;
  height: 36px;
  padding: 0 5px;
  background: linear-gradient(180deg, rgba(38,38,42,0.34), rgba(255,255,255,0.12));
  border-color: rgba(255,255,255,0.34);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -1px 0 rgba(0,0,0,0.12);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}
body.login-screen .pwd:focus-within {
  background: linear-gradient(180deg, rgba(48,48,54,0.42), rgba(255,255,255,0.16));
  border-color: rgba(255,255,255,0.52);
  box-shadow:
    0 12px 34px rgba(0,0,0,0.22),
    0 0 0 3px rgba(10,132,255,0.24),
    inset 0 1px 0 rgba(255,255,255,0.28);
}
body.login-screen .pwd input { font-size: 13.5px; letter-spacing: 0.035em; }
body.login-screen .pwd input::placeholder { color: rgba(255,255,255,0.76); }
body.login-screen .go {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.32);
}
body.login-screen .pwd.has-text .go { background: rgba(10,132,255,0.92); border-color: rgba(255,255,255,0.18); }
body.login-screen .hint { background: rgba(28,28,32,0.28); border-color: rgba(255,255,255,0.28); }
body.login-screen .caption { color: rgba(255,255,255,0.76); }
body.login-screen.unlock .lock { opacity: 0; transform: scale(1.018); filter: blur(4px); }
body.login-screen.unlock .wallpaper { transform: scale(1.055); filter: brightness(0.96) saturate(1.06); }
@media (prefers-reduced-motion: no-preference) {
  body.login-screen .lock { transition-duration: 0.46s; }
  body.login-screen .wallpaper { transition-duration: 0.5s; }
}


/* ============================================================
   APP CONTENT SYSTEM — contenuti applicazioni con identità coerente
   ============================================================ */
.iox { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.iox-head { display: flex; align-items: center; gap: 14px; padding: 15px; border-radius: 20px; background: color-mix(in srgb, var(--orange) 10%, var(--surface)); box-shadow: var(--edge); }
.iox-head .cavatar { width: 68px; height: 68px; }
.iox-head .cid { min-width: 0; }
.iox-head .cid h2 { font-size: 23px; line-height: 1.05; }
.iox-head .cid p { max-width: 58ch; }
.iox-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.iox-stat { padding: 11px 12px; border-radius: 16px; background: var(--surface); box-shadow: var(--edge); text-align: center; }
.iox-stat b { display:block; font-size: 20px; font-weight: 850; letter-spacing: -0.03em; color: var(--acc); }
.iox-stat small { display:block; margin-top: 2px; font-size: 10px; font-weight: 800; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; }
.iox-cols { display: grid; grid-template-columns: 1.05fr .95fr; gap: 12px; }
.iox-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.iox-hero, .iox-block { border-radius: 20px; background: var(--surface); box-shadow: var(--edge), 0 2px 8px rgba(12,16,40,0.06); padding: 16px; }
.iox-hero { background: linear-gradient(145deg, color-mix(in srgb, var(--orange) 34%, var(--surface-press)), var(--surface)); }
.iox-hero h3 { margin: 5px 0 6px; font-size: 21px; font-weight: 850; letter-spacing: -0.035em; line-height: 1.08; }
.iox-hero p, .iox-tx p, .iox-card p { color: var(--muted); font-size: 12.5px; font-weight: 520; line-height: 1.55; }
.iox-lbl { margin-bottom: 10px; font-size: 10.5px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.iox-row { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.iox-row:first-of-type { border-top: 0; padding-top: 0; }
.iox-k { color: var(--kc, var(--acc)); font-size: 11px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.iox-tx b, .iox-card b { display:block; font-size: 13.5px; font-weight: 780; letter-spacing: -0.015em; }
.iox-card { position: relative; margin-top: 8px; padding: 12px 13px 12px 15px; border-radius: 16px; background: color-mix(in srgb, var(--kc, var(--acc)) 9%, var(--surface)); box-shadow: var(--edge); overflow: hidden; }
.iox-card::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px; border-radius:0 3px 3px 0; background: var(--kc, var(--acc)); }
.iox-tag { display:inline-flex; margin-bottom: 5px; font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; color: var(--kc, var(--acc)); }

.mv { position: relative; flex: 1; min-height: 580px; overflow: hidden; border-radius: 0 0 24px 24px; background:#e7e3d8; isolation:isolate; }
.mv::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 23%,transparent 70%,rgba(0,0,0,.16)); mix-blend-mode:soft-light; }
.mv-map { position:absolute; inset:0; width:100%; height:100%; cursor: inherit; }
#mv-cam { transition: transform .78s var(--spring-soft); transform-origin: 0 0; }
#mv-puck, #mv-trav { transition: transform .68s var(--spring-soft), stroke-dashoffset .68s var(--spring-soft); }
.mk { transition: opacity .25s ease, filter .25s ease, transform .3s var(--spring); }
.mk:not(.on) { opacity:.62; filter:saturate(.76); }
.mk.on { opacity:1; filter:drop-shadow(0 4px 10px rgba(0,0,0,.24)); }
.mlab { fill:#1d1d1f; font-size:14px; font-weight:800; font-family:var(--font); paint-order:stroke; stroke:rgba(255,255,255,.94); stroke-width:4px; stroke-linejoin:round; }
.mlab.small { font-size:12px; }
.mnum { fill:#fff; font-size:12px; font-weight:850; font-family:var(--font); }
.dir { position:absolute; left:16px; top:16px; bottom:16px; z-index:6; width:320px; max-width:calc(100% - 92px); display:flex; flex-direction:column; border-radius:22px; color:#1d1d1f; background:rgba(248,248,250,.76); -webkit-backdrop-filter:blur(16px) saturate(1.75); backdrop-filter:blur(16px) saturate(1.75); box-shadow:0 20px 56px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.58), inset 0 1px 0 rgba(255,255,255,.72); overflow:hidden; }
.dir-hd { display:flex; align-items:center; gap:12px; padding:14px 14px 12px; border-bottom:1px solid rgba(60,60,67,.12); }
.dir-ti { min-width:0; }
.dir-ti b { display:block; font-size:17px; font-weight:850; letter-spacing:-.03em; }
.dir-ti small { display:block; margin-top:2px; font-size:11.5px; font-weight:650; color:#6e6e73; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dir-x { margin-left:auto; width:28px; height:28px; border:0; border-radius:50%; background:rgba(118,118,128,.14); color:#3a3a3c; font:700 13px/1 var(--font); }
.dir-list { padding:9px; display:flex; flex-direction:column; gap:5px; overflow:auto; }
.dir-row { width:100%; display:flex; align-items:center; gap:10px; border:0; border-radius:14px; padding:8px; background:transparent; color:inherit; font:inherit; text-align:left; transition:background .18s ease, transform .25s var(--spring); }
.dir-row:hover { background:rgba(118,118,128,.12); }
.dir-row:active { transform:scale(.985); }
.dir-row.on { background:rgba(10,132,255,.14); }
.dir-pin { flex:none; width:25px; height:25px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--c,#8E8E93); color:#fff; font-size:11px; font-weight:850; box-shadow:inset 0 1px 0 rgba(255,255,255,.36), 0 2px 8px rgba(0,0,0,.18); }
.dir-txt { min-width:0; display:flex; flex-direction:column; }
.dir-txt b { font-size:13px; font-weight:780; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dir-txt small { font-size:11px; font-weight:650; color:#6e6e73; }
.dir-card { margin:0 12px 10px; padding:13px 14px; border-radius:16px; background:rgba(255,255,255,.62); box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 2px 10px rgba(0,0,0,.06); }
.kk { display:block; margin-bottom:5px; font-size:10.5px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; color:#0A84FF; }
.dir-card p { margin:0; font-size:12.6px; line-height:1.5; font-weight:560; color:#3a3a3c; }
.dir-foot { margin-top:auto; display:flex; align-items:center; gap:12px; padding:12px 14px; border-top:1px solid rgba(60,60,67,.12); }
.dir-foot .big { display:block; font-size:20px; font-weight:850; letter-spacing:-.03em; }
.dir-foot small { display:block; font-size:11px; color:#6e6e73; font-weight:650; }
.dir-hint { margin-left:auto; max-width:150px; font-size:11.2px; font-weight:720; color:#0A84FF; text-align:right; }
.mv-ctrl { position:absolute; right:14px; top:14px; z-index:6; display:flex; flex-direction:column; align-items:center; gap:10px; }
.mv-zoom { display:flex; flex-direction:column; width:38px; overflow:hidden; border-radius:13px; background:rgba(246,246,248,.76); -webkit-backdrop-filter:blur(14px) saturate(1.65); backdrop-filter:blur(14px) saturate(1.65); box-shadow:0 10px 30px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.58); }
.mv-zoom button { width:38px; height:38px; border:0; background:transparent; color:#1d1d1f; font-size:21px; font-weight:420; }
.mv-zoom button:hover, .mv-comp:hover { background:rgba(255,255,255,.82); }
.mv-zoom span { height:1px; margin:0 7px; background:rgba(60,60,67,.16); }
.mv-comp { width:38px; height:38px; border:0; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(246,246,248,.76); -webkit-backdrop-filter:blur(14px) saturate(1.65); backdrop-filter:blur(14px) saturate(1.65); box-shadow:0 10px 30px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.58); }
.mv-comp svg { width:20px; height:20px; }

/* Spotlight — macOS 14 style */
.spot{position:fixed;inset:0;z-index:4700;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:19.5vh;background:rgba(0,0,0,.10);backdrop-filter:blur(3px) saturate(1.08);-webkit-backdrop-filter:blur(3px) saturate(1.08);opacity:0;pointer-events:none;transition:opacity .18s ease,backdrop-filter .22s ease}
.spot.on{opacity:1;pointer-events:auto;backdrop-filter:blur(9px) saturate(1.25);-webkit-backdrop-filter:blur(9px) saturate(1.25)}
.spot-shell{width:min(560px,90vw);transform:translateY(-18px) scale(.965);opacity:0;filter:blur(8px);transition:transform .42s cubic-bezier(.18,1.16,.32,1),opacity .22s ease,filter .32s ease}
.spot.on .spot-shell{transform:none;opacity:1;filter:none}
.spot-box{height:58px;display:flex;align-items:center;gap:13px;padding:0 18px;border-radius:18px;background:linear-gradient(180deg,rgba(31,93,133,.78),rgba(19,63,99,.74));border:1px solid rgba(210,238,255,.28);box-shadow:0 24px 76px rgba(0,0,0,.38),0 2px 9px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.18);backdrop-filter:blur(34px) saturate(1.9);-webkit-backdrop-filter:blur(34px) saturate(1.9);overflow:hidden;position:relative}
.spot-box::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 18% 0%,rgba(255,255,255,.22),transparent 42%),linear-gradient(90deg,rgba(255,255,255,.04),transparent 36%,rgba(255,255,255,.05));pointer-events:none}
.spot-icon-wrap{width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.25));transform:scale(.9);opacity:.92;transition:transform .36s cubic-bezier(.3,1.36,.46,1),opacity .2s ease}
.spot.on .spot-icon-wrap{transform:scale(1);opacity:1}.spot-icon-wrap img{width:30px;height:30px;object-fit:contain;display:block;border-radius:8px}
.spot-q{position:relative;z-index:1;display:flex;align-items:center;min-width:0;flex:1;height:100%;font-size:23px;font-weight:560;letter-spacing:-.025em;color:#f7fbff;text-shadow:0 1px 10px rgba(0,0,0,.28)}
.spot-type{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spot-ghost{position:absolute;left:0;color:rgba(247,251,255,.92);transition:opacity .18s ease;font-weight:560}.spot-cur{display:inline-block;width:2px;height:28px;margin-left:2px;background:rgba(255,255,255,.88);border-radius:1px;box-shadow:0 0 9px rgba(255,255,255,.45);animation:spotcur 1.05s steps(1) infinite;opacity:0}.spot.typing .spot-cur,.spot.ready .spot-cur{opacity:1}@keyframes spotcur{50%{opacity:0}}
.spot-result{display:flex;align-items:center;gap:12px;margin-top:8px;padding:10px 12px;border-radius:14px;background:rgba(24,28,33,.58);border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 38px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.10);backdrop-filter:blur(24px) saturate(1.7);-webkit-backdrop-filter:blur(24px) saturate(1.7);opacity:0;transform:translateY(-8px) scale(.985);filter:blur(3px);transition:opacity .24s ease,transform .34s cubic-bezier(.22,1,.36,1),filter .24s ease}
.spot.ready .spot-result{opacity:1;transform:none;filter:none}.spot-result-icon{width:38px;height:38px;border-radius:10px;overflow:hidden;flex:none;box-shadow:0 4px 14px rgba(0,0,0,.25)}.spot-result-icon img{width:100%;height:100%;object-fit:cover;display:block}.spot-result span{display:flex;flex-direction:column;min-width:0;flex:1}.spot-result b{font-size:14px;font-weight:750;color:#fff;letter-spacing:-.01em}.spot-result small{font-size:12px;color:rgba(255,255,255,.62);margin-top:2px}.spot-result em{font-style:normal;font-size:11px;font-weight:750;color:rgba(255,255,255,.58);padding:3px 7px;border-radius:7px;background:rgba(255,255,255,.08)}
.spot-sub{margin-top:14px;font-size:13px;font-weight:650;color:rgba(255,255,255,.9);text-shadow:0 1px 16px rgba(0,0,0,.55);opacity:0;transform:translateY(6px);transition:opacity .3s ease .10s,transform .3s ease .10s}.spot.on .spot-sub{opacity:1;transform:none}.spot.ready .spot-sub{opacity:.72}
/* Dettagli minori del desktop: blob wallpaper e voce Riavvia. */
.bg .b1, .bg .b2, .bg .b3 { display: none; }
.reboot svg { width: 14px; height: 14px; }

/* ============================================================
   NOTES REAL DARK — applicazione reale, allineata al sistema scuro
   ============================================================ */
.notes-real-window {
  border-radius: 24px !important;
  background: rgba(30,30,34,.74) !important;
  box-shadow: var(--shadow-win), inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
.notes-real-titlebar { height:44px; background:rgba(38,38,42,.66); border-bottom:1px solid rgba(255,255,255,.08); box-shadow:none; }
.notes-real-titlebar .wt { color:rgba(245,245,247,.72); font-size:13px; font-weight:700; }
.notes-real-app {
  height:min(680px, calc(100vh - 112px));
  display:grid;
  grid-template-columns: 190px 250px minmax(0,1fr);
  padding:0;
  overflow:hidden;
  background:#18181c;
  color:#f5f5f7;
  font-family:"SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
.notes-real-app button { font:inherit; }
.nr-sidebar { background:#202024; border-right:1px solid rgba(255,255,255,.075); padding:10px 10px 14px; overflow:hidden; }
.nr-toolbar-space { height:2px; }
.nr-folder { width:100%; height:32px; display:grid; grid-template-columns:24px minmax(0,1fr) 24px; align-items:center; gap:8px; border:0; border-radius:9px; padding:0 8px; background:transparent; color:rgba(245,245,247,.86); text-align:left; }
.nr-folder:hover { background:rgba(255,255,255,.055); }
.nr-folder.selected { background:#f2b200; color:#fff; }
.nr-folder b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:720; letter-spacing:-.02em; }
.nr-folder em { justify-self:end; font-style:normal; font-size:12px; color:rgba(245,245,247,.42); font-weight:650; }
.nr-folder.selected em { color:#fff; }
.nr-ico { width:20px; height:20px; display:flex; align-items:center; justify-content:center; color:currentColor; opacity:.92; }
.nr-ico svg, .nr-editor-toolbar svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nr-label { margin:18px 8px 8px; color:rgba(245,245,247,.36); font-size:11px; font-weight:800; letter-spacing:.04em; }
.nr-tags { display:flex; flex-wrap:wrap; gap:7px; padding:0 4px; }
.nr-tags button { border:0; border-radius:7px; padding:5px 9px; background:rgba(255,255,255,.09); color:rgba(245,245,247,.70); font-size:11.5px; font-weight:700; }
.nr-tags button.selected { background:#f2b200; color:#fff; }
.nr-list { background:#1c1c20; border-right:1px solid rgba(255,255,255,.075); padding:12px 10px; overflow:hidden; }
.nr-list-head { height:50px; display:flex; flex-direction:column; justify-content:center; padding:0 4px; }
.nr-list-head h2 { margin:0; font-size:18px; line-height:1.05; font-weight:820; letter-spacing:-.035em; color:#f5f5f7; }
.nr-list-head span { margin-top:2px; color:rgba(245,245,247,.46); font-size:12px; font-weight:600; }
.nr-items { display:flex; flex-direction:column; gap:6px; }
.nr-row { width:100%; min-height:74px; border:0; border-radius:10px; background:transparent; color:#f5f5f7; padding:10px 12px; text-align:left; display:grid; grid-template-columns:1fr auto; gap:2px 8px; }
.nr-row:hover { background:rgba(255,255,255,.055); }
.nr-row.active { background:#3a3a40; }
.nr-row b { font-size:13.2px; font-weight:780; letter-spacing:-.025em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nr-row span { color:rgba(245,245,247,.48); font-size:11px; font-weight:650; }
.nr-row p { grid-column:1/-1; margin:2px 0 0; color:rgba(245,245,247,.56); font-size:11.8px; line-height:1.32; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nr-editor { background:#16161a; overflow:hidden; display:flex; flex-direction:column; }
.nr-editor-toolbar { height:42px; flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(22,22,26,.86); }
.nr-editor-toolbar button { min-width:28px; height:28px; border:0; border-radius:8px; background:transparent; color:rgba(245,245,247,.62); display:flex; align-items:center; justify-content:center; padding:0 8px; font-size:12px; font-weight:760; }
.nr-editor-toolbar button:hover, .nr-editor-toolbar button.active { background:rgba(255,255,255,.08); color:#f5f5f7; }
.nr-toolbar-actions { display:flex; gap:6px; }
.nr-note { flex:1; overflow:hidden; padding:30px 44px 40px; }
.nr-note.switching { animation:nrSwitch .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes nrSwitch { from{ opacity:.76; transform:translateY(3px); filter:blur(1.5px);} to{opacity:1; transform:none; filter:blur(0);} }
.nr-note-date { text-align:center; color:rgba(245,245,247,.34); font-size:12px; font-weight:650; margin-bottom:18px; }
.nr-note-label { display:inline-flex; margin-bottom:10px; color:#f2b200; font-size:11px; font-weight:820; letter-spacing:.06em; text-transform:uppercase; }
.nr-note h2 { margin:0 0 14px; color:#f5f5f7; font-size:32px; line-height:1.05; font-weight:860; letter-spacing:-.045em; }
.nr-note-body { max-width:720px; display:grid; gap:10px; }
.nr-note-body p { margin:0; color:rgba(245,245,247,.78); font-size:14px; line-height:1.55; font-weight:520; }
.nr-note.large .nr-note-body p { font-size:15.5px; }
.nr-points { display:none; max-width:720px; margin-top:22px; padding:16px; border-radius:16px; background:rgba(255,255,255,.055); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
.nr-points.show { display:grid; gap:8px; }
.nr-points h3 { margin:0 0 2px; color:rgba(245,245,247,.92); font-size:14px; font-weight:800; letter-spacing:-.02em; }
.nr-points div { display:flex; align-items:center; gap:9px; color:rgba(245,245,247,.70); font-size:13px; font-weight:560; }
.nr-points span { width:7px; height:7px; border-radius:50%; background:#f2b200; flex:none; }
.notes-real-app.focus { grid-template-columns:minmax(0,1fr); }
.notes-real-app.focus .nr-sidebar, .notes-real-app.focus .nr-list { display:none; }
.notes-real-app.focus .nr-editor { min-width:0; }
.notes-real-app.focus .nr-note { overflow:auto; }
@media (max-width:900px){ .notes-real-app{grid-template-columns:230px minmax(0,1fr)} .nr-sidebar{display:none} }
@media (max-width:760px){ .notes-real-app{grid-template-columns:1fr}.nr-list{display:none}.nr-note{padding:26px 24px} }

/* ============================================================
   NOTES CREATIVE — polaroid e post-it in dark mode
   ============================================================ */
.nr-folder { grid-template-columns:24px minmax(0,1fr); }
.nr-folder em { display:none; }
.nr-note { padding:24px 34px 32px; overflow:hidden; }
.nr-note-date { text-align:left; margin:0 0 12px; }
.nr-note-layout { display:grid; grid-template-columns: minmax(210px, 300px) minmax(0, 1fr); gap:30px; align-items:start; max-width:860px; }
.nr-note-copy { min-width:0; }
.nr-note h2 { font-size:30px; }
.nr-note-body { gap:12px; }
.nr-note-body p { font-size:14.5px; line-height:1.58; }
.nr-points { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding:0; background:transparent; box-shadow:none; }
.nr-points.show { display:flex; }
.nr-points div { border-radius:999px; padding:7px 10px; background:rgba(242,178,0,.12); color:rgba(255,226,147,.92); box-shadow:inset 0 0 0 1px rgba(242,178,0,.18); font-size:12px; }
.nr-points div span { display:none; }
.nr-visual { position:relative; margin:2px 0 0; width:100%; border-radius:18px; transform:rotate(-1.4deg); filter:drop-shadow(0 22px 34px rgba(0,0,0,.34)); }
.nr-visual img { display:block; width:100%; height:260px; object-fit:cover; border-radius:12px 12px 8px 8px; }
.nr-visual figcaption { min-height:42px; display:flex; align-items:center; justify-content:center; padding:10px 12px 13px; color:#252525; font-family:"Comic Sans MS", "Bradley Hand", cursive; font-size:13px; font-weight:700; letter-spacing:-.02em; text-align:center; background:#f4eee0; border-radius:0 0 14px 14px; }
.nr-visual.polaroid, .nr-visual.photo-note { padding:10px 10px 0; background:#f4eee0; }
.nr-visual.polaroid.wide { transform:rotate(1.1deg); }
.nr-visual.polaroid.wide img { height:205px; }
.nr-visual.polaroid:not(.wide) img { object-fit:cover; object-position:top center; height:300px; }
.nr-visual-art { height:246px; border-radius:16px; display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; overflow:hidden; }
.nr-visual-art span { position:relative; z-index:1; color:#23210f; font-size:28px; line-height:1.05; font-weight:900; letter-spacing:-.045em; }
.nr-visual.postit { transform:rotate(1.5deg); }
.nr-visual.postit .nr-visual-art { background:linear-gradient(145deg,#ffe78a,#ffd866); box-shadow:inset 0 -18px 40px rgba(141,94,0,.14); }
.nr-visual.postit-code .nr-visual-art { background:linear-gradient(145deg,#d9f7ff,#8ee4ff); }
.nr-visual.postit-code .nr-visual-art::before { content:"{ }"; position:absolute; font-size:92px; font-weight:900; color:rgba(0,90,120,.14); }
.nr-visual.ticket .nr-visual-art { background:linear-gradient(135deg,#f4d3ff,#bde5ff); }
.nr-visual.ticket .nr-visual-art::before { content:""; position:absolute; inset:18px; border:2px dashed rgba(45,43,70,.28); border-radius:14px; }
.nr-visual.postit-orange .nr-visual-art { background:linear-gradient(145deg,#ffc079,#ff8f55); }
.nr-visual.poster .nr-visual-art { background:radial-gradient(circle at 50% 58%,#ead96e 0 30%,transparent 31%), linear-gradient(140deg,#eaf7ff,#fff); }
.nr-visual.poster .nr-visual-art::before { content:""; position:absolute; width:150px; height:190px; right:-34px; top:-8px; background:linear-gradient(90deg,#2d67b1 0 35%,#f1a300 36% 58%,#f8f8f8 59% 72%,#1f4779 73%); border-radius:50% 50% 46% 46%; transform:rotate(-15deg); opacity:.86; }
.nr-visual.cello .nr-visual-art { background:linear-gradient(145deg,#f0d0a4,#c97939); }
.nr-visual.cello .nr-visual-art::before { content:"♪"; position:absolute; font-size:120px; color:rgba(72,31,8,.16); }
.nr-visual.group .nr-visual-art { background:linear-gradient(145deg,#b8e8ff,#88d69a); }
.nr-visual.group .nr-visual-art::before { content:""; position:absolute; width:190px; height:190px; border-radius:50%; background:rgba(255,255,255,.18); }
@media (max-width:980px){ .nr-note-layout{grid-template-columns:1fr}.nr-visual{max-width:330px}.nr-note{overflow:auto} }

/* Link progetto e immagini reali aggiunte */
.nr-project-link {
  display:inline-flex; align-items:center; gap:7px; width:max-content; max-width:100%;
  margin:16px 0 0; padding:8px 12px; border-radius:999px;
  color:#101014; background:#f2b200; text-decoration:none; font-size:12.5px; font-weight:820;
  box-shadow:0 10px 24px rgba(242,178,0,.18), inset 0 1px 0 rgba(255,255,255,.35);
}
.nr-project-link::after { content:"↗"; font-size:12px; opacity:.75; }
.nr-project-link:hover { filter:brightness(1.08); transform:translateY(-1px); }
.nr-visual.musa img { object-fit:cover; object-position:center; background:#ddd; }

/* Slot immagini predisposti: se il file manca, resta un placeholder elegante */
.nr-visual .nr-fallback { display:none; }
.nr-visual.image-missing .nr-fallback { display:flex; height:246px; background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.04)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }
.nr-visual.image-missing .nr-fallback span { color:rgba(245,245,247,.72); font-size:18px; }
.nr-visual.image-missing::after { content:attr(data-missing); position:absolute; top:18px; right:18px; padding:5px 8px; border-radius:999px; background:rgba(242,178,0,.92); color:#171719; font-size:10px; font-weight:850; letter-spacing:.02em; }
.nr-visual.pcto img { object-position:center; }
.nr-visual.gpoi img { object-position:center; }
.nr-visual.volontariato img { object-position:center; }

/* ============================================================
   FINDER DARK — Applications grid ispirato alla reference macOS
   ============================================================ */
.finder-window {
  border-radius: 26px !important;
  background: rgba(30,30,34,.72) !important;
  box-shadow: var(--shadow-win), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
.finder-titlebar {
  position:relative; height:48px; padding:0 14px;
  background:rgba(34,34,38,.72); border-bottom:1px solid rgba(255,255,255,.075); box-shadow:none;
}
.finder-titlebar .wt { text-align:left; margin:0 0 0 226px; color:rgba(245,245,247,.88); font-size:14px; font-weight:790; }
.finder-nav { position:absolute; left:154px; top:8px; display:flex; gap:2px; }
.finder-nav button, .finder-viewbar button, .finder-actions button {
  width:32px; height:32px; border:0; border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:rgba(245,245,247,.72); background:transparent; transition:background .16s ease, color .16s ease, transform .22s var(--spring-pop);
}
.finder-nav button:hover, .finder-viewbar button:hover, .finder-actions button:hover { background:rgba(255,255,255,.08); color:#fff; }
.finder-nav button:active, .finder-viewbar button:active, .finder-actions button:active { transform:scale(.92); }
.finder-titlebar svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.finder-viewbar {
  position:absolute; left:52%; top:7px; transform:translateX(-50%); display:flex; gap:2px; padding:2px;
  border-radius:14px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.22);
}
.finder-viewbar button.on { background:rgba(255,255,255,.14); color:#fff; }
.finder-actions { position:absolute; right:12px; top:7px; display:flex; gap:6px; }
.finder-actions .more { font-size:13px; font-weight:850; letter-spacing:-.06em; }
.finder-app {
  height:min(610px, calc(100vh - 120px)); display:grid; grid-template-columns:170px minmax(0,1fr); overflow:hidden;
  background:#141417; color:#f5f5f7; font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}
.finder-sidebar {
  padding:12px 10px; background:rgba(255,255,255,.035); border-right:1px solid rgba(255,255,255,.075);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
}
.finder-side-top { margin-bottom:12px; }
.finder-side-label { margin:14px 10px 6px; color:rgba(245,245,247,.40); font-size:11px; font-weight:760; letter-spacing:-.01em; }
.finder-side-row {
  width:100%; height:30px; border:0; border-radius:8px; background:transparent; color:rgba(245,245,247,.84);
  display:flex; align-items:center; gap:8px; padding:0 9px; font:inherit; font-size:13px; font-weight:640; text-align:left;
}
.finder-side-row:hover { background:rgba(255,255,255,.065); }
.finder-side-row.selected { color:#fff; background:rgba(10,132,255,.22); box-shadow:inset 0 0 0 1px rgba(10,132,255,.20); }
.finder-side-row span { width:20px; height:20px; display:flex; align-items:center; justify-content:center; color:currentColor; }
.finder-side-row svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.finder-main { position:relative; overflow:hidden; padding:14px 22px 24px; background:rgba(18,18,21,.96); }
.finder-path { height:34px; display:flex; align-items:flex-start; justify-content:space-between; margin:0 4px 12px; }
.finder-path b { color:#f5f5f7; font-size:13px; font-weight:760; opacity:.72; }
.finder-path span { color:rgba(245,245,247,.35); font-size:12px; font-weight:650; }
.finder-grid { display:grid; grid-template-columns:repeat(5, minmax(96px,1fr)); gap:28px 24px; padding:8px 4px 120px; }
.finder-app-icon {
  position:relative; min-height:126px; border:0; border-radius:18px; background:transparent; color:#f5f5f7; font:inherit; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:10px 6px 8px;
  transition:background .18s ease, transform .28s var(--spring-pop);
}
.finder-app-icon:hover { background:rgba(255,255,255,.065); transform:translateY(-2px); }
.finder-app-icon:active { transform:scale(.96); }
.finder-img { width:58px; height:58px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.finder-img img { width:58px; height:58px; object-fit:contain; display:block; filter:drop-shadow(0 8px 12px rgba(0,0,0,.34)); }
.finder-app-icon b { max-width:112px; color:#f5f5f7; font-size:13px; line-height:1.14; font-weight:660; letter-spacing:-.025em; }
.finder-app-icon small { display:block; margin-top:3px; color:rgba(245,245,247,.45); font-size:11px; line-height:1.1; font-weight:580; }
.finder-hover-card {
  position:absolute; left:26px; right:26px; bottom:22px; min-height:66px; padding:14px 17px; border-radius:18px;
  background:rgba(42,42,48,.82); box-shadow:0 20px 48px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5);
  opacity:.72; transform:translateY(0); transition:opacity .18s ease, transform .25s var(--spring-pop);
}
.finder-hover-card b { display:block; color:#fff; font-size:14px; font-weight:820; letter-spacing:-.02em; margin-bottom:3px; }
.finder-hover-card span { color:rgba(245,245,247,.62); font-size:12.5px; line-height:1.35; font-weight:560; }
.finder-main:has(.finder-app-icon:hover) .finder-hover-card { opacity:1; transform:translateY(-2px); }
.finder-app-icon:hover ~ .finder-hover-card { opacity:1; }
.finder-app-icon::after {
  content:attr(data-desc); position:absolute; left:50%; top:100%; width:220px; transform:translate(-50%, 8px) scale(.98);
  padding:10px 12px; border-radius:12px; background:rgba(36,36,40,.94); color:rgba(245,245,247,.82);
  box-shadow:0 18px 36px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.08);
  font-size:11.5px; line-height:1.35; font-weight:560; text-align:left; pointer-events:none; opacity:0; z-index:4;
  transition:opacity .18s ease, transform .22s var(--spring-pop);
}
.finder-app-icon:hover::after { opacity:1; transform:translate(-50%, 2px) scale(1); }
@media (max-width:900px){ .finder-grid{grid-template-columns:repeat(4,minmax(92px,1fr));gap:22px 18px}.finder-titlebar .wt{margin-left:190px}.finder-nav{left:124px}.finder-viewbar{display:none} }
@media (max-width:720px){ .finder-app{grid-template-columns:1fr}.finder-sidebar{display:none}.finder-grid{grid-template-columns:repeat(3,minmax(86px,1fr))}.finder-titlebar .wt{margin-left:64px}.finder-nav{display:none}.finder-actions{right:8px} }

/* ============================================================
   PCTO Calendar — Calendar app mensile in dark mode
   ============================================================ */
.pcto-calendar-window{background:rgba(26,28,31,.78)!important;border-radius:24px!important;box-shadow:var(--shadow-win),inset 0 0 0 1px rgba(255,255,255,.08)!important}
.pcto-titlebar{height:44px;background:rgba(32,34,38,.72);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:none}.pcto-titlebar .wt{color:rgba(245,245,247,.78);font-size:13px;font-weight:760}
.pcto-cal-app{height:min(650px,calc(100vh - 120px));display:grid;grid-template-columns:218px minmax(0,1fr) 298px;overflow:hidden;background:#1c1d20;color:#f5f5f7;font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}.pcto-cal-app button{font:inherit}
.pcto-side{background:#171d24;border-right:1px solid rgba(255,255,255,.08);padding:16px 12px;overflow:hidden}.pcto-side-head{padding:0 6px 14px}.pcto-cloud{display:block;color:#8bbcff;font-size:11px;font-weight:760;margin-bottom:8px}.pcto-side-head h3{font-size:22px;line-height:1;font-weight:860;letter-spacing:-.04em}.pcto-side-head p{margin-top:7px;color:rgba(245,245,247,.52);font-size:12px;line-height:1.35;font-weight:560}
.pcto-year-card{width:100%;display:flex;gap:10px;align-items:flex-start;border:0;border-radius:10px;background:transparent;color:#f5f5f7;text-align:left;padding:9px 8px;margin-bottom:4px}.pcto-year-card:hover{background:rgba(255,255,255,.06)}.pcto-year-card.active{background:rgba(255,255,255,.13)}.pcto-check{width:14px;height:14px;border-radius:4px;margin-top:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}.pcto-check.blue{background:#0a84ff}.pcto-check.pink{background:#ff2d55}.pcto-year-card b{display:block;font-size:12.7px;font-weight:760;letter-spacing:-.02em}.pcto-year-card small{display:block;margin-top:2px;color:rgba(245,245,247,.48);font-size:11px;font-weight:600}
.pcto-side-label{margin:18px 8px 7px;color:rgba(245,245,247,.36);font-size:11px;font-weight:800;letter-spacing:.04em}.pcto-company-card{padding:12px;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}.pcto-company-card b{display:block;font-size:13px;font-weight:800}.pcto-company-card span{display:block;margin-top:5px;color:rgba(245,245,247,.55);font-size:11.5px;line-height:1.25}.pcto-mini-month{margin-top:18px}.mini-head{display:flex;justify-content:space-between;align-items:end;margin:0 4px 8px}.mini-head b{font-size:13px}.mini-head span{font-size:11px;color:rgba(245,245,247,.45)}.mini-strip{display:grid;gap:6px}.mini-strip button{border:0;border-radius:10px;padding:8px 9px;background:rgba(255,255,255,.06);color:rgba(245,245,247,.74);text-align:left;font-size:11.5px;font-weight:700}.mini-strip button span{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ev);margin-right:7px}.mini-strip button.active{background:color-mix(in srgb,var(--ev) 28%,rgba(255,255,255,.08));color:#fff}
.pcto-main{min-width:0;background:#242529;display:flex;flex-direction:column}.pcto-toolbar{height:66px;display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.09)}.pcto-round{width:30px;height:30px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:rgba(245,245,247,.78)}.pcto-round svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.pcto-month-title{min-width:0;flex:1}.pcto-month-title h2{font-size:30px;line-height:1;font-weight:860;letter-spacing:-.055em}.pcto-month-title span{display:block;margin-top:3px;color:rgba(245,245,247,.45);font-size:12px;font-weight:650}.pcto-segment{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.08)}.pcto-segment button{border:0;border-radius:999px;padding:7px 12px;background:transparent;color:rgba(245,245,247,.68);font-size:12px;font-weight:760}.pcto-segment button.active{background:rgba(255,255,255,.17);color:#fff}
.pcto-calendar-grid{flex:1;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:26px repeat(6,1fr);border-top:1px solid rgba(255,255,255,.05);overflow:hidden}.pcto-weekday{display:flex;align-items:center;justify-content:flex-end;padding:0 9px;color:rgba(245,245,247,.65);font-size:12px;font-weight:760;border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.10)}.pcto-day{position:relative;min-height:72px;border:0;border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);background:transparent;color:#f5f5f7;text-align:left;padding:7px 6px 5px;overflow:hidden}.pcto-day:hover{background:rgba(255,255,255,.045)}.pcto-day b{position:absolute;right:8px;top:6px;font-size:14px;font-weight:760}.pcto-day.muted b{color:rgba(245,245,247,.33)}.pcto-day.end b{background:#ff453a;color:#fff;border-radius:50%;width:25px;height:25px;display:flex;align-items:center;justify-content:center;right:5px;top:4px}.pcto-pill{display:block;max-width:calc(100% - 4px);margin:20px 0 3px;padding:3px 6px;border-radius:7px;background:var(--ev);color:#fff;font-size:10.5px;font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 6px 14px color-mix(in srgb,var(--ev) 30%,transparent)}.pcto-pill+.pcto-pill{margin-top:3px}.pcto-pill.active{outline:2px solid rgba(255,255,255,.52)}
.pcto-detail{background:#202126;border-left:1px solid rgba(255,255,255,.08);padding:18px;overflow:hidden}.pcto-detail-top span{color:#34c759;font-size:11px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.pcto-detail-top h3{margin-top:6px;font-size:22px;font-weight:850;letter-spacing:-.04em}.pcto-detail-top p{margin-top:4px;color:rgba(245,245,247,.52);font-size:12px;font-weight:620}.pcto-tutors{display:grid;gap:8px;margin:16px 0}.pcto-tutors div{padding:10px 11px;border-radius:13px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}.pcto-tutors b{display:block;font-size:11px;color:rgba(245,245,247,.44);text-transform:uppercase;letter-spacing:.05em}.pcto-tutors span{display:block;margin-top:4px;font-size:13px;font-weight:720}.pcto-event-card{position:relative;padding:17px;border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--ev) 22%,rgba(255,255,255,.07)),rgba(255,255,255,.055));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ev) 34%,rgba(255,255,255,.08)),0 22px 44px rgba(0,0,0,.22)}.pcto-event-card::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:5px;border-radius:999px;background:var(--ev)}.pcto-event-range{display:block;color:rgba(245,245,247,.56);font-size:11px;font-weight:800;margin-bottom:8px}.pcto-event-card h2{font-size:22px;line-height:1.08;font-weight:880;letter-spacing:-.045em;margin:0 0 10px}.pcto-event-card p{color:rgba(245,245,247,.78);font-size:13px;line-height:1.52;font-weight:540;margin:0}.pcto-event-card ul{margin:14px 0 0;padding:0;display:grid;gap:7px}.pcto-event-card li{list-style:none;display:flex;gap:8px;color:rgba(245,245,247,.68);font-size:12px;line-height:1.35}.pcto-event-card li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ev);flex:none;margin-top:5px}
@media(max-width:980px){.pcto-cal-app{grid-template-columns:190px minmax(0,1fr)}.pcto-detail{display:none}.pcto-segment{display:none}}@media(max-width:760px){.pcto-cal-app{grid-template-columns:1fr}.pcto-side{display:none}.pcto-month-title h2{font-size:24px}}

/* PCTO Calendar refinement — linea continua Apple-like, meno card e colori più sobri */
.pcto-cal-app { background:#1b1c1f; }
.pcto-main { background:#202124; }
.pcto-side { background:#171b21; }
.pcto-detail { background:#1d1e22; }
.pcto-calendar-grid { position:relative; isolation:isolate; }
.pcto-day { padding:7px 7px 5px; background:linear-gradient(180deg,rgba(255,255,255,.018),transparent); }
.pcto-day:hover { background:rgba(255,255,255,.035); }
.pcto-day b { z-index:1; color:rgba(245,245,247,.78); }
.pcto-day.muted b { color:rgba(245,245,247,.22); }
.pcto-pill { display:none !important; }
.pcto-range-event {
  align-self:start; justify-self:stretch; z-index:4; height:18px; margin:31px 3px 0;
  border:0; border-radius:999px; padding:0 9px; overflow:hidden;
  display:flex; align-items:center;
  color:rgba(245,245,247,.88);
  background:color-mix(in srgb,var(--ev) 42%,rgba(255,255,255,.08));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ev) 28%,rgba(255,255,255,.12)), 0 3px 10px rgba(0,0,0,.13);
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2);
  cursor:pointer; transition:background .18s ease, transform .22s var(--spring-pop), box-shadow .18s ease;
}
.pcto-range-event span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px; font-weight:720; letter-spacing:-.01em; }
.pcto-range-event:hover { transform:translateY(-1px); background:color-mix(in srgb,var(--ev) 52%,rgba(255,255,255,.10)); }
.pcto-range-event.active { background:color-mix(in srgb,var(--ev) 64%,rgba(255,255,255,.12)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 7px 18px color-mix(in srgb,var(--ev) 18%,transparent); }
.pcto-event-card {
  padding:18px 0 0 18px; border-radius:0; background:transparent; box-shadow:none;
}
.pcto-event-card::before { left:0; top:21px; bottom:0; width:3px; background:color-mix(in srgb,var(--ev) 74%,#fff 0%); opacity:.82; }
.pcto-event-range { color:color-mix(in srgb,var(--ev) 70%,rgba(245,245,247,.58)); }
.pcto-event-card h2 { font-size:23px; margin-bottom:12px; }
.pcto-event-card p { color:rgba(245,245,247,.72); }
.pcto-event-card ul { margin-top:16px; gap:10px; }
.pcto-event-card li { color:rgba(245,245,247,.62); }
.pcto-event-card li::before { width:6px; height:6px; opacity:.86; }
.pcto-tutors { margin:18px 0 20px; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); padding:10px 0; }
.pcto-tutors div { padding:8px 0; border-radius:0; background:transparent; box-shadow:none; }
.pcto-tutors div + div { border-top:1px solid rgba(255,255,255,.06); }
.pcto-year-card.active { background:rgba(255,255,255,.095); }
.mini-strip button { background:transparent; box-shadow:inset 0 -1px 0 rgba(255,255,255,.06); border-radius:0; }
.mini-strip button.active { background:transparent; color:#fff; }

/* Finder tooltip dinamico globale: non viene tagliato dalla finestra */
.finder-hover-card { display:none !important; }
.finder-app-icon::after { display:none !important; }
.finder-floating-desc {
  position:fixed; z-index:10000; width:236px; max-width:calc(100vw - 28px);
  padding:12px 13px; border-radius:14px;
  background:rgba(34,34,38,.96); color:#f5f5f7;
  box-shadow:0 22px 55px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(14px) saturate(1.55); -webkit-backdrop-filter:blur(14px) saturate(1.55);
  pointer-events:none; opacity:0; transform:translateY(5px) scale(.985);
  transition:opacity .16s ease, transform .22s var(--spring-pop);
}
.finder-floating-desc.show { opacity:1; transform:translateY(0) scale(1); }
.finder-floating-desc b { display:block; margin-bottom:4px; color:#fff; font-size:13.5px; font-weight:820; letter-spacing:-.02em; }
.finder-floating-desc span { display:block; color:rgba(245,245,247,.70); font-size:12px; line-height:1.38; font-weight:560; letter-spacing:-.01em; }
.finder-floating-desc::before {
  content:""; position:absolute; left:50%; top:-5px; width:10px; height:10px;
  background:rgba(34,34,38,.96); transform:translateX(-50%) rotate(45deg);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.08);
}

/* PCTO Calendar fix: righe e numeri sempre visibili sopra i range */
.pcto-calendar-grid { position:relative; isolation:isolate; }
.pcto-weekday { position:relative; z-index:5; }
.pcto-day { position:relative; z-index:3; pointer-events:none; background:transparent !important; }
.pcto-day b { position:absolute; z-index:6; pointer-events:none; text-shadow:0 1px 2px rgba(0,0,0,.55); }
.pcto-day::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  border-right:1px solid rgba(255,255,255,.085); border-bottom:1px solid rgba(255,255,255,.085);
  z-index:5;
}
.pcto-range-event {
  z-index:2; margin:31px 7px 0; height:17px;
  background:color-mix(in srgb,var(--ev) 34%,rgba(255,255,255,.075));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ev) 22%,rgba(255,255,255,.10)), 0 2px 8px rgba(0,0,0,.10);
}
.pcto-range-event.active { z-index:2; background:color-mix(in srgb,var(--ev) 48%,rgba(255,255,255,.10)); }
.pcto-range-event span { opacity:.92; }

/* PCTO Calendar final fix: griglia e numeri sempre sopra i range continui */
.pcto-calendar-grid {
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.09), rgba(255,255,255,.09)) 0 26px / 100% 1px no-repeat,
    repeating-linear-gradient(to right, transparent 0 calc(14.2857% - 1px), rgba(255,255,255,.105) calc(14.2857% - 1px) 14.2857%),
    repeating-linear-gradient(to bottom, transparent 0 calc((100% - 26px)/6 - 1px), rgba(255,255,255,.105) calc((100% - 26px)/6 - 1px) calc((100% - 26px)/6));
}
.pcto-weekday { z-index:7 !important; background:#202124; }
.pcto-day {
  z-index:4 !important;
  pointer-events:none !important;
  background:transparent !important;
  border-right:1px solid rgba(255,255,255,.115) !important;
  border-bottom:1px solid rgba(255,255,255,.115) !important;
}
.pcto-day b {
  z-index:9 !important;
  color:rgba(245,245,247,.88) !important;
  text-shadow:0 1px 3px rgba(0,0,0,.70), 0 0 8px rgba(0,0,0,.35);
}
.pcto-day.muted b { color:rgba(245,245,247,.32) !important; }
.pcto-day.end b { color:#fff !important; }
.pcto-day::before {
  content:""; position:absolute; inset:0; z-index:8; pointer-events:none;
  box-shadow:inset -1px 0 rgba(255,255,255,.10), inset 0 -1px rgba(255,255,255,.10);
}
.pcto-range-event {
  z-index:2 !important;
  margin-top:34px !important;
  opacity:.88;
}
.pcto-range-event.active { z-index:3 !important; opacity:.96; }

/* PCTO Calendar rebuild definitivo: scheletro vero, non overlay */
.pcto-calendar-grid {
  flex:1 !important;
  display:grid !important;
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  grid-template-rows:26px repeat(6,minmax(72px,1fr)) !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  background:#202124 !important;
  overflow:hidden !important;
  isolation:auto !important;
}
.pcto-weekday {
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  padding:0 9px !important;
  background:#202124 !important;
  border-right:1px solid rgba(255,255,255,.10) !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  color:rgba(245,245,247,.62) !important;
  font-size:12px !important;
  font-weight:760 !important;
}
.pcto-day {
  position:relative !important;
  z-index:auto !important;
  min-height:72px !important;
  border:0 !important;
  border-right:1px solid rgba(255,255,255,.10) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  background:#202124 !important;
  color:#f5f5f7 !important;
  padding:7px 6px 5px !important;
  overflow:hidden !important;
  pointer-events:auto !important;
  text-align:left !important;
}
.pcto-day:hover { background:#242529 !important; }
.pcto-day::before,
.pcto-day::after { content:none !important; display:none !important; }
.pcto-day b {
  position:absolute !important;
  right:8px !important;
  top:6px !important;
  z-index:3 !important;
  width:auto !important;
  height:auto !important;
  display:block !important;
  border-radius:0 !important;
  background:transparent !important;
  color:rgba(245,245,247,.82) !important;
  font-size:14px !important;
  font-weight:760 !important;
  line-height:1 !important;
  text-shadow:none !important;
  pointer-events:none !important;
}
.pcto-day.muted b { color:rgba(245,245,247,.30) !important; }
.pcto-day.today b {
  background:#ff453a !important;
  color:#fff !important;
  border-radius:50% !important;
  width:25px !important;
  height:25px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  right:5px !important;
  top:4px !important;
}
.pcto-day-events {
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:34px !important;
  display:grid !important;
  gap:4px !important;
  z-index:2 !important;
  pointer-events:auto !important;
}
.pcto-day-range {
  display:block !important;
  height:17px !important;
  min-width:0 !important;
  padding:0 8px !important;
  margin:0 -1px !important;
  border-radius:0 !important;
  border:0 !important;
  background:color-mix(in srgb,var(--ev) 36%,rgba(255,255,255,.075)) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ev) 22%,rgba(255,255,255,.10)) !important;
  color:rgba(245,245,247,.88) !important;
  font-size:10.5px !important;
  font-weight:720 !important;
  line-height:17px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}
.pcto-day-range.start {
  margin-left:6px !important;
  border-top-left-radius:999px !important;
  border-bottom-left-radius:999px !important;
}
.pcto-day-range.end {
  margin-right:6px !important;
  border-top-right-radius:999px !important;
  border-bottom-right-radius:999px !important;
}
.pcto-day-range.active {
  background:color-mix(in srgb,var(--ev) 52%,rgba(255,255,255,.10)) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 3px 10px color-mix(in srgb,var(--ev) 14%,transparent) !important;
}
.pcto-range-event { display:none !important; }
.pcto-pill { display:none !important; }

/* ============================================================
   Maps — Apple Maps (dark) · sidebar completa + marker POI
   ============================================================ */
.maps-window{ background:rgba(20,21,24,.82)!important; border-radius:24px!important;
  box-shadow:var(--shadow-win), inset 0 0 0 1px rgba(255,255,255,.08)!important; }
.maps-titlebar{ height:44px; background:rgba(30,31,35,.72); box-shadow:0 1px 0 rgba(255,255,255,.06); }
.maps-titlebar .wt{ color:rgba(245,245,247,.72); }

.maps-app{ flex:1 1 auto; min-height:0; height:min(648px, calc(100vh - 150px));
  display:grid; grid-template-columns:300px minmax(0,1fr); overflow:hidden; background:#16181c; color:#f5f5f7;
  font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; }
.win.maxi .maps-app{ height:100%; }
.maps-app button{ font:inherit; cursor:pointer; }

/* ---------- Sidebar ---------- */
.mw-side{ display:flex; flex-direction:column; min-height:0; padding:14px 14px 16px;
  background:#1c1d21; border-right:1px solid rgba(255,255,255,.07); overflow:auto; }
.mw-side-head{ display:flex; align-items:center; gap:8px; margin-bottom:14px; flex:none; }
.mw-back{ width:30px; height:30px; flex:none; border:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); color:#f5f5f7; transition:background .18s ease, transform .22s var(--spring); }
.mw-back:hover{ background:rgba(255,255,255,.16); } .mw-back:active{ transform:scale(.9); }
.mw-back svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.mw-side-head h2{ font-size:21px; font-weight:800; letter-spacing:-.02em; }

.mw-modes{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:3px; background:rgba(255,255,255,.07); border-radius:11px; margin-bottom:14px; flex:none; }
.mw-modes button{ height:34px; border:0; border-radius:8px; background:transparent; color:rgba(245,245,247,.66); display:flex; align-items:center; justify-content:center; transition:background .18s ease,color .18s ease,transform .22s var(--spring); }
.mw-modes button svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.mw-modes button:active{ transform:scale(.92); } .mw-modes button.active{ background:#0a84ff; color:#fff; box-shadow:0 3px 10px rgba(10,132,255,.28); }

/* lista tappe: partenza + tappe intermedie + arrivo */
.mw-route{ position:relative; padding:2px 2px 2px 4px; margin-bottom:12px; flex:none; }
.mw-route-line{ position:absolute; left:12px; top:18px; bottom:18px; width:2px; background:rgba(255,255,255,.14); border-radius:2px; }
.mw-endpoint{ display:flex; align-items:flex-start; gap:12px; min-height:48px; padding:5px 0; position:relative; }
.mw-pt{ width:13px; height:13px; margin-top:4px; flex:none; border-radius:50%; position:relative; z-index:1; box-shadow:0 0 0 4px #1c1d21; }
.mw-pt.start{ background:#8e8e93; } .mw-pt.mid{ background:#72767d; } .mw-pt.end{ background:#ff453a; width:15px; height:15px; margin-left:-1px; }
.mw-endpoint small{ display:block; font-size:10.5px; font-weight:760; letter-spacing:.03em; text-transform:uppercase; color:rgba(245,245,247,.42); line-height:1.05; }
.mw-endpoint b{ display:block; margin-top:2px; font-size:14px; font-weight:720; letter-spacing:-.01em; line-height:1.05; }
.mw-endpoint em{ display:block; margin-top:4px; font-style:normal; font-size:11.5px; line-height:1.2; color:rgba(245,245,247,.48); }
.route-end b{ color:#fff; }

/* card blu subito sotto la lista */
.mw-routecard{ display:flex; align-items:flex-start; gap:10px; margin:0 0 14px; flex:none; padding:15px 16px; border-radius:18px; color:#fff;
  background:linear-gradient(180deg,#0a90ff,#0a78f0); box-shadow:0 12px 30px rgba(10,120,240,.34), inset 0 1px 0 rgba(255,255,255,.25); }
.mw-rc-main{ flex:1; min-width:0; } .mw-rc-main b{ display:block; font-size:30px; font-weight:860; letter-spacing:-.03em; line-height:1; }
.mw-rc-main span{ display:block; margin-top:7px; font-size:12.5px; font-weight:560; color:rgba(255,255,255,.9); }
.mw-rc-main em{ display:inline-block; margin-top:10px; font-style:normal; font-size:12px; font-weight:760; padding:3px 9px; border-radius:8px; background:rgba(255,255,255,.18); }
.mw-rc-info{ width:24px; height:24px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; font-style:italic; color:#fff; background:rgba(255,255,255,.22); }

/* ---------- Map ---------- */
.mw-map-wrap{ position:relative; min-width:0; overflow:hidden; background:#23262c; cursor:pointer; }
.maps-map{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.mw-map-wrap::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.18), transparent 18%, transparent 82%, rgba(0,0,0,.22)); }
#maps-cam{ transform-box:view-box; transform-origin:0 0; transition:transform 1.15s cubic-bezier(.32,.72,0,1); }
#maps-puck{ transition:transform 1.15s cubic-bezier(.32,.72,0,1); }
#maps-puck .puck-rot{ transition:transform 1.15s cubic-bezier(.32,.72,0,1); }
#maps-route-progress{ transition:stroke-dashoffset 1.15s cubic-bezier(.32,.72,0,1); }

/* marker stile allegato: destinazione rossa grande, tappe grigie piccole */
.mw-pin{ cursor:pointer; overflow:visible; }
.mw-pin-drop{ animation:mwDrop .7s cubic-bezier(.3,1.36,.46,1) both; transform-box:fill-box; transform-origin:50% 100%; }
@keyframes mwDrop{ 0%{ opacity:0; transform:translateY(-28px) scale(.55); } 55%{ opacity:1; } 100%{ opacity:1; transform:none; } }
.mw-pin-rot{ transition:transform 1.15s cubic-bezier(.32,.72,0,1); transform-origin:0 0; }
.pin-ground{ fill:#000; opacity:.28; }
.pin-stem{ filter:url(#mw-pin-sh); stroke:rgba(0,0,0,.18); stroke-width:1; }
.pin-face{ stroke:rgba(255,255,255,.18); stroke-width:1; }
.pin-dot{ fill:#2b2b2d; opacity:.75; }
.pin-i{ font-family:Georgia,serif; font-size:24px; font-weight:700; fill:#121214; }
.pin-halo{ fill:#0a84ff; opacity:0; transform-box:fill-box; transform-origin:50% 50%; }
.mw-pin.is-stop .pin-stem,.mw-pin.is-stop .pin-face{ fill:#8e8e93; }
.mw-pin.is-stop .pin-halo{ fill:#8e8e93; }
.mw-pin.is-dest .pin-stem,.mw-pin.is-dest .pin-face{ fill:#ff6b6b; }
.mw-pin.is-dest .pin-halo{ fill:#ff453a; cx:0; cy:-31; r:26; }
.mw-pin.done .pin-stem,.mw-pin.done .pin-face{ fill:#6e7379; }
.mw-pin.on .pin-halo{ opacity:.28; animation:mwHalo 1.8s ease-out infinite; }
.mw-pin.is-dest.on .pin-halo{ opacity:.36; }
@keyframes mwHalo{ 0%{ transform:scale(.72); opacity:.36; } 70%{ opacity:0; } 100%{ transform:scale(1.9); opacity:0; } }

/* didascalie: centrate sotto il marker, come Apple Maps satellite labels */
.mw-caption{ filter:url(#mw-caption-sh); pointer-events:none; }
.mw-caption text{ fill:#fff; font-size:13px; font-weight:760; letter-spacing:-.01em; paint-order:stroke; stroke:#111; stroke-width:2.4px; stroke-linejoin:round; }
.mw-pin.is-dest .mw-caption text{ font-size:15px; font-weight:820; }
.maps-app.nav .mw-caption{ opacity:.95; }

/* puck */
.puck-halo{ fill:#0a84ff; opacity:.18; transform-box:fill-box; transform-origin:50% 50%; animation:mwHalo 2s ease-out infinite; }
.puck-dot{ fill:#0a84ff; stroke:#fff; stroke-width:3; }
.puck-arrow{ fill:#0a84ff; stroke:#fff; stroke-width:2.5; stroke-linejoin:round; opacity:0; }
.maps-app.nav .puck-dot{ opacity:0; } .maps-app.nav .puck-arrow{ opacity:1; }

.mw-banner{ position:absolute; left:16px; top:16px; width:312px; max-width:calc(100% - 86px); z-index:5; display:flex; gap:13px; padding:14px 16px; border-radius:20px; color:#fff;
  background:rgba(34,36,41,.86); backdrop-filter:blur(18px) saturate(1.7); -webkit-backdrop-filter:blur(18px) saturate(1.7); box-shadow:0 16px 40px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.09); transition:background .45s ease, box-shadow .45s ease; }
.maps-app.nav .mw-banner{ background:linear-gradient(180deg,#31ba53,#159b3c); box-shadow:0 18px 44px rgba(8,82,30,.42), inset 0 1px 0 rgba(255,255,255,.32); }
.mw-banner-icon{ width:46px; height:46px; flex:none; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:800; line-height:1; text-shadow:0 2px 4px rgba(0,0,0,.2); }
.mw-banner-text span{ display:block; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.74); }
.mw-banner-text b{ display:block; margin-top:2px; font-size:21px; font-weight:850; letter-spacing:-.03em; line-height:1.05; }
.mw-banner-text p{ margin:6px 0 0; font-size:12.5px; line-height:1.4; font-weight:520; color:rgba(255,255,255,.94); }
.mw-flash{ animation:mwFlash .5s cubic-bezier(.22,1,.36,1); }
@keyframes mwFlash{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }

.mw-zoom{ position:absolute; right:15px; top:16px; z-index:6; display:flex; flex-direction:column; width:38px; border-radius:12px; overflow:hidden; background:rgba(40,42,47,.82); backdrop-filter:blur(14px) saturate(1.6); -webkit-backdrop-filter:blur(14px) saturate(1.6); box-shadow:0 10px 28px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1); transition:opacity .3s ease; }
.maps-app.nav .mw-zoom{ opacity:.35; }
.mw-zoom button{ height:38px; border:0; background:transparent; color:#f5f5f7; font-size:21px; font-weight:400; display:flex; align-items:center; justify-content:center; transition:background .16s ease, transform .2s var(--spring); }
.mw-zoom button:hover{ background:rgba(255,255,255,.12); } .mw-zoom button:active{ transform:scale(.9); }
.mw-zoom span{ height:1px; background:rgba(255,255,255,.12); margin:0 8px; }

.mw-hint{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:5; padding:8px 16px; border-radius:999px; font-size:12.5px; font-weight:700; color:#f5f5f7; white-space:nowrap; background:rgba(34,36,41,.82); backdrop-filter:blur(14px) saturate(1.6); -webkit-backdrop-filter:blur(14px) saturate(1.6); box-shadow:0 8px 22px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1); pointer-events:none; animation:mwHintPulse 2.4s ease-in-out infinite; }
@keyframes mwHintPulse{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }

@media(max-width:860px){ .maps-window{ width:94vw!important; } .maps-app{ grid-template-columns:1fr; } .mw-side{ display:none; } .mw-banner{ width:auto; left:12px; right:64px; } }


/* Center image must stay fixed above the gallery */
.sg-center-win.open{left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;z-index:9998!important}

/* Spotlight image gallery windows */
.sg-window{background:rgba(28,29,33,.86)!important;border-radius:18px!important;min-width:0!important;max-width:min(92vw,720px);max-height:calc(100vh - 92px);box-shadow:0 28px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.10)!important;backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);overflow:hidden}
.sg-titlebar{height:38px;background:rgba(39,40,45,.76);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.sg-titlebar .wt{font-size:12px;color:rgba(245,245,247,.72);margin-right:51px}
.sg-body{overflow:hidden;background:#08090b;display:flex;align-items:center;justify-content:center}
.sg-body img{display:block;width:100%;height:auto;max-height:calc(100vh - 136px);object-fit:contain;user-select:none;-webkit-user-drag:none}
.sg-window.open{animation:sgWinIn .54s cubic-bezier(.18,1.16,.32,1) both}
.sg-window.closing{animation:sgWinOut .24s cubic-bezier(.22,1,.36,1) both}
.sg-center-win{z-index:9998!important;max-width:min(72vw,760px);box-shadow:0 34px 120px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.16)!important}
.sg-center-win.open{animation:sgCenterIn .62s cubic-bezier(.18,1.16,.32,1) both}
.sg-center-win .sg-titlebar{background:rgba(22,23,27,.84)}
.sg-center-win .sg-body{background:#050607}
@keyframes sgWinIn{from{opacity:0;transform:translateY(26px) scale(.72) rotate(var(--sg-rot,-1deg));filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1) rotate(0);filter:none}}
@keyframes sgCenterIn{0%{opacity:0;transform:translateY(18px) scale(.78);filter:blur(10px)}58%{opacity:1;transform:translateY(-4px) scale(1.025);filter:none}100%{opacity:1;transform:none;filter:none}}
@keyframes sgWinOut{from{opacity:1;transform:scale(1);filter:none}to{opacity:0;transform:scale(.88) translateY(12px);filter:blur(4px)}}
/* /Spotlight image gallery windows */

/* Invisible Spotlight gallery close hotspot */
.spot-gallery-close{position:fixed;right:0;bottom:0;width:84px;height:84px;z-index:10002;border:0;background:transparent!important;opacity:0;pointer-events:none;cursor:default}
body.spot-gallery-active .spot-gallery-close{pointer-events:auto}
body.spot-gallery-active .dock{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(18px) scale(.98)}

/* George Orwell Spotlight wallpaper */
.bg{transition:filter .55s cubic-bezier(.22,1,.36,1), opacity .55s ease, background-image .2s ease}
body.spot-gallery-active .bg{
  background:
    linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.20)),
    url("assets/spotlight-gallery/optimized/bg.webp") center / cover no-repeat,
    #08090b!important;
  filter:saturate(.92) contrast(1.04) brightness(.72);
}
body.spot-gallery-active .menubar{background:rgba(10,10,12,.32);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}
/* /George Orwell Spotlight wallpaper */


/* ============================================================
   Performance Safety Layer — hardware sconosciuto
   Mantiene la grafica coerente, ma scala blur/ombre/motion quando il device
   reale non regge 60 FPS. La classe viene decisa da hub.js/login.js.
   ============================================================ */
html { background:#000; }
.win, .dock, .menubar, .ccpanel, .lgcard, .mw-banner, .mw-zoom, .mw-hint, .sg-window {
  transform: translateZ(0);
  backface-visibility: hidden;
}
.win, .sg-window, .ccpanel { contain: layout paint style; }
.wbody, .main, .finder-main, .nr-screen, .maps-app, .mw-map-wrap { contain: layout paint; }
.fitem, .favcard, .crow, .evt, .stop, .aprow, .cstat, .nr-row, .pcto-day { content-visibility: auto; contain-intrinsic-size: 120px; }
.dock .ai { will-change: width, height; }
.win.open, .win.closing, .sg-window.open, .sg-window.closing { will-change: transform, opacity; }
#maps-cam, #maps-puck, #maps-route-progress, .mw-pin-rot { will-change: transform; }

html.perf-mid .win,
html.perf-mid .dock,
html.perf-mid .menubar,
html.perf-mid .ccpanel,
html.perf-mid .lgcard,
html.perf-mid .mw-banner,
html.perf-mid .mw-zoom,
html.perf-mid .mw-hint,
html.perf-mid .sg-window {
  backdrop-filter: blur(10px) saturate(1.35);
  -webkit-backdrop-filter: blur(10px) saturate(1.35);
}
html.perf-mid .win { box-shadow: 0 22px 56px -24px rgba(0,0,0,.55), inset 0 1px 0 var(--hairline), inset 0 0 0 1px rgba(255,255,255,.10); }
html.perf-mid .win.open .as-hero,
html.perf-mid .win.open .crow,
html.perf-mid .win.open .evt,
html.perf-mid .win.open .stop,
html.perf-mid .win.open .aprow,
html.perf-mid .win.open .as-duo>*,
html.perf-mid .win.open .cstat,
html.perf-mid .win.open .favcard,
html.perf-mid .win.open .cnote,
html.perf-mid .win.open .eta,
html.perf-mid .win.open .sf-note { animation-duration:.28s; animation-delay:0s!important; }

html.perf-low *,
html.perf-low *::before,
html.perf-low *::after {
  animation-duration: .001s !important;
  animation-delay: 0s !important;
  transition-duration: .001s !important;
  scroll-behavior: auto !important;
}
html.perf-low .win,
html.perf-low .dock,
html.perf-low .menubar,
html.perf-low .ccpanel,
html.perf-low .lgcard,
html.perf-low .mw-banner,
html.perf-low .mw-zoom,
html.perf-low .mw-hint,
html.perf-low .sg-window,
html.perf-low #pwrdlg .box {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.perf-low .win,
html.perf-low .sg-window {
  background: rgba(32,33,38,.94) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.09) !important;
}
html.perf-low .menubar,
html.perf-low .dock,
html.perf-low .ccpanel { background: rgba(24,24,28,.92) !important; }
html.perf-low .lgcard::after,
html.perf-low .puck-halo,
html.perf-low .pin-halo,
html.perf-low .mw-hint { display:none !important; }
html.perf-low .dock .ai img,
html.perf-low .dicon .fico img,
html.perf-low #maps-route,
html.perf-low .pin-stem,
html.perf-low .mw-caption { filter:none !important; }
html.perf-low body.login-screen .wallpaper { transform:none; filter:none; }

@supports not (backdrop-filter: blur(1px)) {
  .win, .dock, .menubar, .ccpanel, .lgcard, .mw-banner, .mw-zoom, .mw-hint, .sg-window {
    background: rgba(32,33,38,.92);
  }
}


/* ============================================================
   LOCK SCREEN — macOS Tahoe 26 / Liquid Glass reference pass
   ------------------------------------------------------------
   Implementazione dopo ricerca reference Apple:
   - Lock Screen Tahoe con large clock personalizzabile
   - Liquid Glass: refraction/lensing, highlights, shadow adattive
   - Clear glass su contenuto media-rich + dimming layer per leggibilità
   - menu bar praticamente trasparente
   ============================================================ */
body.login-screen {
  --tahoe-white: rgba(255,255,255,.96);
  --tahoe-muted: rgba(255,255,255,.72);
  --tahoe-hairline: rgba(255,255,255,.28);
  --tahoe-shadow: rgba(0,0,0,.38);
  --tahoe-blue: #0A84FF;
  background: #05070d;
}

/* wallpaper più “media-rich”: video/poster edge-to-edge, come Tahoe */
body.login-screen .wallpaper {
  transform: scale(1.018);
  filter: saturate(1.16) contrast(1.03) brightness(.91);
  transform-origin: center;
}
body.login-screen.ready .wallpaper {
  animation: tahoeWallpaperBreath 24s ease-in-out infinite alternate;
}
@keyframes tahoeWallpaperBreath {
  from { transform: scale(1.018) translate3d(0,0,0); filter: saturate(1.14) contrast(1.03) brightness(.90); }
  to   { transform: scale(1.052) translate3d(-.35%, -.22%, 0); filter: saturate(1.22) contrast(1.045) brightness(.95); }
}

/* campo di luce astratto: simula highlight/specular del Liquid Glass */
body.login-screen .tahoe-light-field {
  position: fixed;
  inset: -12%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: .58;
}
body.login-screen .tahoe-light-field .tl {
  position: absolute;
  display: block;
  border-radius: 999px;
  filter: blur(38px);
  transform: translate3d(0,0,0);
  animation: tahoeLightFloat 18s ease-in-out infinite alternate;
}
body.login-screen .tahoe-light-field .tl-a {
  width: 32vw; height: 19vw; left: 7vw; top: 10vh;
  background: radial-gradient(circle at 32% 35%, rgba(140,206,255,.52), rgba(140,206,255,0) 68%);
}
body.login-screen .tahoe-light-field .tl-b {
  width: 40vw; height: 26vw; right: -4vw; top: 42vh;
  background: radial-gradient(circle at 42% 45%, rgba(255,154,198,.38), rgba(255,154,198,0) 70%);
  animation-delay: -5s;
}
body.login-screen .tahoe-light-field .tl-c {
  width: 34vw; height: 18vw; left: 32vw; bottom: -7vh;
  background: radial-gradient(circle at 50% 50%, rgba(164,126,255,.34), rgba(164,126,255,0) 72%);
  animation-delay: -9s;
}
@keyframes tahoeLightFloat {
  from { transform: translate3d(-1.2%, -.8%, 0) scale(.98); }
  to   { transform: translate3d(1.4%, 1.1%, 0) scale(1.04); }
}

/* dimming layer richiesto dal “Clear glass”: leggibilità senza appiattire lo sfondo */
body.login-screen .scrim {
  z-index: 2;
  background:
    radial-gradient(120% 76% at 50% 4%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.025) 31%, rgba(0,0,0,.035) 58%, rgba(0,0,0,.46) 100%),
    radial-gradient(95% 62% at 50% 88%, rgba(0,0,0,.44) 0%, rgba(0,0,0,.05) 64%, rgba(0,0,0,0) 100%),
    radial-gradient(115% 100% at 50% 50%, rgba(0,0,0,0) 54%, rgba(0,0,0,.24) 100%);
}

/* Tahoe: menu bar quasi “invisibile”, non una barra frosted tradizionale */
body.login-screen .menubar {
  height: 30px;
  padding: 0 18px;
  gap: 15px;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: rgba(255,255,255,.94);
  text-shadow: 0 1px 7px rgba(0,0,0,.42);
  filter: none;
}
body.login-screen .menubar .mb-item {
  min-height: 22px;
  opacity: .96;
}
body.login-screen .menubar .lang {
  font-size: 13px;
  font-weight: 590;
  letter-spacing: -.005em;
}
body.login-screen .menubar svg {
  filter: drop-shadow(0 1px 5px rgba(0,0,0,.34));
}

/* layout: grande orologio in alto, login cluster più basso e sospeso */
body.login-screen .lock {
  z-index: 3;
  min-height: 100svh;
}
body.login-screen .clock {
  top: clamp(46px, 6.7vh, 82px);
  perspective: 900px;
}
body.login-screen .clock .date {
  margin-bottom: clamp(-2px, -.25vw, 2px);
  font-size: clamp(15px, 1.22vw, 19px);
  font-weight: 650;
  letter-spacing: .006em;
  color: rgba(255,255,255,.92);
  text-shadow:
    0 1px 2px rgba(0,0,0,.32),
    0 8px 26px rgba(0,0,0,.22);
}

/* Large transparent/glass clock Tahoe: testo come materiale, non come colore pieno */
body.login-screen .clock .time {
  position: relative;
  display: inline-block;
  isolation: isolate;
  font-size: clamp(104px, 17.2vw, 238px);
  font-weight: 760;
  line-height: .86;
  letter-spacing: clamp(-11px, -.068em, -4px);
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.64);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.38) 24%,
      rgba(255,255,255,.18) 48%,
      rgba(255,255,255,.45) 72%,
      rgba(255,255,255,.84) 100%);
  -webkit-text-stroke: .72px rgba(255,255,255,.42);
  text-shadow:
    0 1px 0 rgba(255,255,255,.18),
    0 12px 42px rgba(0,0,0,.36),
    0 2px 9px rgba(0,0,0,.24);
  filter: drop-shadow(0 24px 52px rgba(0,0,0,.22));
  transform: translateZ(0);
}
body.login-screen .clock .time::before,
body.login-screen .clock .time::after {
  content: attr(data-time);
  position: absolute;
  inset: 0;
  pointer-events: none;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  font-variant-numeric: inherit;
}
/* lensing/refraction interno: bordo luminoso + distorsione morbida */
body.login-screen .clock .time::before {
  z-index: -1;
  color: rgba(255,255,255,.18);
  -webkit-text-stroke: 2.2px rgba(255,255,255,.18);
  text-shadow:
    -6px -4px 18px rgba(161,213,255,.20),
    6px 5px 18px rgba(255,185,218,.16),
    0 20px 58px rgba(0,0,0,.34);
  filter: blur(.55px) saturate(1.25);
  transform: translate3d(0, .7px, 0) scale(1.002);
  opacity: .92;
}
/* specular highlight mobile: come luce che scorre sul vetro */
body.login-screen .clock .time::after {
  z-index: 1;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 34%,
    rgba(255,255,255,.78) 47%,
    rgba(255,255,255,.08) 58%,
    rgba(255,255,255,0) 100%);
  background-size: 220% 100%;
  opacity: .48;
  mix-blend-mode: screen;
  animation: tahoeClockSweep 9.5s ease-in-out infinite;
}
@keyframes tahoeClockSweep {
  0%, 22% { background-position: 140% 0; opacity: 0; }
  34%     { opacity: .55; }
  53%     { background-position: -40% 0; opacity: .30; }
  100%    { background-position: -40% 0; opacity: 0; }
}

/* User cluster Tahoe: compatto, centrato e molto “quiet” */
body.login-screen .user {
  bottom: clamp(46px, 8.2vh, 88px);
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.24));
}
body.login-screen .avatar {
  width: 78px;
  height: 78px;
  margin-bottom: 13px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 18%, rgba(255,255,255,.62), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(232,232,238,.92), rgba(137,137,148,.84));
  border: .5px solid rgba(255,255,255,.46);
  box-shadow:
    0 18px 36px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.12);
}
body.login-screen .avatar-img {
  transform: scale(1.015);
}
body.login-screen .name {
  margin-bottom: 14px;
  font-size: 19.5px;
  font-weight: 670;
  letter-spacing: -.008em;
  color: rgba(255,255,255,.96);
  text-shadow:
    0 1px 3px rgba(0,0,0,.42),
    0 8px 24px rgba(0,0,0,.25);
}

/* password field: Liquid Glass scuro con lensing, hairline e highlight */
body.login-screen .pwd {
  width: 258px;
  height: 38px;
  padding: 0 5px;
  border-radius: 999px;
  overflow: hidden;
  background:
    radial-gradient(90px 42px at 26% 0%, rgba(255,255,255,.24), rgba(255,255,255,0) 62%),
    radial-gradient(120px 58px at 86% 112%, rgba(10,132,255,.18), rgba(10,132,255,0) 68%),
    linear-gradient(180deg, rgba(35,38,46,.44), rgba(255,255,255,.135));
  border: .5px solid rgba(255,255,255,.32);
  box-shadow:
    0 16px 38px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(24px) saturate(1.65) contrast(1.04);
  backdrop-filter: blur(24px) saturate(1.65) contrast(1.04);
}
body.login-screen .pwd::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255,255,255,.24), rgba(255,255,255,0) 26%, rgba(255,255,255,0) 70%, rgba(255,255,255,.12)),
    radial-gradient(80px 22px at var(--mx, 50%) -20%, rgba(255,255,255,.34), rgba(255,255,255,0) 68%);
  opacity: .95;
  mix-blend-mode: screen;
}
body.login-screen .pwd:focus-within {
  background:
    radial-gradient(96px 42px at 25% 0%, rgba(255,255,255,.30), rgba(255,255,255,0) 64%),
    radial-gradient(120px 58px at 86% 112%, rgba(10,132,255,.32), rgba(10,132,255,0) 70%),
    linear-gradient(180deg, rgba(40,44,54,.54), rgba(255,255,255,.17));
  border-color: rgba(255,255,255,.52);
  box-shadow:
    0 18px 46px rgba(0,0,0,.28),
    0 0 0 3.5px rgba(10,132,255,.22),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.18);
}
body.login-screen .pwd input {
  position: relative;
  z-index: 1;
  padding: 0 31px;
  font-size: 13.5px;
  font-weight: 560;
  letter-spacing: .032em;
  color: rgba(255,255,255,.98);
  text-shadow: 0 1px 7px rgba(0,0,0,.35);
}
body.login-screen .pwd input::placeholder {
  color: rgba(255,255,255,.74);
  font-weight: 540;
  letter-spacing: -.002em;
}
body.login-screen .go {
  z-index: 2;
  right: 5px;
  width: 28px;
  height: 28px;
  color: #fff;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 2px 8px rgba(0,0,0,.18);
}
body.login-screen .go:hover { background: rgba(255,255,255,.28); }
body.login-screen .pwd.has-text .go {
  background: linear-gradient(180deg, rgba(43,155,255,.98), rgba(0,103,215,.96));
  border-color: rgba(255,255,255,.26);
  box-shadow:
    0 4px 16px rgba(10,132,255,.34),
    inset 0 1px 0 rgba(255,255,255,.32);
}
body.login-screen .hint {
  left: calc(50% + 140px);
  width: 30px;
  height: 30px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.23), rgba(255,255,255,0) 48%),
    rgba(28,31,38,.28);
  border-color: rgba(255,255,255,.28);
  box-shadow:
    0 10px 24px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(22px) saturate(1.55);
  backdrop-filter: blur(22px) saturate(1.55);
}
body.login-screen .hint:hover { background: rgba(255,255,255,.20); }
body.login-screen .caption {
  margin-top: 17px;
  font-size: 12.5px;
  font-weight: 470;
  letter-spacing: .002em;
  color: rgba(255,255,255,.72);
  text-shadow: 0 1px 8px rgba(0,0,0,.46);
}
body.login-screen .caption.error { color: rgba(255,210,210,.98); }

/* Entrata/sblocco più simile a Tahoe: glass che materializza e poi dissolve */
body.login-screen.ready .clock {
  animation: tahoeClockIn 1.05s cubic-bezier(.18,1,.36,1) both;
}
body.login-screen.ready .user {
  animation: tahoeUserIn .92s cubic-bezier(.2,1,.34,1) .08s both;
}
@keyframes tahoeClockIn {
  from { opacity: 0; transform: translateY(-8px) scale(.986); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes tahoeUserIn {
  from { opacity: 0; transform: translateY(16px) scale(.982); filter: blur(9px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
body.login-screen.unlock .lock {
  opacity: 0;
  transform: scale(1.012);
  filter: blur(10px) saturate(1.12);
  transition-duration: .48s;
}
body.login-screen.unlock .wallpaper {
  transform: scale(1.075);
  filter: brightness(.98) saturate(1.22) contrast(1.04);
  transition-duration: .55s;
}
body.login-screen.unlock .tahoe-light-field { opacity: .18; transition: opacity .45s ease; }

/* demo widget: glass più coerente con Tahoe quando ?demo=1 */
body.login-screen .demo-widget,
body.login-screen .enter-desktop {
  background:
    radial-gradient(220px 110px at 20% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 58%),
    rgba(28,30,36,.42);
  border-color: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
  backdrop-filter: blur(26px) saturate(1.7);
}

@media (max-width: 820px) {
  body.login-screen .clock { top: clamp(46px, 8vh, 76px); }
  body.login-screen .clock .time {
    font-size: clamp(88px, 23vw, 156px);
    letter-spacing: clamp(-8px, -.072em, -4px);
  }
  body.login-screen .user { bottom: clamp(34px, 7vh, 64px); }
  body.login-screen .menubar { gap: 12px; padding: 0 14px; }
}
@media (max-height: 680px) {
  body.login-screen .clock { top: 38px; }
  body.login-screen .clock .time { font-size: clamp(82px, 15vw, 138px); }
  body.login-screen .user { bottom: 30px; }
  body.login-screen .avatar { width: 66px; height: 66px; margin-bottom: 10px; }
  body.login-screen .name { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body.login-screen.ready .wallpaper,
  body.login-screen .tahoe-light-field .tl,
  body.login-screen .clock .time::after {
    animation: none !important;
  }
}


/* ============================================================
   LOCK SCREEN — correzione qualità dopo review
   Problemi risolti:
   - orologio troppo grande
   - artefatti/linee sotto i numeri causati da pseudo-layer e sweep
   - resa troppo pesante/bassa qualità: stile più pulito, sharp e Apple-like
   ============================================================ */
body.login-screen .wallpaper {
  transform: scale(1.01);
  filter: saturate(1.08) contrast(1.015) brightness(.93);
}
body.login-screen.ready .wallpaper {
  animation: tahoeWallpaperBreathClean 34s ease-in-out infinite alternate;
}
@keyframes tahoeWallpaperBreathClean {
  from { transform: scale(1.01); filter: saturate(1.06) contrast(1.01) brightness(.92); }
  to   { transform: scale(1.028) translate3d(-.18%, -.12%, 0); filter: saturate(1.10) contrast(1.018) brightness(.95); }
}

body.login-screen .tahoe-light-field {
  opacity: .28;
  filter: saturate(.9);
}
body.login-screen .tahoe-light-field .tl {
  filter: blur(54px);
}

body.login-screen .scrim {
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.025) 30%, rgba(0,0,0,.03) 60%, rgba(0,0,0,.42) 100%),
    radial-gradient(92% 58% at 50% 88%, rgba(0,0,0,.40) 0%, rgba(0,0,0,.05) 62%, rgba(0,0,0,0) 100%),
    radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 58%, rgba(0,0,0,.20) 100%);
}

body.login-screen .clock {
  top: clamp(48px, 7.2vh, 76px);
}
body.login-screen .clock .date {
  margin-bottom: 3px;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 620;
  color: rgba(255,255,255,.91);
  text-shadow: 0 1px 5px rgba(0,0,0,.34);
}

/* Orologio più piccolo e molto più nitido: niente pseudo-layer = niente linee strane */
body.login-screen .clock .time {
  font-size: clamp(72px, 11.4vw, 158px);
  font-weight: 720;
  line-height: .92;
  letter-spacing: clamp(-6px, -.052em, -2px);
  color: rgba(255,255,255,.88);
  -webkit-text-fill-color: rgba(255,255,255,.86);
  -webkit-background-clip: initial;
  background-clip: initial;
  background-image: none;
  -webkit-text-stroke: 0;
  text-shadow:
    0 1px 0 rgba(255,255,255,.10),
    0 2px 10px rgba(0,0,0,.32),
    0 18px 46px rgba(0,0,0,.24);
  filter: none;
  opacity: .98;
}
body.login-screen .clock .time::before,
body.login-screen .clock .time::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

body.login-screen .user {
  bottom: clamp(44px, 8.7vh, 82px);
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.22));
}
body.login-screen .avatar {
  width: 72px;
  height: 72px;
  margin-bottom: 12px;
}
body.login-screen .name {
  font-size: 18.5px;
  font-weight: 640;
  margin-bottom: 13px;
}
body.login-screen .pwd {
  width: 250px;
  height: 37px;
  background:
    linear-gradient(180deg, rgba(38,40,46,.46), rgba(255,255,255,.13));
  border-color: rgba(255,255,255,.30);
  box-shadow:
    0 12px 30px rgba(0,0,0,.23),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
}
body.login-screen .pwd::before {
  opacity: .42;
  background: linear-gradient(112deg, rgba(255,255,255,.18), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 72%, rgba(255,255,255,.08));
}
body.login-screen .pwd:focus-within {
  background: linear-gradient(180deg, rgba(42,45,52,.54), rgba(255,255,255,.16));
  box-shadow:
    0 14px 34px rgba(0,0,0,.25),
    0 0 0 3px rgba(10,132,255,.18),
    inset 0 1px 0 rgba(255,255,255,.34);
}
body.login-screen .hint {
  left: calc(50% + 136px);
}

@media (max-width: 820px) {
  body.login-screen .clock .time {
    font-size: clamp(68px, 18vw, 122px);
    letter-spacing: clamp(-5px, -.056em, -2px);
  }
}
@media (max-height: 680px) {
  body.login-screen .clock .time {
    font-size: clamp(62px, 12.5vw, 112px);
  }
  body.login-screen .clock { top: 36px; }
  body.login-screen .user { bottom: 28px; }
}


/* ============================================================
   LOCK SCREEN — Liquid Glass naturale / quality pass
   Obiettivo: vetro credibile, meno ombre artificiali, più leggibilità.
   Regola: una sola ombra morbida per profondità + hairline + blur reale.
   ============================================================ */
body.login-screen {
  --lg-natural-bg: rgba(255,255,255,.115);
  --lg-natural-bg-strong: rgba(255,255,255,.155);
  --lg-natural-stroke: rgba(255,255,255,.30);
  --lg-natural-highlight: rgba(255,255,255,.34);
  --lg-natural-shadow: rgba(0,0,0,.18);
}

/* Sfondo meno processato: il vetro deve riflettere contenuto pulito, non contrasto artificiale */
body.login-screen .wallpaper {
  transform: scale(1.008);
  filter: saturate(1.04) contrast(1.005) brightness(.94);
}
body.login-screen.ready .wallpaper {
  animation: tahoeWallpaperNatural 38s ease-in-out infinite alternate;
}
@keyframes tahoeWallpaperNatural {
  from { transform: scale(1.008) translate3d(0,0,0); filter: saturate(1.035) contrast(1.004) brightness(.935); }
  to   { transform: scale(1.022) translate3d(-.12%, -.08%, 0); filter: saturate(1.055) contrast(1.008) brightness(.955); }
}

/* Luci ambiente quasi impercettibili: niente aloni casuali troppo visibili */
body.login-screen .tahoe-light-field {
  opacity: .14;
  mix-blend-mode: soft-light;
}
body.login-screen .tahoe-light-field .tl {
  filter: blur(72px);
  animation-duration: 30s;
}

/* Dimming più omogeneo: il layer serve solo alla leggibilità */
body.login-screen .scrim {
  background:
    linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.035) 34%, rgba(0,0,0,.035) 62%, rgba(0,0,0,.36) 100%),
    radial-gradient(100% 62% at 50% 90%, rgba(0,0,0,.34) 0%, rgba(0,0,0,.05) 66%, rgba(0,0,0,0) 100%);
}

/* Menu bar pulita: nessun alone/drop-shadow pesante */
body.login-screen .menubar {
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0));
  color: rgba(255,255,255,.90);
  text-shadow: 0 1px 3px rgba(0,0,0,.22);
}
body.login-screen .menubar svg {
  filter: none;
  opacity: .96;
}

/* Orologio: naturale e premium, non “effetto poster” */
body.login-screen .clock .date {
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 4px rgba(0,0,0,.24);
}
body.login-screen .clock .time {
  color: rgba(255,255,255,.86);
  -webkit-text-fill-color: rgba(255,255,255,.84);
  text-shadow:
    0 1px 2px rgba(0,0,0,.22),
    0 8px 26px rgba(0,0,0,.16);
  filter: none;
}

/* Avatar: profondità minima e coerente, senza glow */
body.login-screen .user {
  filter: none;
}
body.login-screen .avatar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(224,224,230,.90), rgba(132,132,142,.86));
  border: .5px solid rgba(255,255,255,.34);
  box-shadow:
    0 8px 22px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.38);
}
body.login-screen .name {
  text-shadow: 0 1px 4px rgba(0,0,0,.26);
}

/* Password pill: Liquid Glass più naturale.
   Nessun finto glow blu/radiale permanente; solo blur, hairline, highlight e ombra morbida. */
body.login-screen .pwd {
  background:
    linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.075));
  border: .5px solid var(--lg-natural-stroke);
  box-shadow:
    0 8px 24px var(--lg-natural-shadow),
    inset 0 1px 0 var(--lg-natural-highlight),
    inset 0 -1px 0 rgba(0,0,0,.075);
  -webkit-backdrop-filter: blur(28px) saturate(1.45) brightness(1.04);
  backdrop-filter: blur(28px) saturate(1.45) brightness(1.04);
}
body.login-screen .pwd::before {
  opacity: .55;
  background:
    linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.055) 34%, rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 48%);
  mix-blend-mode: screen;
}
body.login-screen .pwd:focus-within {
  background:
    linear-gradient(180deg, rgba(255,255,255,.205), rgba(255,255,255,.095));
  border-color: rgba(255,255,255,.42);
  box-shadow:
    0 9px 26px rgba(0,0,0,.18),
    0 0 0 2.5px rgba(10,132,255,.14),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.06);
}
body.login-screen .pwd input {
  text-shadow: 0 1px 4px rgba(0,0,0,.22);
}
body.login-screen .pwd input::placeholder {
  color: rgba(255,255,255,.66);
}
body.login-screen .go {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22);
}
body.login-screen .go:hover {
  background: rgba(255,255,255,.22);
}
body.login-screen .pwd.has-text .go {
  background: rgba(10,132,255,.88);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 2px 8px rgba(10,132,255,.22),
    inset 0 1px 0 rgba(255,255,255,.24);
}
body.login-screen .hint {
  background: rgba(255,255,255,.105);
  border-color: rgba(255,255,255,.24);
  box-shadow:
    0 8px 20px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(26px) saturate(1.4) brightness(1.04);
  backdrop-filter: blur(26px) saturate(1.4) brightness(1.04);
}
body.login-screen .hint:hover {
  background: rgba(255,255,255,.16);
}
body.login-screen .caption {
  text-shadow: 0 1px 4px rgba(0,0,0,.24);
}

/* Demo / bottone: stesso vetro naturale, senza box-shadow teatrali */
body.login-screen .demo-widget,
body.login-screen .enter-desktop {
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 12px 34px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(28px) saturate(1.45) brightness(1.03);
  backdrop-filter: blur(28px) saturate(1.45) brightness(1.03);
}
body.login-screen .dstep,
body.login-screen .cbtn,
body.login-screen .node .nico {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

body.login-screen.unlock .lock {
  filter: blur(6px) saturate(1.04);
}
body.login-screen.unlock .wallpaper {
  filter: brightness(.97) saturate(1.06) contrast(1.01);
}


/* ============================================================
   NOTES — KEYNOTE (reset pulito)
   Immagine protagonista mai tagliata, tipografia ampia, fondo a tinta
   tenue per sezione. Stile macOS, sobrio e presentabile.
   ============================================================ */

/* Variabili palette (impostate via JS per ogni nota) */
.notes-real-app{ --nr-a:#8a8a90; --nr-b:#3a3a42; --nr-c:#d6d6dc; --nr-ratio:1.3333; --nr-maxh:54vh; }

/* Selezione lista: pulita, stile macOS (sostituisce il grigio piatto) */
.nr-row.active{ background:rgba(255,255,255,.10); }
.nr-row.active b{ color:#fff; }
.nr-row.active span{ color:rgba(245,245,247,.5); }

/* Editor: scuro con un velo tenue della tinta di sezione */
.nr-editor{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--nr-a) 9%, #1b1b1f),
    color-mix(in srgb, var(--nr-b) 7%, #161619)) !important;
}

/* Area nota: ampia, centrata, ariosa */
.nr-note{ padding:34px clamp(30px,5vw,68px) 40px; overflow:auto; }
.nr-note-date{ display:none; }
.nr-note.switching{ animation:nrKeynote .42s cubic-bezier(.22,1,.36,1) both; }
@keyframes nrKeynote{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* Layout Keynote: immagine + testo, allineati e centrati */
.nr-note-layout{
  display:grid;
  grid-template-columns:minmax(0,52%) minmax(0,1fr);
  gap:clamp(30px,4vw,58px);
  align-items:center;
  max-width:1180px;
  margin:0 auto;
}
.nr-note.portrait .nr-note-layout{ grid-template-columns:minmax(0,40%) minmax(0,1fr); }
.nr-note.wide .nr-note-layout{ grid-template-columns:minmax(0,48%) minmax(0,1fr); }

/* Immagine protagonista: ratio reale, mai tagliata, cornice pulita */
.nr-visual,
.nr-visual.polaroid, .nr-visual.photo-note,
.nr-visual.polaroid.wide, .nr-visual.polaroid:not(.wide){
  position:relative;
  margin:0 auto;
  width:min(100%, calc(var(--nr-maxh) * var(--nr-ratio)));
  max-width:100%;
  padding:0;
  border-radius:18px;
  background:transparent;
  transform:none;
  filter:none;
  box-shadow:none;
  transition:transform .4s var(--spring-soft, cubic-bezier(.22,1,.36,1)), box-shadow .4s ease;
}
.nr-visual-frame{
  position:relative;
  width:100%;
  aspect-ratio:var(--nr-ratio);
  border-radius:18px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:color-mix(in srgb, var(--nr-b) 16%, #0e0e11);
  box-shadow:0 30px 64px -34px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.06);
}
.nr-visual img,
.nr-visual.polaroid:not(.wide) img,
.nr-visual.polaroid.wide img{
  width:100%;
  height:100%;
  min-height:0;
  object-fit:contain;
  object-position:center;
  border-radius:0;
  background:transparent;
  transform:none;
}
.nr-visual:hover{ transform:translateY(-2px); box-shadow:0 38px 74px -34px rgba(0,0,0,.6); }
.nr-visual figcaption{
  margin-top:13px;
  min-height:0;
  padding:0;
  background:transparent;
  text-align:center;
  color:rgba(245,245,247,.5);
  font-family:"SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:-.01em;
}

/* Testo Keynote: ampio e leggibile */
.nr-note-copy{ min-width:0; }
.nr-note-label{
  display:inline-flex;
  margin:0 0 14px;
  padding:5px 11px;
  border-radius:999px;
  color:color-mix(in srgb, var(--nr-c) 74%, #fff);
  background:color-mix(in srgb, var(--nr-a) 20%, rgba(255,255,255,.06));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nr-c) 16%, transparent);
  font-size:11.5px;
  font-weight:760;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.nr-note h2{
  margin:0 0 18px;
  color:#f5f5f7;
  font-size:clamp(30px,3vw,40px);
  line-height:1.04;
  font-weight:800;
  letter-spacing:-.04em;
}
.nr-note-body{ max-width:560px; display:grid; gap:13px; }
.nr-note-body p{
  margin:0;
  color:rgba(245,245,247,.76);
  font-size:15.5px;
  line-height:1.6;
  font-weight:440;
  letter-spacing:-.011em;
}
.nr-note.large .nr-note-body p{ font-size:17px; }

/* Chips puliti */
.nr-points{ display:none; flex-wrap:wrap; gap:8px; margin-top:22px; padding:0; background:transparent; box-shadow:none; }
.nr-points.show{ display:flex; }
.nr-points div{
  display:flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:999px;
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  color:rgba(245,245,247,.8); font-size:12.5px; font-weight:520;
}
.nr-points div span{
  display:inline; width:auto; height:auto; margin:0; border-radius:0; background:transparent;
  color:color-mix(in srgb, var(--nr-c) 70%, #fff); font-size:11px; font-weight:780;
}

/* Link progetto */
.nr-project-link{ margin:18px 0 0; }

/* Collegamento Calendario stile macOS (in CS Metal) */
.nr-os-link{
  display:inline-flex; align-items:center; gap:11px;
  margin:18px 0 0; padding:9px 14px 9px 9px;
  border:0; border-radius:13px; cursor:pointer;
  color:rgba(245,245,247,.92); text-align:left;
  background:rgba(255,255,255,.075);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  transition:background .18s ease, transform .2s var(--spring-soft, cubic-bezier(.22,1,.36,1));
}
.nr-os-link:hover{ background:rgba(255,255,255,.115); transform:translateY(-1px); }
.nr-os-link:active{ transform:scale(.98); }
.nr-os-icon{
  width:34px; height:34px; flex:none; border-radius:9px;
  display:grid; place-items:end center; padding-bottom:5px;
  background:linear-gradient(180deg,#ff453a 0 30%, #fff 30% 100%);
  color:#1a1a1a; font-size:13px; font-weight:850; letter-spacing:-.03em;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.06);
}
.nr-os-icon i{ font-style:normal; }
.nr-os-text{ min-width:0; }
.nr-os-link b{ display:block; font-size:13px; font-weight:700; letter-spacing:-.02em; }
.nr-os-link em{ display:block; margin-top:1px; font-style:normal; font-size:11.5px; color:rgba(245,245,247,.5); }
.nr-os-link strong{ margin-left:6px; color:rgba(245,245,247,.34); font-size:11.5px; font-weight:700; }

/* Massimizzato / schermo intero: piu' grande, piu' Keynote */
.win.maxi .notes-real-app{ height:100%; grid-template-columns:220px 300px minmax(0,1fr); --nr-maxh:64vh; }
.win.maxi .nr-note{ padding:48px clamp(40px,6vw,100px) 56px; display:flex; flex-direction:column; justify-content:center; }
.win.maxi .nr-note-layout{ max-width:1320px; gap:clamp(46px,5vw,84px); width:100%; }
.win.maxi .nr-note h2{ font-size:clamp(40px,3.6vw,56px); margin-bottom:22px; }
.win.maxi .nr-note-body{ max-width:640px; gap:16px; }
.win.maxi .nr-note-body p{ font-size:clamp(16px,1.2vw,19px); }
.win.maxi .nr-note.large .nr-note-body p{ font-size:clamp(18px,1.35vw,21px); }
.win.maxi .notes-real-app.focus{ grid-template-columns:minmax(0,1fr); }
.win.maxi .notes-real-app.focus .nr-sidebar,
.win.maxi .notes-real-app.focus .nr-list{ display:none; }
.win.maxi .notes-real-app.focus .nr-editor{ min-width:0; }
.win.maxi .notes-real-app.focus .nr-note{ padding:56px clamp(46px,7vw,120px); overflow:auto; }
.win.maxi .notes-real-app.focus .nr-note-layout{ max-width:1180px; grid-template-columns:minmax(0,50%) minmax(0,1fr); gap:clamp(42px,5vw,72px); align-items:center; }
.win.maxi .notes-real-app.focus .nr-note.portrait .nr-note-layout{ grid-template-columns:minmax(0,38%) minmax(0,1fr); }
.win.maxi .notes-real-app.focus .nr-note.wide .nr-note-layout{ grid-template-columns:minmax(0,46%) minmax(0,1fr); }
.win.maxi .notes-real-app.focus .nr-note-body{ max-width:620px; }

/* Stabilizzazione Note durante resize/fullscreen browser:
   blocca animazioni e transizioni interne mentre la finestra cambia dimensione,
   evitando il riassestamento lento/buggato del testo. */
.notes-real-window.notes-resizing .notes-real-app,
.notes-real-window.notes-resizing .notes-real-app *,
.notes-real-window.notes-resizing .nr-note.switching,
.notes-real-window.notes-resizing .nr-visual{
  animation:none !important;
  transition:none !important;
}
.notes-real-window.notes-resizing .nr-note{
  contain:layout paint;
}

/* Responsivo: impilato, immagine sempre intera e centrata */
@media (max-width:1100px){
  .nr-note-layout,
  .nr-note.portrait .nr-note-layout,
  .nr-note.wide .nr-note-layout{ grid-template-columns:1fr; gap:26px; }
  .nr-visual,
  .nr-visual.polaroid, .nr-visual.photo-note{ --nr-maxh:40vh; width:min(100%, calc(40vh * var(--nr-ratio))); }
  .nr-note-body{ max-width:none; }
}
@media (max-width:760px){
  .nr-note{ padding:24px 22px 30px; }
  .nr-visual,
  .nr-visual.polaroid, .nr-visual.photo-note{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .nr-note.switching{ animation:none; }
  .nr-visual:hover{ transform:none; }
}


/* ============================================================
   Refinement Maps Navigator — motion Apple-like, vetro, pin puliti
   ============================================================ */
.maps-app{
  --maps-ease: cubic-bezier(.22, 1, .36, 1);
  --maps-ease-long: cubic-bezier(.32, .72, 0, 1);
}
#maps-cam,
#maps-puck,
#maps-puck .puck-rot,
#maps-route-progress,
.mw-pin-rot{
  transition-duration:.86s!important;
  transition-timing-function:var(--maps-ease-long)!important;
}

/* Le spillette non devono “cadere” o pulsare: entrano già presenti, con micro-stato attivo. */
.mw-pin-drop{ animation:none!important; transform:none!important; opacity:1!important; }
.pin-ground{ opacity:.18; }
.pin-stem{ filter:url(#mw-pin-sh); stroke:rgba(255,255,255,.14); stroke-width:1; }
.pin-face{ stroke:rgba(255,255,255,.24); stroke-width:1; }
.pin-dot{ opacity:.52; }
.pin-halo{ animation:none!important; opacity:0!important; }
.mw-pin.on .pin-halo,
.mw-pin.is-dest.on .pin-halo{ animation:none!important; opacity:0!important; }
.mw-pin.on .pin-stem,
.mw-pin.on .pin-face{
  filter:url(#mw-pin-sh) drop-shadow(0 0 8px rgba(10,132,255,.18));
}
.mw-pin.on .pin-dot{ opacity:.85; fill:#f5f5f7; }
.mw-pin.done .pin-stem,
.mw-pin.done .pin-face{ fill:#5f646b; opacity:.82; }
.mw-pin.is-stop .pin-stem,
.mw-pin.is-stop .pin-face{ fill:#8f949b; }
.mw-pin.is-dest .pin-stem,
.mw-pin.is-dest .pin-face{ fill:#ff5f57; }

/* Dot navigatore: capsula tonda in vetro refrattivo con freccia, non pallino pulsante. */
.puck-soft{
  fill:#0a84ff;
  opacity:.14;
  filter:blur(1.5px);
}
.puck-shell{
  fill:url(#mw-puck-glass);
  filter:url(#mw-puck-refract);
}
.puck-rim{
  fill:none;
  stroke:url(#mw-puck-rim);
  stroke-width:1.6;
  vector-effect:non-scaling-stroke;
}
.puck-arrow{
  opacity:1!important;
  fill:#fff;
  stroke:rgba(0,42,110,.22);
  stroke-width:1.25;
  stroke-linejoin:round;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.22));
}
.puck-glint{
  fill:none;
  stroke:rgba(255,255,255,.72);
  stroke-width:1.2;
  stroke-linecap:round;
  opacity:.72;
}
.maps-app.nav .puck-dot{ opacity:0!important; }
.maps-app.nav .puck-arrow{ opacity:1!important; }

/* Pannelli: niente flash ripetuti; feedback più sobrio e pulito. */
.mw-flash{ animation:none!important; }
.mw-hint{ animation:none!important; opacity:.86; }
.mw-banner{
  transition:background .34s ease, box-shadow .34s ease, transform .34s var(--maps-ease), opacity .24s ease;
}
.maps-app.nav .mw-banner{
  background:linear-gradient(180deg,rgba(49,186,83,.94),rgba(21,155,60,.94));
  box-shadow:0 16px 38px rgba(8,82,30,.32), inset 0 1px 0 rgba(255,255,255,.30), inset 0 0 0 1px rgba(255,255,255,.12);
}
.mw-banner-icon{ text-shadow:none; }
.mw-zoom button,
.mw-back,
.mw-modes button{
  transition:background .18s ease, color .18s ease, transform .18s var(--maps-ease)!important;
}
.mw-zoom button:active,
.mw-back:active,
.mw-modes button:active{ transform:scale(.96)!important; }

@media (prefers-reduced-motion: reduce){
  #maps-cam,#maps-puck,#maps-puck .puck-rot,#maps-route-progress,.mw-pin-rot{ transition-duration:.001s!important; }
}


/* ============================================================
   Global Smooth Motion Pass — Apple Maps reference
   ------------------------------------------------------------
   Obiettivo: motion meno “rimbalzoso”, più fluido e continuo su tutta l’app.
   ============================================================ */
:root{
  --ease-apple: cubic-bezier(.22, 1, .36, 1);
  --ease-apple-long: cubic-bezier(.16, 1, .30, 1);
  --ease-apple-map: cubic-bezier(.20, .82, .12, 1);
  --spring: cubic-bezier(.22, 1, .36, 1);
  --spring-soft: cubic-bezier(.22, 1, .36, 1);
  --spring-pop: cubic-bezier(.22, 1, .36, 1);
  --dur: .68s;
}

/* Finestre e cards: entrata morbida, niente overshoot/cartoon. */
@keyframes winIn{
  0%{opacity:0;transform:scale(.965) translateY(18px);filter:blur(8px)}
  65%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
}
@keyframes winOut{
  from{opacity:1;transform:scale(1);filter:blur(0)}
  to{opacity:0;transform:scale(.975) translateY(10px);filter:blur(5px)}
}
.win.open{animation:winIn .62s var(--ease-apple-long) both!important}
.win.closing{animation:winOut .30s var(--ease-apple) both!important}

@keyframes tileIn{from{opacity:0;transform:translateY(9px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes dIn{from{opacity:0;transform:translateY(-7px) scale(.985);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes riseIn{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes badgePop{from{transform:scale(.92);opacity:0;filter:blur(4px)}to{transform:scale(1);opacity:1;filter:none}}
@keyframes pinDrop{from{opacity:0;transform:translate(-50%,-108%);filter:blur(4px)}to{opacity:1;transform:translate(-50%,-100%);filter:none}}

.win.open .fbadge,
.win.open .apic,
.win.open .pin,
.win.open .favico{animation:badgePop .46s var(--ease-apple) .06s both!important}
.win.open .mpin{animation:pinDrop .48s var(--ease-apple) .08s both!important}
.win.open .as-hero,
.win.open .crow,
.win.open .evt,
.win.open .stop,
.win.open .aprow,
.win.open .as-duo>*,
.win.open .cstat,
.win.open .favcard,
.win.open .cnote,
.win.open .eta,
.win.open .sf-note{animation-timing-function:var(--ease-apple)!important;animation-duration:.48s!important}

/* Interazioni comuni: press più breve e meno elastico. */
button,
.dicon,
.fitem,
.favcard,
.crow,
.evt,
.stop,
.aprow,
.cstat,
.nr-row,
.pcto-year-card,
.pcto-day,
.finder-nav button,
.finder-viewbar button,
.finder-actions button,
.mw-back,
.mw-modes button,
.mw-zoom button,
.ccrow,
.ccmini,
.ccfocus,
.cact,
.getb,
.xchips span{
  transition-timing-function:var(--ease-apple)!important;
}

/* Dock: feedback più Apple, meno salto. */
.dock{animation:dockIn .66s var(--ease-apple-long) .08s both!important}
.dock .ai.bounce{animation:dockSoftBounce .52s var(--ease-apple)!important}
@keyframes bounce{0%,100%{translate:0 0}42%{translate:0 -12px}72%{translate:0 -3px}}
@keyframes dockSoftBounce{0%,100%{translate:0 0}44%{translate:0 -12px}74%{translate:0 -3px}}
.dapp .tip{transition:opacity .18s ease,transform .30s var(--ease-apple)!important}

/* Spotlight / gallery: eliminato l’overshoot visibile. */
.spot-shell{transition:transform .46s var(--ease-apple-long),opacity .24s ease,filter .34s ease!important}
.spot-result{transition:opacity .26s ease,transform .38s var(--ease-apple),filter .26s ease!important}
.sg-window.open{animation:sgWinIn .52s var(--ease-apple-long) both!important}
.sg-center-win.open{animation:sgCenterIn .56s var(--ease-apple-long) both!important}
@keyframes sgWinIn{from{opacity:0;transform:translateY(18px) scale(.94);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:none}}
@keyframes sgCenterIn{from{opacity:0;transform:translateY(14px) scale(.94);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}

/* Maps: camera più fluida e continua, come Apple Maps reference. */
.maps-app{
  --maps-ease: var(--ease-apple);
  --maps-ease-long: var(--ease-apple-map);
}
#maps-cam{
  transform-box:view-box!important;
  transform-origin:0 0!important;
  transition:transform 1.72s var(--ease-apple-map)!important;
  will-change:transform;
}
#maps-puck{
  transition:transform 1.54s var(--ease-apple-map)!important;
  will-change:transform;
}
#maps-puck .puck-rot,
.mw-pin-rot{
  transition:transform 1.54s var(--ease-apple-map)!important;
}
#maps-route-progress{
  transition:stroke-dashoffset 1.62s var(--ease-apple-map)!important;
}
.mw-banner,
.mw-hint,
.mw-zoom{
  transition-timing-function:var(--ease-apple)!important;
}
.mw-banner{transition:background .42s ease,box-shadow .42s ease,transform .42s var(--ease-apple),opacity .24s ease!important}
.mw-banner-text b,
.mw-banner-text p,
.mw-banner-text span{transition:opacity .24s ease,transform .34s var(--ease-apple)}
.mw-hint{transition:opacity .32s ease,transform .42s var(--ease-apple)!important}

/* Map details: il puck resta vetroso, pin e label reagiscono senza pulsazioni. */
.puck-soft{transition:opacity .45s ease,filter .45s ease}
.maps-app.nav .puck-soft{opacity:.18;filter:blur(2px)}
.mw-pin{transition:opacity .36s ease,filter .36s ease}
.mw-pin.on .pin-stem,
.mw-pin.on .pin-face{transition:filter .42s ease,fill .42s ease,opacity .42s ease}
.mw-pin.done .pin-stem,
.mw-pin.done .pin-face{transition:fill .42s ease,opacity .42s ease}

/* Vecchio navigatore legacy, se presente: stesso easing. */
#mv-cam,#w-fine #nav-cam{transition:transform 1.62s var(--ease-apple-map)!important}
#mv-puck,#mv-trav,#w-fine #nav-puck,#w-fine #nav-route-done{transition-duration:1.50s!important;transition-timing-function:var(--ease-apple-map)!important}
.mk,#w-fine .mk{transition-timing-function:var(--ease-apple)!important}

/* Mantiene accessibilità e performance. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important;scroll-behavior:auto!important}
}


/* ============================================================
   Maps icon correction — reference usata solo per il navigation puck
   ============================================================ */
/* Banner: niente emoji o icone decorative sbagliate; solo SVG minimal turn-by-turn. */
.mw-banner-icon{
  width:44px!important;
  height:44px!important;
  border-radius:13px;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px rgba(255,255,255,.12);
  font-size:0!important;
}
.mw-banner-icon svg{width:28px;height:28px;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.20))}
.mw-banner-icon path{fill:#fff;transition:d .28s var(--ease-apple, cubic-bezier(.22,1,.36,1)), opacity .22s ease, transform .32s var(--ease-apple, cubic-bezier(.22,1,.36,1));transform-origin:center}
.mw-banner-icon[data-icon="arrived"] path{transform:scale(.96)}

/* Marker traguardi: non sono icone; diventano pin puliti senza lettere/simboli. */
.pin-i{display:none!important}
.pin-dot-dest{fill:#2b2b2d;opacity:.62}
.mw-pin.on .pin-dot-dest{fill:#fff;opacity:.92}

/* Puck navigazione: unico elemento derivato dalla reference dell'icona Maps. */
.puck-shadow{
  fill:#0a84ff;
  opacity:.18;
  filter:blur(2px);
}
.puck-shell{
  fill:url(#mw-puck-glass)!important;
  filter:url(#mw-puck-refract);
}
.puck-inner{
  fill:#0a84ff;
  opacity:.84;
}
.puck-rim{
  fill:none!important;
  stroke:url(#mw-puck-rim);
  stroke-width:1.8;
  vector-effect:non-scaling-stroke;
}
.puck-arrow{
  fill:rgba(255,255,255,.96)!important;
  stroke:rgba(255,255,255,.55)!important;
  stroke-width:.75!important;
  stroke-linejoin:round;
  filter:drop-shadow(0 1.2px 1.2px rgba(0,48,120,.26));
}
.puck-glint{
  fill:none;
  stroke:rgba(255,255,255,.62);
  stroke-width:1.15;
  stroke-linecap:round;
  opacity:.76;
}
.maps-app.nav .puck-arrow{opacity:1!important}
.maps-app.nav .puck-shadow{opacity:.20}


/* ============================================================
   Fix indicazioni + navigation dot requested
   ============================================================ */
/* Le icone delle indicazioni devono restare visibili: SVG pieno, non testo nascosto. */
.mw-banner-icon{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:0!important;
  color:#fff!important;
}
.mw-banner-icon svg{
  display:block!important;
  width:30px!important;
  height:30px!important;
  overflow:visible!important;
}
.mw-banner-icon path{
  display:block!important;
  fill:currentColor!important;
  opacity:1!important;
  transform-origin:50% 50%;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.22));
}
.mw-banner-icon[data-icon="overview"] path,
.mw-banner-icon[data-icon="straight"] path{ transform:scale(1); }
.mw-banner-icon[data-icon="arrived"] path{ transform:scale(.94); }
.mw-banner-icon[data-icon="destination"] path{ transform:scale(.96); }

/* Dot navigazione: bordo lineare bianco e freccia più piccola. */
.puck-shell{
  r:16.5;
  fill:#0a84ff!important;
  filter:url(#mw-puck-refract);
}
.puck-inner{
  r:13.4;
  fill:url(#mw-puck-glass);
  opacity:.92;
}
.puck-rim{
  r:17.2;
  fill:none!important;
  stroke:#fff!important;
  stroke-width:2.25!important;
  opacity:.98!important;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 .7px 1px rgba(0,0,0,.18));
}
.puck-arrow{
  fill:rgba(255,255,255,.97)!important;
  stroke:rgba(255,255,255,.72)!important;
  stroke-width:.55!important;
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(.82);
  filter:drop-shadow(0 1px 1px rgba(0,52,130,.28));
}
.puck-glint{ opacity:.58; stroke-width:.95; }
.puck-shadow{ opacity:.14; }


/* ============================================================
   Final Apple Maps icon + ultra-smooth motion pass
   ============================================================ */
/* Indicazioni: icone sempre presenti e leggibili, stile Apple Maps turn-by-turn. */
.mw-banner-icon{
  width:48px!important;height:48px!important;border-radius:14px!important;
  background:rgba(255,255,255,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), inset 0 0 0 1px rgba(255,255,255,.14)!important;
}
.mw-banner-icon svg{width:32px!important;height:32px!important;display:block!important;overflow:visible!important}
.mw-banner-icon path{fill:#fff!important;opacity:1!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.24));transition:opacity .22s ease, transform .34s var(--ease-apple, cubic-bezier(.22,1,.36,1))!important}
.mw-banner-icon[data-icon="slightRight"] path{transform:scale(.92) translateX(-1px)}
.mw-banner-icon[data-icon="arrived"] path{transform:scale(.92)}
.mw-banner-icon[data-icon="destination"] path{transform:scale(.94)}

/* Lista indicazioni: pin/iconcine visibili nella sidebar. */
.mw-pt{display:flex!important;align-items:center!important;justify-content:center!important;width:17px!important;height:17px!important;margin-left:-2px!important;background:#6f747b!important;color:#fff!important;box-shadow:0 0 0 4px #1c1d21, inset 0 1px 0 rgba(255,255,255,.28)!important}
.mw-pt svg{width:13px;height:13px;display:block;fill:currentColor}
.mw-pt.start{background:#8e8e93!important}.mw-pt.mid{background:#70757c!important}.mw-pt.end{background:#ff453a!important;width:18px!important;height:18px!important}

/* Dot navigazione esattamente tipo reference: disco bianco, centro blu, freccia bianca piccola. */
.puck-cast{fill:#000;opacity:.16;filter:blur(3.5px);transform:translate(2px,5px)}
.puck-white{fill:#fff;filter:drop-shadow(0 6px 12px rgba(0,0,0,.22)) drop-shadow(0 1px 1px rgba(255,255,255,.78))}
.puck-blue{fill:#0A84FF;filter:drop-shadow(0 1px 2px rgba(0,70,170,.32))}
.puck-blue-highlight{fill:url(#mw-puck-glass);opacity:.38;mix-blend-mode:screen}
.puck-rim,.puck-shell,.puck-inner,.puck-shadow{display:none!important}
.puck-arrow{fill:#fff!important;stroke:rgba(255,255,255,.84)!important;stroke-width:.5!important;transform:none!important;filter:drop-shadow(0 1px 1px rgba(0,57,145,.24))}
.puck-arrow-shine{fill:rgba(255,255,255,.34);stroke:none;pointer-events:none}
.puck-glint{display:none!important}

/* Motion ancora più pulito: niente jerk, transizioni più lunghe e coerenti. */
#maps-cam{transition:transform 1.95s cubic-bezier(.18,.86,.16,1)!important}
#maps-puck{transition:transform 1.78s cubic-bezier(.18,.86,.16,1)!important}
#maps-puck .puck-rot,.mw-pin-rot{transition:transform 1.78s cubic-bezier(.18,.86,.16,1)!important}
#maps-route-progress{transition:stroke-dashoffset 1.86s cubic-bezier(.18,.86,.16,1)!important}
.mw-banner{transition:background .48s ease, box-shadow .48s ease, transform .48s cubic-bezier(.22,1,.36,1), opacity .28s ease!important}
.mw-pin.on .pin-stem,.mw-pin.on .pin-face{filter:url(#mw-pin-sh)!important}
.mw-pin.on .pin-dot,.mw-pin.on .pin-dot-dest{transition:fill .45s ease, opacity .45s ease}


/* ============================================================
   Proportional route + icons in indications card
   ============================================================ */
/* Card indicazioni: icone reali, non solo info generica. */
.mw-routecard{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#0a8cff 0%,#0874ee 100%)!important;
}
.mw-routecard::after{
  content:"";position:absolute;right:-34px;top:-42px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.28),rgba(255,255,255,0) 64%);pointer-events:none;
}
.mw-rc-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:11px;position:relative;z-index:1}
.mw-rc-icons>span{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:7px 7px 6px;border-radius:11px;background:rgba(255,255,255,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.10)}
.mw-rc-icons svg{width:17px;height:17px;fill:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));margin-bottom:1px}
.mw-rc-icons b{font-size:10.5px!important;font-weight:820!important;line-height:1!important;letter-spacing:-.01em!important;color:#fff!important}
.mw-rc-icons small{font-size:9.5px!important;font-weight:700!important;line-height:1!important;color:rgba(255,255,255,.72)!important;text-transform:none!important;letter-spacing:0!important}
.mw-rc-info{width:27px!important;height:27px!important;background:rgba(255,255,255,.20)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.12)}
.mw-rc-info svg{width:17px;height:17px;fill:#fff;display:block}

/* Sidebar: la distanza verticale suggerisce la durata reale delle macro-tappe. */
.mw-route{padding-bottom:2px!important}
.mw-endpoint{min-height:42px!important;padding:5px 0!important}
.mw-endpoint:nth-of-type(4){min-height:74px!important} /* Diploma -> Università: tratto più lungo */
.mw-endpoint:nth-of-type(5){min-height:58px!important} /* Università -> Estero */
.mw-endpoint em::after{display:block;margin-top:3px;font-size:10px;font-weight:750;color:rgba(245,245,247,.36)}
.route-start em::after{content:'Base del percorso'}
.mw-route .route-stop:nth-of-type(3) em::after{content:'Tappa breve'}
.mw-route .route-stop:nth-of-type(4) em::after{content:'Milestone 2026'}
.mw-route .route-stop:nth-of-type(5) em::after{content:'Tratto principale · 3 anni'}
.route-end em::after{content:'Obiettivo 2031'}

/* Route su mappa: primi traguardi ravvicinati, università più distante, arrivo finale. */
#maps-route-base{opacity:.38!important;stroke-width:18!important}
#maps-route{stroke-width:12!important;filter:drop-shadow(0 2px 4px rgba(0,80,170,.30))}
#maps-route-progress{stroke-width:12!important;stroke:#8fd0ff!important}
.mw-pin[data-step-pin="1"],.mw-pin[data-step-pin="2"]{opacity:.95}
.mw-pin[data-step-pin="3"] .pin-stem,.mw-pin[data-step-pin="3"] .pin-face{fill:#6d8cff!important}


/* ============================================================
   Alignment + minimal sidebar card + natural pointer pass
   ============================================================ */
/* Sidebar route line centered through the actual icon centers. */
.mw-route{
  --route-axis:12px;
  padding:2px 2px 2px 0!important;
}
.mw-route-line{
  left:calc(var(--route-axis) - 1px)!important;
  top:13px!important;
  bottom:15px!important;
  width:2px!important;
  background:rgba(255,255,255,.13)!important;
}
.mw-endpoint{
  display:grid!important;
  grid-template-columns:24px minmax(0,1fr)!important;
  column-gap:10px!important;
  align-items:start!important;
  min-height:44px!important;
  padding:4px 0 7px!important;
}
.mw-pt{
  grid-column:1!important;
  justify-self:center!important;
  align-self:start!important;
  margin:1px 0 0 0!important;
  width:17px!important;
  height:17px!important;
  box-shadow:0 0 0 4px #1c1d21!important;
}
.mw-pt svg{width:12px!important;height:12px!important}
.mw-endpoint>div{grid-column:2;min-width:0}
.mw-endpoint:nth-of-type(4){min-height:70px!important}
.mw-endpoint:nth-of-type(5){min-height:55px!important}

/* Diploma label on map: make it visible and aligned, not hidden under nearby labels. */
.mw-pin[data-step-pin="2"] .mw-caption{transform:translate(0,10px)}
.mw-pin[data-step-pin="2"] .mw-caption text{font-size:14px!important;font-weight:840!important;stroke-width:2.8px!important}
.mw-pin[data-step-pin="2"] .pin-stem,.mw-pin[data-step-pin="2"] .pin-face{fill:#0a84ff!important}

/* Bottom sidebar card: minimal only. */
.mw-routecard{
  padding:14px 15px!important;
  gap:10px!important;
  min-height:0!important;
  background:linear-gradient(180deg,#0a84ff,#0877ee)!important;
  box-shadow:0 10px 24px rgba(10,120,240,.24), inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.mw-routecard::after,.mw-rc-icons,.mw-rc-main em{display:none!important}
.mw-rc-main b{font-size:28px!important;line-height:1!important}
.mw-rc-main span{font-size:12px!important;margin-top:6px!important;color:rgba(255,255,255,.84)!important}
.mw-rc-info{width:24px!important;height:24px!important;background:rgba(255,255,255,.16)!important}
.mw-rc-info svg{width:15px!important;height:15px!important}

/* Pointer: smaller, natural Apple blue, no shadows. */
.puck-cast{display:none!important}
.puck-white{r:16!important;fill:#fff!important;filter:none!important}
.puck-blue{r:12.4!important;fill:#0A84FF!important;filter:none!important}
.puck-blue-highlight{r:12.4!important;opacity:.16!important;filter:none!important;mix-blend-mode:normal!important}
.puck-arrow{transform:none!important;filter:none!important;stroke:rgba(255,255,255,.68)!important;stroke-width:.45!important}
.puck-arrow-shine{opacity:.18!important;filter:none!important}
#maps-puck{filter:none!important}


/* ============================================================
   Restore normal map scale + green indication icons
   ============================================================ */
/* Mappa: scala normale, tappe chiare e leggibili. */
.mw-pin[data-step-pin="1"] .mw-caption{transform:translate(0,6px)}
.mw-pin[data-step-pin="2"] .mw-caption{transform:translate(0,12px)}
.mw-pin[data-step-pin="2"] .mw-caption text{font-size:15px!important;font-weight:860!important;stroke-width:3px!important}
.mw-pin[data-step-pin="2"] .pin-stem,.mw-pin[data-step-pin="2"] .pin-face{fill:#0a84ff!important}
#maps-route{stroke-width:11.5!important}
#maps-route-base{stroke-width:17!important;opacity:.42!important}
#maps-route-progress{stroke-width:11.5!important}

/* Card verde indicazioni: reinserite frecce + icone senza appesantire. */
.maps-app.nav .mw-banner{padding-bottom:13px!important}
.mw-banner-flow{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;
  opacity:0;max-height:0;overflow:hidden;transform:translateY(-2px);
  transition:opacity .28s ease,max-height .34s var(--ease-apple, cubic-bezier(.22,1,.36,1)),transform .34s var(--ease-apple, cubic-bezier(.22,1,.36,1));
}
.maps-app.nav .mw-banner-flow{opacity:1;max-height:42px;transform:none}
.mw-banner-flow span{display:inline-flex!important;align-items:center;gap:4px;padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);font-size:10.5px!important;font-weight:780!important;letter-spacing:-.01em!important;color:#fff!important;text-transform:none!important}
.mw-banner-flow svg{width:13px;height:13px;fill:#fff;display:block;filter:none}
.mw-banner-flow i{font-style:normal;font-size:13px;font-weight:800;color:rgba(255,255,255,.72);line-height:1}

/* Puntatore riportato a scala normale ma ancora pulito. */
.puck-white{r:19!important;filter:none!important}
.puck-blue{r:14.6!important;fill:#0A84FF!important;filter:none!important}
.puck-blue-highlight{r:14.6!important;opacity:.18!important;filter:none!important;mix-blend-mode:normal!important}
.puck-cast{display:none!important}
.puck-arrow{filter:none!important;stroke:rgba(255,255,255,.70)!important;stroke-width:.48!important}
.puck-arrow-shine{opacity:.20!important}


/* ============================================================
   Pointer/tappa coherence + clean active-stop state
   ============================================================ */
/* FSL e Diploma: il Diploma resta subito dopo FSL ma leggibile, leggermente “dietro”. */
.mw-pin[data-step-pin="1"]{opacity:1}
.mw-pin[data-step-pin="2"]{opacity:.96}
.mw-pin[data-step-pin="2"] .mw-pin-drop{transform:translate(6px,-4px)!important}
.mw-pin[data-step-pin="2"] .mw-caption{transform:translate(18px,12px)!important}
.mw-pin[data-step-pin="2"] .mw-caption text{font-size:14.5px!important;font-weight:830!important;stroke-width:3px!important}
.mw-pin[data-step-pin="1"] .mw-caption{transform:translate(-6px,6px)!important}

/* Quando il pointer è sopra una tappa: niente halo, niente zoom aggressivo, solo selezione pulita. */
.maps-app.at-stop #maps-puck{opacity:.96;filter:none!important}
.maps-app.at-stop .puck-white{r:17.5!important;filter:none!important}
.maps-app.at-stop .puck-blue{r:13.4!important;fill:#0A84FF!important;filter:none!important}
.maps-app.at-stop .puck-blue-highlight{r:13.4!important;opacity:.12!important}
.maps-app.at-stop .puck-arrow{filter:none!important;stroke-width:.42!important}
.mw-pin.at-stop .pin-halo{display:none!important;animation:none!important;opacity:0!important}
.mw-pin.at-stop .pin-stem,
.mw-pin.at-stop .pin-face{
  filter:none!important;
  stroke:#fff!important;
  stroke-width:1.7!important;
}
.mw-pin.at-stop .pin-dot,
.mw-pin.at-stop .pin-dot-dest{fill:#fff!important;opacity:.92!important}
.mw-pin.at-stop .mw-caption text{
  fill:#fff!important;
  stroke:rgba(0,0,0,.72)!important;
  stroke-width:2.7px!important;
}
.mw-pin.on:not(.at-stop) .pin-stem,
.mw-pin.on:not(.at-stop) .pin-face{filter:none!important;stroke:rgba(255,255,255,.45)!important}

/* Card verde in stop: più calma e leggibile. */
.maps-app.at-stop .mw-banner{
  background:linear-gradient(180deg,rgba(45,174,79,.96),rgba(19,132,55,.96))!important;
  box-shadow:0 12px 30px rgba(8,82,30,.24), inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.10)!important;
}
.maps-app.at-stop .mw-banner-icon{background:rgba(255,255,255,.14)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important}


/* ============================================================
   Correct order + objective state + green card simplified
   ============================================================ */
/* Card verde: solo descrizione, nessuna guida percorso sotto. */
.mw-banner-flow{display:none!important}
.maps-app.nav .mw-banner{padding-bottom:14px!important}
.mw-banner{align-items:flex-start!important}
.mw-banner-icon{
  width:54px!important;height:54px!important;border-radius:15px!important;flex:0 0 54px!important;
  background:rgba(255,255,255,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), inset 0 0 0 1px rgba(255,255,255,.14)!important;
}
.mw-banner-icon svg{width:38px!important;height:38px!important;display:block!important;overflow:visible!important}
.mw-banner-icon path{fill:#fff!important;filter:none!important;transform-origin:50% 50%}
.mw-banner-icon[data-icon="straight"] path,
.mw-banner-icon[data-icon="overview"] path{transform:scale(1.08)}
.mw-banner-icon[data-icon="slightRight"] path{transform:scale(.98) translateX(-1px)}
.mw-banner-icon[data-icon="arrived"] path{transform:scale(1.02)}
.mw-banner-icon[data-icon="destination"] path{transform:scale(1.03)}

/* Ordine visivo: FSL prima, Diploma vicino ma dietro/successivo. */
.mw-pin[data-step-pin="1"]{opacity:1;z-index:2}
.mw-pin[data-step-pin="2"]{opacity:.95;z-index:1}
.mw-pin[data-step-pin="1"] .mw-caption{transform:translate(-10px,7px)!important}
.mw-pin[data-step-pin="2"] .mw-pin-drop{transform:translate(5px,-3px)!important}
.mw-pin[data-step-pin="2"] .mw-caption{transform:translate(20px,13px)!important}
.mw-pin[data-step-pin="2"] .pin-stem,.mw-pin[data-step-pin="2"] .pin-face{fill:#0a84ff!important}

/* Stato sopra tappa ancora più clean. */
.maps-app.at-stop .mw-pin.on .pin-stem,
.maps-app.at-stop .mw-pin.on .pin-face{filter:none!important;stroke:#fff!important;stroke-width:1.6!important}
.maps-app.at-stop .mw-pin.on .pin-halo{display:none!important}
.maps-app.at-stop .mw-pin.on .mw-caption text{stroke:rgba(0,0,0,.68)!important;stroke-width:2.6px!important}
.maps-app.at-stop #maps-puck{opacity:.96!important}

/* Stato obiettivo: destinazione chiara, senza animazioni sporche. */
.maps-app.at-goal .mw-banner{
  background:linear-gradient(180deg,rgba(52,199,89,.96),rgba(21,150,62,.96))!important;
  box-shadow:0 14px 32px rgba(8,82,30,.24), inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.12)!important;
}
.maps-app.at-goal .mw-banner-icon{background:rgba(255,255,255,.20)!important}
.maps-app.at-goal .mw-pin.is-dest .pin-stem,
.maps-app.at-goal .mw-pin.is-dest .pin-face{fill:#ff453a!important;stroke:#fff!important;stroke-width:1.8!important;filter:none!important}
.maps-app.at-goal .mw-pin.is-dest .pin-dot-dest{fill:#fff!important;opacity:.95!important}
.maps-app.at-goal .mw-pin.is-dest .mw-caption text{font-size:16px!important;font-weight:860!important;stroke-width:3px!important}
.maps-app.at-goal #maps-puck{opacity:.92!important;filter:none!important}
.maps-app.at-goal .puck-blue{fill:#0A84FF!important}


/* ============================================================
   MP4 direct playback fix — niente falso fallback con assets/lock.mp4
   ============================================================ */
body.login-screen.video-loading .wallpaper,
body.login-screen.video-ok .wallpaper{
  opacity:1!important;
}
body.login-screen.video-error .wallpaper{
  opacity:0!important;
}
body.login-screen.video-loading::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url("assets/optimized/bg.webp") center / cover no-repeat;
  opacity:.28;
}

/* ============================================================
   Maps animation v2 — neutral dark map, HUD esterno invariato
   ============================================================ */
.mw-map-wrap{
  perspective:1200px;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.035),transparent 45%),linear-gradient(135deg,#0b0d10,#12151a 48%,#090b0e)!important;
}
.maps-map{
  transform-origin:center center;
  transform-style:preserve-3d;
  transition:transform 1.35s cubic-bezier(.2,.9,.2,1),filter 1.35s ease!important;
  filter:saturate(.98) contrast(1.02);
  will-change:transform,filter;
}
.maps-app.nav .maps-map{
  transform:scale(1.08) rotateX(52deg) rotateZ(-19deg) translateY(34px);
  filter:saturate(1) contrast(1.04);
}
.maps-app.maps-checkpoint .maps-map{filter:saturate(1.05) contrast(1.08) brightness(1.07)}
#maps-cam{transform:none!important;transition:none!important;will-change:auto!important}
#maps-puck,#maps-puck .puck-rot,#maps-route-progress,.mw-pin-rot{transition:none!important;will-change:transform}
.mw-land{fill:#171a1f}
.mw-green-blob{fill:#17271f;opacity:.92}.mw-green-blob.soft{opacity:.62}
.mw-soft-road{fill:none;stroke:rgba(255,255,255,.035);stroke-width:42;stroke-linecap:round;opacity:.62}.mw-soft-road.thin{stroke-width:24;opacity:.42}
.mw-route-glow{fill:none;stroke:rgba(10,132,255,.24);stroke-width:28;stroke-linecap:round;stroke-linejoin:round;filter:url(#maps-route-shadow)}
.mw-route{fill:none;stroke:#0a84ff;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(10,132,255,.48))}
.mw-route-progress{fill:none;stroke:#64d2ff;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:0 99999;filter:drop-shadow(0 0 12px rgba(100,210,255,.58))}
.mw-city-label{font-size:21px;font-weight:760;fill:rgba(245,245,247,.72);paint-order:stroke;stroke:rgba(11,13,16,.88);stroke-width:6px;stroke-linejoin:round;letter-spacing:-.02em;filter:url(#maps-caption-shadow)}
.maps-poi{filter:drop-shadow(0 8px 16px rgba(0,0,0,.40));transition:opacity .3s ease,filter .3s ease}.maps-poi-circle{fill:#171c24;stroke:rgba(255,255,255,.16);stroke-width:2}.maps-poi-number{font-size:15px;font-weight:850;fill:#64d2ff;text-anchor:middle;dominant-baseline:central}.maps-poi.dest .maps-poi-circle{fill:#201b1d;stroke:rgba(255,95,87,.55)}.maps-poi.on .maps-poi-circle{stroke:#64d2ff;stroke-width:3}.maps-poi.done{opacity:.72}.maps-poi.done .maps-poi-number{fill:rgba(245,245,247,.54)}
.mw-checkpoint-ring{fill:none;stroke:#64d2ff;stroke-width:5;opacity:0;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 10px rgba(100,210,255,.68))}.mw-checkpoint-ring.active{animation:mapsCheckpointPulse 1.25s ease-out forwards}@keyframes mapsCheckpointPulse{0%{opacity:.82;transform:scale(.65)}100%{opacity:0;transform:scale(2.7)}}
@media(max-width:860px){.maps-app.nav .maps-map{transform:scale(1.06) rotateX(46deg) rotateZ(-16deg) translateY(22px)}}
@media(prefers-reduced-motion:reduce){.maps-map{transition-duration:.001s!important}.mw-checkpoint-ring.active{animation-duration:.001s!important}}

/* ============================================================
   PCTO Calendar visual/proportion pass — fullscreen refined
   ============================================================ */
.pcto-calendar-window{
  min-width:min(1120px,calc(100vw - 28px));
}
.pcto-cal-app{
  height:min(700px,calc(100vh - 112px))!important;
  grid-template-columns:clamp(220px,20vw,252px) minmax(560px,1fr) clamp(300px,26vw,348px)!important;
  background:#1b1c20!important;
}
.pcto-side,
.pcto-detail,
.pcto-main{min-height:0!important;}
.pcto-side{
  padding:18px 14px 16px!important;
  overflow:auto!important;
  background:linear-gradient(180deg,#171c22,#15191f)!important;
}
.pcto-side-head{padding:0 8px 16px!important;}
.pcto-cloud{color:#8fc7ff!important;font-size:11.5px!important;}
.pcto-side-head h3{font-size:26px!important;letter-spacing:-.05em!important;}
.pcto-side-head p{font-size:12.5px!important;line-height:1.38!important;}
.pcto-year-card{
  border-radius:14px!important;
  padding:11px 10px!important;
  margin-bottom:7px!important;
  transition:background .18s ease,transform .18s var(--ease-apple,cubic-bezier(.22,1,.36,1)),box-shadow .18s ease!important;
}
.pcto-year-card:hover{transform:translateY(-1px);background:rgba(255,255,255,.075)!important;}
.pcto-year-card.active{
  background:rgba(255,255,255,.12)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;
}
.pcto-check{width:16px!important;height:16px!important;border-radius:5px!important;}
.pcto-company-card,
.mini-strip button{
  border-radius:16px!important;
  background:rgba(255,255,255,.065)!important;
}
.pcto-main{
  background:#202124!important;
  box-shadow:inset 1px 0 rgba(255,255,255,.035), inset -1px 0 rgba(255,255,255,.035);
}
.pcto-toolbar{
  height:76px!important;
  padding:14px 20px!important;
  gap:12px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))!important;
}
.pcto-round{
  width:34px!important;height:34px!important;
  background:rgba(255,255,255,.09)!important;
  transition:background .18s ease,transform .18s var(--ease-apple,cubic-bezier(.22,1,.36,1))!important;
}
.pcto-round:hover{background:rgba(255,255,255,.16)!important;}
.pcto-round:active{transform:scale(.94);}
.pcto-month-title h2{
  font-size:clamp(31px,2.8vw,42px)!important;
  letter-spacing:-.06em!important;
}
.pcto-month-title span{font-size:13px!important;color:rgba(245,245,247,.52)!important;}
.pcto-segment{padding:4px!important;background:rgba(255,255,255,.075)!important;}
.pcto-segment button{padding:8px 14px!important;font-size:12.5px!important;}
.pcto-calendar-grid{
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  grid-template-rows:34px repeat(6,minmax(88px,1fr))!important;
  background:#202124!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
  overflow:hidden!important;
  min-height:0!important;
  content-visibility:visible!important;
}
.pcto-weekday{
  height:auto!important;
  padding:0 12px!important;
  justify-content:flex-end!important;
  background:#202124!important;
  color:rgba(245,245,247,.58)!important;
  font-size:12.5px!important;
  text-transform:uppercase!important;
  letter-spacing:.045em!important;
  border-right:1px solid rgba(255,255,255,.095)!important;
  border-bottom:1px solid rgba(255,255,255,.13)!important;
}
.pcto-day{
  min-height:0!important;
  padding:10px 8px 8px!important;
  background:#202124!important;
  border-right:1px solid rgba(255,255,255,.095)!important;
  border-bottom:1px solid rgba(255,255,255,.095)!important;
  content-visibility:visible!important;
  contain-intrinsic-size:auto!important;
  transition:background .16s ease!important;
}
.pcto-day:hover{background:#25262a!important;}
.pcto-day b{
  right:10px!important;top:9px!important;
  font-size:15px!important;
  color:rgba(245,245,247,.86)!important;
}
.pcto-day.muted{background:#1d1e21!important;}
.pcto-day.muted b{color:rgba(245,245,247,.25)!important;}
.pcto-day.today b{
  right:7px!important;top:6px!important;
  width:28px!important;height:28px!important;
  font-size:14px!important;
  background:#ff453a!important;
  box-shadow:0 4px 14px rgba(255,69,58,.25)!important;
}
.pcto-day-events{
  top:40px!important;
  gap:5px!important;
}
.pcto-day-range{
  height:20px!important;
  line-height:20px!important;
  padding:0 9px!important;
  margin:0 -1px!important;
  font-size:11px!important;
  font-weight:760!important;
  background:color-mix(in srgb,var(--ev) 34%,rgba(255,255,255,.065))!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ev) 24%,rgba(255,255,255,.11)),0 4px 14px color-mix(in srgb,var(--ev) 8%,transparent)!important;
}
.pcto-day-range.start{margin-left:8px!important;padding-left:10px!important;}
.pcto-day-range.end{margin-right:8px!important;}
.pcto-day-range.active{
  background:color-mix(in srgb,var(--ev) 58%,rgba(255,255,255,.10))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 7px 18px color-mix(in srgb,var(--ev) 18%,transparent)!important;
}
.pcto-detail{
  padding:22px!important;
  overflow:auto!important;
  background:linear-gradient(180deg,#1f2025,#1b1c21)!important;
}
.pcto-detail-top span{font-size:11.5px!important;}
.pcto-detail-top h3{font-size:clamp(23px,2vw,30px)!important;}
.pcto-detail-top p{font-size:13px!important;line-height:1.35!important;}
.pcto-tutors{gap:10px!important;margin:18px 0 22px!important;}
.pcto-tutors div{padding:11px 12px!important;border-radius:14px!important;background:rgba(255,255,255,.055)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)!important;}
.pcto-event-card{
  padding:22px 22px 22px 24px!important;
  border-radius:22px!important;
}
.pcto-event-card h2{font-size:clamp(24px,2.2vw,32px)!important;line-height:1.04!important;}
.pcto-event-card p{font-size:14px!important;line-height:1.56!important;}
.pcto-event-card li{font-size:13px!important;line-height:1.38!important;}

.win.maxi .pcto-calendar-window,
.win.maxi.pcto-calendar-window{min-width:0!important;}
.win.maxi .pcto-cal-app,
.win.maxi.pcto-calendar-window .pcto-cal-app{
  height:100%!important;
  grid-template-columns:clamp(250px,18vw,320px) minmax(0,1fr) clamp(340px,24vw,440px)!important;
}
.win.maxi .pcto-toolbar,
.win.maxi.pcto-calendar-window .pcto-toolbar{
  height:88px!important;
  padding:18px clamp(22px,2vw,34px)!important;
}
.win.maxi .pcto-month-title h2,
.win.maxi.pcto-calendar-window .pcto-month-title h2{
  font-size:clamp(42px,4vw,62px)!important;
}
.win.maxi .pcto-month-title span,
.win.maxi.pcto-calendar-window .pcto-month-title span{font-size:14.5px!important;}
.win.maxi .pcto-calendar-grid,
.win.maxi.pcto-calendar-window .pcto-calendar-grid{
  grid-template-rows:42px repeat(6,minmax(0,1fr))!important;
}
.win.maxi .pcto-weekday,
.win.maxi.pcto-calendar-window .pcto-weekday{
  padding:0 16px!important;
  font-size:13px!important;
}
.win.maxi .pcto-day,
.win.maxi.pcto-calendar-window .pcto-day{
  padding:14px 12px 10px!important;
}
.win.maxi .pcto-day b,
.win.maxi.pcto-calendar-window .pcto-day b{
  right:14px!important;top:13px!important;
  font-size:clamp(16px,1.25vw,20px)!important;
}
.win.maxi .pcto-day.today b,
.win.maxi.pcto-calendar-window .pcto-day.today b{
  right:10px!important;top:9px!important;
  width:34px!important;height:34px!important;
  font-size:16px!important;
}
.win.maxi .pcto-day-events,
.win.maxi.pcto-calendar-window .pcto-day-events{
  top:54px!important;
  gap:7px!important;
}
.win.maxi .pcto-day-range,
.win.maxi.pcto-calendar-window .pcto-day-range{
  height:26px!important;
  line-height:26px!important;
  font-size:clamp(11.5px,.9vw,13.5px)!important;
  padding:0 12px!important;
}
.win.maxi .pcto-side,
.win.maxi.pcto-calendar-window .pcto-side{padding:24px 18px 20px!important;}
.win.maxi .pcto-side-head h3,
.win.maxi.pcto-calendar-window .pcto-side-head h3{font-size:34px!important;}
.win.maxi .pcto-year-card,
.win.maxi.pcto-calendar-window .pcto-year-card{padding:14px 12px!important;border-radius:16px!important;}
.win.maxi .pcto-detail,
.win.maxi.pcto-calendar-window .pcto-detail{padding:28px!important;}
.win.maxi .pcto-event-card,
.win.maxi.pcto-calendar-window .pcto-event-card{padding:28px 28px 28px 30px!important;border-radius:26px!important;}
.win.maxi .pcto-event-card p,
.win.maxi.pcto-calendar-window .pcto-event-card p{font-size:15.5px!important;}
.win.maxi .pcto-event-card li,
.win.maxi.pcto-calendar-window .pcto-event-card li{font-size:14px!important;}

@media(max-width:1180px){
  .pcto-calendar-window{min-width:min(960px,calc(100vw - 24px));}
  .pcto-cal-app{grid-template-columns:200px minmax(0,1fr) 286px!important;}
}
@media(max-width:980px){
  .pcto-cal-app{grid-template-columns:200px minmax(0,1fr)!important;}
  .pcto-detail{display:none!important;}
}
@media(max-width:760px){
  .pcto-calendar-window{min-width:0!important;}
  .pcto-cal-app{grid-template-columns:1fr!important;height:min(620px,calc(100vh - 100px))!important;}
  .pcto-side{display:none!important;}
  .pcto-toolbar{height:68px!important;padding:12px!important;}
  .pcto-month-title h2{font-size:26px!important;}
  .pcto-calendar-grid{grid-template-rows:30px repeat(6,minmax(68px,1fr))!important;}
  .pcto-day-events{top:34px!important;}
  .pcto-day-range{height:17px!important;line-height:17px!important;font-size:10px!important;padding:0 6px!important;}
}

/* ============================================================
   Maps exact reference implementation — scoped
   ============================================================ */
.maps-reference-shell{
  display:block!important;
  height:min(648px,calc(100vh - 150px))!important;
  overflow:hidden!important;
  background:#0b0d10!important;
  color:#f5f5f7!important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Arial,sans-serif!important;
}
.win.maxi .maps-reference-shell{height:100%!important;}
.maps-ref *{box-sizing:border-box;}
.maps-ref{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  perspective:1200px;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.035),transparent 45%),linear-gradient(135deg,#0b0d10,#12151a 48%,#090b0e);
  color:#f5f5f7;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Arial,sans-serif;
}
.maps-ref .map-stage{position:absolute;inset:-28%;overflow:hidden;transform-style:preserve-3d;z-index:1;}
.maps-ref .map-tilt{width:100%;height:100%;transform-origin:center center;transition:transform 1.35s cubic-bezier(.2,.9,.2,1),filter 1.35s ease;will-change:transform,filter;filter:saturate(.98) contrast(1.02);}
.maps-ref .map-tilt.navigation{transform:scale(1.08) rotateX(52deg) rotateZ(-19deg) translateY(74px);filter:saturate(1) contrast(1.04);}
.maps-ref .map-tilt.checkpoint-flash{filter:saturate(1.05) contrast(1.08) brightness(1.07);}
.maps-ref svg{width:100%;height:100%;display:block;}
.maps-ref .land{fill:#171a1f;}.maps-ref .green-blob{fill:#17271f;opacity:.92;}.maps-ref .green-blob-soft{fill:#17271f;opacity:.62;}
.maps-ref .route-glow{fill:none;stroke:rgba(10,132,255,.24);stroke-width:28;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 18px rgba(10,132,255,.32));}
.maps-ref .route{fill:none;stroke:#0a84ff;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s ease;filter:drop-shadow(0 0 8px rgba(10,132,255,.48));}
.maps-ref .route.visible{stroke-dashoffset:0;}
.maps-ref .route-progress{fill:none;stroke:#64d2ff;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:0 99999;filter:drop-shadow(0 0 12px rgba(100,210,255,.58));}
.maps-ref .city-label{font-size:24px;font-weight:760;fill:rgba(245,245,247,.72);paint-order:stroke;stroke:rgba(11,13,16,.88);stroke-width:6px;stroke-linejoin:round;letter-spacing:-.02em;}
.maps-ref .poi-pin{filter:drop-shadow(0 8px 16px rgba(0,0,0,.40));}.maps-ref .pin-circle{fill:#171c24;stroke:rgba(255,255,255,.16);stroke-width:2;}.maps-ref .pin-number{font-size:16px;font-weight:850;fill:#64d2ff;text-anchor:middle;dominant-baseline:central;}
.maps-ref .checkpoint-ring{fill:none;stroke:#64d2ff;stroke-width:5;opacity:0;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 10px rgba(100,210,255,.68));}.maps-ref .checkpoint-ring.active{animation:checkpointPulse 1.25s ease-out forwards;}
@keyframes checkpointPulse{0%{opacity:.82;transform:scale(.65)}100%{opacity:0;transform:scale(2.7)}}
.maps-ref .car{filter:drop-shadow(0 10px 16px rgba(0,0,0,.58)) drop-shadow(0 0 12px rgba(10,132,255,.72));transform-box:fill-box;transform-origin:center;}.maps-ref .car-body{fill:#0a84ff;}.maps-ref .car-arrow{fill:#fff;}
.maps-ref .floating-photo-layer{position:absolute;inset:0;pointer-events:none;z-index:12;overflow:visible;}.maps-ref .floating-photo-pin{position:absolute;left:0;top:0;width:260px;height:226px;opacity:0;transform:translate(-50%,-100%);transform-origin:50% 100%;will-change:left,top,opacity;pointer-events:none;}.maps-ref .floating-photo-pin.visible{opacity:1;}.maps-ref .photo-marker{position:absolute;left:0;bottom:0;width:260px;height:226px;opacity:0;transform-origin:50% 100%;transform:translateY(10px) scale(.965);filter:drop-shadow(0 26px 46px rgba(0,0,0,.44)) drop-shadow(0 0 24px rgba(10,132,255,.12));}.maps-ref .floating-photo-pin.visible .photo-marker{animation:premiumPhotoPinIn .62s cubic-bezier(.2,.78,.22,1) forwards;}
.maps-ref .pin-body{position:absolute;inset:0;overflow:visible;z-index:1;}.maps-ref .pin-body-path{fill:rgba(24,28,35,.965);stroke:rgba(255,255,255,.16);stroke-width:1.2;vector-effect:non-scaling-stroke;}.maps-ref .pin-body-highlight{fill:none;stroke:rgba(255,255,255,.11);stroke-width:1;vector-effect:non-scaling-stroke;}
.maps-ref .photo-window{position:absolute;left:14px;top:14px;width:232px;height:150px;border-radius:42px;overflow:hidden;z-index:3;background:#0b1220;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 12px 24px rgba(0,0,0,.22);}.maps-ref .photo-window img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.035);}.maps-ref .photo-label{position:absolute;left:0;right:0;bottom:0;height:42px;display:grid;place-items:center;padding:0 14px;background:linear-gradient(to top,rgba(0,0,0,.80),rgba(0,0,0,.18));color:white;font-size:14px;font-weight:850;letter-spacing:-.02em;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.maps-ref .photo-anchor-shadow{position:absolute;left:50%;bottom:-3px;width:58px;height:16px;transform:translateX(-50%);border-radius:999px;background:rgba(0,0,0,.34);filter:blur(6px);opacity:.68;z-index:0;}
@keyframes premiumPhotoPinIn{0%{opacity:0;transform:translateY(14px) scale(.955)}66%{opacity:1;transform:translateY(-1px) scale(1.006)}100%{opacity:1;transform:translateY(0) scale(1)}}
.maps-ref .top-card{position:absolute;top:24px;left:50%;transform:translateX(-50%) translateY(-120px);width:min(560px,calc(100% - 32px));padding:18px 20px;border-radius:26px;background:rgba(22,25,31,.78);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:0 22px 60px rgba(0,0,0,.42),0 4px 16px rgba(0,0,0,.28);z-index:20;transition:transform .9s cubic-bezier(.2,.9,.2,1);}.maps-ref .top-card.visible{transform:translateX(-50%) translateY(0);}.maps-ref .instruction-row{display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:center;}.maps-ref .turn-icon{width:54px;height:54px;border-radius:16px;background:linear-gradient(145deg,#0a84ff,#64d2ff);color:white;display:grid;place-items:center;font-size:28px;font-weight:850;box-shadow:0 10px 26px rgba(10,132,255,.32);}.maps-ref .instruction{font-size:23px;font-weight:760;letter-spacing:-.03em;line-height:1.12;color:#f5f5f7;}.maps-ref .sub-instruction{margin-top:3px;color:#a1a1aa;font-size:14px;font-weight:500;}
.maps-ref .checkpoint-banner{position:absolute;top:105px;left:50%;transform:translateX(-50%) translateY(-10px) scale(.96);opacity:0;padding:11px 17px;border-radius:999px;background:rgba(10,132,255,.9);color:white;font-size:14px;font-weight:760;box-shadow:0 14px 36px rgba(10,132,255,.30),0 4px 14px rgba(0,0,0,.24);z-index:22;pointer-events:none;}.maps-ref .checkpoint-banner.visible{animation:bannerPulse 1.6s cubic-bezier(.2,.9,.2,1) forwards;}@keyframes bannerPulse{0%{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.96)}18%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}78%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-8px) scale(.97)}}
.maps-ref .overview-panel{position:absolute;left:24px;bottom:24px;width:390px;padding:22px;border-radius:30px;background:rgba(22,25,31,.78);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);box-shadow:0 28px 80px rgba(0,0,0,.46),0 8px 24px rgba(0,0,0,.24);z-index:15;transition:transform .9s cubic-bezier(.2,.9,.2,1),opacity .5s ease;}.maps-ref .overview-panel.hidden{opacity:0;transform:translateY(40px) scale(.96);pointer-events:none;}.maps-ref .eyebrow{margin:0 0 8px;color:#64d2ff;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;}.maps-ref h1{margin:0;font-size:30px;line-height:1.05;letter-spacing:-.04em;color:#f5f5f7;}.maps-ref .description{margin:12px 0 20px;color:#a1a1aa;line-height:1.35;font-size:15px;}.maps-ref .route-list{display:grid;gap:10px;margin-bottom:20px;}.maps-ref .stop{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:11px;border-radius:18px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.075);}.maps-ref .stop-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#0a84ff;color:white;font-size:13px;font-weight:850;box-shadow:0 0 16px rgba(10,132,255,.38);}.maps-ref .stop-title{font-size:15px;font-weight:760;color:#f5f5f7;}.maps-ref .stop-sub{margin-top:2px;color:#a1a1aa;font-size:13px;}.maps-ref .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.maps-ref button{border:none;border-radius:17px;padding:14px 16px;font-size:15px;font-weight:760;cursor:pointer;transition:transform .16s ease,opacity .16s ease,background .16s ease;}.maps-ref button:active{transform:scale(.97);}.maps-ref .primary{background:linear-gradient(145deg,#0a84ff,#64d2ff);color:white;box-shadow:0 12px 26px rgba(10,132,255,.24);}.maps-ref .secondary{background:rgba(255,255,255,.08);color:#64d2ff;border:1px solid rgba(255,255,255,.10);}
.maps-ref .speed-pill{position:absolute;right:24px;bottom:24px;z-index:18;width:108px;height:108px;border-radius:32px;background:rgba(22,25,31,.78);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:0 22px 60px rgba(0,0,0,.42),0 6px 18px rgba(0,0,0,.22);display:grid;place-items:center;opacity:0;transform:translateY(30px);transition:.8s cubic-bezier(.2,.9,.2,1);}.maps-ref .speed-pill.visible{opacity:1;transform:translateY(0);}.maps-ref .speed-value{font-size:34px;font-weight:850;letter-spacing:-.05em;color:#f5f5f7;}.maps-ref .speed-unit{margin-top:-6px;text-align:center;font-size:12px;color:#a1a1aa;font-weight:750;}
@media(max-width:760px){.maps-ref .map-stage{inset:-18%;}.maps-ref .map-tilt.navigation{transform:scale(1.06) rotateX(46deg) rotateZ(-16deg) translateY(58px);}.maps-ref .floating-photo-pin{width:202px;height:176px;}.maps-ref .photo-marker{width:202px;height:176px;}.maps-ref .photo-window{left:11px;top:11px;width:180px;height:116px;border-radius:34px;}.maps-ref .photo-label{height:34px;font-size:12px;}.maps-ref .overview-panel{left:12px;right:12px;bottom:12px;width:auto;padding:18px;}.maps-ref h1{font-size:24px;}.maps-ref .description,.maps-ref .route-list{display:none;}.maps-ref .top-card{top:12px;}.maps-ref .instruction{font-size:18px;}.maps-ref .speed-pill{right:12px;bottom:160px;}}

/* ============================================================
   Maps sidebar stop-flow + window sizing
   ============================================================ */
.maps-window{width:min(1180px,calc(100vw - 42px))!important;}
.maps-reference-shell{
  display:grid!important;
  grid-template-columns:300px minmax(0,1fr)!important;
  height:min(670px,calc(100vh - 132px))!important;
  min-height:520px!important;
  background:#16181c!important;
}
.win.maxi .maps-reference-shell{height:100%!important;grid-template-columns:clamp(300px,21vw,360px) minmax(0,1fr)!important;}
.maps-ref-side{display:flex!important;position:relative!important;z-index:30!important;min-width:0!important;}
.maps-ref{min-width:0!important;min-height:0!important;contain:layout paint;}
.maps-ref .top-card,
.maps-ref .checkpoint-banner,
.maps-ref .overview-panel,
.maps-ref .speed-pill{display:none!important;}
.maps-ref .maps-click-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:18;padding:9px 16px;border-radius:999px;background:rgba(22,25,31,.78);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 28px rgba(0,0,0,.30);color:#f5f5f7;font-size:12.5px;font-weight:760;pointer-events:none;white-space:nowrap;}
.maps-ref .map-stage{inset:-28%;}
.maps-ref .floating-photo-pin{width:220px;height:191px;}
.maps-ref .photo-marker{width:220px;height:191px;}
.maps-ref .photo-marker .pin-body{width:220px;height:191px;}
.maps-ref .photo-window{left:12px;top:12px;width:196px;height:126px;border-radius:36px;}
.maps-ref .photo-label{height:36px;font-size:12.5px;}
.maps-ref .photo-anchor-shadow{width:50px;height:14px;}
.win.maxi .maps-ref .floating-photo-pin{width:260px;height:226px;}
.win.maxi .maps-ref .photo-marker{width:260px;height:226px;}
.win.maxi .maps-ref .photo-marker .pin-body{width:260px;height:226px;}
.win.maxi .maps-ref .photo-window{left:14px;top:14px;width:232px;height:150px;border-radius:42px;}
.win.maxi .maps-ref .photo-label{height:42px;font-size:14px;}
.maps-ref-side .mw-endpoint{width:100%;border:0;background:transparent;color:#f5f5f7;text-align:left;border-radius:13px;cursor:pointer;transition:background .18s ease,transform .18s var(--ease-apple,cubic-bezier(.22,1,.36,1)),opacity .18s ease;}
.maps-ref-side .mw-endpoint:hover{background:rgba(255,255,255,.055);}
.maps-ref-side .mw-endpoint:active{transform:scale(.985);}
.maps-ref-side .mw-endpoint.active{background:rgba(255,255,255,.105);}
.maps-ref-side .mw-endpoint.done b{color:rgba(245,245,247,.58);}
.maps-ref-side .mw-endpoint.done .mw-pt{opacity:.72;}
.maps-ref-side .maps-progress-card{margin-top:auto!important;}
.maps-side-actions{display:grid;grid-template-columns:1fr 86px;gap:9px;margin-top:10px;}
.maps-side-actions button{border:0;border-radius:14px;padding:12px 13px;font-weight:800;font-size:13px;cursor:pointer;transition:transform .16s ease,filter .16s ease,background .16s ease;}
.maps-side-actions button:active{transform:scale(.97);}
.maps-side-primary{background:linear-gradient(180deg,#0a90ff,#0a78f0);color:#fff;box-shadow:0 10px 22px rgba(10,120,240,.24);}
.maps-side-secondary{background:rgba(255,255,255,.08);color:#64d2ff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);}
.maps-reference-shell.maps-paused .maps-side-primary{filter:saturate(1.08) brightness(1.04);}
.maps-reference-shell.maps-moving .maps-side-primary{opacity:.72;pointer-events:none;}
.maps-reference-shell.at-goal .maps-side-primary{background:linear-gradient(180deg,#34c759,#159b3c);}
.maps-reference-shell.maps-moving .maps-click-cue{opacity:.72;}
.maps-reference-shell.maps-paused .maps-click-cue{animation:mwHintPulse 2.4s ease-in-out infinite;}
@media(max-width:980px){.maps-reference-shell{grid-template-columns:250px minmax(0,1fr)!important}.maps-ref-side{padding:12px 10px!important}.maps-ref .floating-photo-pin{width:190px;height:165px}.maps-ref .photo-marker{width:190px;height:165px}.maps-ref .photo-marker .pin-body{width:190px;height:165px}.maps-ref .photo-window{left:10px;top:10px;width:170px;height:110px;border-radius:32px}.maps-ref .photo-label{height:32px;font-size:11.5px}}
@media(max-width:760px){.maps-reference-shell{grid-template-columns:1fr!important;min-height:520px!important}.maps-ref-side{display:none!important}.maps-ref .map-stage{inset:-18%;}.maps-ref .floating-photo-pin{width:172px;height:150px}.maps-ref .photo-marker{width:172px;height:150px}.maps-ref .photo-marker .pin-body{width:172px;height:150px}.maps-ref .photo-window{left:9px;top:9px;width:154px;height:99px;border-radius:28px}.maps-ref .photo-label{height:30px;font-size:11px}.maps-ref .maps-click-cue{bottom:12px}}

/* ============================================================
   Maps diploma photo route polish
   ============================================================ */
.maps-ref-side .mw-endpoint{min-height:54px!important;padding-top:7px!important;padding-bottom:7px!important;}
.maps-ref-side .mw-route-line{top:27px!important;bottom:27px!important;}
.maps-ref .floating-photo-pin{z-index:12;}
.maps-ref #photoPin-3{z-index:13;}
.maps-ref #photoPin-3 .photo-marker{filter:drop-shadow(0 30px 52px rgba(0,0,0,.48)) drop-shadow(0 0 26px rgba(100,210,255,.16));}
.maps-ref .route,.maps-ref .route-glow,.maps-ref .route-progress{stroke-linejoin:round!important;stroke-linecap:round!important;}

/* ============================================================
   Maps linear route no overlap polish
   ============================================================ */
.maps-ref #photoPin-3{z-index:12!important;}
.maps-ref .floating-photo-pin{transform:translate(-50%,-104%)!important;}
.maps-ref .route,.maps-ref .route-glow,.maps-ref .route-progress{stroke-linejoin:round!important;stroke-linecap:round!important;}

/* ============================================================
   Maps final linear separated photos
   ============================================================ */
.maps-ref #photoPin-3{z-index:12!important;}
.maps-ref .floating-photo-pin{transform:translate(-50%,-104%)!important;}
.maps-ref .floating-photo-pin.visible .photo-marker{animation:premiumPhotoPinIn .62s cubic-bezier(.2,.78,.22,1) forwards;}

/* ============================================================
   Maps fixed scene player-only motion
   ------------------------------------------------------------
   Sfondo, griglia, percorso, tappe e immagini sono fissi.
   L'unico elemento che si muove durante la navigazione è il player.
   ============================================================ */
.maps-ref{
  background:#2d2e32!important;
  overflow:hidden!important;
}
.maps-ref .map-stage{
  inset:-38%!important;
  overflow:hidden!important;
  background:#2d2e32!important;
  background-image:none!important;
  transform:none!important;
}
.maps-ref .map-tilt,
.maps-ref .map-tilt.navigation{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  transform:scale(1.10) rotateX(52deg) rotateZ(-19deg) translateY(64px)!important;
  transform-origin:center center!important;
  transition:none!important;
  background:transparent!important;
  background-image:none!important;
  filter:saturate(1) contrast(1.02)!important;
}
.maps-ref .map-tilt::before{
  content:"";
  position:absolute;
  inset:-62%;
  z-index:0;
  pointer-events:none;
  background-color:#2d2e32;
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.4px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1.4px, transparent 1.4px);
  background-size:118px 118px;
  background-position:center center;
}
.maps-ref svg{position:relative!important;z-index:1!important;background:transparent!important;}
.maps-ref .land{fill:transparent!important;}
.maps-ref .green-blob,.maps-ref .green-blob-soft{display:none!important;}
.maps-ref .floating-photo-pin{
  transform:translate(-50%,-96.5%)!important;
  transform-origin:50% 96.5%!important;
}
@media(max-width:980px){
  .maps-ref .map-stage{inset:-42%!important;}
  .maps-ref .map-tilt,.maps-ref .map-tilt.navigation{transform:scale(1.12) rotateX(50deg) rotateZ(-18deg) translateY(60px)!important;}
}
@media(max-width:760px){
  .maps-ref .map-stage{inset:-46%!important;}
  .maps-ref .map-tilt,.maps-ref .map-tilt.navigation{transform:scale(1.14) rotateX(46deg) rotateZ(-16deg) translateY(54px)!important;}
}

/* ============================================================
   Maps final fixed background player-only
   ============================================================ */
.maps-ref{background:#2d2e32!important;overflow:hidden!important;}
.maps-ref .map-stage{inset:-38%!important;overflow:hidden!important;background:#2d2e32!important;background-image:none!important;transform:none!important;}
.maps-ref .map-tilt,
.maps-ref .map-tilt.navigation{position:relative!important;width:100%!important;height:100%!important;transform:scale(1.10) rotateX(52deg) rotateZ(-19deg) translateY(64px)!important;transform-origin:center center!important;transition:none!important;background:transparent!important;background-image:none!important;filter:saturate(1) contrast(1.02)!important;}
.maps-ref .map-tilt::before{content:"";position:absolute;inset:-62%;z-index:0;pointer-events:none;background-color:#2d2e32;background-image:linear-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.4px),linear-gradient(90deg,rgba(255,255,255,.16) 1.4px,transparent 1.4px);background-size:118px 118px;background-position:center center;}
.maps-ref svg{position:relative!important;z-index:1!important;background:transparent!important;}
.maps-ref .land{fill:transparent!important;}
.maps-ref .green-blob,.maps-ref .green-blob-soft{display:none!important;}
.maps-ref .route-glow{stroke:rgba(10,132,255,.18)!important;stroke-width:24!important;filter:drop-shadow(0 0 12px rgba(10,132,255,.22))!important;}
.maps-ref .route{stroke:#0a84ff!important;stroke-width:8!important;filter:drop-shadow(0 0 5px rgba(10,132,255,.35))!important;}
.maps-ref .route-progress{stroke:#64d2ff!important;stroke-width:10!important;filter:drop-shadow(0 0 8px rgba(100,210,255,.42))!important;}
.maps-ref .city-label{stroke:rgba(45,46,50,.88)!important;fill:rgba(245,245,247,.72)!important;}
.maps-ref .pin-circle{fill:#3a3b40!important;stroke:rgba(255,255,255,.22)!important;}
.maps-ref .floating-photo-pin{transform:translate(-50%,-96.5%)!important;transform-origin:50% 96.5%!important;transition:opacity 1.15s ease!important;}
.maps-ref .floating-photo-pin.fading{opacity:0!important;}
.maps-ref .photo-marker{left:0!important;bottom:0!important;transform-origin:50% 96.5%!important;filter:drop-shadow(0 22px 42px rgba(0,0,0,.34)) drop-shadow(0 0 18px rgba(10,132,255,.10))!important;}
.maps-reference-shell.maps-final-wait .maps-click-cue{animation:mwHintPulse 1.8s ease-in-out infinite;opacity:.96;}
@media(max-width:980px){.maps-ref .map-stage{inset:-42%!important}.maps-ref .map-tilt,.maps-ref .map-tilt.navigation{transform:scale(1.12) rotateX(50deg) rotateZ(-18deg) translateY(60px)!important;}}
@media(max-width:760px){.maps-ref .map-stage{inset:-46%!important}.maps-ref .map-tilt,.maps-ref .map-tilt.navigation{transform:scale(1.14) rotateX(46deg) rotateZ(-16deg) translateY(54px)!important;}}

/* ============================================================
   Maps smooth stops + accelerating final override
   ============================================================ */
.maps-reference-shell.nav .maps-ref,
.maps-reference-shell.maps-moving .maps-ref,
.maps-reference-shell.maps-paused .maps-ref,
.maps-reference-shell.maps-panorama-return .maps-ref,
.maps-ref{background:#2d2e32!important;overflow:hidden!important;isolation:isolate!important;transform:none!important;}
.maps-ref::before{display:none!important;content:none!important;}
.maps-ref .map-stage,
.maps-reference-shell.nav .maps-ref .map-stage,
.maps-reference-shell.maps-moving .maps-ref .map-stage,
.maps-reference-shell.maps-paused .maps-ref .map-stage,
.maps-reference-shell.maps-panorama-return .maps-ref .map-stage{inset:-38%!important;overflow:hidden!important;background:#2d2e32!important;background-image:none!important;transform:none!important;transition:none!important;z-index:1!important;}
.maps-ref .map-tilt,
.maps-ref .map-tilt.navigation,
.maps-reference-shell.nav .map-tilt,
.maps-reference-shell.maps-moving .map-tilt,
.maps-reference-shell.maps-paused .map-tilt,
.maps-reference-shell.maps-panorama-return .map-tilt{position:relative!important;width:100%!important;height:100%!important;transform:scale(1.10) rotateX(52deg) rotateZ(-19deg) translateY(64px)!important;transform-origin:center center!important;transition:none!important;background:transparent!important;background-image:none!important;filter:saturate(1) contrast(1.02)!important;}
.maps-ref .map-tilt::before{display:none!important;content:none!important;}
.maps-ref svg{position:relative!important;z-index:1!important;background:transparent!important;}
.maps-ref .land{fill:url(#mapGrid)!important;}
.maps-ref .green-blob,.maps-ref .green-blob-soft{display:none!important;}
.maps-ref .route-glow{stroke:rgba(10,132,255,.18)!important;stroke-width:24!important;filter:drop-shadow(0 0 12px rgba(10,132,255,.22))!important;}
.maps-ref .route{stroke:#0a84ff!important;stroke-width:8!important;filter:drop-shadow(0 0 5px rgba(10,132,255,.35))!important;}
.maps-ref .route-progress{stroke:#64d2ff!important;stroke-width:10!important;filter:drop-shadow(0 0 8px rgba(100,210,255,.42))!important;}
.maps-ref .city-label{stroke:rgba(45,46,50,.88)!important;fill:rgba(245,245,247,.72)!important;}
.maps-ref .pin-circle{fill:#3a3b40!important;stroke:rgba(255,255,255,.22)!important;}
.maps-ref .floating-photo-layer{z-index:12!important;}
.maps-ref .floating-photo-pin{transform:translate(-50%,-96.5%)!important;transform-origin:50% 96.5%!important;transition:opacity 1.25s ease!important;}
.maps-ref .floating-photo-pin.fading{opacity:0!important;}
.maps-ref .photo-marker{left:0!important;bottom:0!important;transform-origin:50% 96.5%!important;filter:drop-shadow(0 22px 42px rgba(0,0,0,.34)) drop-shadow(0 0 18px rgba(10,132,255,.10))!important;}
.maps-reference-shell.maps-final-wait .maps-click-cue{animation:mwHintPulse 1.8s ease-in-out infinite;opacity:.96;}
@media(max-width:980px){.maps-ref .map-stage,.maps-reference-shell.nav .maps-ref .map-stage,.maps-reference-shell.maps-moving .maps-ref .map-stage,.maps-reference-shell.maps-paused .maps-ref .map-stage,.maps-reference-shell.maps-panorama-return .maps-ref .map-stage{inset:-42%!important}.maps-ref .map-tilt,.maps-ref .map-tilt.navigation,.maps-reference-shell.nav .map-tilt,.maps-reference-shell.maps-moving .map-tilt,.maps-reference-shell.maps-paused .map-tilt,.maps-reference-shell.maps-panorama-return .map-tilt{transform:scale(1.12) rotateX(50deg) rotateZ(-18deg) translateY(60px)!important;}}
@media(max-width:760px){.maps-ref .map-stage,.maps-reference-shell.nav .maps-ref .map-stage,.maps-reference-shell.maps-moving .maps-ref .map-stage,.maps-reference-shell.maps-paused .maps-ref .map-stage,.maps-reference-shell.maps-panorama-return .maps-ref .map-stage{inset:-46%!important}.maps-ref .map-tilt,.maps-ref .map-tilt.navigation,.maps-reference-shell.nav .map-tilt,.maps-reference-shell.maps-moving .map-tilt,.maps-reference-shell.maps-paused .map-tilt,.maps-reference-shell.maps-panorama-return .map-tilt{transform:scale(1.14) rotateX(46deg) rotateZ(-16deg) translateY(54px)!important;}}


/* Maps exposition sidebar labels and collage pins */
.maps-ref .city-caption{font-size:15px;font-weight:720;fill:rgba(245,245,247,.66);paint-order:stroke;stroke:rgba(45,46,50,.92);stroke-width:5px;stroke-linejoin:round;letter-spacing:-.015em;}
.maps-ref-side .mw-endpoint b{font-size:14px!important;line-height:1.08!important;}
.maps-ref-side .mw-endpoint em{font-size:11.5px!important;line-height:1.22!important;color:rgba(255,255,255,.58)!important;max-width:168px!important;}
.maps-ref-side .maps-progress-card [data-maps-side-title]{font-size:15px!important;}
.maps-ref-side .maps-progress-card [data-maps-side-sub]{font-size:12px!important;line-height:1.25!important;color:rgba(255,255,255,.62)!important;}
.maps-ref .collage-pin{width:320px!important;height:278px!important;transform:translate(-50%,-112%)!important;transform-origin:50% 112%!important;z-index:15!important;}
.maps-ref .collage-marker{width:320px!important;height:278px!important;transform-origin:50% 112%!important;}
.maps-ref .collage-marker .pin-body{width:320px!important;height:278px!important;}
.maps-ref .collage-window{left:16px!important;top:16px!important;width:288px!important;height:184px!important;border-radius:38px!important;}
.maps-ref .collage-grid{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;background:#0b1220;}
.maps-ref .collage-grid img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.03);}
.maps-ref .collage-window .photo-label{height:38px!important;font-size:13px!important;z-index:4;}
.maps-ref #photoPin-1,.maps-ref #photoPin-2{z-index:16!important;}
@media(max-width:980px){.maps-ref .collage-pin{width:270px!important;height:235px!important}.maps-ref .collage-marker,.maps-ref .collage-marker .pin-body{width:270px!important;height:235px!important}.maps-ref .collage-window{left:14px!important;top:14px!important;width:242px!important;height:154px!important;border-radius:32px!important}}
@media(max-width:760px){.maps-ref .collage-pin{width:230px!important;height:200px!important}.maps-ref .collage-marker,.maps-ref .collage-marker .pin-body{width:230px!important;height:200px!important}.maps-ref .collage-window{left:12px!important;top:12px!important;width:206px!important;height:132px!important;border-radius:28px!important}}


/* Maps below-route labels + 3D bowl stop pins */
.maps-ref .map-place-label{pointer-events:none;}
.maps-ref .map-place-label .city-label,
.maps-ref .map-place-label .city-caption{text-anchor:middle!important;dominant-baseline:middle;}
.maps-ref .label-below-route .city-label{font-size:23px!important;font-weight:850!important;fill:rgba(255,255,255,.84)!important;stroke:rgba(45,46,50,.96)!important;stroke-width:7px!important;paint-order:stroke;letter-spacing:-.025em;}
.maps-ref .label-below-route .city-caption{font-size:14px!important;font-weight:760!important;fill:rgba(245,245,247,.70)!important;stroke:rgba(45,46,50,.96)!important;stroke-width:5px!important;paint-order:stroke;letter-spacing:-.015em;}
.maps-ref .poi-pin-3d{filter:drop-shadow(0 18px 16px rgba(0,0,0,.34)) drop-shadow(0 2px 0 rgba(255,255,255,.10));}
.maps-ref .pin-bowl-shadow{fill:rgba(0,0,0,.34);filter:blur(1.4px);}
.maps-ref .pin-bowl-base{fill:#082a52;stroke:#031426;stroke-width:8;}
.maps-ref .pin-rim{fill:rgba(11,35,63,.34);stroke:url(#mapGrid);stroke-width:0;}
.maps-ref .poi-pin-3d .pin-rim{fill:#102f55;stroke:#64d2ff!important;stroke-width:14!important;filter:drop-shadow(0 4px 0 #03203f) drop-shadow(0 -2px 7px rgba(255,255,255,.24));}
.maps-ref .pin-inner-well{fill:#2d2e32;stroke:#031426;stroke-width:9;filter:drop-shadow(inset 0 6px 8px rgba(0,0,0,.55));}
.maps-ref .pin-number-3d{font-size:24px!important;font-weight:950!important;text-anchor:middle!important;dominant-baseline:central!important;fill:#f5f5f7!important;stroke:#031426!important;stroke-width:4!important;paint-order:stroke;letter-spacing:-.05em;filter:drop-shadow(0 2px 0 rgba(0,0,0,.55));}
.maps-ref .poi-pin-3d:nth-of-type(1) .pin-rim{stroke:#34c759!important;}
.maps-ref .poi-pin-3d:nth-of-type(2) .pin-rim{stroke:#0a84ff!important;}
.maps-ref .poi-pin-3d:nth-of-type(3) .pin-rim{stroke:#ff9f0a!important;}
.maps-ref .poi-pin-3d:nth-of-type(4) .pin-rim{stroke:#bf5af2!important;}
.maps-ref .checkpoint-ring{stroke-width:5!important;opacity:.62!important;}


/* Maps revert flat pins + unified media folder */
.maps-ref .poi-pin{filter:drop-shadow(0 12px 16px rgba(0,0,0,.30));}
.maps-ref .pin-circle{fill:#3a3b40!important;stroke:rgba(255,255,255,.22)!important;stroke-width:2!important;filter:none!important;}
.maps-ref .pin-number{font-size:20px!important;font-weight:850!important;text-anchor:middle!important;dominant-baseline:central!important;fill:#f5f5f7!important;stroke:none!important;paint-order:normal!important;letter-spacing:-.02em;}
.maps-ref .pin-bowl-shadow,.maps-ref .pin-bowl-base,.maps-ref .pin-rim,.maps-ref .pin-inner-well,.maps-ref .pin-number-3d{display:none!important;}


/* Maps restore pre-3D arrival animation */
.maps-ref .checkpoint-ring{
  fill:none!important;
  stroke:#64d2ff!important;
  stroke-width:5!important;
  opacity:0!important;
  transform-box:fill-box!important;
  transform-origin:center!important;
  filter:drop-shadow(0 0 10px rgba(100,210,255,.68))!important;
}
.maps-ref .checkpoint-ring.active{
  animation:checkpointPulse 1.25s ease-out forwards!important;
}
.maps-ref .map-tilt.checkpoint-flash{
  filter:saturate(1.05) contrast(1.08) brightness(1.07)!important;
}
.maps-ref .pin-circle{
  fill:#171c24!important;
  stroke:rgba(255,255,255,.16)!important;
  stroke-width:2!important;
}
.maps-ref .pin-number{
  font-size:16px!important;
  font-weight:850!important;
  fill:#64d2ff!important;
  text-anchor:middle!important;
  dominant-baseline:central!important;
  stroke:none!important;
}


/* Maps experimental grid photo floor tiles */
.maps-ref .floating-photo-layer{display:none!important;}
.maps-ref .map-photo-tiles{pointer-events:none;}
.maps-ref .map-photo-tile{opacity:0;transform-box:fill-box;transform-origin:center center;will-change:opacity,transform,filter;filter:drop-shadow(0 18px 18px rgba(0,0,0,.34));}
.maps-ref .map-photo-tile image{filter:saturate(1.04) contrast(1.04);}
.maps-ref .tile-photo-depth{fill:#111820;opacity:.92;transform:translateY(7px);}
.maps-ref .tile-photo-frame{fill:#1d232b;stroke:rgba(255,255,255,.22);stroke-width:3;}
.maps-ref .tile-photo-gloss{fill:url(#mapGrid);opacity:.06;stroke:rgba(255,255,255,.28);stroke-width:1.3;}
.maps-ref .map-photo-tile.visible{opacity:1;}
.maps-ref .map-photo-tile.tile-pop{animation:mapTileFloorIn 1.05s cubic-bezier(.16,.86,.22,1) both;}
.maps-ref .map-photo-tile[data-tile-index="1"].tile-pop{animation-delay:.00s;}
.maps-ref .map-photo-tile[data-tile-index="2"].tile-pop{animation-delay:.08s;}
.maps-ref .map-photo-tile[data-tile-index="3"].tile-pop{animation-delay:.16s;}
.maps-ref .map-photo-tile[data-tile-index="4"].tile-pop{animation-delay:.24s;}
.maps-ref .map-photo-tile[data-tile-index="5"].tile-pop{animation-delay:.00s;}
.maps-ref .map-photo-tile[data-tile-index="6"].tile-pop{animation-delay:.08s;}
.maps-ref .map-photo-tile[data-tile-index="7"].tile-pop{animation-delay:.16s;}
.maps-ref .map-photo-tile[data-tile-index="8"].tile-pop{animation-delay:.24s;}
@keyframes mapTileFloorIn{
  0%{opacity:0;transform:perspective(520px) rotateX(68deg) translateY(34px) scale(.72);filter:drop-shadow(0 0 0 rgba(0,0,0,0)) brightness(.75) blur(1.5px);}
  52%{opacity:1;transform:perspective(520px) rotateX(10deg) translateY(-8px) scale(1.04);filter:drop-shadow(0 28px 22px rgba(0,0,0,.38)) brightness(1.08) blur(0);}
  100%{opacity:1;transform:perspective(520px) rotateX(0deg) translateY(0) scale(1);filter:drop-shadow(0 18px 18px rgba(0,0,0,.34)) brightness(1);}
}


/* Maps external flush grid replacement photo tiles */
.maps-ref .floating-photo-layer{display:none!important;}
.maps-ref .map-photo-tiles{pointer-events:none!important;}
.maps-ref .map-photo-tile{opacity:0;transform-box:fill-box;transform-origin:center center;will-change:opacity,transform,filter;filter:none!important;}
.maps-ref .map-photo-tile image{filter:saturate(1.02) contrast(1.02)!important;}
.maps-ref .map-photo-tile .tile-photo-depth,.maps-ref .map-photo-tile .tile-photo-frame,.maps-ref .map-photo-tile .tile-photo-gloss{display:none!important;}
.maps-ref .map-photo-tile.visible{opacity:1;}
.maps-ref .map-photo-tile.tile-pop{animation:mapTileReplaceIn .82s cubic-bezier(.16,.86,.22,1) both!important;}
@keyframes mapTileReplaceIn{0%{opacity:0;transform:scale(.72) rotateX(18deg);filter:brightness(.72) saturate(.9)!important;}58%{opacity:1;transform:scale(1.015) rotateX(0deg);filter:brightness(1.06) saturate(1.04)!important;}100%{opacity:1;transform:scale(1) rotateX(0deg);filter:brightness(1) saturate(1.02)!important;}}


/* Maps randomized crisp unclipped tile layout + slight dezoom */
.maps-ref .map-photo-tile{
  filter:none!important;
  shape-rendering:crispEdges;
}
.maps-ref .map-photo-tile image{
  image-rendering:auto!important;
  filter:contrast(1.08) saturate(1.08) brightness(1.02)!important;
}
.maps-ref .map-photo-tile.tile-pop{animation:mapTileCrispReplaceIn .74s cubic-bezier(.16,.86,.22,1) both!important;}
@keyframes mapTileCrispReplaceIn{
  0%{opacity:0;transform:scale(.82);filter:brightness(.82) saturate(.96)!important;}
  55%{opacity:1;transform:scale(1.01);filter:brightness(1.08) saturate(1.08)!important;}
  100%{opacity:1;transform:scale(1);filter:brightness(1) saturate(1.02)!important;}
}


/* Maps grid-aligned spread tile layout */
.maps-ref .map-photo-tile image{
  image-rendering:auto!important;
  filter:contrast(1.10) saturate(1.10) brightness(1.03)!important;
}
.maps-ref .map-photo-tile.tile-pop{animation:mapTileGridAlignedIn .78s cubic-bezier(.16,.86,.22,1) both!important;}
@keyframes mapTileGridAlignedIn{
  0%{opacity:0;transform:scale(.78);filter:brightness(.78) saturate(.94)!important;}
  58%{opacity:1;transform:scale(1.01);filter:brightness(1.08) saturate(1.10)!important;}
  100%{opacity:1;transform:scale(1);filter:brightness(1) saturate(1.04)!important;}
}


/* Maps natural motion no state shift */
.maps-reference-shell.nav .maps-ref,
.maps-reference-shell.maps-moving .maps-ref,
.maps-reference-shell.maps-paused .maps-ref,
.maps-reference-shell.maps-panorama-return .maps-ref,
.maps-ref{transform:none!important;}
.maps-reference-shell.nav .maps-ref .map-stage,
.maps-reference-shell.maps-moving .maps-ref .map-stage,
.maps-reference-shell.maps-paused .maps-ref .map-stage,
.maps-reference-shell.maps-panorama-return .maps-ref .map-stage,
.maps-ref .map-stage{transform:none!important;transition:none!important;inset:-38%!important;}
.maps-reference-shell.nav .map-tilt,
.maps-reference-shell.maps-moving .map-tilt,
.maps-reference-shell.maps-paused .map-tilt,
.maps-reference-shell.maps-panorama-return .map-tilt,
.maps-ref .map-tilt,
.maps-ref .map-tilt.navigation{transform:scale(1.10) rotateX(52deg) rotateZ(-19deg) translateY(64px)!important;transition:none!important;transform-origin:center center!important;}
.maps-reference-shell.maps-moving .maps-click-cue{opacity:.58!important;transition:opacity .42s ease!important;}
.maps-reference-shell.maps-paused .maps-click-cue{opacity:.96!important;transition:opacity .42s ease!important;}


/* Maps faster natural motion + restored arrival pulse */
.maps-ref .checkpoint-ring{
  fill:none!important;
  stroke:#64d2ff!important;
  stroke-width:5!important;
  opacity:0!important;
  transform-box:fill-box!important;
  transform-origin:center!important;
  filter:drop-shadow(0 0 12px rgba(100,210,255,.78))!important;
}
.maps-ref .checkpoint-ring.active{animation:checkpointPulseFast 1.05s cubic-bezier(.18,.82,.22,1) forwards!important;}
@keyframes checkpointPulseFast{0%{opacity:.9;transform:scale(.62)}72%{opacity:.34;transform:scale(2.05)}100%{opacity:0;transform:scale(2.82)}}
.maps-ref .map-tilt.checkpoint-flash{filter:saturate(1.08) contrast(1.08) brightness(1.08)!important;}
.maps-reference-shell.maps-moving .maps-click-cue{opacity:.5!important;transition:opacity .22s ease!important;}
.maps-reference-shell.maps-paused .maps-click-cue{opacity:.96!important;transition:opacity .22s ease!important;}


/* Maps Apple glass sidebar refresh */
.maps-reference-shell{
  background:linear-gradient(135deg,#17191d 0%,#111318 55%,#191c22 100%)!important;
}
.maps-ref-side{
  padding:18px 16px 16px!important;
  background:
    radial-gradient(circle at 18% 0%,rgba(100,210,255,.13),transparent 36%),
    linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.045) 42%,rgba(255,255,255,.028))!important;
  border-right:1px solid rgba(255,255,255,.13)!important;
  box-shadow:inset -1px 0 rgba(0,0,0,.28), 18px 0 54px rgba(0,0,0,.20)!important;
  backdrop-filter:blur(34px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(34px) saturate(1.35)!important;
  overflow:hidden!important;
}
.maps-ref-side::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 32%,transparent 68%,rgba(255,255,255,.045));
  opacity:.58;
  z-index:-1;
}
.maps-ref-side::after{
  content:"";
  position:absolute;
  left:14px;right:14px;top:12px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  pointer-events:none;
}
.maps-ref-side .mw-side-head{
  margin-bottom:18px!important;
  padding:10px 10px 12px!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.095)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.11),0 16px 34px rgba(0,0,0,.13)!important;
}
.maps-ref-side .mw-side-head h2{
  font-size:22px!important;
  font-weight:850!important;
  letter-spacing:-.045em!important;
  color:rgba(245,245,247,.96)!important;
}
.maps-ref-side .mw-side-head p,
.maps-ref-side .mw-side-head span,
.maps-ref-side .mw-side-head small{
  color:rgba(245,245,247,.56)!important;
}
.maps-ref-side .mw-side-head svg,
.maps-ref-side .mw-side-head img{
  filter:drop-shadow(0 8px 18px rgba(10,132,255,.22));
}
.maps-ref-side .mw-route-list{
  position:relative!important;
  display:grid!important;
  gap:8px!important;
  padding:4px 0 4px!important;
}
.maps-ref-side .mw-route-line{
  left:18px!important;
  top:36px!important;
  bottom:36px!important;
  width:2px!important;
  background:linear-gradient(180deg,rgba(100,210,255,.18),rgba(255,255,255,.18) 42%,rgba(255,255,255,.08))!important;
  border-radius:999px!important;
  box-shadow:0 0 18px rgba(100,210,255,.12)!important;
}
.maps-ref-side .mw-endpoint{
  min-height:64px!important;
  padding:10px 10px 10px 0!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  align-items:center!important;
  gap:0!important;
  border-radius:20px!important;
  background:rgba(255,255,255,0)!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  transition:background .34s cubic-bezier(.22,1,.36,1), border-color .34s cubic-bezier(.22,1,.36,1), box-shadow .34s cubic-bezier(.22,1,.36,1), transform .34s cubic-bezier(.22,1,.36,1), opacity .26s ease!important;
}
.maps-ref-side .mw-endpoint:hover{
  background:rgba(255,255,255,.070)!important;
  border-color:rgba(255,255,255,.105)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.13)!important;
  transform:translateX(2px)!important;
}
.maps-ref-side .mw-endpoint:active{transform:translateX(2px) scale(.992)!important;}
.maps-ref-side .mw-endpoint.active{
  background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.075))!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.18),0 18px 44px rgba(0,0,0,.18),0 0 0 1px rgba(100,210,255,.08)!important;
}
.maps-ref-side .mw-endpoint.done{
  opacity:.72!important;
}
.maps-ref-side .mw-endpoint.done:hover{opacity:.88!important;}
.maps-ref-side .mw-pt{
  grid-column:1!important;
  justify-self:center!important;
  align-self:center!important;
  width:18px!important;
  height:18px!important;
  margin:0!important;
  border-radius:50%!important;
  background:linear-gradient(180deg,#8b9199,#626872)!important;
  color:#fff!important;
  box-shadow:0 0 0 7px rgba(22,24,28,.88), inset 0 1px 0 rgba(255,255,255,.34), 0 10px 22px rgba(0,0,0,.22)!important;
  transition:transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s cubic-bezier(.22,1,.36,1), background .34s ease, opacity .24s ease!important;
}
.maps-ref-side .mw-endpoint.active .mw-pt{
  transform:scale(1.12)!important;
  background:linear-gradient(180deg,#64d2ff,#0a84ff)!important;
  box-shadow:0 0 0 7px rgba(13,18,24,.90), inset 0 1px 0 rgba(255,255,255,.48),0 0 24px rgba(100,210,255,.44),0 14px 28px rgba(10,132,255,.24)!important;
}
.maps-ref-side .mw-endpoint.done .mw-pt{
  background:linear-gradient(180deg,#5ddf86,#34c759)!important;
  opacity:1!important;
}
.maps-ref-side .mw-pt svg{width:12px!important;height:12px!important;fill:currentColor!important;opacity:.96!important;}
.maps-ref-side .mw-endpoint>div{grid-column:2!important;min-width:0!important;padding-right:2px!important;}
.maps-ref-side .mw-endpoint small{
  font-size:10px!important;
  line-height:1.05!important;
  font-weight:820!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  color:rgba(245,245,247,.44)!important;
}
.maps-ref-side .mw-endpoint.active small{color:rgba(100,210,255,.88)!important;}
.maps-ref-side .mw-endpoint b{
  margin-top:3px!important;
  font-size:14.5px!important;
  line-height:1.08!important;
  font-weight:820!important;
  letter-spacing:-.025em!important;
  color:rgba(245,245,247,.92)!important;
}
.maps-ref-side .mw-endpoint.active b{color:#fff!important;}
.maps-ref-side .mw-endpoint.done b{color:rgba(245,245,247,.64)!important;}
.maps-ref-side .mw-endpoint em{
  margin-top:4px!important;
  max-width:210px!important;
  font-size:11.5px!important;
  line-height:1.25!important;
  font-weight:560!important;
  color:rgba(245,245,247,.55)!important;
}
.maps-ref-side .mw-endpoint.active em{color:rgba(245,245,247,.72)!important;}
.maps-ref-side .maps-progress-card{
  margin-top:auto!important;
  padding:14px!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.055))!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 18px 44px rgba(0,0,0,.20)!important;
  backdrop-filter:blur(26px) saturate(1.28)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.28)!important;
}
.maps-ref-side .maps-progress-card .mw-card-dot{
  background:linear-gradient(180deg,#64d2ff,#0a84ff)!important;
  box-shadow:0 0 22px rgba(100,210,255,.38)!important;
}
.maps-ref-side .maps-progress-card [data-maps-side-title]{
  font-size:15.5px!important;
  font-weight:840!important;
  letter-spacing:-.025em!important;
  color:#fff!important;
}
.maps-ref-side .maps-progress-card [data-maps-side-sub]{
  margin-top:3px!important;
  font-size:12px!important;
  line-height:1.3!important;
  color:rgba(245,245,247,.62)!important;
}
.maps-side-actions{
  gap:10px!important;
  margin-top:12px!important;
}
.maps-side-actions button{
  border-radius:16px!important;
  padding:12px 14px!important;
  font-size:13px!important;
  font-weight:830!important;
  transition:transform .22s cubic-bezier(.22,1,.36,1), filter .22s ease, background .22s ease, box-shadow .22s ease!important;
}
.maps-side-primary{
  background:linear-gradient(180deg,#1aa0ff,#0a84ff 58%,#0571e8)!important;
  color:#fff!important;
  box-shadow:inset 0 1px rgba(255,255,255,.28),0 13px 28px rgba(10,132,255,.28)!important;
}
.maps-side-secondary{
  background:rgba(255,255,255,.085)!important;
  color:#9ddcff!important;
  border:1px solid rgba(255,255,255,.11)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08)!important;
}
.maps-side-actions button:hover{filter:brightness(1.06) saturate(1.05)!important;transform:translateY(-1px)!important;}
.maps-side-actions button:active{transform:translateY(0) scale(.985)!important;}
.maps-reference-shell.maps-moving .maps-side-primary{opacity:.62!important;filter:saturate(.82)!important;}
.win.maxi .maps-ref-side{padding:22px 18px 18px!important;}
.win.maxi .maps-ref-side .mw-endpoint{min-height:70px!important;}
@media(max-width:980px){
  .maps-reference-shell{grid-template-columns:270px minmax(0,1fr)!important;}
  .maps-ref-side{padding:14px 12px!important;}
  .maps-ref-side .mw-endpoint em{max-width:180px!important;}
}


/* Maps glass minimal sidebar spacing */
.maps-ref-side{
  padding:20px 16px 16px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032) 54%,rgba(255,255,255,.022))!important;
  border-right:1px solid rgba(255,255,255,.095)!important;
  box-shadow:inset -1px 0 rgba(0,0,0,.22), 10px 0 34px rgba(0,0,0,.14)!important;
  backdrop-filter:blur(30px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(30px) saturate(1.18)!important;
}
.maps-ref-side::before{
  background:linear-gradient(135deg,rgba(255,255,255,.095),transparent 34%,transparent 72%,rgba(255,255,255,.03))!important;
  opacity:.42!important;
}
.maps-ref-side .mw-side-head{
  margin-bottom:16px!important;
  padding:10px 8px 12px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08)!important;
}
.maps-ref-side .mw-side-head h2{
  font-size:21px!important;
  font-weight:780!important;
  letter-spacing:-.04em!important;
}
.maps-ref-side .mw-route-list{
  gap:6px!important;
  padding:2px 0 8px!important;
}
.maps-ref-side .mw-route-line{
  left:18px!important;
  top:34px!important;
  bottom:34px!important;
  width:1.5px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.10),rgba(255,255,255,.055))!important;
  box-shadow:none!important;
}
.maps-ref-side .mw-endpoint{
  min-height:61px!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  padding:8px 9px 8px 0!important;
  border-radius:17px!important;
  background:transparent!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
}
.maps-ref-side .mw-endpoint:hover{
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(255,255,255,.065)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.055)!important;
  transform:translateX(1px)!important;
}
.maps-ref-side .mw-endpoint:active{transform:translateX(1px) scale(.995)!important;}
.maps-ref-side .mw-endpoint.active{
  background:rgba(255,255,255,.072)!important;
  border-color:rgba(255,255,255,.095)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08)!important;
}
.maps-ref-side .mw-pt{
  width:15px!important;
  height:15px!important;
  box-shadow:0 0 0 6px rgba(18,20,24,.82), inset 0 1px rgba(255,255,255,.24)!important;
  background:rgba(245,245,247,.32)!important;
}
.maps-ref-side .mw-endpoint.active .mw-pt{
  transform:scale(1.06)!important;
  background:rgba(100,210,255,.88)!important;
  box-shadow:0 0 0 6px rgba(18,20,24,.86),0 0 16px rgba(100,210,255,.26),inset 0 1px rgba(255,255,255,.42)!important;
}
.maps-ref-side .mw-endpoint.done .mw-pt{
  background:rgba(52,199,89,.74)!important;
  box-shadow:0 0 0 6px rgba(18,20,24,.80),inset 0 1px rgba(255,255,255,.30)!important;
}
.maps-ref-side .mw-pt svg{width:10px!important;height:10px!important;opacity:.9!important;}
.maps-ref-side .mw-endpoint small{
  font-size:9.5px!important;
  font-weight:740!important;
  letter-spacing:.045em!important;
  color:rgba(245,245,247,.38)!important;
}
.maps-ref-side .mw-endpoint.active small{color:rgba(100,210,255,.72)!important;}
.maps-ref-side .mw-endpoint b{
  margin-top:3px!important;
  font-size:14px!important;
  font-weight:760!important;
  line-height:1.08!important;
  letter-spacing:-.022em!important;
  color:rgba(245,245,247,.88)!important;
}
.maps-ref-side .mw-endpoint em{
  margin-top:4px!important;
  max-width:206px!important;
  font-size:11.2px!important;
  line-height:1.26!important;
  color:rgba(245,245,247,.50)!important;
}
.maps-ref-side .maps-progress-card{
  padding:13px!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.052)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.075)!important;
  backdrop-filter:blur(22px) saturate(1.12)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.12)!important;
}
.maps-ref-side .maps-progress-card .mw-card-dot{
  background:rgba(100,210,255,.82)!important;
  box-shadow:0 0 14px rgba(100,210,255,.24)!important;
}
.maps-ref-side .maps-progress-card [data-maps-side-title]{
  font-size:15px!important;
  font-weight:760!important;
}
.maps-ref-side .maps-progress-card [data-maps-side-sub]{
  font-size:11.8px!important;
  line-height:1.32!important;
  color:rgba(245,245,247,.55)!important;
}
.maps-side-actions{
  grid-template-columns:1fr 76px!important;
  gap:8px!important;
  margin-top:10px!important;
}
.maps-side-actions button{
  border-radius:13px!important;
  padding:10px 12px!important;
  font-size:12.5px!important;
  font-weight:740!important;
  letter-spacing:-.01em!important;
  box-shadow:none!important;
}
.maps-side-primary{
  background:rgba(255,255,255,.082)!important;
  color:rgba(245,245,247,.92)!important;
  border:1px solid rgba(255,255,255,.095)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.07)!important;
}
.maps-side-primary::after{content:none!important;}
.maps-side-secondary{
  background:rgba(255,255,255,.035)!important;
  color:rgba(245,245,247,.62)!important;
  border:1px solid rgba(255,255,255,.065)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.045)!important;
}
.maps-side-actions button:hover{
  filter:none!important;
  background:rgba(255,255,255,.115)!important;
  transform:translateY(-.5px)!important;
}
.maps-side-secondary:hover{background:rgba(255,255,255,.065)!important;}
.maps-side-actions button:active{transform:scale(.99)!important;}
.maps-reference-shell.maps-moving .maps-side-primary{opacity:.48!important;filter:none!important;}
.win.maxi .maps-ref-side{padding:22px 18px 18px!important;}
.win.maxi .maps-ref-side .mw-endpoint{min-height:64px!important;}
@media(max-width:980px){
  .maps-reference-shell{grid-template-columns:264px minmax(0,1fr)!important;}
  .maps-ref-side .mw-endpoint em{max-width:176px!important;}
  .maps-side-actions{grid-template-columns:1fr 72px!important;}
}


/* Maps clean Apple blue white sidebar */
.maps-ref-side{
  background:#f5f5f7!important;
  color:#1d1d1f!important;
  border-right:1px solid rgba(0,0,0,.10)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.maps-ref-side::before,
.maps-ref-side::after{display:none!important;content:none!important;}
.maps-ref-side .mw-side-head{
  background:#fff!important;
  border:1px solid rgba(0,0,0,.08)!important;
  box-shadow:none!important;
}
.maps-ref-side .mw-side-head h2{color:#1d1d1f!important;}
.maps-ref-side .mw-side-head p,
.maps-ref-side .mw-side-head span,
.maps-ref-side .mw-side-head small{color:#6e6e73!important;}
.maps-ref-side .mw-side-head svg,
.maps-ref-side .mw-side-head img{filter:none!important;}
.maps-ref-side .mw-route-line{
  background:rgba(0,0,0,.12)!important;
  box-shadow:none!important;
}
.maps-ref-side .mw-endpoint{
  background:transparent!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  color:#1d1d1f!important;
}
.maps-ref-side .mw-endpoint:hover,
.maps-ref-side .mw-endpoint.active{
  background:#fff!important;
  border-color:rgba(0,0,0,.08)!important;
  box-shadow:none!important;
  transform:none!important;
}
.maps-ref-side .mw-endpoint:active{transform:scale(.995)!important;}
.maps-ref-side .mw-endpoint.done{opacity:.72!important;}
.maps-ref-side .mw-pt,
.maps-ref-side .mw-endpoint.done .mw-pt,
.maps-ref-side .mw-endpoint.active .mw-pt{
  background:#007aff!important;
  color:#fff!important;
  box-shadow:0 0 0 4px #fff!important;
  border:1px solid rgba(255,255,255,.95)!important;
  transform:none!important;
}
.maps-ref-side .mw-pt svg{fill:currentColor!important;filter:none!important;}
.maps-ref-side .mw-endpoint small,
.maps-ref-side .mw-endpoint.active small{color:#86868b!important;}
.maps-ref-side .mw-endpoint b,
.maps-ref-side .mw-endpoint.active b{color:#1d1d1f!important;}
.maps-ref-side .mw-endpoint.done b{color:#6e6e73!important;}
.maps-ref-side .mw-endpoint em,
.maps-ref-side .mw-endpoint.active em{color:#6e6e73!important;}
.maps-ref-side .maps-progress-card{
  background:#fff!important;
  border:1px solid rgba(0,0,0,.08)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.maps-ref-side .maps-progress-card .mw-card-dot{
  background:#007aff!important;
  box-shadow:none!important;
}
.maps-ref-side .maps-progress-card [data-maps-side-title]{color:#1d1d1f!important;}
.maps-ref-side .maps-progress-card [data-maps-side-sub]{color:#6e6e73!important;}
.maps-side-primary,
.maps-side-secondary{
  background:#fff!important;
  color:#007aff!important;
  border:1px solid rgba(0,0,0,.08)!important;
  box-shadow:none!important;
  filter:none!important;
}
.maps-side-actions button:hover{
  background:#fff!important;
  color:#007aff!important;
  filter:none!important;
  transform:none!important;
  box-shadow:none!important;
}
.maps-side-actions button:active{transform:scale(.99)!important;}
.maps-reference-shell.maps-moving .maps-side-primary{opacity:.55!important;filter:none!important;}


/* Maps dark opaque glass sidebar clean */
.maps-ref-side{
  padding:20px 16px 16px!important;
  background:rgba(28,30,34,.86)!important;
  color:#f5f5f7!important;
  border-right:1px solid rgba(255,255,255,.10)!important;
  box-shadow:none!important;
  backdrop-filter:blur(28px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.08)!important;
}
.maps-ref-side::before,
.maps-ref-side::after{display:none!important;content:none!important;}
.maps-ref-side .mw-side-head{
  margin-bottom:16px!important;
  padding:10px 8px 12px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:none!important;
}
.maps-ref-side .mw-side-head h2{color:#f5f5f7!important;}
.maps-ref-side .mw-side-head p,
.maps-ref-side .mw-side-head span,
.maps-ref-side .mw-side-head small{color:rgba(245,245,247,.58)!important;}
.maps-ref-side .mw-side-head svg,
.maps-ref-side .mw-side-head img{filter:none!important;}
.maps-ref-side .mw-route-list{
  position:relative!important;
  display:grid!important;
  gap:6px!important;
  padding:2px 0 8px!important;
}
.maps-ref-side .mw-route-line{
  left:18px!important;
  top:32px!important;
  bottom:32px!important;
  width:1.5px!important;
  background:rgba(255,255,255,.18)!important;
  border-radius:999px!important;
  box-shadow:none!important;
}
.maps-ref-side .mw-endpoint{
  min-height:61px!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  padding:8px 9px 8px 0!important;
  border-radius:17px!important;
  background:transparent!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  color:#f5f5f7!important;
  align-items:center!important;
  transition:background .26s cubic-bezier(.22,1,.36,1),border-color .26s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1),opacity .22s ease!important;
}
.maps-ref-side .mw-endpoint:hover,
.maps-ref-side .mw-endpoint.active{
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:none!important;
  transform:none!important;
}
.maps-ref-side .mw-endpoint:active{transform:scale(.995)!important;}
.maps-ref-side .mw-endpoint.done{opacity:.72!important;}
.maps-ref-side .mw-pt,
.maps-ref-side .mw-endpoint.done .mw-pt,
.maps-ref-side .mw-endpoint.active .mw-pt{
  grid-column:1!important;
  justify-self:center!important;
  align-self:center!important;
  width:15px!important;
  height:15px!important;
  margin:0!important;
  border-radius:50%!important;
  background:#007aff!important;
  color:#fff!important;
  border:1.5px solid rgba(255,255,255,.96)!important;
  box-shadow:0 0 0 5px rgba(28,30,34,.96)!important;
  transform:none!important;
  filter:none!important;
}
.maps-ref-side .mw-pt svg{width:10px!important;height:10px!important;fill:currentColor!important;filter:none!important;opacity:.95!important;}
.maps-ref-side .mw-endpoint>div{grid-column:2!important;min-width:0!important;padding-right:2px!important;}
.maps-ref-side .mw-endpoint small,
.maps-ref-side .mw-endpoint.active small{color:rgba(245,245,247,.46)!important;}
.maps-ref-side .mw-endpoint b,
.maps-ref-side .mw-endpoint.active b{color:#f5f5f7!important;}
.maps-ref-side .mw-endpoint.done b{color:rgba(245,245,247,.62)!important;}
.maps-ref-side .mw-endpoint em,
.maps-ref-side .mw-endpoint.active em{color:rgba(245,245,247,.58)!important;}
.maps-ref-side .maps-progress-card{
  background:rgba(255,255,255,.065)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:none!important;
  backdrop-filter:blur(22px) saturate(1.06)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.06)!important;
}
.maps-ref-side .maps-progress-card .mw-card-dot{
  background:#007aff!important;
  box-shadow:none!important;
}
.maps-ref-side .maps-progress-card [data-maps-side-title]{color:#f5f5f7!important;}
.maps-ref-side .maps-progress-card [data-maps-side-sub]{color:rgba(245,245,247,.58)!important;}
.maps-side-primary,
.maps-side-secondary{
  background:rgba(255,255,255,.065)!important;
  color:#0a84ff!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:none!important;
  filter:none!important;
}
.maps-side-actions button:hover{
  background:rgba(255,255,255,.09)!important;
  color:#0a84ff!important;
  filter:none!important;
  transform:none!important;
  box-shadow:none!important;
}
.maps-side-actions button:active{transform:scale(.99)!important;}
.maps-reference-shell.maps-moving .maps-side-primary{opacity:.55!important;filter:none!important;}


/* Maps final clean dots no snap narrative */
.maps-ref-side .mw-pt,
.maps-ref-side .mw-pt.start,
.maps-ref-side .mw-pt.mid,
.maps-ref-side .mw-pt.end,
.maps-ref-side .mw-endpoint.active .mw-pt,
.maps-ref-side .mw-endpoint.done .mw-pt{
  background:#007aff!important;
  border:1.5px solid rgba(255,255,255,.96)!important;
  box-shadow:none!important;
  filter:none!important;
  outline:0!important;
}
.maps-ref-side .mw-pt::before,
.maps-ref-side .mw-pt::after{display:none!important;content:none!important;}
.maps-ref-side .mw-pt svg{filter:none!important;}
.maps-ref-side .mw-route-line{background:rgba(255,255,255,.20)!important;box-shadow:none!important;filter:none!important;}
.maps-ref .checkpoint-ring{filter:none!important;stroke:rgba(100,210,255,.72)!important;}
.maps-ref .map-tilt.checkpoint-flash{filter:none!important;}
.maps-reference-shell.nav .maps-ref,
.maps-reference-shell.maps-moving .maps-ref,
.maps-reference-shell.maps-paused .maps-ref,
.maps-reference-shell.maps-panorama-return .maps-ref,
.maps-reference-shell.nav .maps-ref .map-stage,
.maps-reference-shell.maps-moving .maps-ref .map-stage,
.maps-reference-shell.maps-paused .maps-ref .map-stage,
.maps-reference-shell.maps-panorama-return .maps-ref .map-stage,
.maps-reference-shell.nav .map-tilt,
.maps-reference-shell.maps-moving .map-tilt,
.maps-reference-shell.maps-paused .map-tilt,
.maps-reference-shell.maps-panorama-return .map-tilt{
  transition:none!important;
}
.maps-ref-side .maps-progress-card [data-maps-side-title]{font-size:14.8px!important;line-height:1.12!important;font-weight:760!important;}
.maps-ref-side .maps-progress-card [data-maps-side-sub]{font-size:12px!important;line-height:1.42!important;font-weight:520!important;color:rgba(245,245,247,.64)!important;}
.maps-ref-side .maps-progress-card{padding:14px 13px!important;}