/* MarX — strato grafico "Liquid Glass" (stile macOS recente).
   Si carica dopo marx.css e ne ridefinisce l'aspetto: materiali in vetro, angoli concentrici, barra dei menu trasparente. */

:root {
    --lg-tint: rgba(255, 255, 255, .22);
    --lg-tint-strong: rgba(255, 255, 255, .42);
    --lg-edge: rgba(255, 255, 255, .75);
    --lg-edge-soft: rgba(255, 255, 255, .25);
    --lg-shadow: 0 12px 40px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08);
    --lg-blur: 18px;
    --lg-sat: 1.9;
    --lg-hover: rgba(255, 255, 255, .35);
    --menu-text: #fff;
    --r-window: 22px;
    --r-panel: 16px;
    --r-control: 999px;
    --win-bg: #fbfbfd;
    --win-sidebar: rgba(255, 255, 255, .55);
    --accent: #0a84ff;
    --wallpaper:
        radial-gradient(80% 60% at 18% 22%, rgba(120, 220, 255, .85) 0%, transparent 60%),
        radial-gradient(70% 55% at 85% 18%, rgba(170, 130, 255, .75) 0%, transparent 62%),
        radial-gradient(90% 70% at 70% 95%, rgba(20, 60, 190, .95) 0%, transparent 70%),
        radial-gradient(60% 50% at 10% 90%, rgba(0, 170, 200, .7) 0%, transparent 65%),
        linear-gradient(165deg, #6ec3f4 0%, #3f7fe0 38%, #2c4fc4 62%, #1a2a7c 100%);
}
:root[data-theme="dark"] {
    --lg-tint: rgba(28, 28, 34, .38);
    --lg-tint-strong: rgba(40, 40, 48, .6);
    --lg-edge: rgba(255, 255, 255, .32);
    --lg-edge-soft: rgba(255, 255, 255, .08);
    --lg-shadow: 0 14px 44px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);
    --lg-hover: rgba(255, 255, 255, .14);
    --win-bg: #1c1c1e;
    --win-sidebar: rgba(44, 44, 50, .55);
    --wallpaper:
        radial-gradient(80% 60% at 18% 22%, rgba(40, 110, 170, .7) 0%, transparent 60%),
        radial-gradient(70% 55% at 85% 18%, rgba(90, 50, 170, .65) 0%, transparent 62%),
        radial-gradient(90% 70% at 70% 95%, rgba(10, 25, 90, .95) 0%, transparent 70%),
        radial-gradient(60% 50% at 10% 90%, rgba(0, 90, 120, .6) 0%, transparent 65%),
        linear-gradient(165deg, #12305a 0%, #0f1f4a 45%, #0a1033 100%);
}

/* ---------- Materiale vetro ---------- */
.dock, .lg-glass { position: relative; }
.dock, .dropdown, .ctx, .control, .spotlight, .toast, .lg-glass {
    background: var(--lg-tint);
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
    border: 0;
    box-shadow:
        inset 0 1px 0 var(--lg-edge),
        inset 0 -1px 0 var(--lg-edge-soft),
        inset 0 0 0 .5px var(--lg-edge-soft),
        var(--lg-shadow);
}
/* Rifrazione: solo nei browser Chromium, che supportano filtri SVG nel backdrop (classe messa dal JS) */
.lg-refract .dock, .lg-refract .control, .lg-refract .spotlight {
    backdrop-filter: url(#lg-refract) blur(var(--lg-blur)) saturate(var(--lg-sat));
}
/* Riflesso speculare sul bordo */
.dock::before, .dropdown::before, .ctx::before, .control::before, .spotlight::before, .toast::before, .lg-glass::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.12) 28%, rgba(255,255,255,0) 50%, rgba(255,255,255,.1) 72%, rgba(255,255,255,.55) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: .9;
}
:root[data-theme="dark"] .dock::before, :root[data-theme="dark"] .dropdown::before, :root[data-theme="dark"] .ctx::before,
:root[data-theme="dark"] .control::before, :root[data-theme="dark"] .spotlight::before, :root[data-theme="dark"] .toast::before,
:root[data-theme="dark"] .lg-glass::before { opacity: .35; }

@media (prefers-reduced-transparency: reduce) {
    .dock, .dropdown, .ctx, .control, .spotlight, .toast, .lg-glass { background: var(--lg-tint-strong); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }
    .lg-refract .dock, .lg-refract .control, .lg-refract .spotlight { backdrop-filter: blur(40px); }
}

/* ---------- Barra dei menu trasparente ---------- */
.menubar {
    background: linear-gradient(rgba(0,0,0,.14), rgba(0,0,0,0));
    backdrop-filter: none; -webkit-backdrop-filter: none;
    color: var(--menu-text);
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    height: 28px; --menubar-h: 28px;
}
.menubar button, .menu-app, .menu-clock { border-radius: var(--r-control); padding: 2px 10px; height: 22px; }
.menubar button:hover, .menubar button.open { background: var(--lg-hover); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.35); }
.desktop { inset: 28px 0 0 0; }

/* ---------- Menu a tendina e tasto destro ---------- */
.dropdown, .ctx { border-radius: 14px; padding: 6px; color: var(--text); min-width: 230px; }
.dropdown { top: 32px; }
.dropdown button, .ctx button { border-radius: 8px; padding: 4px 10px; font-size: 13px; }
.dropdown hr, .ctx hr { margin: 5px 10px; border-top-color: rgba(127,127,127,.25); }
.dropdown button:hover:not(:disabled), .ctx button:hover:not(:disabled) { background: var(--accent); color: #fff; }

/* ---------- Dock ---------- */
.dock-wrap { bottom: 8px; }
.dock { border-radius: 28px; padding: 7px 9px; gap: 4px; align-items: flex-end; overflow: visible; }
.dock-item { width: 54px; height: 54px; transition: width .12s ease-out, height .12s ease-out; will-change: width, height; }
.dock-item .ico { border-radius: 24%; box-shadow: 0 3px 8px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 .5px rgba(255,255,255,.35); }
.dock-item::after {
    background: var(--lg-tint-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: var(--r-control); padding: 4px 12px; font-weight: 500;
    box-shadow: inset 0 1px 0 var(--lg-edge), var(--lg-shadow);
}
.dock-item.running::before { width: 5px; height: 5px; margin-left: -2.5px; bottom: -6px; background: var(--menu-text); opacity: .85; box-shadow: 0 0 4px rgba(0,0,0,.3); }
.dock-sep { background: rgba(255,255,255,.35); margin: 6px 6px; }
.dock.magnify .dock-item { transition: width .06s linear, height .06s linear; }

/* ---------- Finestre ---------- */
.window {
    border-radius: var(--r-window);
    background: var(--win-bg);
    box-shadow: 0 30px 80px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.18);
    transition: box-shadow .2s;
    animation: none;
}
:root[data-theme="dark"] .window { box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.4), 0 0 0 .5px rgba(255,255,255,.14); }
.window.inactive { box-shadow: 0 16px 40px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.14); }
.window > .titlebar { border-radius: var(--r-window) var(--r-window) 0 0; background: var(--win-bg); border-bottom: 0; height: 44px; padding: 0 16px; }
.window > .win-body { border-radius: 0 0 var(--r-window) var(--r-window); }
.titlebar .title { color: var(--text); font-weight: 600; opacity: .85; }
.window.inactive .titlebar .title { opacity: .45; }
.lights { gap: 9px; }
.lights button { width: 13px; height: 13px; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18), inset 0 1px 1px rgba(255,255,255,.35); }

/* Finder: barra laterale galleggiante in vetro, angoli concentrici con la finestra */
.window .finder { grid-template-columns: 200px 1fr; }
.window .finder .sidebar, .window .notes .notes-list {
    margin: 0 0 10px 10px; border-radius: calc(var(--r-window) - 8px);
    background: var(--win-sidebar);
    backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 0; box-shadow: inset 0 1px 0 var(--lg-edge-soft), inset 0 0 0 .5px rgba(127,127,127,.18), 0 2px 10px rgba(0,0,0,.06);
}
.window .notes { grid-template-columns: 220px 1fr; }
.sidebar button { border-radius: 10px; padding: 5px 10px; }
.sidebar button.active { background: rgba(127,127,127,.18); }
.note-item { border-bottom: 0; border-radius: 10px; margin: 2px 6px; width: calc(100% - 12px); }
.note-item.active { background: rgba(255, 204, 0, .35); }
.notes-list .bar { border-bottom: 0; }
.notes textarea { border-radius: 0 0 var(--r-window) 0; }

/* Barra strumenti: controlli a capsula in vetro */
.toolbar { border-bottom: 0; padding: 8px 12px; gap: 8px; }
.toolbar button {
    border-radius: var(--r-control); padding: 4px 12px; background: rgba(127,127,127,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 .5px rgba(127,127,127,.2);
}
.toolbar button:hover:not(:disabled) { background: rgba(127,127,127,.22); }
.toolbar [data-nav] { width: 30px; padding: 4px 0; }
.crumbs button { border-radius: var(--r-control); }
.statusbar { border-top: 0; padding: 6px 16px 10px; }
.file { border-radius: 12px; }
.file.sel { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.files .ico { border-radius: 14px; }

/* Dialoghi (sheet) */
.sheet-bg { inset: 44px 0 0; background: transparent; border-radius: 0 0 var(--r-window) var(--r-window); }
.sheet {
    border-radius: 20px; margin-top: 10px; background: var(--lg-tint-strong);
    backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8);
    box-shadow: inset 0 1px 0 var(--lg-edge), inset 0 0 0 .5px var(--lg-edge-soft), 0 20px 50px rgba(0,0,0,.3);
    animation: lgPop .28s cubic-bezier(.2,1.2,.3,1);
}
@keyframes lgPop { from { transform: scale(.9); opacity: 0; } }
.btn { border-radius: var(--r-control); padding: 5px 16px; }
.sheet input, .sheet select, .pane .field input { border-radius: 10px; }

/* Calcolatrice: tasti in vetro */
.calc { background: rgba(28, 28, 30, .92); border-radius: 0 0 var(--r-window) var(--r-window); }
.window:has(.calc) > .titlebar { background: rgba(28, 28, 30, .92); }
.window:has(.calc) .titlebar .title { color: #fff; }
.calc-keys button { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 .5px rgba(255,255,255,.08); transition: filter .1s, transform .1s; }
.calc-keys button:active { transform: scale(.94); }

/* Impostazioni */
.seg { border-radius: var(--r-control); padding: 3px; background: rgba(127,127,127,.14); }
.seg button { border-radius: var(--r-control); }
.walls button { border-radius: 14px; }

/* ---------- Spotlight, Centro di controllo, notifiche ---------- */
.spotlight { border-radius: 30px; top: 20%; }
.spotlight input { padding: 16px 24px; font-size: 24px; }
#spotlightResults button { border-radius: 12px; margin: 0 8px; width: calc(100% - 16px); }
.control { border-radius: 26px; padding: 12px; top: 34px; }
.cc-tile { border-radius: 20px; background: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 var(--lg-edge-soft), inset 0 0 0 .5px var(--lg-edge-soft); }
:root[data-theme="dark"] .cc-tile { background: rgba(255,255,255,.08); }
.toast { border-radius: 20px; padding: 12px 16px; top: 38px; animation: lgSlide .4s cubic-bezier(.2,1.1,.3,1); }
@keyframes lgSlide { from { transform: translateX(120%); } }

/* ---------- Launchpad e blocco schermo ---------- */
.launchpad { background: rgba(0,0,0,.18); backdrop-filter: blur(50px) saturate(1.6); -webkit-backdrop-filter: blur(50px) saturate(1.6); }
.launchpad input { border-radius: var(--r-control); background: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); padding: 7px 16px; }
.lp-grid .ico { border-radius: 24%; }
.lock-input { border-radius: var(--r-control); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 .5px rgba(255,255,255,.3); }
.avatar { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 24px rgba(0,0,0,.25); }

/* Icone sulla scrivania */
.desk-icon { border-radius: 12px; }
.desk-icon:focus, .desk-icon.sel { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.35); }

@media (prefers-reduced-motion: reduce) { .dock-item { transition: none; } }

/* Menu più leggibili: vetro più denso dove c'è testo da leggere */
.dropdown, .ctx, .toast { background: rgba(246, 246, 250, .62); }
:root[data-theme="dark"] .dropdown, :root[data-theme="dark"] .ctx, :root[data-theme="dark"] .toast { background: rgba(36, 36, 42, .62); }

/* ---------- Icone App Store e Monitoraggio, app installate ---------- */
.ico-appstore { background: linear-gradient(150deg, #34e0c8 0%, #2a9df4 48%, #7a5cff 100%); overflow: hidden; }
/* Soft Store: borsa della spesa bianca con manico */
.ico-appstore::before { content: ""; position: absolute; left: 25%; right: 25%; top: 38%; bottom: 20%; border-radius: 9% 9% 18% 18%;
    background: linear-gradient(#fff, #eef4ff); box-shadow: 0 2px 4px rgba(0,0,0,.18); }
.ico-appstore::after { content: ""; position: absolute; left: 36%; right: 36%; top: 22%; height: 26%; border: 2.5px solid #fff; border-bottom: 0;
    border-radius: 999px 999px 0 0; box-sizing: border-box; }
.dock-item .ico-appstore::after { border-width: 3px; }
.lp-grid .ico-appstore::after { border-width: 4px; }
.ico-activity { background: linear-gradient(160deg, #3a3a3e, #111113); }
.ico-activity::before { content: ""; position: absolute; inset: 22% 16%; background:
    linear-gradient(135deg, transparent 46%, #34c759 46% 54%, transparent 54%) 0 0 / 34% 100% no-repeat,
    linear-gradient(45deg, transparent 46%, #34c759 46% 54%, transparent 54%) 33% 0 / 34% 100% no-repeat,
    linear-gradient(135deg, transparent 46%, #34c759 46% 54%, transparent 54%) 66% 0 / 34% 100% no-repeat; }
.ico-web { background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ico-web img { width: 78%; height: 78%; object-fit: contain; }
.dock-apps { display: contents; }
.webapp { width: 100%; height: 100%; border: 0; display: block; background: #fff; border-radius: 0 0 var(--r-window) var(--r-window); }
.logview { margin: 0; padding: 14px 16px; height: 100%; overflow: auto; font: 12px/1.5 ui-monospace, Menlo, monospace; background: #1c1c1e; color: #e5e5e7; white-space: pre-wrap; word-break: break-all; border-radius: 0 0 var(--r-window) var(--r-window); user-select: text; }

/* ---------- App Store ---------- */
.as-wrap { height: 100%; }
.as-side small { margin-left: auto; color: var(--muted); }
.as-main { overflow: auto; padding: 6px 26px 26px; min-width: 0; }
.as-main h2 { margin: 6px 0 2px; font-size: 26px; letter-spacing: -.01em; }
.as-sub { color: var(--muted); margin: 0 0 14px; }
.as-empty { color: var(--muted); text-align: center; padding: 50px 20px; }
.as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 10px; }
.as-card { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(127,127,127,.07); cursor: default; transition: background .15s, transform .15s; }
.as-card:hover { background: rgba(127,127,127,.13); }
.as-card:focus-visible { outline: 2px solid var(--accent); }
.as-card img, .as-detail header img { width: 52px; height: 52px; border-radius: 12px; background: #fff; padding: 6px; object-fit: contain; box-shadow: 0 2px 8px rgba(0,0,0,.12), inset 0 0 0 .5px rgba(0,0,0,.08); }
.as-info { min-width: 0; display: flex; flex-direction: column; }
.as-info strong { font-size: 14px; }
.as-info span { color: var(--muted); font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.as-btn { border-radius: 999px; padding: 4px 16px; font-weight: 700; font-size: 13px; color: var(--accent); background: rgba(10,132,255,.12); cursor: pointer; }
.as-btn:hover { background: rgba(10,132,255,.2); }
.as-btn.warn { color: #ff3b30; background: rgba(255,59,48,.12); }
.as-progress { width: 64px; height: 6px; border-radius: 3px; background: rgba(127,127,127,.25); overflow: hidden; }
.as-progress i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .4s; }
.as-detail { max-width: 760px; }
.as-back { color: var(--accent); padding: 8px 0; font-weight: 600; cursor: pointer; }
.as-detail header { display: flex; align-items: center; gap: 16px; margin: 6px 0 16px; }
.as-detail header img { width: 84px; height: 84px; border-radius: 20px; padding: 10px; }
.as-detail header h2 { margin: 0; }
.as-head-act { margin-left: auto; }
.as-detail h3 { margin: 22px 0 6px; font-size: 16px; }
.as-step { color: var(--accent); font-weight: 600; }
.as-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 14px 0; }
.as-facts div { padding: 10px 12px; border-radius: 12px; background: rgba(127,127,127,.08); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-facts span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.as-facts strong { overflow-wrap: anywhere; }
.as-note { padding: 12px 14px; border-radius: 12px; background: rgba(10,132,255,.1); line-height: 1.5; }
.as-note.err { background: rgba(255,59,48,.1); }
.as-note code { font-size: 12px; overflow-wrap: anywhere; }
.as-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.as-detail a { color: var(--accent); }
.pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill.on { background: rgba(40,200,64,.15); color: #1f9d3a; }
.pill.off { background: rgba(127,127,127,.18); color: var(--muted); }

/* ---------- Monitoraggio Attività ---------- */
.am { padding: 4px 18px 16px; display: flex; flex-direction: column; gap: 14px; height: 100%; overflow: auto; }
.am-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.am-tile { padding: 12px 14px; border-radius: 16px; background: rgba(127,127,127,.08); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.am-tile span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.am-tile strong { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.am-tile small { color: var(--muted); font-variant-numeric: tabular-nums; }
.spark { width: 100%; height: 34px; margin-top: 6px; }
.am-bar { height: 6px; border-radius: 3px; background: rgba(127,127,127,.2); margin-top: 12px; overflow: hidden; }
.am-bar i { display: block; height: 100%; background: #ff9f0a; }
.am-table-wrap { overflow-x: auto; border-radius: 14px; background: rgba(127,127,127,.05); }
.am-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.am-table th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.am-table th[data-sort] { cursor: pointer; }
.am-table th.sorted { color: var(--accent); }
.am-table td { padding: 7px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.am-table tr:last-child td { border-bottom: 0; }
.am-table td img { width: 18px; height: 18px; vertical-align: -4px; margin-right: 8px; border-radius: 4px; background: #fff; }
.am-table .num { text-align: right; }
.as-search { padding: 2px 2px 8px; }
.as-search input { width: 100%; padding: 6px 12px; border-radius: 999px; border: 0; background: rgba(127,127,127,.14); color: var(--text); outline: none; box-shadow: inset 0 0 0 .5px rgba(127,127,127,.25); }
.as-search input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); background: var(--win-bg); }

/* App Store: sezioni, app non compatibili, descrizioni */
.as-sec { margin: 22px 0 4px; font-size: 18px; display: flex; align-items: baseline; gap: 10px; }
.as-sec small, .as-count { font-size: 13px; font-weight: 500; color: var(--muted); }
.as-card.blocked img { filter: grayscale(1); opacity: .55; }
.as-card.blocked .as-info strong { opacity: .6; }
.as-btn.off { color: var(--muted); background: rgba(127,127,127,.14); font-weight: 600; font-size: 11px; padding: 4px 10px; }
.as-md { line-height: 1.55; }
.as-md h4 { margin: 16px 0 4px; font-size: 15px; }
.as-md p { margin: 6px 0; }
.as-md ul { margin: 6px 0; padding-left: 20px; }
.as-md code { font-size: 12px; background: rgba(127,127,127,.14); padding: 1px 5px; border-radius: 5px; }
.as-md a { color: var(--accent); }

/* Calendario: la griglia resta proporzionata anche a finestra ingrandita */
.cal { max-width: 560px; margin: 0 auto; }

/* ---------- Preferenze applicate all'interfaccia ---------- */
body:not(.loginscreen) { background: var(--desk-bg, var(--wallpaper)); font-size: var(--text-size, 13px); }
.dock-item { width: var(--dock-size, 54px); height: var(--dock-size, 54px); }
@media (max-width: 640px) { .dock-item { width: min(40px, var(--dock-size, 54px)); height: min(40px, var(--dock-size, 54px)); } }
.dock-wrap { transition: transform .35s cubic-bezier(.3,.8,.3,1); }
body.dock-autohide .dock-wrap { transform: translateY(calc(100% + 14px)); }
body.dock-autohide .dock-wrap.show { transform: none; }
body.no-desk-icons .desktop-icons { display: none; }
.no-transparency { --lg-tint: rgba(246,246,248,.97); --lg-tint-strong: rgba(246,246,248,.98); --win-sidebar: #ececf0; }
:root.no-transparency[data-theme="dark"] { --lg-tint: rgba(38,38,42,.97); --lg-tint-strong: rgba(44,44,48,.98); --win-sidebar: #2c2c30; }
.no-transparency .dock, .no-transparency .dropdown, .no-transparency .ctx, .no-transparency .control, .no-transparency .spotlight,
.no-transparency .toast, .no-transparency .sheet, .no-transparency .sidebar, .no-transparency .menubar button:hover { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.no-transparency .dropdown, .no-transparency .ctx, .no-transparency .toast { background: var(--lg-tint); }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; }

/* ---------- Impostazioni ---------- */
.st { display: grid; grid-template-columns: 230px 1fr; height: 100%; }
.st-side { overflow: auto; }
.st-nav { gap: 10px !important; padding: 5px 8px !important; }
.st-nav span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.st-nav b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-nav small { color: var(--muted); font-size: 11px; }
.st-nav-acc { margin-bottom: 8px; padding: 8px !important; }
.st-nav-acc b { font-weight: 600; }
.st-nav.active { background: var(--accent) !important; color: #fff; }
.st-nav.active small { color: rgba(255,255,255,.8); }
.st-ico { width: 24px; height: 24px; border-radius: 7px; flex: none; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.st-ico svg { width: 16px; height: 16px; }
.st-avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 24px; color: #fff;
    background: linear-gradient(160deg, #a1a1a6, #636366); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.st-avatar.sm { width: 34px; height: 34px; font-size: 13px; }
.st-main { overflow: auto; padding: 4px 28px 28px; min-width: 0; }
.st-title { font-size: 20px; margin: 4px 0 14px; }
.st-gt { margin: 18px 0 6px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.st-group { background: rgba(127,127,127,.08); border-radius: 12px; overflow: hidden; }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; min-height: 44px; }
.st-row + .st-row { border-top: 1px solid var(--line); }
.st-row > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.st-row small { color: var(--muted); font-size: 11.5px; }
.st-ctl { flex: none; display: flex; align-items: center; gap: 8px; }
.st-ctl select { padding: 4px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); }
.st-muted { color: var(--muted); }
.st-note { color: var(--muted); font-size: 12px; margin: 12px 4px; }
.st-inline { display: flex; gap: 6px; }
.st-inline input { width: 190px; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); }
.st-form { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.st-form input { padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); }
.st-form-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.st-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.st-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.st-hero h2 { margin: 0; font-size: 20px; }
.st-hero p { margin: 2px 0 0; color: var(--muted); }
/* Interruttore */
.sw { position: relative; display: inline-block; width: 38px; height: 22px; }
.sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.sw i { position: absolute; inset: 0; border-radius: 999px; background: rgba(127,127,127,.35); transition: background .2s; }
.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.sw input:checked + i { background: var(--accent); }
.sw input:checked + i::after { transform: translateX(16px); }
.sw input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-range { display: flex; align-items: center; gap: 8px; }
.st-range input { width: 170px; accent-color: var(--accent); }
.st-range input:disabled { opacity: .4; }
.st-range output { min-width: 46px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Tema */
.st-themes { display: flex; gap: 18px; padding: 4px; }
.st-theme { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.st-thumb { width: 92px; height: 60px; border-radius: 10px; position: relative; overflow: hidden; box-shadow: 0 0 0 1px var(--line); background: var(--wallpaper); }
.st-thumb i { position: absolute; left: 12px; top: 12px; right: 18px; bottom: 10px; border-radius: 6px; background: #fff; }
.st-thumb b { position: absolute; left: 12px; top: 12px; width: 30%; bottom: 10px; border-radius: 6px 0 0 6px; background: #e9e9ee; }
.st-thumb.t-dark i { background: #2c2c2e; } .st-thumb.t-dark b { background: #3a3a3c; }
.st-thumb.t-auto i { background: linear-gradient(90deg, #fff 50%, #2c2c2e 50%); } .st-thumb.t-auto b { background: #e9e9ee; }
.st-theme.on .st-thumb { box-shadow: 0 0 0 3px var(--accent); }
.st-accents { display: flex; gap: 8px; }
.st-accents button { width: 20px; height: 20px; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2); }
.st-accents button.on { box-shadow: 0 0 0 2px var(--win-bg), 0 0 0 4px var(--c); }
/* Sfondo */
.st-preview { position: relative; height: 170px; border-radius: 14px; background: var(--desk-bg, var(--wallpaper)); overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 6px 20px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; }
.st-preview > span { color: #fff; font-size: 12px; text-shadow: 0 1px 3px rgba(0,0,0,.5); opacity: 0; transition: opacity .2s; }
.st-preview:hover > span, .st-preview.drop > span { opacity: 1; }
.st-preview.drop { box-shadow: 0 0 0 3px var(--accent); }
.st-preview-bar { position: absolute; inset: 0 0 auto 0; height: 14px; background: linear-gradient(rgba(0,0,0,.15), transparent); display: flex; justify-content: flex-end; padding: 0 10px; color: #fff; font-size: 10px; line-height: 14px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.st-preview-dock { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 46%; height: 16px; border-radius: 6px; background: rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.st-preview-mb { height: 60px; }
.st-preview-mb .st-preview-bar { height: 24px; line-height: 24px; font-size: 12px; }
.st-walls { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.st-walls > * { aspect-ratio: 16 / 10; border-radius: 10px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); position: relative; overflow: hidden; }
.st-walls .on { box-shadow: 0 0 0 3px var(--accent); }
.st-wall-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.st-wall-color span { position: absolute; left: 6px; bottom: 5px; font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events: none; }
.st-wall-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: rgba(127,127,127,.1); border: 1.5px dashed rgba(127,127,127,.45); box-shadow: none !important; }
.st-wall-add span { font-size: 22px; color: var(--accent); line-height: 1; }
.st-wall-add small { font-size: 11px; color: var(--muted); }
.st-wall-add:hover { background: rgba(127,127,127,.18); }
.st-about { text-align: center; padding: 10px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.st-about .logo { width: 72px; height: 72px; border-radius: 18px; background: linear-gradient(145deg, var(--accent), #5e5ce6); color: #fff; display: flex; align-items: center; justify-content: center; }
.st-about h2 { margin: 6px 0 0; } .st-about p { margin: 0; color: var(--muted); }
@media (max-width: 640px) { .st { grid-template-columns: 1fr; } .st-side { display: none; } }

/* ---------- Puntatori in stile Mac ---------- */
html.cur-mac, html.cur-mac * { cursor: var(--cur-default) !important; }
html.cur-mac a[href], html.cur-mac a[href] *, html.cur-mac .as-btn, html.cur-mac .as-back, html.cur-mac label.sw input, html.cur-mac .st-accents button { cursor: var(--cur-pointer) !important; }
html.cur-mac input:not([type]), html.cur-mac input[type=text], html.cur-mac input[type=search], html.cur-mac input[type=email], html.cur-mac input[type=password],
html.cur-mac input[type=url], html.cur-mac input[type=number], html.cur-mac textarea, html.cur-mac [contenteditable], html.cur-mac .logview, html.cur-mac .as-md p { cursor: var(--cur-text) !important; }
html.cur-mac .rz-n, html.cur-mac .rz-s { cursor: var(--cur-ns) !important; }
html.cur-mac .rz-e, html.cur-mac .rz-w { cursor: var(--cur-ew) !important; }
html.cur-mac .rz-nw, html.cur-mac .rz-se { cursor: var(--cur-nwse) !important; }
html.cur-mac .rz-ne, html.cur-mac .rz-sw { cursor: var(--cur-nesw) !important; }
html.cur-mac body.resizing * { cursor: inherit !important; }
.st-cursor-preview { height: 90px; gap: 10px; flex-wrap: wrap; padding: 10px; }
.st-cursor-preview .cp { padding: 8px 14px; border-radius: 10px; background: rgba(255,255,255,.75); color: #1d1d1f; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
html.cur-mac .st-cursor-preview .cp:nth-child(1) { cursor: var(--cur-default) !important; }
html.cur-mac .st-cursor-preview .cp:nth-child(2) { cursor: var(--cur-pointer) !important; }
html.cur-mac .st-cursor-preview .cp:nth-child(3) { cursor: var(--cur-text) !important; }
html.cur-mac .st-cursor-preview .cp:nth-child(4) { cursor: var(--cur-ew) !important; }
.st-color { width: 44px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: none; }
.st-cursor-preview > span.cp { opacity: 1; }
.st-range input[type=range] { height: 4px; }
.toast { transition: top .25s ease; }


/* ---------- webX ---------- */
/* Icona originale: globo con due anelli orbitali che si incrociano formando una «X» */
.ico-webx { background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E %3Cdefs%3E %3ClinearGradient id='bg' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%233b7bff'/%3E%3Cstop offset='1' stop-color='%230b2fb0'/%3E%3C/linearGradient%3E %3ClinearGradient id='gl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.2'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E %3CclipPath id='c'%3E%3Ccircle cx='50' cy='50' r='25'/%3E%3C/clipPath%3E %3CclipPath id='back'%3E%3Crect x='-20' y='-20' width='140' height='70'/%3E%3C/clipPath%3E %3CclipPath id='front'%3E%3Crect x='-20' y='50' width='140' height='70'/%3E%3C/clipPath%3E %3C/defs%3E %3Crect width='100' height='100' fill='url%28%23bg%29'/%3E%3Crect width='100' height='100' fill='url%28%23gl%29'/%3E %3Cg fill='none'%3E%3Cg transform='rotate%2835 50 50%29'%3E%3Cellipse cx='50' cy='50' rx='44' ry='12' clip-path='url%28%23back%29' stroke='%23c94f00' stroke-width='7'/%3E%3C/g%3E%3Cg transform='rotate%28-35 50 50%29'%3E%3Cellipse cx='50' cy='50' rx='44' ry='12' clip-path='url%28%23back%29' stroke='%23c94f00' stroke-width='7'/%3E%3C/g%3E%3C/g%3E %3Ccircle cx='50' cy='52' r='25' fill='%2300135a' opacity='.35'/%3E %3Ccircle cx='50' cy='50' r='25' fill='%23fff'/%3E %3Cg clip-path='url%28%23c%29' fill='none' stroke='%232a66ff' stroke-width='3.2' stroke-linecap='round'%3E %3Cellipse cx='50' cy='50' rx='10.5' ry='25'/%3E%3Cpath d='M25 50H75M27 38.5Q50 43.5 73 38.5M27 61.5Q50 56.5 73 61.5'/%3E%3C/g%3E %3Cg fill='none'%3E%3Cg transform='rotate%2835 50 50%29'%3E%3Cellipse cx='50' cy='50' rx='44' ry='12' clip-path='url%28%23front%29' stroke='%230a2a9a' stroke-width='10'/%3E%3Cellipse cx='50' cy='50' rx='44' ry='12' clip-path='url%28%23front%29' stroke='%23ff6a00' stroke-width='7'/%3E%3C/g%3E%3Cg transform='rotate%28-35 50 50%29'%3E%3Cellipse cx='50' cy='50' rx='44' ry='12' clip-path='url%28%23front%29' stroke='%230a2a9a' stroke-width='10'/%3E%3Cellipse cx='50' cy='50' rx='44' ry='12' clip-path='url%28%23front%29' stroke='%23ff6a00' stroke-width='7'/%3E%3C/g%3E%3C/g%3E %3C/svg%3E") center / 100% no-repeat, #1d4ed8; }
.wx { display: flex; flex-direction: column; height: 100%; }
.wx-bar { display: flex; align-items: center; gap: 4px; padding: 6px 12px 8px; }
.wx-bar > button { width: 30px; height: 30px; border-radius: 999px; font-size: 18px; line-height: 1; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wx-bar > button:hover:not(:disabled) { background: rgba(127,127,127,.15); }
.wx-bar > button:disabled { opacity: .3; }
.wx-bar > button.on { color: #f5b400; }
.wx-addr { flex: 1; position: relative; display: flex; align-items: center; margin: 0 6px; min-width: 0; }
.wx-addr input { width: 100%; padding: 7px 14px 7px 30px; border-radius: 999px; border: 0; background: rgba(127,127,127,.13); color: var(--text); outline: none; text-align: center; font-size: 13px;
    box-shadow: inset 0 0 0 .5px rgba(127,127,127,.2); }
.wx-addr input:focus { text-align: left; background: var(--win-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.wx-lock { position: absolute; left: 11px; width: 9px; height: 7px; border-radius: 1.5px; background: var(--muted); opacity: 0; }
.wx-lock::before { content: ""; position: absolute; left: 1.5px; top: -5px; width: 6px; height: 6px; border: 1.5px solid var(--muted); border-bottom: 0; border-radius: 4px 4px 0 0; box-sizing: border-box; }
.wx-lock.on { opacity: .8; }
.wx-load { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 40% 100%; background-repeat: no-repeat; opacity: 0; }
.wx-load.on { opacity: 1; animation: wxLoad 1s linear infinite; }
@keyframes wxLoad { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.wx-tabs { display: flex; gap: 4px; padding: 0 12px 6px; overflow-x: auto; }
.wx-tab { flex: 1 1 0; min-width: 110px; max-width: 240px; display: flex; align-items: center; gap: 7px; padding: 5px 6px 5px 10px; border-radius: 9px; background: rgba(127,127,127,.08); font-size: 12px; cursor: default; }
.wx-tab.on { background: rgba(127,127,127,.2); }
.wx-tab img, .wx-tab .ico { width: 14px; height: 14px; border-radius: 3px; flex: none; box-shadow: none; }
.wx-tab span:not(.ico) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-tab button { width: 18px; height: 18px; border-radius: 5px; opacity: 0; font-size: 14px; line-height: 1; cursor: pointer; flex: none; }
.wx-tab:hover button, .wx-tab.on button { opacity: .7; }
.wx-tab button:hover { background: rgba(127,127,127,.25); opacity: 1; }
.wx-pages { flex: 1; min-height: 0; position: relative; border-top: 1px solid var(--line); }
.wx-page { position: absolute; inset: 0; overflow: auto; border-radius: 0 0 var(--r-window) var(--r-window); }
.wx-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.wx-start { max-width: 760px; margin: 0 auto; padding: 46px 24px 30px; display: flex; flex-direction: column; gap: 10px; }
.wx-logo { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.wx-logo .ico { width: 56px; height: 56px; flex: none; }
.wx-logo h1 { margin: 0; font-size: 38px; letter-spacing: -.02em; }
.wx-search input { width: 100%; padding: 12px 20px; border-radius: 999px; border: 0; font-size: 16px; background: rgba(127,127,127,.12); color: var(--text); outline: none; box-shadow: inset 0 0 0 .5px rgba(127,127,127,.25); }
.wx-search input:focus { background: var(--win-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 6px 20px rgba(0,0,0,.08); }
.wx-start h3 { margin: 22px 0 4px; font-size: 15px; }
.wx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; }
.wx-fav { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; padding: 8px 4px; border-radius: 12px; cursor: pointer; text-align: center; overflow-wrap: anywhere; }
.wx-fav:hover { background: rgba(127,127,127,.1); }
.wx-fav > span { width: 56px; height: 56px; border-radius: 14px; background: var(--win-bg); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; color: var(--muted);
    box-shadow: 0 2px 8px rgba(0,0,0,.1), inset 0 0 0 .5px rgba(127,127,127,.25); }
.wx-fav img { width: 30px; height: 30px; }
.wx-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.wx-recent button { display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 10px; background: rgba(127,127,127,.07); cursor: pointer; min-width: 0; }
.wx-recent button:hover { background: rgba(127,127,127,.14); }
.wx-recent img { width: 18px; height: 18px; grid-row: span 2; }
.wx-recent span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-recent small { color: var(--muted); font-size: 11px; }
.wx-hint { color: var(--muted); font-size: 12px; margin-top: 22px; text-align: center; }
.wx-blocked { max-width: 520px; margin: 70px auto; padding: 0 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wx-blocked img { width: 48px; height: 48px; border-radius: 10px; }
.wx-blocked h2 { margin: 6px 0 0; font-size: 20px; }
.wx-blocked p { color: var(--muted); line-height: 1.5; margin: 4px 0 8px; }
.wx-blocked .wx-actions { display: flex; gap: 8px; }
.wx-blocked code { margin-top: 14px; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
html.cur-mac .wx-tab button, html.cur-mac .wx-fav, html.cur-mac .wx-recent button { cursor: var(--cur-default) !important; }

/* ---------- Fase 1: finestre ---------- */
.window.off-space { display: none !important; }
.window { transition: box-shadow .2s, transform .35s cubic-bezier(.2,.8,.3,1); }
body.resizing .window, .window.dragging { transition: none; }
.snap-preview { position: fixed; z-index: 4; border-radius: 18px; background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.55);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 40px rgba(0,0,0,.18); pointer-events: none; transition: all .15s ease-out; }
.space-hud { position: fixed; z-index: 1500; top: 44%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 20px;
    background: var(--lg-tint-strong); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-shadow: var(--lg-shadow); color: var(--text); }
.space-hud i { width: 34px; height: 22px; border-radius: 6px; background: rgba(127,127,127,.3); }
.space-hud i.on { background: var(--accent); }
.space-hud span { margin-left: 8px; font-weight: 600; }
/* Mission Control */
body.mc::after { content: ""; position: fixed; inset: 0; z-index: 1; background: rgba(0,0,0,.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }
body.mc .window { z-index: 5 !important; box-shadow: 0 10px 30px rgba(0,0,0,.35); cursor: pointer; }
body.mc .window * { pointer-events: none !important; }
body.mc .window:hover { outline: 4px solid var(--accent); outline-offset: 2px; }
body.mc .rz { display: none; }
.mc-layer { position: fixed; inset: 0; z-index: 4; }
.mc-spaces { position: absolute; top: 34px; left: 0; right: 0; display: flex; justify-content: center; gap: 18px; align-items: flex-start; }
.mc-space { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-size: 12px; text-shadow: 0 1px 3px rgba(0,0,0,.5); cursor: pointer; }
.mc-space-thumb { width: 150px; height: 90px; border-radius: 10px; background: var(--desk-bg, var(--wallpaper)); box-shadow: 0 4px 14px rgba(0,0,0,.35); border: 2px solid transparent; }
.mc-space.on .mc-space-thumb { border-color: #fff; }
.mc-space.drop .mc-space-thumb { border-color: var(--accent); transform: scale(1.06); }
.mc-space-x { position: absolute; top: -8px; left: -8px; width: 22px; height: 22px; border-radius: 50%; background: rgba(40,40,40,.85); color: #fff; font-size: 15px; line-height: 1; opacity: 0; cursor: pointer; }
.mc-space:hover .mc-space-x { opacity: 1; }
.mc-add { width: 56px; height: 90px; border-radius: 10px; background: rgba(255,255,255,.18); color: #fff; font-size: 26px; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.mc-add:hover { background: rgba(255,255,255,.3); }
.mc-label { position: absolute; display: flex; justify-content: center; align-items: center; gap: 6px; color: #fff; font-size: 13px; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; }
.mc-label .ico { width: 20px; height: 20px; flex: none; }
.mc-empty { position: absolute; top: 45%; width: 100%; text-align: center; color: #fff; font-size: 16px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
/* Mostra scrivania */
body.show-desktop .window { transition: transform .45s cubic-bezier(.3,.7,.3,1); }
/* Stage Manager */
.window.stage-thumb { cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.window.stage-thumb * { pointer-events: none !important; }
.window.stage-thumb .rz { display: none; }
/* Passaggio tra le app */
.app-switcher { position: fixed; z-index: 1600; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 90vw;
    padding: 18px 18px 40px; border-radius: 26px; background: var(--lg-tint-strong); backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8); box-shadow: var(--lg-shadow); }
.app-switcher > div { width: 96px; height: 96px; padding: 10px; border-radius: 18px; }
.app-switcher > div.on { background: rgba(127,127,127,.3); }
.app-switcher .ico { width: 76px; height: 76px; }
.app-switcher span { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-weight: 600; color: var(--text); }
/* Centro di controllo */
.cc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cc-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.2); color: var(--text); text-align: left; cursor: pointer;
    box-shadow: inset 0 1px 0 var(--lg-edge-soft), inset 0 0 0 .5px var(--lg-edge-soft); font-size: 12px; }
.cc-btn small { color: var(--muted); font-size: 11px; }
.cc-btn.on { background: var(--accent); color: #fff; } .cc-btn.on small { color: rgba(255,255,255,.85); }
:root[data-theme="dark"] .cc-btn:not(.on) { background: rgba(255,255,255,.08); }
/* Angoli attivi nelle impostazioni */
.st-hot { display: grid; grid-template-columns: 1fr 1.4fr 1fr; grid-template-rows: auto auto; gap: 10px; padding: 14px; align-items: center; }
.st-hot-screen { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 16/10; border-radius: 10px; background: var(--desk-bg, var(--wallpaper)); display: flex; align-items: center; justify-content: center; padding: 12px;
    color: #fff; font-size: 11px; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.6); box-shadow: inset 0 0 0 1px var(--line); }
.st-hot label { display: flex; flex-direction: column; gap: 4px; }
.st-hot label small { color: var(--muted); font-size: 11px; }
.st-hot label select { width: 100%; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); }
.st-hot-tl { grid-column: 1; grid-row: 1; } .st-hot-bl { grid-column: 1; grid-row: 2; }
.st-hot-tr { grid-column: 3; grid-row: 1; } .st-hot-br { grid-column: 3; grid-row: 2; }
.kbd { font: 12px ui-monospace, Menlo, monospace; padding: 2px 8px; border-radius: 6px; background: rgba(127,127,127,.15); box-shadow: inset 0 -1px 0 rgba(127,127,127,.3); white-space: nowrap; }
/* In Mission Control le finestre stanno sopra lo strato delle scrivanie (che resta cliccabile ai lati) */
body.mc .desktop { z-index: 5; pointer-events: none; }
body.mc .desktop .window { pointer-events: auto; }
body.mc .desktop-icons { opacity: 0; }
.mc-layer .mc-label { z-index: 6; }
.mc-label .ico, .app-switcher .ico { padding: 0 !important; font-size: 0; min-height: 0; }
.mc-label .ico { height: 20px !important; }
.app-switcher .ico { height: 76px !important; }

/* ---------- Fase 2: notifiche ---------- */
.toast { display: flex; flex-direction: column; gap: 2px; min-width: 240px; }
.toast small { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.menu-clock { cursor: default; border-radius: 999px; }
.menu-clock:hover { background: var(--lg-hover); }
.nc { position: fixed; z-index: 1002; top: 34px; right: 8px; bottom: 8px; width: 360px; max-width: calc(100vw - 16px); overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px;
    border-radius: 26px; background: var(--lg-tint); backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8);
    box-shadow: inset 0 1px 0 var(--lg-edge), inset 0 0 0 .5px var(--lg-edge-soft), var(--lg-shadow); color: var(--text); animation: ncIn .3s cubic-bezier(.2,.9,.3,1); }
@keyframes ncIn { from { transform: translateX(110%); } }
.nc-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; }
.nc-head > div { display: flex; flex-direction: column; }
.nc-head strong { font-size: 18px; text-transform: capitalize; }
.nc-head span { color: var(--muted); }
.nc-dnd { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(127,127,127,.15); cursor: pointer; font-size: 12px; font-weight: 600; }
.nc-dnd.on { background: #5e5ce6; color: #fff; }
.nc-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nc-w { border-radius: 20px; padding: 12px; background: rgba(255,255,255,.35); box-shadow: inset 0 1px 0 var(--lg-edge-soft), inset 0 0 0 .5px var(--lg-edge-soft); min-width: 0; }
:root[data-theme="dark"] .nc-w { background: rgba(255,255,255,.07); }
.nc-clock { display: flex; flex-direction: column; justify-content: center; }
.nc-clock span { font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nc-clock small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.nc-cal strong { text-transform: capitalize; color: #ff3b30; font-size: 12px; }
.nc-cal > div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-top: 4px; font-size: 9.5px; text-align: center; font-variant-numeric: tabular-nums; }
.nc-cal b { color: var(--muted); font-weight: 600; }
.nc-cal i { font-style: normal; padding: 1px 0; border-radius: 50%; }
.nc-cal i.today { background: #ff3b30; color: #fff; font-weight: 700; }
.nc-notes { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
.nc-notes strong { color: #c99400; font-size: 12px; }
.nc-notes button { text-align: left; padding: 4px 0; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.nc-notes button:first-child { border-top: 0; }
.nc-list-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 0; }
.nc-list-head button { color: var(--accent); font-size: 12px; cursor: pointer; }
.nc-list { display: flex; flex-direction: column; gap: 8px; }
.nc-item { position: relative; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.4); box-shadow: inset 0 0 0 .5px var(--lg-edge-soft); }
:root[data-theme="dark"] .nc-item { background: rgba(255,255,255,.08); }
.nc-item > div { display: flex; justify-content: space-between; }
.nc-item small { font-size: 11px; color: var(--muted); font-weight: 600; }
.nc-item p { margin: 2px 0 0; overflow-wrap: anywhere; }
.nc-item button { position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--win-bg); box-shadow: 0 1px 4px rgba(0,0,0,.2); opacity: 0; cursor: pointer; }
.nc-item:hover button { opacity: 1; }
.nc-empty { text-align: center; color: var(--muted); padding: 20px 0; }
#dndIcon { color: inherit; }
/* Salvaschermo */
.saver { position: fixed; inset: 0; z-index: 4000; background: #000; cursor: none !important; }
.saver * { cursor: none !important; }
.saver canvas { width: 100%; height: 100%; display: block; }
.saver-clock { position: absolute; display: flex; flex-direction: column; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.4); pointer-events: none; }
.saver-clock b { font-size: clamp(60px, 11vw, 150px); font-weight: 200; line-height: 1; font-variant-numeric: tabular-nums; }
.saver-clock span { font-size: 20px; opacity: .8; text-transform: capitalize; margin-left: 6px; }
.st-saver-prev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 6px; }
.st-saver-prev button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.st-saver-prev span { width: 100%; aspect-ratio: 16/10; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.st-saver-prev .on span { box-shadow: 0 0 0 3px var(--accent); }
.sv-orologio { background: #000 radial-gradient(circle at 40% 45%, transparent 0 0) !important; position: relative; }
.sv-orologio::after { content: "21:45"; position: relative; top: 30%; display: block; text-align: center; color: #fff; font-size: 22px; font-weight: 200; }
.sv-aurora { background: radial-gradient(60% 70% at 25% 30%, #2bd4c0aa, transparent 70%), radial-gradient(60% 70% at 75% 60%, #8b5cf6aa, transparent 70%), radial-gradient(50% 60% at 50% 90%, #f472b6aa, transparent 70%), #05070f; }
.sv-bolle { background: radial-gradient(circle at 30% 40%, transparent 0 14px, #9fd8ff66 15px 17px, transparent 18px), radial-gradient(circle at 70% 60%, transparent 0 20px, #c4b5fd66 21px 23px, transparent 24px), radial-gradient(circle at 55% 25%, transparent 0 8px, #fbcfe866 9px 10px, transparent 11px), #05070f; }
/* Spotlight con gruppi */
.sp-group { padding: 8px 18px 2px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
#spotlightResults { max-height: 60vh; overflow: auto; }
#spotlightResults button { min-height: 40px; }
.sp-txt { display: flex; flex-direction: column; min-width: 0; }
.sp-txt b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-txt small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#spotlightResults button.hl .sp-txt small { color: rgba(255,255,255,.8); }
/* Tastiera e utenti nelle impostazioni */
.st-key { cursor: pointer; min-width: 90px; text-align: center; }
.st-key.custom { box-shadow: inset 0 0 0 1.5px var(--accent); }
.st-key.rec { background: var(--accent); color: #fff; animation: keyPulse 1s infinite; }
@keyframes keyPulse { 50% { opacity: .6; } }
.st-user { display: flex; align-items: center; gap: 10px; }
.st-user > span:last-child { display: flex; flex-direction: column; }
.st-user small { color: var(--muted); font-size: 11.5px; }

/* ---------- Fase 3: file ---------- */
/* Icone dei tipi di file */
.ico-video { background: linear-gradient(160deg, #3a3a3c, #1c1c1e); }
.ico-video::before { content: ""; position: absolute; left: 38%; top: 30%; border-style: solid; border-width: 20% 0 20% 30%; border-color: transparent transparent transparent #fff; }
.ico-audio { background: linear-gradient(160deg, #ff5e7e, #d6265b); }
.ico-audio::before { content: "♪"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6em; font-weight: 700; }
.ico-zip { background: linear-gradient(160deg, #d9d9de, #a8a8b0); }
.ico-zip::before { content: ""; position: absolute; left: 44%; width: 12%; top: 10%; bottom: 30%; background: repeating-linear-gradient(#555 0 3px, #eee 3px 6px); border-radius: 2px; }
.ico-sheet { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ico-sheet::before { content: ""; position: absolute; inset: 22% 18%; background: linear-gradient(#1d8f4e, #1d8f4e) 0 0 / 100% 22% no-repeat, repeating-linear-gradient(90deg, #cfe9d9 0 1.5px, transparent 1.5px 33%), repeating-linear-gradient(#cfe9d9 0 1.5px, transparent 1.5px 25%); }
.ico-slides { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ico-slides::before { content: ""; position: absolute; inset: 28% 14%; border-radius: 3px; background: linear-gradient(135deg, #ff9500, #ff5e3a); }
.ico-word { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ico-word::before { content: ""; position: absolute; inset: 20% 18%; background: linear-gradient(#2b6fd6, #2b6fd6) 0 0 / 60% 12% no-repeat, repeating-linear-gradient(#c7c7cc 0 2px, transparent 2px 7px) 0 30% / 100% 70% no-repeat; }
.ico-desk { background: linear-gradient(160deg, #5ac8fa, #0a84ff); }
.ico-desk::before { content: ""; position: absolute; inset: 24% 16% 34%; border: 2px solid #fff; border-radius: 3px; }
.ico-desk::after { content: ""; position: absolute; left: 35%; right: 35%; bottom: 20%; height: 8%; background: #fff; border-radius: 2px; }
.ico-shared { background: linear-gradient(160deg, #7cc4ff, #3a9bf0); }
.ico-shared::before { content: ""; position: absolute; left: 22%; top: 26%; width: 26%; height: 26%; border-radius: 50%; background: #fff; box-shadow: 30% 0 0 #fff; }
.ico-shared::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 18%; height: 26%; border-radius: 40% 40% 10% 10%; background: #fff; }
.ico-link { background: linear-gradient(160deg, #8e8e93, #636366); }
.ico-link::before { content: "🔗"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .8em; filter: grayscale(1) brightness(3); }
.ico-thumb { background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.ico-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ico-trash.full::before { background: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 7px), radial-gradient(circle at 50% 18%, #fff 0 18%, transparent 19%), radial-gradient(circle at 35% 28%, #f2f2f2 0 14%, transparent 15%); }
.ico-trash.full::after { content: ""; position: absolute; left: 30%; right: 30%; top: 8%; height: 18%; border-radius: 40% 40% 20% 20%; background: #f5f5f5; box-shadow: 0 1px 2px rgba(0,0,0,.25); transform: rotate(-8deg); }
.dock-item.drop .ico { transform: scale(1.12); box-shadow: 0 0 0 3px var(--accent); }

/* Finder */
.fx .fx-side button { gap: 8px; }
.fx-si { width: 16px; height: 16px; flex: none; display: flex; align-items: center; justify-content: center; }
.fx-si .ico { width: 16px; height: 16px; border-radius: 4px; box-shadow: none; }
.fx-tag { width: 11px; height: 11px; border-radius: 50%; }
.fx-count { margin-left: auto; color: var(--muted); font-size: 11px; }
.fx-side button.drop, .crumbs button.drop { background: color-mix(in srgb, var(--accent) 30%, transparent) !important; }
.fx-views { flex: none; }
.fx-views button { padding: 3px 10px !important; font-size: 14px; background: none !important; box-shadow: none !important; }
.fx-views button.on { background: var(--win-bg) !important; box-shadow: 0 1px 2px rgba(0,0,0,.2) !important; }
.crumbs b { font-weight: 600; }
.fview { flex: 1; min-height: 0; overflow: auto; position: relative; outline: none; }
.fview.v-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; align-content: start; padding: 14px; }
.fview.drop { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.file { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; border-radius: 10px; text-align: center; font-size: 12px; position: relative; user-select: none; }
.file .ico { width: 54px; height: 54px; }
.file .fname { word-break: break-word; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 1px 5px; border-radius: 4px; }
.file.sel { background: rgba(127,127,127,.18); }
.file.sel .fname { background: var(--accent); color: #fff; }
.file.drop, .frow.drop, .fcrow.drop { background: color-mix(in srgb, var(--accent) 30%, transparent) !important; }
.tagdots { display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: middle; }
.tagdots i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1px var(--win-bg); }
.rubber { position: absolute; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 3px; pointer-events: none; z-index: 2; }
/* Elenco */
.fview.v-list { padding: 0 10px 10px; }
.frow { display: grid; grid-template-columns: minmax(180px, 2.4fr) 1.4fr 1fr 1.2fr; gap: 10px; align-items: center; padding: 3px 10px; border-radius: 6px; font-size: 12.5px; user-select: none; }
.frow:nth-child(odd):not(.fhead):not(.sel) { background: rgba(127,127,127,.05); }
.frow > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.frow .frow-name { color: var(--text); display: flex; align-items: center; gap: 7px; }
.frow-name .ico { width: 18px; height: 18px; flex: none; border-radius: 4px; }
.frow-name > span:not(.ico):not(.tagdots) { overflow: hidden; text-overflow: ellipsis; }
.frow.sel { background: var(--accent) !important; }
.frow.sel > span, .frow.sel .frow-name { color: #fff; }
.fhead { position: sticky; top: 0; z-index: 1; background: var(--win-bg); border-bottom: 1px solid var(--line); border-radius: 0; font-weight: 600; margin-bottom: 2px; }
.fhead span { color: var(--muted); cursor: default; font-size: 11.5px; }
.fhead span[data-sort]:hover, .fhead span.on { color: var(--text); }
/* Colonne */
.fview.v-columns { overflow: hidden; }
.fcols { display: flex; height: 100%; overflow-x: auto; }
.fcol { flex: none; width: 220px; overflow-y: auto; border-right: 1px solid var(--line); padding: 4px; }
.fcrow { display: flex; align-items: center; gap: 7px; padding: 3px 8px; border-radius: 6px; font-size: 12.5px; white-space: nowrap; user-select: none; }
.fcrow .ico { width: 16px; height: 16px; flex: none; border-radius: 3px; }
.fcrow > span:not(.ico):not(.tagdots) { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.fcrow b { color: var(--muted); font-weight: 400; }
.fcrow.open { background: rgba(127,127,127,.2); }
.fcrow.sel { background: var(--accent); color: #fff; } .fcrow.sel b { color: #fff; }
.fcol-empty { color: var(--muted); font-size: 12px; text-align: center; margin-top: 20px; }
.fprev { width: 260px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 14px; text-align: center; }
.fprev img { max-width: 100%; max-height: 180px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.fprev .ico { width: 96px; height: 96px; }
.fprev b { overflow-wrap: anywhere; } .fprev span { color: var(--muted); font-size: 12px; }
/* Quick Look */
.ql { position: fixed; inset: 0; z-index: 1800; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.15); }
.ql-panel { width: min(900px, 92vw); height: min(640px, 82vh); display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--lg-tint-strong);
    backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8); box-shadow: 0 30px 80px rgba(0,0,0,.4), inset 0 1px 0 var(--lg-edge-soft); animation: lgPop .22s cubic-bezier(.2,1.1,.3,1); }
.ql-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.ql-bar span { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.ql-bar small { color: var(--muted); }
.ql-bar button { width: 26px; height: 26px; border-radius: 50%; background: rgba(127,127,127,.2); font-size: 16px; line-height: 1; cursor: pointer; }
.ql-bar .btn { text-decoration: none; color: var(--text); font-size: 12px; }
.ql-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.04); }
.ql-body img, .ql-body video { max-width: 100%; max-height: 100%; object-fit: contain; }
.ql-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.ql-text { margin: 0; width: 100%; height: 100%; overflow: auto; padding: 16px 20px; font: 12.5px/1.55 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-word; background: var(--win-bg); user-select: text; }
.ql-info, .ql-audio { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); }
.ql-info .ico, .ql-audio .ico { width: 120px; height: 120px; margin-bottom: 8px; }
.ql-info b { color: var(--text); font-size: 16px; }
/* Scrivania: file e pile */
.desktop-icons { flex-wrap: wrap; flex-direction: column; align-content: flex-start; max-height: calc(100vh - var(--dock-size, 54px) - 80px); direction: rtl; }
.desktop-icons > * { direction: ltr; }
.desk-file.sel, .desk-stack.open { background: rgba(255,255,255,.25); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.4); }
.desk-file.in-stack { background: rgba(0,0,0,.12); }
.desk-file.drop { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.desk-file .tagdots { margin: 0; }
.desk-icon > span:nth-child(2) { max-width: 86px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: center; line-height: 1.25; }
.stack-icons { position: relative; width: 56px; height: 56px; }
.stack-icons .ico { position: absolute; width: 46px; height: 46px; }
.stack-icons .ico:nth-child(1) { left: 0; top: 8px; transform: rotate(-8deg); }
.stack-icons .ico:nth-child(2) { left: 5px; top: 4px; transform: rotate(4deg); }
.stack-icons .ico:nth-child(3) { left: 10px; top: 0; }
html.cur-mac .file, html.cur-mac .frow, html.cur-mac .fcrow { cursor: var(--cur-default) !important; }

/* ---------- Aggiornamento software ---------- */
.toast.has-actions { min-width: 300px; }
.toast-acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.toast-acts button { padding: 4px 12px; border-radius: 999px; background: rgba(127,127,127,.18); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text); }
.toast-acts button.primary { background: var(--accent); color: #fff; }
.dock-item.badge::after { content: "1"; opacity: 1; bottom: auto; top: -4px; left: auto; right: -4px; transform: none; width: 18px; height: 18px; padding: 0; border-radius: 50%;
    background: #ff3b30; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); backdrop-filter: none; }
.dock-item.badge:hover::after { content: "1"; }
.upd-hero { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 14px; background: rgba(127,127,127,.08); }
.upd-hero.avail { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.upd-logo { width: 60px; height: 60px; border-radius: 15px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, var(--accent), #5e5ce6); }
.upd-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.upd-txt span { color: var(--muted); font-size: 12px; }
.upd-err { color: #ff3b30 !important; }
.upd-acts { display: flex; flex-direction: column; gap: 6px; }
.upd-notes { padding: 6px 16px; }
.upd-overlay { position: fixed; inset: 0; z-index: 5000; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; }
.upd-overlay > div { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(360px, 80vw); text-align: center; }
.upd-overlay b { font-size: 17px; font-weight: 500; }
.upd-overlay span { color: #aaa; font-size: 13px; min-height: 1.4em; }
.upd-bar { width: 100%; height: 5px; border-radius: 3px; background: #333; overflow: hidden; }
.upd-bar i { display: block; height: 100%; width: 2%; background: #fff; transition: width .5s; }

.about-acts { display: flex; gap: 8px; margin-top: 14px; }

/* ---------- 4A: scrivania a posizionamento libero ---------- */
.desktop-icons { position: absolute; inset: 0; display: block; max-height: none; direction: ltr; pointer-events: none; }
.desktop-icons .desk-icon { position: absolute; width: 96px; pointer-events: auto; touch-action: none; transition: left .18s ease, top .18s ease; }
.desktop-icons .desk-icon.dragging { transition: none; opacity: .85; z-index: 3; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.desktop-icons .desk-icon.sel { background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.45); }
.desktop-icons .desk-icon.drop { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.window .fview.drop, .window [data-drop-path].drop { box-shadow: inset 0 0 0 2px var(--accent); }

/* ---------- Icone delle nuove app ---------- */
.ico-reminders { background: #fff; }
.ico-reminders::before { content: ""; position: absolute; left: 18%; top: 20%; width: 15%; height: 15%; border-radius: 50%; background: #0a84ff; box-shadow: 0 1.35em 0 #ff9500, 0 2.7em 0 #ff3b30; font-size: 10%; }
.ico-reminders::after { content: ""; position: absolute; left: 42%; right: 16%; top: 24%; height: 7%; border-radius: 4px; background: #d1d1d6; box-shadow: 0 1.35em 0 #d1d1d6, 0 2.7em 0 #d1d1d6; font-size: 10%; }
.dock-item .ico-reminders::before, .lp-grid .ico-reminders::before { box-shadow: 0 13px 0 #ff9500, 0 26px 0 #ff3b30; font-size: inherit; }
.dock-item .ico-reminders::after, .lp-grid .ico-reminders::after { box-shadow: 0 13px 0 #d1d1d6, 0 26px 0 #d1d1d6; font-size: inherit; }
.ico-contacts { background: linear-gradient(90deg, #8b6a4f 0 14%, #e9dcc6 14%); }
.ico-contacts::before { content: ""; position: absolute; left: 40%; top: 22%; width: 30%; height: 30%; border-radius: 50%; background: #8e8e93; }
.ico-contacts::after { content: ""; position: absolute; left: 30%; right: 12%; bottom: 18%; height: 26%; border-radius: 50% 50% 12% 12%; background: #8e8e93; }
.ico-textedit { background: linear-gradient(#fff, #f3f3f3); }
.ico-textedit::before { content: ""; position: absolute; inset: 18% 22% 22% 18%; background: repeating-linear-gradient(#c7c7cc 0 2px, transparent 2px 8px); }
.ico-textedit::after { content: ""; position: absolute; right: 14%; bottom: 14%; width: 14%; height: 56%; border-radius: 2px; background: linear-gradient(#ffcc00 0 70%, #444 70%); transform: rotate(35deg); transform-origin: bottom; }

/* ---------- TextEdit ---------- */
.te { display: flex; flex-direction: column; height: 100%; }
.te-bar { display: flex; align-items: center; gap: 10px; padding: 6px 14px 8px; }
.te-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; }
.te-mode button.on { background: var(--win-bg); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.te-body { flex: 1; min-height: 0; display: grid; border-top: 1px solid var(--line); }
.te-body textarea { border: 0; resize: none; outline: none; padding: 18px 22px; background: var(--win-bg); color: var(--text); line-height: 1.6; tab-size: 4; overflow: auto; }
.te-prev { overflow: auto; padding: 14px 24px; border-left: 1px solid var(--line); }
.te-body.m-edit { grid-template-columns: 1fr; } .te-body.m-edit .te-prev { display: none; }
.te-body.m-split { grid-template-columns: 1fr 1fr; }
.te-body.m-preview { grid-template-columns: 1fr; } .te-body.m-preview textarea { display: none; } .te-body.m-preview .te-prev { border: 0; }
.te-status { padding: 4px 14px 8px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); }

/* ---------- Promemoria ---------- */
.rm { display: grid; grid-template-columns: 250px 1fr; height: 100%; }
.rm-side { overflow: auto; }
.rm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.rm-tile { display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; padding: 8px 10px !important; border-radius: 12px !important; background: rgba(127,127,127,.12); text-align: left; }
.rm-tile i { width: 26px; height: 26px; border-radius: 50%; }
.rm-tile b { justify-self: end; font-size: 20px; }
.rm-tile span { grid-column: 1 / -1; color: var(--muted); font-weight: 600; font-size: 12px; }
.rm-tile.on { background: var(--accent) !important; color: #fff; } .rm-tile.on span { color: #fff; } .rm-tile.on i { background: #fff !important; }
.rm-done-link { color: var(--muted); }
.rm-dot { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.rm-side button small { margin-left: auto; color: var(--muted); }
.rm-add-list { color: var(--accent); margin-top: 8px; }
.rm-main { overflow: auto; padding: 8px 28px 30px; position: relative; }
.rm-head { display: flex; justify-content: space-between; align-items: baseline; }
.rm-head h2 { font-size: 28px; margin: 6px 0; } .rm-head b { font-size: 28px; font-weight: 600; }
.rm-toggle { color: var(--accent); font-size: 12px; margin-bottom: 8px; cursor: pointer; }
.rm-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rm-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #c7c7cc; flex: none; margin-top: 2px; cursor: pointer; transition: background .2s; }
.rm-item.done .rm-check { background: var(--c); border-color: var(--c); box-shadow: inset 0 0 0 3px var(--win-bg); }
.rm-text { flex: 1; min-width: 0; }
.rm-text input { width: 100%; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; outline: none; padding: 0; }
.rm-item.done .rm-text input { color: var(--muted); }
.rm-prio { color: var(--accent); font-style: normal; font-weight: 700; margin-left: 4px; }
.rm-meta { display: flex; gap: 8px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.rm-meta .late { color: #ff3b30; }
.rm-notes { max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-flag { color: #ff9500; }
.rm-info { color: var(--accent); opacity: 0; font-size: 16px; cursor: pointer; }
.rm-item:hover .rm-info { opacity: 1; }
.rm-empty { color: var(--muted); text-align: center; padding: 40px 0; }
.rm-new { color: var(--accent); margin-top: 10px; font-weight: 600; cursor: pointer; }

/* ---------- Calendario ---------- */
.cal2 { display: grid; grid-template-columns: 200px 1fr; height: 100%; }
.cal2-side { overflow: auto; }
.cal2-cal { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; cursor: default; }
.cal2-cal:hover { background: rgba(127,127,127,.1); }
.cal2-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cal2-bar { display: flex; align-items: center; gap: 12px; padding: 6px 16px 10px; flex-wrap: wrap; }
.cal2-bar h2 { margin: 0; flex: 1; font-size: 22px; text-transform: capitalize; min-width: 180px; }
.cal2-bar .seg button.on { background: var(--win-bg); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.cal2-nav { display: flex; gap: 4px; }
.cal2-view { flex: 1; min-height: 0; overflow: hidden; border-top: 1px solid var(--line); }
.cm { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: auto repeat(6, 1fr); height: 100%; }
.cm-dow { padding: 6px 8px; text-align: right; font-size: 11px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.cm-day { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px; overflow: hidden; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.cm-day.other { background: rgba(127,127,127,.05); } .cm-day.other .cm-n { color: var(--muted); }
.cm-n { align-self: flex-end; font-size: 13px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-variant-numeric: tabular-nums; }
.cm-day.today .cm-n { background: #ff3b30; color: #fff; font-weight: 700; }
.cm-ev { font-size: 11.5px; padding: 1px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; display: flex; align-items: center; gap: 4px; }
.cm-ev i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.cm-ev.allday { background: color-mix(in srgb, var(--c) 85%, transparent); color: #fff; }
.cm-ev:hover { background: color-mix(in srgb, var(--c) 20%, transparent); }
.cm-ev.allday:hover { background: var(--c); }
.cm-more { font-size: 11px; color: var(--muted); padding-left: 6px; cursor: pointer; }
.ct { display: grid; grid-template-rows: auto auto 1fr; height: 100%; }
.ct-head, .ct-allday { display: grid; grid-template-columns: 56px repeat(var(--days), 1fr); border-bottom: 1px solid var(--line); }
.ct-head > div { padding: 6px; text-align: center; display: flex; gap: 6px; justify-content: center; align-items: baseline; }
.ct-head span { font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 600; }
.ct-head b { font-size: 18px; font-weight: 500; }
.ct-head .today b { background: #ff3b30; color: #fff; border-radius: 50%; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.ct-allday > div:first-child { font-size: 10px; color: var(--muted); padding: 4px; text-align: right; }
.ct-allday-cell { border-left: 1px solid var(--line); padding: 2px; display: flex; flex-direction: column; gap: 2px; min-height: 22px; }
.ct-scroll { overflow: auto; min-height: 0; }
.ct-grid { display: grid; grid-template-columns: 56px repeat(var(--days), 1fr); position: relative; }
.ct-hours > div { position: relative; border-bottom: 1px solid transparent; }
.ct-hours span { position: absolute; top: -7px; right: 6px; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ct-col { position: relative; border-left: 1px solid var(--line); background: repeating-linear-gradient(transparent 0 45px, var(--line) 45px 46px); min-height: calc(46px * 24); }
.ct-col.today { background-color: color-mix(in srgb, #ff3b30 4%, transparent); }
.ct-ev { position: absolute; padding: 3px 6px; border-radius: 6px; overflow: hidden; font-size: 11.5px; background: color-mix(in srgb, var(--c) 22%, var(--win-bg)); border-left: 3px solid var(--c); display: flex; flex-direction: column; box-sizing: border-box; cursor: default; }
.ct-ev b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-ev span { color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-now { position: absolute; left: 0; right: 0; height: 2px; background: #ff3b30; z-index: 2; }
.ct-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; }

/* ---------- Contatti ---------- */
.ctapp { display: grid; grid-template-columns: 190px 260px 1fr; height: 100%; }
.ct-side { overflow: auto; }
.ct-side button small { margin-left: auto; color: var(--muted); }
.ct-side-btn { display: flex; padding: 4px 8px; border-radius: 6px; color: var(--accent); cursor: pointer; font-size: 13px; }
.ct-side-btn:hover { background: rgba(127,127,127,.1); }
.ct-list { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; }
.ct-search { display: flex; gap: 6px; padding: 8px 10px; }
.ct-search input { flex: 1; min-width: 0; padding: 5px 12px; border-radius: 999px; border: 0; background: rgba(127,127,127,.14); color: var(--text); outline: none; }
.ct-items { overflow: auto; flex: 1; }
.ct-letter { padding: 6px 14px 2px; font-size: 12px; font-weight: 700; color: var(--muted); }
.ct-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 14px; text-align: left; }
.ct-item span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ct-item b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-item small { color: var(--muted); font-size: 11px; }
.ct-item.sel { background: var(--accent); color: #fff; } .ct-item.sel small { color: rgba(255,255,255,.8); }
.ct-av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; overflow: hidden;
    background: linear-gradient(160deg, #a1a1a6, #636366); }
.ct-av.big { width: 84px; height: 84px; font-size: 30px; }
.ct-av img { width: 100%; height: 100%; object-fit: cover; }
.ct-detail { overflow: auto; min-width: 0; }
.ctc-empty { color: var(--muted); text-align: center; padding: 60px 30px; line-height: 1.6; }
.ctc { padding: 24px 32px; }
.ctc-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ctc-head h2 { margin: 6px 0 0; font-size: 22px; } .ctc-head p { margin: 0; color: var(--muted); }
.ctc-fav { color: #ff9500; }
.ctc-quick { display: flex; gap: 8px; margin-top: 6px; } .ctc-quick a { text-decoration: none; color: var(--text); }
.ctc-fields { padding: 10px 0; }
.ctc-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.ctc-row small { color: var(--muted); text-align: right; font-size: 12px; }
.ctc-row a { color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.ctc-map { font-size: 12px; }
.ctc-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.ctf { padding: 20px 28px; display: flex; flex-direction: column; gap: 12px; }
.ctf-photo { display: flex; align-items: center; gap: 14px; }
.ctf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ctf input, .ctf textarea, .ctf select { padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); font: inherit; min-width: 0; }
.ctf label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.ctf-multi { display: flex; flex-direction: column; gap: 6px; }
.ctf-multi > small { color: var(--muted); font-size: 12px; font-weight: 600; }
.ctf-row { display: grid; grid-template-columns: 110px 1fr 28px; gap: 6px; align-items: start; }
.ctf-del { width: 26px; height: 26px; border-radius: 50%; background: #ff3b30; color: #fff; font-weight: 700; cursor: pointer; }
.ctf-add { align-self: flex-start; color: var(--accent); font-size: 12px; cursor: pointer; }
.sheet textarea { width: 100%; padding: 6px 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); font: inherit; resize: vertical; }
.sheet .acts [data-extra].danger { background: transparent; color: #ff3b30; box-shadow: inset 0 0 0 1px rgba(255,59,48,.4); }
.rm-text { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 6px; }
.rm-text .rm-meta { grid-column: 1 / -1; }

/* ---------- Dock personalizzabile ---------- */
.dock-day { font-weight: 400; }
.dock.dragging .dock-item { transition: width .18s, height .18s, margin .18s; }
.dock-item.dock-placeholder { opacity: .25; }
.dock-item.dock-placeholder.collapsed { width: 0 !important; margin: 0 -2px; opacity: 0; overflow: hidden; }
.dock-ghost { position: fixed; z-index: 2500; pointer-events: none; transition: opacity .15s; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.dock-ghost .ico { width: 100%; height: 100%; }
.dock-ghost em { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); font-style: normal; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--lg-tint-strong); color: var(--text); white-space: nowrap; opacity: 0; box-shadow: var(--lg-shadow); }
.dock-ghost.remove { opacity: .65; }
.dock-ghost.remove em { opacity: 1; }
.dock.drop-stack [data-sep="stack"] { width: 3px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.dock-item.drop .ico { transform: scale(1.12); box-shadow: 0 0 0 3px var(--accent); }
.poof { position: fixed; z-index: 2600; width: 60px; height: 60px; margin: -30px 0 0 -30px; pointer-events: none; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.95) 0 20%, rgba(255,255,255,.6) 35%, transparent 65%); animation: poof .55s ease-out forwards; }
@keyframes poof { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.dock-pop { position: fixed; z-index: 1300; width: 320px; max-height: 60vh; display: flex; flex-direction: column; border-radius: 20px; padding: 10px;
    background: var(--lg-tint-strong); backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8); box-shadow: inset 0 1px 0 var(--lg-edge-soft), var(--lg-shadow); color: var(--text); animation: lgPop .22s cubic-bezier(.2,1.1,.3,1); }
.dock-pop-head { text-align: center; padding: 2px 0 8px; }
.dock-pop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; overflow: auto; }
.dock-pop-grid > small { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 16px 0; }
.dock-pop-grid button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 10px; font-size: 11px; cursor: pointer; min-width: 0; }
.dock-pop-grid button:hover { background: rgba(127,127,127,.18); }
.dock-pop-grid .ico { width: 44px; height: 44px; }
.dock-pop-grid span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-pop-open { margin-top: 8px; color: var(--accent); font-weight: 600; cursor: pointer; padding: 4px; }
html.cur-mac .dock-pop-grid button, html.cur-mac .dock-pop-open { cursor: var(--cur-default) !important; }

/* ---------- 4B: icone ---------- */
.ico-photos { background: #fff; }
.ico-photos::before { content: ""; position: absolute; inset: 14%; border-radius: 50%;
    background: conic-gradient(from 0deg, #ffcc00 0 45deg, #ff9500 45deg 90deg, #ff3b30 90deg 135deg, #af52de 135deg 180deg, #5856d6 180deg 225deg, #0a84ff 225deg 270deg, #34c759 270deg 315deg, #a8e063 315deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 16%, #000 17%); mask: radial-gradient(circle, transparent 16%, #000 17%); opacity: .9; }
.ico-music { background: linear-gradient(160deg, #fb5c74, #fa233b); }
.ico-music::before { content: "♫"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.9em; font-weight: 700; }
.dock-item .ico-music::before, .lp-grid .ico-music::before, .app-switcher .ico-music::before { font-size: 30px; }
.ico-preview { background: linear-gradient(160deg, #e8f4ff, #b9dbff); }
.ico-preview::before { content: ""; position: absolute; inset: 20% 24% 16% 20%; border-radius: 4px; background: linear-gradient(160deg, #6ac3ff 0 55%, #48b06a 55%); box-shadow: 4px 4px 0 rgba(0,0,0,.12); }
.ico-preview::after { content: ""; position: absolute; right: 14%; bottom: 12%; width: 30%; height: 30%; border-radius: 50%; border: 3px solid #555; background: rgba(255,255,255,.5); }

/* ---------- Foto ---------- */
.ph { display: grid; grid-template-columns: 210px 1fr; height: 100%; position: relative; }
.ph-side button small { margin-left: auto; color: var(--muted); }
.ph-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ph-main.drop { box-shadow: inset 0 0 0 3px var(--accent); }
.ph-bar { display: flex; align-items: center; gap: 12px; padding: 6px 18px 10px; }
.ph-bar h2 { margin: 0; font-size: 22px; } .ph-bar .sub { flex: 1; color: var(--muted); font-size: 12px; }
.ph-bar input[type=range] { width: 120px; accent-color: var(--accent); }
.ph-grid { flex: 1; overflow: auto; padding: 0 16px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--z), 1fr)); gap: 3px; align-content: start; }
.ph-month { grid-column: 1 / -1; margin: 14px 2px 6px; font-size: 16px; text-transform: capitalize; }
.ph-cell { aspect-ratio: 1; padding: 0; overflow: hidden; position: relative; background: rgba(127,127,127,.12); border-radius: 4px; }
.ph-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.ph-cell:hover img { transform: scale(1.03); }
.ph-cell.sel { box-shadow: inset 0 0 0 3px var(--accent); } .ph-cell.sel img { opacity: .85; }
.ph-fav { position: absolute; left: 6px; bottom: 4px; color: #fff; font-style: normal; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.ph-viewer { position: absolute; inset: 0; z-index: 4; background: #111; color: #fff; display: flex; flex-direction: column; border-radius: 0 0 var(--r-window) var(--r-window); }
.ph-v-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
.ph-v-bar span { flex: 1; display: flex; flex-direction: column; text-align: center; font-weight: 600; } .ph-v-bar small { font-weight: 400; color: #aaa; font-size: 11px; }
.ph-v-bar button { color: #fff; padding: 4px 10px; border-radius: 8px; cursor: pointer; } .ph-v-bar button:hover { background: rgba(255,255,255,.12); }
.ph-v-bar button.on { color: #ff375f; }
.ph-v-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.ph-v-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ph-v-nav { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 24px; z-index: 1; cursor: pointer; }
.ph-v-nav.r { left: auto; right: 10px; }
.ph-info { position: absolute; right: 12px; top: 12px; width: 240px; padding: 14px; border-radius: 14px; background: rgba(30,30,32,.85); backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.ph-info span { color: #aaa; overflow-wrap: anywhere; }
.ph-exif { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; } .ph-exif small { display: block; color: #888; font-size: 10px; }
.ph-slides { position: fixed; inset: 0; z-index: 4500; background: #000; display: flex; align-items: center; justify-content: center; cursor: none; }
.ph-slides img { position: absolute; max-width: 100%; max-height: 100%; opacity: 0; transition: opacity 1.2s; }
.ph-slides img.on { opacity: 1; }
.ph-slides small { position: absolute; bottom: 16px; color: #555; font-size: 12px; }

/* ---------- Anteprima ---------- */
.pv { display: flex; flex-direction: column; height: 100%; }
.pv-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; flex-wrap: wrap; }
.pv-tools button { padding: 3px 9px !important; font-size: 14px; }
.pv-tools button.on { background: var(--accent) !important; color: #fff; }
.pv-colors { display: flex; gap: 4px; }
.pv-colors button { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); cursor: pointer; }
.pv-colors button.on { box-shadow: 0 0 0 2px var(--win-bg), 0 0 0 4px var(--c); }
.pv-bar select { padding: 3px 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--win-bg); color: var(--text); }
.pv-sp { flex: 1; }
.pv-main { flex: 1; min-height: 0; display: flex; border-top: 1px solid var(--line); }
.pv-thumbs { width: 120px; flex: none; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; background: var(--win-sidebar); }
.pv-thumb { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.pv-thumb img { width: 100%; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.pv-thumb small { color: var(--muted); font-size: 11px; }
.pv-scroll { flex: 1; overflow: auto; background: rgba(127,127,127,.12); }
.pv-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 20px; min-width: max-content; }
.pv-page { position: relative; box-shadow: 0 2px 12px rgba(0,0,0,.25); background: #fff; }
.pv-page canvas { display: block; }
.pv-page canvas + canvas { position: absolute; left: 0; top: 0; }
.pv-pages.drawing .pv-page canvas:last-child { cursor: crosshair; }
html.cur-mac .pv-pages.drawing .pv-page canvas:last-child { cursor: crosshair !important; }

/* ---------- Musica ---------- */
.mu { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 1fr auto; height: 100%; }
.mu-side { grid-row: 1; overflow: auto; }
.mu-main { overflow: auto; padding: 4px 20px 20px; min-width: 0; }
.mu-main h3 { margin: 12px 0 8px; }
.mu-table { display: flex; flex-direction: column; }
.mu-row { display: grid; grid-template-columns: 36px 2fr 1.2fr 1.2fr 60px; gap: 10px; padding: 6px 8px; border-radius: 6px; font-size: 13px; align-items: center; user-select: none; }
.mu-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-row > span:not(:nth-child(2)) { color: var(--muted); }
.mu-row:not(.mu-head):hover { background: rgba(127,127,127,.1); }
.mu-row.playing { color: #fa233b; } .mu-row.playing > span { color: #fa233b; }
.mu-head { font-size: 11px; font-weight: 600; border-bottom: 1px solid var(--line); border-radius: 0; }
.mu-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; padding-top: 10px; }
.mu-album { display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; }
.mu-album img, .mu-nocover { width: 100%; aspect-ratio: 1; border-radius: 10px; object-fit: cover; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.mu-nocover { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #fb5c74, #8e8e93); color: #fff; font-size: 42px; }
.mu-nocover.sm { width: 44px; height: 44px; font-size: 20px; border-radius: 6px; }
.mu-album small { color: var(--muted); }
.mu-artist { margin-top: 20px !important; }
.mu-bar { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.6fr 1fr; align-items: center; gap: 14px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--win-sidebar); border-radius: 0 0 var(--r-window) var(--r-window); }
.mu-now { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mu-now img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.mu-now div { display: flex; flex-direction: column; min-width: 0; } .mu-now b, .mu-now small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mu-now small { color: var(--muted); }
.mu-ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mu-ctl button { font-size: 16px; padding: 4px 8px; border-radius: 8px; cursor: pointer; color: var(--text); }
.mu-ctl button.big { font-size: 22px; }
.mu-ctl button.on { color: #fa233b; }
.mu-ctl input[type=range] { flex: 1; min-width: 120px; accent-color: #fa233b; }
.mu-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mu-vol { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .mu-vol input { width: 100px; accent-color: var(--text); }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq i { width: 3px; background: currentColor; animation: eq 1s ease-in-out infinite; } .eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
#musicMini { color: inherit; font-size: 14px; }
.music-pop { position: fixed; z-index: 1300; top: 34px; width: 280px; padding: 12px; border-radius: 18px; background: var(--lg-tint-strong); backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8);
    box-shadow: inset 0 1px 0 var(--lg-edge-soft), var(--lg-shadow); color: var(--text); display: flex; flex-direction: column; gap: 10px; }
.mp-row { display: flex; gap: 10px; align-items: center; } .mp-row img, .mp-row .ico { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }
.mp-row div { display: flex; flex-direction: column; min-width: 0; } .mp-row b, .mp-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-row small { color: var(--muted); }
.mp-ctl { display: flex; justify-content: space-around; } .mp-ctl button { font-size: 18px; padding: 4px 10px; border-radius: 8px; cursor: pointer; color: var(--text); } .mp-ctl button:hover { background: rgba(127,127,127,.15); }
.pv-bar { gap: 6px; } .pv-bar .btn { padding: 4px 10px; }