:root{--amber:#f59e0b;--amber-dark:#b45309;--bg:#fbfaf7;--muted:#86806f;--ink:#17140f;--hairline:#d8d2c4;--line-soft:#ece7db;--brick:#9a3e2c}
html,body,#app{height:100%;margin:0;font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
body{display:flex;flex-direction:column;overflow-x:hidden}
header{background:#fff;border-bottom:1px solid var(--ink);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10;padding-top:calc(12px + env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.brand-icon{height:34px;width:auto;display:block;flex-shrink:0}
.brand-title{height:38px;width:auto;display:block;object-fit:contain}
.container{flex:1;max-width:600px;width:100%;margin:0 auto;box-sizing:border-box;padding:16px}
.filter-bar{background:#fff;border:1px solid var(--hairline);border-radius:0;padding:12px;margin-bottom:16px;display:none}
.filter-bar select{width:100%;padding:9px 10px;border:1px solid var(--hairline);border-radius:0;background:#fff;font-size:13px;outline:none;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.03em;box-sizing:border-box}
.filter-bar select:focus{border-color:var(--amber-dark)}

/* Costruttore filtro: un campo (select) + una riga [valore][include/exclude][+Add].
   Verticale su mobile, in linea su desktop (vedi media query in fondo). */
.filter-builder{display:flex;flex-direction:column;gap:8px}
.filter-input-row{display:flex;gap:6px;align-items:stretch}
.filter-input-row input{flex:1;min-width:0;padding:9px 10px;border:1px solid var(--hairline);border-radius:0;font-size:13px;outline:none;background:#fff;box-sizing:border-box}
.filter-input-row input:focus{border-color:var(--amber-dark)}
.filter-mode-btn{flex:0 0 auto;padding:0 11px;font-size:11.5px;font-weight:600;border:1px solid var(--hairline);background:#fff;color:var(--ink);cursor:pointer;border-radius:0;white-space:nowrap;font-family:'JetBrains Mono',monospace;letter-spacing:.02em;display:inline-flex;align-items:center;transition:background 0.1s}
.filter-mode-btn:active{background:var(--line-soft)}
.filter-add-btn{flex:0 0 auto;padding:0 16px;font-size:13px;font-weight:600;border:1px solid var(--amber-dark);background:var(--amber);color:var(--ink);cursor:pointer;border-radius:0;white-space:nowrap;font-family:'Sora',sans-serif;display:inline-flex;align-items:center;transition:background 0.1s}
.filter-add-btn:active{background:var(--amber-dark);color:#fff}

/* Filtri rapidi "vista" (My p_Art / Info Needed): due toggle affiancati, distinti
   dal costruttore di filtri sopra. Lo stato attivo (sfondo ambra) lo imposta il JS. */
.filter-quick{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.filter-quick-btn{padding:9px 8px;font-size:12px;font-weight:600;border:1px solid var(--hairline);background:#fff;color:var(--ink);cursor:pointer;border-radius:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:'JetBrains Mono',monospace;letter-spacing:.02em;text-transform:uppercase;transition:background 0.1s}
.filter-quick-btn:active{background:var(--line-soft)}
/* Barra ricerca collassabile: di default solo una testata slim ("Search & filters" +
   toggle vista); il corpo si apre al tocco. Le chip dei filtri attivi restano SEMPRE
   visibili anche da chiusa, e il contatore sul toggle dice quanti filtri lavorano. */
.filter-head{display:flex;align-items:center;gap:8px}
.filter-toggle{flex:1;display:flex;align-items:center;gap:7px;background:none;border:none;padding:2px 0;cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);text-align:left}
.filter-count{background:var(--amber);border:1px solid var(--amber-dark);color:var(--ink);font-size:10.5px;min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.filter-chevron{margin-left:auto;font-size:12px;color:var(--muted);transition:transform .15s}
.filter-toggle[aria-expanded="true"] .filter-chevron{transform:rotate(180deg)}
/* Il simbolo da solo (⊞ ☰ ≣) non si distingue: accanto va la parola. */
.filter-view-btn{flex-shrink:0;height:30px;padding:0 9px;gap:5px;background:#fff;border:1px solid var(--hairline);color:var(--ink);font-size:14px;cursor:pointer;border-radius:0;display:inline-flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;white-space:nowrap}
.filter-view-btn .vm-word{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.filter-view-btn:active{background:var(--line-soft)}
#filterBody{margin-top:12px}
.filter-span{grid-column:1/-1}

/* Vista "parete di galleria": una colonna, immagini a piena larghezza senza ritaglio,
   cartellino sotto. Sovrascrive il posizionamento assoluto del masonry (inline style),
   per questo gli !important. Su desktop le opere restano a larghezza da "quadro"
   (max 640px, centrate), non a tutta pagina. */
.grid.gallery{height:auto !important}
.grid.gallery .card{position:static !important;width:100% !important;left:auto !important;top:auto !important;max-width:640px;margin:0 auto 20px}
.grid.gallery .card-title{font-size:16px}

/* Fine del feed: "sei in pari". Segnale deliberato che il catalogo ha una fine —
   l'anti-doomscroll esplicito. */
.feed-end{text-align:center;padding:26px 16px 90px;color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.feed-end .feed-end-line{display:block;width:34px;height:2px;background:var(--amber);margin:0 auto 12px}
#btnCloud{padding:6px 10px;font-size:12px;margin:0;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;box-sizing:border-box}
@media (min-width:420px){ #btnCloud{max-width:150px} }
.filter-chip{display:inline-flex;align-items:center;gap:5px;background:var(--amber);border:1px solid var(--amber-dark);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:6px 9px;border-radius:0;max-width:100%}
.filter-chip.exclude{background:#f3d9d3;border-color:var(--brick);color:var(--brick)}
.filter-chip .chip-toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;overflow:hidden;max-width:100%}
.filter-chip .chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-chip .chip-x{font-size:12px;opacity:0.7;flex-shrink:0;background:none;border:none;padding:0 0 0 4px;margin:0;font:inherit;color:inherit;cursor:pointer}
#activeFilterChips{display:none;flex-wrap:wrap;gap:6px;margin-top:10px}
/* Griglia masonry: il posizionamento (left/top/width) di ogni .card è calcolato in
   JS da layoutMasonryGrid() scegliendo sempre la colonna più corta, così non si crea
   mai spazio vuoto (a differenza di CSS columns, che può lasciare "buchi" quando
   un elemento più alto sbilancia una colonna). L'altezza di ogni card è nota subito
   grazie ad aspect-ratio sull'immagine (niente attesa del caricamento, niente salti).
   Le card con classe .wide (foto chiaramente orizzontali) occupano 2 colonne. */
.grid{position:relative;padding-bottom:80px}
.card{background:#fff;border:1px solid var(--hairline);border-radius:0;overflow:hidden;text-align:left;cursor:pointer;position:absolute;transition:transform 0.1s,box-shadow 0.1s;display:flex;flex-direction:column}
.card:active{transform:scale(0.98);box-shadow:0 2px 4px rgba(0,0,0,0.05)}
.card img{width:100%;height:auto;object-fit:cover;display:block;background:#eaeaea}
.card-title{font-family:'Sora',sans-serif;font-weight:600;font-size:14px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.card-sub{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.muted{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fab-stack{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;align-items:center;z-index:20}
.fab{width:56px;height:56px;background:var(--amber);color:var(--ink);border-radius:0;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(245,158,11,0.4);border:1px solid var(--amber-dark);cursor:pointer;font-size:26px;font-weight:600;transition:transform 0.1s}
/* Batch import: griglia di miniature selezionabili. .sel = nel gruppo dell'opera corrente,
   .islabel = la foto marcata come cartellino di quel gruppo. */
.batch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}
.batch-thumb{position:relative;border:1px solid var(--hairline);cursor:pointer;overflow:hidden;background:#f3f4f6}
.batch-thumb img{width:100%;aspect-ratio:1;object-fit:cover;display:block;pointer-events:none}
.batch-thumb.sel{outline:3px solid var(--amber);outline-offset:-3px}
.batch-thumb .batch-lbl{position:absolute;bottom:3px;right:3px;background:#fff;border:1px solid var(--hairline);font-size:12px;width:24px;height:24px;display:none;align-items:center;justify-content:center;line-height:1}
.batch-thumb.sel .batch-lbl{display:flex}
.batch-thumb.islabel .batch-lbl{background:var(--amber);border-color:var(--amber-dark)}
.fab:active{transform:scale(0.92)}
.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(17,20,15,0.55);display:none;align-items:flex-end;justify-content:center;z-index:100}
.modal-content{background:#fff;width:100%;max-width:600px;border-radius:0;max-height:92%;display:flex;flex-direction:column;box-shadow:0 -4px 16px rgba(0,0,0,0.15);padding-bottom:env(safe-area-inset-bottom)}
.modal-header{padding:16px;border-bottom:1px solid var(--ink);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.modal-title{font-family:'Sora',sans-serif;font-size:17px;font-weight:600;margin:0}
.title-accent{width:30px;height:2px;border-radius:0;background:var(--amber);margin:0 0 14px}
.close-btn{background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;padding:4px}
.modal-body{padding:16px;overflow-y:auto;flex:1}
.form-group{margin-bottom:14px;position:relative}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:4px;color:#374151}
.form-group input, .form-group textarea{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:0;box-sizing:border-box;font-size:15px;outline:none;background:#fff}
.form-group input:focus, .form-group textarea:focus{border-color:var(--amber)}
.badge-ai{display:inline-flex;align-items:center;gap:3px;background:#fef3c7;color:#92400e;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.03em;padding:2px 6px;border-radius:0;position:absolute;right:0;top:0}
.btn-row{display:flex;gap:8px;margin-bottom:14px}
.btn{flex:1;padding:11px;border-radius:0;font-size:14px;font-weight:600;border:1px solid var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background 0.1s;background:transparent;color:var(--ink)}
.btn-primary{background:var(--amber);color:var(--ink);border-color:var(--amber-dark);font-family:'Sora',sans-serif;font-weight:600}
.btn-primary:active{background:var(--amber-dark);color:#fff}
.btn-secondary{background:#fff;color:var(--ink);border:1px solid var(--hairline)}
.btn-secondary:active{background:var(--line-soft)}
.btn-danger{background:#fff;color:var(--brick);border:1px solid var(--brick)}
.btn-danger:active{background:#f3d9d3}
.btn:disabled{opacity:0.6;cursor:not-allowed}
.notice{padding:10px 12px;border-radius:0;background:#eff6ff;color:#1e40af;font-size:13px;line-height:1.4;margin-bottom:14px;border:1px solid #bfdbfe}
.notice.error{background:#fdf1ee;color:var(--brick);border-color:#e3b6a9}
.empty{text-align:center;padding:40px 16px;color:var(--muted)}
.thumb-list{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px;padding-bottom:4px}
.thumb-wrap{position:relative;width:90px;flex-shrink:0;background:#fff;border:1px solid var(--hairline);border-radius:0;overflow:hidden;display:flex;flex-direction:column}
.thumb-wrap img{width:100%;aspect-ratio:1;object-fit:cover;display:block;cursor:grab;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* Miniatura "sollevata" durante il drag & drop di riordino */
.thumb-wrap.thumb-dragging{outline:2px solid var(--amber-dark);box-shadow:0 6px 18px rgba(0,0,0,0.25);opacity:.92;z-index:3}
.thumb-wrap.thumb-dragging img{cursor:grabbing}
.thumb-cover{position:absolute;top:3px;left:3px;background:var(--amber);color:var(--ink);font-size:9px;font-weight:700;letter-spacing:.04em;padding:1px 5px;border:1px solid var(--amber-dark);z-index:2;font-family:'JetBrains Mono',monospace}
.thumb-move:disabled{opacity:.3;cursor:default}
/* I controlli dell'editor foto (slider + pulsanti) vanno SOPRA il velo scuro del crop
   (box-shadow 9999px del crop box), altrimenti Apply resta oscurato e sembra non cliccabile. */
.img-edit-controls{position:relative;z-index:1;background:#fff}
.thumb-meta{padding:4px;display:flex;flex-direction:column;gap:4px;background:#f9fafb;border-top:1px solid var(--hairline)}
.thumb-chip{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.02em;text-align:center;background:var(--line-soft);padding:1px 2px;border-radius:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumb-actions{display:flex;flex-direction:column;gap:2px}
.thumb-actions button{width:100%;padding:3px 2px;font-size:9px;border:none;border-radius:0;cursor:pointer;text-align:center;font-weight:600}
.thumb-kind{background:#eff6ff;color:#1e40af}
.thumb-remove{background:#fdf1ee;color:var(--brick)}
/* "Le tue visite": strip orizzontale dentro My p_Art. Card piccole, angoli a 90°,
   la selezionata (= visita attiva) è marcata in ambra. */
#visitsStrip{margin-bottom:14px}
.visits-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.visit-card{flex:0 0 104px;background:#fff;border:1px solid var(--hairline);border-radius:0;padding:0 0 8px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:3px;font-family:inherit}
.visit-card img{width:100%;height:56px;object-fit:cover;display:block;border-bottom:1px solid var(--hairline)}
.visit-cover-empty{width:100%;height:56px;display:flex;align-items:center;justify-content:center;background:var(--line-soft);font-size:20px;border-bottom:1px solid var(--hairline)}
.visit-name{font-size:11.5px;font-weight:600;padding:2px 8px 0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visit-count{font-size:10px;color:var(--muted);padding:0 8px;font-family:'JetBrains Mono',monospace}
.visit-card.active{border-color:var(--amber-dark);box-shadow:0 0 0 2px var(--amber)}
.visit-card.visit-new{align-items:center;justify-content:center;border-style:dashed;color:var(--muted);min-height:96px}
.visit-plus{font-size:20px;line-height:1}

/* Vista elenco: tabella compatta, ordinabile toccando le intestazioni. */
.grid.list{height:auto !important;display:block}
.list-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--hairline);table-layout:fixed}
.list-table th{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:9px 8px;border-bottom:1px solid var(--hairline);cursor:pointer;user-select:none;white-space:nowrap}
.list-table th:first-child{width:38px;cursor:default}
.list-table th:last-child{width:56px}
.list-table td{padding:6px 8px;border-bottom:1px solid var(--line-soft);font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-table tbody tr{cursor:pointer}
.list-table tbody tr:active{background:var(--line-soft)}
.list-td-thumb{width:38px}
.list-thumb{width:28px;height:28px;object-fit:cover;display:block}
.list-thumb.nsfw-blur{filter:blur(6px);transform:none}
.list-thumb-empty{display:flex;align-items:center;justify-content:center;font-size:14px;background:var(--line-soft)}

/* Il doppio tap è NOSTRO (palette reazioni): senza questo il browser ci vede
   anche il suo "double-tap to zoom" e ingrandisce la foto mentre apre la
   palette. `manipulation` toglie solo doppio-tap-zoom e il ritardo di 300ms —
   lo scorrimento e il pizzico per zoomare restano. Stessa regola sugli altri
   elementi tappabili: nessuno di loro vuole il doppio tap del browser. */
.card,.visit-card,.list-table,.thumb-list{touch-action:manipulation}
/* Nella galleria della scheda il pizzico è NOSTRO (zoom sulla foto): pan-y lascia
   scorrere il pannello in verticale ma toglie al browser pinch e doppio-tap. */
.gallery{touch-action:pan-y}
.gallery img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.gallery.zooming{overflow:hidden}

/* Avviso di trasloco sugli indirizzi vecchi (vedi showMigrationNotice). */
.migration-bar{display:flex;align-items:center;gap:12px;background:var(--amber);border-bottom:1px solid var(--amber-dark);color:var(--ink);padding:10px 14px;font-size:12.5px;line-height:1.45}
.migration-bar a{color:var(--ink);font-weight:700}
.migration-go{flex:0 0 auto;background:var(--ink);color:#fff !important;text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.04em;padding:8px 12px;white-space:nowrap}

/* Menu contestuale (long-press su una visita, scelta della visita nell'elenco) */
.ctx-menu{position:fixed;z-index:150;background:#fff;border:1px solid var(--ink);box-shadow:0 6px 18px rgba(0,0,0,0.22);min-width:200px;max-height:60vh;overflow-y:auto}

/* Toast con "Annulla": stessa grammatica del toast normale, più un'azione. */
.undo-toast{display:flex;align-items:center;gap:14px}
.undo-toast button{background:none;border:none;color:var(--amber);font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;padding:4px 2px}

/* Palette reazioni da doppio tap: compare nel punto del tocco, sopra la foto. */
.reaction-palette{position:fixed;z-index:150;width:210px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ink);box-shadow:0 6px 18px rgba(0,0,0,0.25)}
.rp-btn{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 12px;font-size:14px;color:var(--ink);background:#fff;border:none;border-bottom:1px solid var(--line-soft);border-radius:0;cursor:pointer;text-align:left;font-family:inherit}
.rp-icon{font-size:19px;line-height:1;flex-shrink:0}
.rp-label{font-size:13.5px}
.rp-btn.active{background:var(--amber)}
.rp-btn:active{background:var(--line-soft)}
.rp-foot{padding:7px 12px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.03em;color:var(--muted);background:#faf8f3;text-align:center}

/* Menu ⋯ della scheda opera: si apre sopra il footer sticky. */
.view-more-menu{position:absolute;bottom:calc(100% + 6px);left:0;z-index:5;background:#fff;border:1px solid var(--ink);box-shadow:0 6px 18px rgba(0,0,0,0.22);min-width:220px}
.vm-item{display:block;width:100%;text-align:left;background:#fff;border:none;border-bottom:1px solid var(--line-soft);padding:13px 14px;font-size:14px;color:var(--ink);cursor:pointer;font-family:inherit}
.vm-item:last-child{border-bottom:none}
.vm-item:active{background:var(--line-soft)}
.vm-item.danger{color:var(--brick)}

.gallery{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:16px;position:relative}
.gallery img{width:100%;border-radius:0;display:block;box-sizing:border-box;border:1px solid var(--hairline)}

/* Contenuto sensibile (🔞): foto sfocate finché non si tocca il velo.
   Il blur resta dentro i bordi grazie a overflow:hidden + scale (senza scale
   i bordi sfocati "trasparirebbero" il contenuto ai margini). */
.nsfw-blur{filter:blur(22px) saturate(.8);transform:scale(1.12)}
.gallery.nsfw-veiled .hero-frame,.gallery.nsfw-veiled{overflow:hidden}
.gallery.nsfw-veiled img{filter:blur(26px) saturate(.8);transform:scale(1.12)}
.gallery.nsfw-veiled .hero-frame .tick{display:none}
.nsfw-veil{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(23,20,15,.35);border:1px solid var(--hairline);color:#fff;cursor:pointer;font-size:30px;text-align:center;width:100%;padding:0;margin:0;-webkit-appearance:none;appearance:none;border-radius:0}
.nsfw-veil span{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.nsfw-veil .nsfw-veil-hint{font-size:10px;font-weight:400;opacity:.85;text-transform:none;letter-spacing:.02em}
.hero-frame{position:relative}
.hero-frame img{display:block}
.hero-frame .tick{position:absolute;width:16px;height:16px;border-color:var(--amber-dark);pointer-events:none}
.hero-frame .tick.tl{top:8px;left:8px;border-top:2px solid;border-left:2px solid}
.hero-frame .tick.tr{top:8px;right:8px;border-top:2px solid;border-right:2px solid}
.hero-frame .tick.bl{bottom:8px;left:8px;border-bottom:2px solid;border-left:2px solid}
.hero-frame .tick.br{bottom:8px;right:8px;border-bottom:2px solid;border-right:2px solid}
#viewLabelImage{width:100%;border-radius:0;border:1px solid var(--hairline);margin-top:4px}

.notif-badge{position:absolute;top:-4px;right:-4px;background:var(--brick);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:none;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 0 0 2px #fff;z-index:5}
.notif-badge.show{display:flex}
.notif-badge.pulse{animation:notifPulse 0.5s ease}
@keyframes notifPulse{0%{transform:scale(1)}40%{transform:scale(1.4)}70%{transform:scale(0.9)}100%{transform:scale(1)}}
#profileAvatarBtn{width:88px;height:88px;border-radius:50%;background:#fff7e6;border:3px solid var(--amber);font-size:38px;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;cursor:pointer;transition:transform 0.15s;padding:0;overflow:hidden}
#profileAvatarBtn:active{transform:scale(0.94)}
#avatarPicker{max-height:0;overflow:hidden;transition:max-height 0.3s ease;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;justify-content:center}
.stat-card{background:#fff;border:1px solid var(--hairline);border-radius:0;padding:12px;text-align:center}
.stat-card .stat-value{font-family:'Sora',sans-serif;font-size:22px;font-weight:700;color:var(--amber-dark)}
.stat-card .stat-label{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.stat-card.small{padding:8px}
.stat-card.small .stat-value{font-size:17px}
.stat-card.small .stat-label{font-size:9px}
.reaction-pill{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--hairline);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:0}
.reaction-toggle-btn{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--hairline);color:#374151;font-size:12.5px;font-weight:600;padding:8px 10px;border-radius:0;cursor:pointer;flex:1;justify-content:center;transition:background 0.15s,border-color 0.15s}
.reaction-toggle-btn.active{background:#fff7e6;border-color:var(--amber);color:var(--amber-dark)}
.reaction-toggle-btn:disabled{opacity:0.6}
.reaction-actions-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.card-reaction-badge{position:absolute;bottom:6px;left:6px;background:rgba(23,20,15,.82);color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;padding:2px 6px;border-radius:0;display:flex;gap:5px}
.notif-item{display:flex;align-items:flex-start;gap:8px;padding:10px;border-radius:0;background:#f9fafb;border:1px solid var(--hairline);margin-bottom:8px;cursor:pointer;transition:background 0.1s}
.notif-item.unread{background:#fff9ed;border-color:#fed7aa}
.notif-item:active{background:var(--line-soft)}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);flex-shrink:0;margin-top:5px}
/* ✕ per eliminare una notifica (anche non letta) senza doverla prima aprire */
.notif-del{flex-shrink:0;background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:2px 4px;margin:-2px -2px 0 0}
.notif-del:hover{color:var(--brick)}
.notif-clear-all{background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.03em;padding:0;margin-bottom:8px}
.notif-clear-all:hover{color:var(--brick)}
.switch{position:relative;display:inline-block;width:44px;height:26px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch-track{position:absolute;inset:0;background:#d1d5db;border-radius:999px;transition:background 0.2s}
.switch-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,0.25);transition:transform 0.2s}
.switch input:checked ~ .switch-track{background:var(--amber)}
.switch input:checked ~ .switch-track .switch-thumb{transform:translateX(18px)}

/* Toast di conferma (es. "Suggerimento inviato"): appare in basso, sopra ogni
   modale, e si dissolve da solo. Vive fuori dalla modale così sopravvive al
   re-render della scheda opera quando arriva l'aggiornamento dal cloud. */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(12px);background:var(--ink);color:#fff;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;letter-spacing:.02em;padding:12px 18px;border-radius:0;box-shadow:0 6px 20px rgba(0,0,0,0.28);z-index:100;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;max-width:88vw;text-align:center}
.toast.toast-show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.toast-success{background:#166534}

/* Layout desktop: sopra i 700px l'app non resta bloccata alla larghezza mobile.
   La filter-bar non viene forzata a flex qui (lo faceva prima con !important,
   scavalcando il display:none impostato dal JS quando non ci sono opere): la
   visibilità resta gestita dal JS, e qui disponiamo solo i suoi contenuti in riga. */
@media (min-width: 700px){
  .container{max-width:1200px}
  .filter-builder{flex-direction:row;align-items:center;gap:8px}
  .filter-builder > select{flex:0 0 190px;width:auto}
  .filter-input-row{flex:1;min-width:0}
  .filter-quick{grid-template-columns:auto auto;justify-content:start}
  .filter-quick-btn{padding:9px 18px}
}