/* ── Casa Tasselli · stile "Pastello" (06/11/2026, dal design v6) ─────────────────────────────────────────────
   Card pastello piene con testo nero, titoli grandi in Bricolage Grotesque, faccine al posto delle iniziali, una barra nera
   a pillola in basso (anche sul computer), schede bianche senza bordi; il colore di base (lilla, verde, giallo, azzurro) si
   sceglie dalla tavolozza. Il tema scuro tiene gli stessi pastelli su fondo quasi nero. Si attiva con data-skin="pastello";
   le aggiunte di comportamento (saluto, orologio grande, prossimo impegno, riquadri dei bambini, feste) stanno in pastello.js. */
:root[data-skin=pastello] {
  --base: #cdb4fa;
  --p-peach: #ffa781; --p-lav: #cdb4fa; --p-mint: #a8ec8c; --p-yellow: #ffdd55; --p-blue: #9fcbff; --p-pink: #f8acd9; --p-coral: #ff8270;
  --on-p: #0a0a0a; --on-p-2: rgba(10, 10, 10, .62);
  --c-blue: #2f6fdc; --c-indigo: #5b4fe0; --c-purple: #8a4fe8; --c-pink: #d6338a; --c-red: #e03c4a; --c-orange: #d8661c;
  --c-yellow: #b98a00; --c-green: #1f9a4c; --c-mint: #13a383; --c-teal: #0f93a8; --c-slate: #5e6a80; --c-brown: #9a6c3c;
  --bg: #f3f1f6; --bg-2: #ebe8f0; --card: #ffffff; --chip: #efedf2; --line: #e8e5ec; --text: #0a0a0a; --muted: #6c6a72;
  --glass: #ffffff; --glass-2: #efedf2; --glass-strong: #ffffff; --glass-line: #e8e5ec; --glass-edge: #e8e5ec; --hi: 0 0 0 0 transparent; --blur: none;
  --shadow: none; --shadow-color: rgba(10, 10, 10, .12); --radius: 28px; --radius-s: 18px;
  --accent-soft: color-mix(in srgb, var(--base) 30%, #fff); --on-accent: #fff;
  --ok: #1f9a4c; --ok-soft: #dcf6e3; --warn: #b26b00; --warn-soft: #fff1c9; --bad: #d8333c; --bad-soft: #ffe1dc;
  --penny: #ffa781; --morgana: #a8ec8c; --draco: #cdb4fa;
  --font: "Manrope", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --font-display: "Bricolage Grotesque", "Manrope", -apple-system, system-ui, sans-serif;
  --viz-prev: #a9a6b2; --viz-context: #e3e0e8; --viz-ink2: #3a3842; --viz-hover: rgba(10, 10, 10, .05);
  --viz-f1: #2f6fdc; --viz-f2: #6f9ff0; --viz-f3: #b9d2fa;
  --dock: #000000; --dock-ink: rgba(255, 255, 255, .82);
  color-scheme: light;
}
:root[data-skin=pastello][data-theme=dark] {
  --c-blue: #9fcbff; --c-indigo: #b5b0ff; --c-purple: #cdb4fa; --c-pink: #f8acd9; --c-red: #ff8a7a; --c-orange: #ffa781;
  --c-yellow: #ffdd55; --c-green: #a8ec8c; --c-mint: #8ee8cf; --c-teal: #7fdbe6; --c-slate: #b3b8c6; --c-brown: #e2b98c;
  --bg: #0b0b0c; --bg-2: #141416; --card: #1a1a1d; --chip: #242428; --line: #2c2c30; --text: #f5f5f5; --muted: #a09fa6;
  --glass: #1a1a1d; --glass-2: #242428; --glass-strong: #1a1a1d; --glass-line: #2c2c30; --glass-edge: #2c2c30;
  --shadow-color: rgba(0, 0, 0, .5);
  --accent-soft: color-mix(in srgb, var(--base) 22%, #1a1a1d); --on-accent: #0a0a0a;
  --ok: #a8ec8c; --ok-soft: #1f3320; --warn: #ffdd55; --warn-soft: #3a3214; --bad: #ff8270; --bad-soft: #3d1f1a;
  --viz-prev: #6f6c78; --viz-context: #2c2c30; --viz-ink2: #d6d4dc; --viz-hover: rgba(255, 255, 255, .06);
  --viz-f1: #6f9ff0; --viz-f2: #9fcbff; --viz-f3: #cfe3ff;
  --dock: #000000;
  color-scheme: dark;
}
/* un solo colore per tutte le sezioni, quello di base: pieno nelle voci attive e nelle spunte, scurito quando fa da testo */
:root[data-skin=pastello][data-area] { --accent: color-mix(in oklab, var(--base) 42%, #000); --accent-2: var(--c-blue); }
:root[data-skin=pastello][data-theme=dark][data-area] { --accent: var(--base); }
:root[data-skin=pastello], :where(:root[data-skin=pastello]) body { background: var(--bg); }
:where(:root[data-skin=pastello]) body { font-family: var(--font); -webkit-font-smoothing: antialiased; }
:where(:root[data-skin=pastello]) body::before, :where(:root[data-skin=pastello]) body::after { display: none; }

/* tipografia: titoli grandi e serrati, numeri in grassetto, etichette in minuscolo */
:where(:root[data-skin=pastello]) .top h1 { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--text);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5vw, 60px); letter-spacing: -.045em; line-height: .95; }
:where(:root[data-skin=pastello]) .h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; text-transform: none; color: var(--text); margin: 26px 0 12px; }
:where(:root[data-skin=pastello]) .card-h h3 { font-family: var(--font); font-size: 18px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--text); }
:where(:root[data-skin=pastello]) .card-h > .ic { display: none; }
:where(:root[data-skin=pastello]) .tile-v, :where(:root[data-skin=pastello]) .ekpi .tile-v, :where(:root[data-skin=pastello]) .gc-v, :where(:root[data-skin=pastello]) .climate .t, :where(:root[data-skin=pastello]) .kidstats b,
:where(:root[data-skin=pastello]) .wx .t, :where(:root[data-skin=pastello]) .kh-n b, :where(:root[data-skin=pastello]) .pc-v, :where(:root[data-skin=pastello]) .loan .v, :where(:root[data-skin=pastello]) .ncard b,
:where(:root[data-skin=pastello]) .spo-clock, :where(:root[data-skin=pastello]) .donut .dc b, :where(:root[data-skin=pastello]) .mort-head b, :where(:root[data-skin=pastello]) .mort b {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.04em; }
:where(:root[data-skin=pastello]) .tile-l, :where(:root[data-skin=pastello]) .gc-l, :where(:root[data-skin=pastello]) .climate .name, :where(:root[data-skin=pastello]) .chart-h, :where(:root[data-skin=pastello]) .tbl th {
  text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; }
:where(:root[data-skin=pastello]) .clock { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--muted); letter-spacing: -.02em; }
:where(:root[data-skin=pastello]) a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* la barra nera a pillola in basso, anche sul computer: la voce attiva si allarga e mostra il nome */
:where(:root[data-skin=pastello]) .shell { grid-template-columns: minmax(0, 1fr); }
:where(:root[data-skin=pastello]) .side { position: fixed; z-index: 40; top: auto; bottom: 18px; left: 50%; transform: translateX(-50%); width: auto; max-width: calc(100vw - 32px); height: auto;
  flex-direction: row; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: var(--dock); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }
:where(:root[data-skin=pastello]) .brand { display: none; }
:where(:root[data-skin=pastello]) .nav { flex-direction: row; align-items: center; gap: 4px; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
:where(:root[data-skin=pastello]) .nav button, :where(:root[data-skin=pastello]) .side-logout { width: auto; min-width: 46px; height: 46px; padding: 0 13px; border-radius: 999px; justify-content: center; gap: 8px;
  color: var(--dock-ink); background: transparent; box-shadow: none; transition: background .18s, color .18s, padding .18s; }
:where(:root[data-skin=pastello]) .nav button:hover, :where(:root[data-skin=pastello]) .side-logout:hover { background: rgba(255, 255, 255, .1); color: #fff; }
:where(:root[data-skin=pastello]) .nav button.on { background: var(--base); color: var(--on-p); padding: 0 18px 0 15px; box-shadow: none; }
:where(:root[data-skin=pastello]) .nav button span, :where(:root[data-skin=pastello]) .side-logout span { left: 50%; top: auto; bottom: calc(100% + 14px); transform: translateX(-50%) translateY(4px);
  background: var(--dock); color: #fff; border: 0; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); white-space: nowrap; }
:where(:root[data-skin=pastello]) .nav button:hover span, :where(:root[data-skin=pastello]) .nav button:focus-visible span, :where(:root[data-skin=pastello]) .side-logout:hover span { transform: translateX(-50%); }
:root[data-skin=pastello] .nav button.on span { position: static; transform: none; opacity: 1; background: none; color: inherit; box-shadow: none; padding: 0; font-size: 14px; font-weight: 700; pointer-events: none; }
/* prima le voci per tutti, poi un filo e quelle degli adulti */
:where(:root[data-skin=pastello]) .nav .adult-only { order: 2; }
:where(:root[data-skin=pastello]) .nav [data-sec=sport] { margin-left: 13px; }
:where(:root[data-skin=pastello]) .nav [data-sec=sport]::before { content: ""; position: absolute; left: -9px; top: 10px; width: 1px; height: 26px; background: rgba(255, 255, 255, .2); }
:where(:root[data-skin=pastello]) .side-logout { margin: 0 0 0 4px; color: rgba(255, 255, 255, .5); }
:where(:root[data-skin=pastello]) .main { max-width: 1320px; margin: 0 auto; padding: 24px 32px 140px; }
/* la chat si ferma sopra la barra in basso */
:where(:root[data-skin=pastello]) .chat-wrap { height: calc(100vh - 290px); min-height: 380px; }

/* intestazione: faccina e saluto a sinistra, comandi a destra, il titolo grande sotto */
:where(:root[data-skin=pastello]) .top { flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 22px; }
:where(:root[data-skin=pastello]) .top h1 { order: 3; flex: 1 1 100%; margin-top: 6px; }
:where(:root[data-skin=pastello]) .top-right { order: 2; margin-left: auto; gap: 8px; }
:where(:root[data-skin=pastello]) .iconbtn { border-radius: 999px; background: var(--card); border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root[data-skin=pastello]) .iconbtn:hover { background: var(--chip); }
:where(:root[data-skin=pastello]) #adultBtn.on { background: var(--p-yellow); color: var(--on-p); }
:where(:root[data-skin=pastello]) .skinmenu { background: var(--card); border: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 22px; box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .35); }
:where(:root[data-skin=pastello]) .skinmenu button { border-radius: 14px; } :where(:root[data-skin=pastello]) .skinmenu button:hover { background: var(--chip); }
:where(:root[data-skin=pastello]) .skinmenu button.on { background: var(--text); color: var(--bg); } :where(:root[data-skin=pastello]) .skinmenu button.on small { color: inherit; opacity: .7; }

/* superfici: schede bianche (o grafite) senza bordi né ombre, angoli molto tondi; dentro, caselle grigio chiaro */
:where(:root[data-skin=pastello]) .card, :where(:root[data-skin=pastello]) .tile, :where(:root[data-skin=pastello]) .climate, :where(:root[data-skin=pastello]) .search, :where(:root[data-skin=pastello]) .login-form,
:where(:root[data-skin=pastello]) .msg.bot, :where(:root[data-skin=pastello]) .ekpi .tile, :where(:root[data-skin=pastello]) .gc, :where(:root[data-skin=pastello]) .brainbox, :where(:root[data-skin=pastello]) .viztip {
  background: var(--card); border: 1px solid transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root[data-skin=pastello]) .card, :where(:root[data-skin=pastello]) .tile, :where(:root[data-skin=pastello]) .climate { border-radius: var(--radius); }
:where(:root[data-skin=pastello]) .card { padding: 22px 24px; margin: 18px 0; }
:where(:root[data-skin=pastello]) .grid, :where(:root[data-skin=pastello]) .tiles, :where(:root[data-skin=pastello]) .ekpi { gap: 18px; }
:where(:root[data-skin=pastello]) .card::before, :where(:root[data-skin=pastello]) .tile::before, :where(:root[data-skin=pastello]) .tile::after, :where(:root[data-skin=pastello]) .climate::before,
:where(:root[data-skin=pastello]) .strip .chip::before, :where(:root[data-skin=pastello]) .gc::before { display: none; }
:where(:root[data-skin=pastello]) .kidstats div, :where(:root[data-skin=pastello]) .ekpi.small .tile, :where(:root[data-skin=pastello]) .mort div, :where(:root[data-skin=pastello]) .wx-days div, :where(:root[data-skin=pastello]) .room,
:where(:root[data-skin=pastello]) .week .day, :where(:root[data-skin=pastello]) .grade, :where(:root[data-skin=pastello]) .orario .od, :where(:root[data-skin=pastello]) .eng .ex, :where(:root[data-skin=pastello]) .scn,
:where(:root[data-skin=pastello]) .tm-row.open, :where(:root[data-skin=pastello]) .loan, :where(:root[data-skin=pastello]) .dcard, :where(:root[data-skin=pastello]) .invc, :where(:root[data-skin=pastello]) .site,
:where(:root[data-skin=pastello]) .ncard, :where(:root[data-skin=pastello]) .person, :where(:root[data-skin=pastello]) .spo-day, :where(:root[data-skin=pastello]) .spo-timer, :where(:root[data-skin=pastello]) .q4-item,
:where(:root[data-skin=pastello]) .org-col, :where(:root[data-skin=pastello]) .hwday, :where(:root[data-skin=pastello]) .bd-c, :where(:root[data-skin=pastello]) .eng-mini, :where(:root[data-skin=pastello]) .tmw-alert,
:where(:root[data-skin=pastello]) .draft, :where(:root[data-skin=pastello]) .ptile {
  background: var(--chip); border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: var(--radius-s); }
:where(:root[data-skin=pastello]) .kidstats div:first-child { background: var(--chip); }
:where(:root[data-skin=pastello]) .hw, :where(:root[data-skin=pastello]) .week .it, :where(:root[data-skin=pastello]) .hwitem { background: var(--card); }
:where(:root[data-skin=pastello]) .list .row { border-bottom-color: var(--line); }
:where(:root[data-skin=pastello]) .tbl td, :where(:root[data-skin=pastello]) .tbl th { border-bottom-color: var(--line); }
:where(:root[data-skin=pastello]) .bar, :where(:root[data-skin=pastello]) .mbar, :where(:root[data-skin=pastello]) .score .trk { background: var(--chip); }
:where(:root[data-skin=pastello]) .bar i, :where(:root[data-skin=pastello]) .bar.big i, :where(:root[data-skin=pastello]) .mbar i { background: var(--base); }
:where(:root[data-skin=pastello]) .spark i { background: var(--base); opacity: 1; } :where(:root[data-skin=pastello]) .spark i:last-child { background: var(--p-mint); }

/* riquadri pastello pieni con testo nero: striscia di oggi, card a colpo d'occhio, numeri dell'energia */
:where(:root[data-skin=pastello]) .strip { gap: 14px; }
:where(:root[data-skin=pastello]) .strip .chip, :where(:root[data-skin=pastello]) .glance .gc, :where(:root[data-skin=pastello]) .tiles .tile, :where(:root[data-skin=pastello]) .ekpi:not(.small) .tile {
  --gc: var(--on-p); background: var(--px, var(--p-blue)); color: var(--on-p); border: 0; box-shadow: none; }
:where(:root[data-skin=pastello]) .strip .chip:nth-child(5n+1), :where(:root[data-skin=pastello]) .glance .gc:nth-child(5n+1), :where(:root[data-skin=pastello]) .tiles .tile:nth-child(5n+1), :where(:root[data-skin=pastello]) .ekpi .tile:nth-child(5n+1) { --px: var(--p-blue); }
:where(:root[data-skin=pastello]) .strip .chip:nth-child(5n+2), :where(:root[data-skin=pastello]) .glance .gc:nth-child(5n+2), :where(:root[data-skin=pastello]) .tiles .tile:nth-child(5n+2), :where(:root[data-skin=pastello]) .ekpi .tile:nth-child(5n+2) { --px: var(--p-yellow); }
:where(:root[data-skin=pastello]) .strip .chip:nth-child(5n+3), :where(:root[data-skin=pastello]) .glance .gc:nth-child(5n+3), :where(:root[data-skin=pastello]) .tiles .tile:nth-child(5n+3), :where(:root[data-skin=pastello]) .ekpi .tile:nth-child(5n+3) { --px: var(--p-pink); }
:where(:root[data-skin=pastello]) .strip .chip:nth-child(5n+4), :where(:root[data-skin=pastello]) .glance .gc:nth-child(5n+4), :where(:root[data-skin=pastello]) .tiles .tile:nth-child(5n+4), :where(:root[data-skin=pastello]) .ekpi .tile:nth-child(5n+4) { --px: var(--p-lav); }
:where(:root[data-skin=pastello]) .strip .chip:nth-child(5n+5), :where(:root[data-skin=pastello]) .glance .gc:nth-child(5n+5), :where(:root[data-skin=pastello]) .tiles .tile:nth-child(5n+5), :where(:root[data-skin=pastello]) .ekpi .tile:nth-child(5n+5) { --px: var(--p-mint); }
:where(:root[data-skin=pastello]) .glance .gc.bad { --px: var(--p-coral); } :where(:root[data-skin=pastello]) .glance .gc.warn { --px: var(--p-yellow); } :where(:root[data-skin=pastello]) .glance .gc.ok { --px: var(--p-mint); }
:where(:root[data-skin=pastello]) .strip .chip { border-radius: 26px; padding: 18px 20px; align-items: flex-start; flex-direction: column; gap: 10px; min-height: 118px; }
:where(:root[data-skin=pastello]) .strip .chip:hover, :where(:root[data-skin=pastello]) .glance button.gc:hover, :where(:root[data-skin=pastello]) .ptile:hover { transform: translateY(-2px); box-shadow: none; }
:where(:root[data-skin=pastello]) .strip .chip .ic { width: 34px; height: 34px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .55); color: var(--on-p); }
:where(:root[data-skin=pastello]) .strip .chip b { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
:where(:root[data-skin=pastello]) .strip .chip small, :where(:root[data-skin=pastello]) .glance .gc-s, :where(:root[data-skin=pastello]) .glance .gc-l, :where(:root[data-skin=pastello]) .tiles .tile-l,
:where(:root[data-skin=pastello]) .ekpi .tile-l, :where(:root[data-skin=pastello]) .ekpi .tile small { color: var(--on-p-2); }
:where(:root[data-skin=pastello]) .glance .gc-l { color: var(--on-p); } :where(:root[data-skin=pastello]) .glance .gc-s b { color: var(--on-p); }
:where(:root[data-skin=pastello]) .glance .gc-l .ic { color: var(--on-p); }
:where(:root[data-skin=pastello]) .glance .gc .pill { background: rgba(255, 255, 255, .55); color: var(--on-p); border: 0; }
:where(:root[data-skin=pastello]) .glance .gc .ring .tr { stroke: rgba(10, 10, 10, .14); } :where(:root[data-skin=pastello]) .glance .gc .ring .pr { stroke: var(--on-p); }
:where(:root[data-skin=pastello]) .glance .gc .mbars i { background: rgba(10, 10, 10, .22); } :where(:root[data-skin=pastello]) .glance .gc .mbars i.hi { background: var(--on-p); }
:where(:root[data-skin=pastello]) .glance .gc .mbar { background: rgba(10, 10, 10, .14); } :where(:root[data-skin=pastello]) .glance .gc .mbar i { background: var(--on-p); }
:where(:root[data-skin=pastello]) .gc { border-radius: 26px; padding: 18px 20px; }
:where(:root[data-skin=pastello]) .gc-v { font-size: 32px; }
:where(:root[data-skin=pastello]) .glance .gc.hero { --gc: #fff; background: #111113; color: #fff; }
:where(:root[data-skin=pastello][data-theme=dark]) .glance .gc.hero { background: var(--card); }
:where(:root[data-skin=pastello]) .glance .gc.hero .gc-l, :where(:root[data-skin=pastello]) .glance .gc.hero .gc-s, :where(:root[data-skin=pastello]) .glance .gc.hero .gc-s b, :where(:root[data-skin=pastello]) .glance .gc.hero .gc-l .ic { color: #fff; opacity: .8; }
:where(:root[data-skin=pastello]) .glance .gc.hero .pill { background: rgba(255, 255, 255, .16); color: #fff; }
:where(:root[data-skin=pastello]) .glance .gc.hero .ring .tr { stroke: rgba(255, 255, 255, .2); } :where(:root[data-skin=pastello]) .glance .gc.hero .ring .pr { stroke: var(--base); }
:where(:root[data-skin=pastello]) .glance .gc.hero .mbars i { background: rgba(255, 255, 255, .3); } :where(:root[data-skin=pastello]) .glance .gc.hero .mbars i.hi, :where(:root[data-skin=pastello]) .glance .gc.hero .mbar i { background: var(--base); }
:where(:root[data-skin=pastello]) .glance.in .gc { padding: 12px 14px; }
:where(:root[data-skin=pastello]) .tiles .tile-v, :where(:root[data-skin=pastello]) .ekpi .tile-v { color: var(--on-p); }

/* termostati: numero enorme, controllo a pillola − imposta + */
:where(:root[data-skin=pastello]) .climate { padding: 22px 24px; gap: 8px; }
:where(:root[data-skin=pastello]) .climate:nth-child(n) { background: var(--card); color: var(--text); box-shadow: none; }
:where(:root[data-skin=pastello]) .climate .name { color: var(--muted); }
:where(:root[data-skin=pastello]) .climate .t { font-size: 76px; line-height: .95; } :where(:root[data-skin=pastello]) .climate .u { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--text); opacity: 1; }
:where(:root[data-skin=pastello]) .climate:nth-child(n) .name, :where(:root[data-skin=pastello]) .climate:nth-child(n) .ctl .sp { color: var(--muted); opacity: 1; }
:where(:root[data-skin=pastello]) .climate:nth-child(n) .pill { background: var(--chip); color: var(--muted); border: 0; }
:where(:root[data-skin=pastello]) .climate .ctl { align-self: flex-start; width: min(300px, 100%); gap: 4px; padding: 4px; margin-top: 10px; border-radius: 999px; background: var(--chip); }
:where(:root[data-skin=pastello]) .climate .ctl .sp { text-align: center; color: var(--text); font-weight: 600; font-size: 15px; }
:where(:root[data-skin=pastello]) .climate:nth-child(n) .ctl .sp { color: var(--text); }
:where(:root[data-skin=pastello]) .climate:nth-child(n) .ctl button { width: 40px; height: 40px; border-radius: 999px; border: 0; background: var(--card); color: var(--text); }
:where(:root[data-skin=pastello]) .climate:nth-child(n) .ctl button:last-child { background: var(--base); color: var(--on-p); }

/* controlli: schede a pillola (nera quella attiva), bottoni a pillola, spunte tonde */
:where(:root[data-skin=pastello]) .seg { background: var(--chip); border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 999px; padding: 4px; }
:where(:root[data-skin=pastello]) .seg button { border-radius: 999px; color: var(--muted); font-weight: 600; }
:where(:root[data-skin=pastello]) .seg button.on { background: var(--text); color: var(--bg); box-shadow: none; }
:where(:root[data-skin=pastello]) .seg.tabs { background: none; padding: 0; gap: 8px; margin: 0 0 18px; }
:where(:root[data-skin=pastello]) .seg.tabs button { background: var(--card); color: var(--text); padding: 12px 22px; font-size: 15px; font-weight: 600; }
:where(:root[data-skin=pastello]) .seg.tabs button.on { background: var(--text); color: var(--bg); }
:where(:root[data-skin=pastello]) .btn, :where(:root[data-skin=pastello]) .chips button, :where(:root[data-skin=pastello]) .xclose, :where(:root[data-skin=pastello]) .attn-more { border-radius: 999px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root[data-skin=pastello]) .btn.ghost, :where(:root[data-skin=pastello]) .chips button { background: var(--card); border: 1px solid var(--line); color: var(--text); }
:where(:root[data-skin=pastello]) .btn.ghost:hover, :where(:root[data-skin=pastello]) .chips button:hover { background: var(--chip); }
:where(:root[data-skin=pastello]) .chips button.on { background: var(--text); color: var(--bg); border-color: transparent; }
:where(:root[data-skin=pastello]) .form-row button, :where(:root[data-skin=pastello]) .chatbar button, :where(:root[data-skin=pastello]) .login-form button, :where(:root[data-skin=pastello]) .simform button,
:where(:root[data-skin=pastello]) button.btn[type=submit], :where(:root[data-skin=pastello]) button[type=submit]:not(.ghost):not(.pill):not(.iconbtn), :where(:root[data-skin=pastello]) .kidform button:not(.ghost),
:where(:root[data-skin=pastello]) .btn:not(.ghost):not(.small) {
  background: var(--text); color: var(--bg); border: 0; box-shadow: none; border-radius: 999px; }
:where(:root[data-skin=pastello]) .msg.user { background: var(--base); color: var(--on-p); box-shadow: none; }
:where(:root[data-skin=pastello]) input, :where(:root[data-skin=pastello]) select, :where(:root[data-skin=pastello]) textarea, :where(:root[data-skin=pastello]) .cardv, :where(:root[data-skin=pastello]) .row select.mini,
:where(:root[data-skin=pastello]) .emg-ta, :where(:root[data-skin=pastello]) #q4Body, :where(:root[data-skin=pastello]) .cfg textarea {
  background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 16px; }
:where(:root[data-skin=pastello]) input:focus, :where(:root[data-skin=pastello]) select:focus, :where(:root[data-skin=pastello]) textarea:focus { outline: 2px solid var(--base); outline-offset: 1px; }
:where(:root[data-skin=pastello]) .search { border-radius: 999px; }
/* «dimmi cosa fare»: una barra unica con il bottone dentro */
:where(:root[data-skin=pastello]) #wpCmdCard .form-row, :where(:root[data-skin=pastello]) .chatbar { gap: 6px; padding: 6px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--base); }
:where(:root[data-skin=pastello]) #wpCmdCard .form-row input, :where(:root[data-skin=pastello]) .chatbar input { border: 0; background: none; outline: none; }
:where(:root[data-skin=pastello]) #wpCmdCard .form-row button, :where(:root[data-skin=pastello]) .chatbar button { background: var(--base); color: var(--on-p); padding: 10px 20px; font-weight: 700; }

/* etichette: corallo = urgente, giallo = attenzione, menta = a posto, colore di base = in evidenza */
:where(:root[data-skin=pastello]) .pill { background: var(--chip); color: var(--muted); border: 0; font-weight: 700; }
:root[data-skin=pastello] .pill.bad { background: var(--p-coral); color: var(--on-p); }
:root[data-skin=pastello] .pill.warn { background: var(--p-yellow); color: var(--on-p); }
:root[data-skin=pastello] .pill.ok { background: var(--p-mint); color: var(--on-p); }
:root[data-skin=pastello] .pill.acc, :root[data-skin=pastello] .pill.q { background: var(--base); color: var(--on-p); }

/* da guardare: righe con spunta tonda a sinistra */
:where(:root[data-skin=pastello]) .card.attn { border-left: 0; }
:where(:root[data-skin=pastello]) .card.attn.mini { padding: 20px 24px 16px; }
:where(:root[data-skin=pastello]) .card.attn.mini .card-h { margin-bottom: 6px; }
:where(:root[data-skin=pastello]) .attn-i { gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
:where(:root[data-skin=pastello]) .attn-i .dot { order: 3; margin-left: auto; }
:where(:root[data-skin=pastello]) .attn-ok { order: -1; margin: 0; width: 26px; height: 26px; border: 1.5px solid var(--muted); color: transparent; background: transparent; border-radius: 999px; transition: background .15s, border-color .15s, color .15s; }
:where(:root[data-skin=pastello]) .attn-ok:hover { background: var(--base); border-color: var(--base); color: var(--on-p); }
:where(:root[data-skin=pastello]) .attn-i:not(:has(.attn-ok))::before { content: ""; width: 26px; flex: none; }
:where(:root[data-skin=pastello]) .attn-more { margin-top: 6px; color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* spunte (routine, cartella, domani): cerchio vuoto, pieno del colore di base quando è fatto */
:where(:root[data-skin=pastello]) .task { background: transparent; border: 0; border-radius: 0; border-top: 1px solid var(--line); padding: 12px 2px; gap: 14px; }
:where(:root[data-skin=pastello]) .task:first-child { border-top: 0; }
:where(:root[data-skin=pastello]) .task .box { width: 26px; height: 26px; border-radius: 999px; border: 1.5px solid var(--muted); background: transparent; color: var(--on-p); }
:where(:root[data-skin=pastello]) .task .box .ic { width: 15px; height: 15px; }
:where(:root[data-skin=pastello]) .task .lbl { font-weight: 500; }
:where(:root[data-skin=pastello]) .task.done { background: transparent; border-color: var(--line); }
:where(:root[data-skin=pastello]) .task.done .box { background: var(--base); border-color: var(--base); }
:where(:root[data-skin=pastello]) .task.done .lbl { color: var(--muted); opacity: 1; }
:where(:root[data-skin=pastello]) .task .pts { color: var(--muted); font-weight: 600; }
:where(:root[data-skin=pastello]) .task.big .lbl { font-size: 16px; }

/* luci e dispositivi: caselle con il bottone acceso del colore di base */
:where(:root[data-skin=pastello]) .room { border-radius: 18px; padding: 10px 10px 10px 16px; }
:where(:root[data-skin=pastello]) .room .n { font-weight: 600; }
:where(:root[data-skin=pastello]) .room button { border-radius: 999px; background: var(--card); color: var(--text); }
:where(:root[data-skin=pastello]) .room button.on { background: var(--base); color: var(--on-p); }
:where(:root[data-skin=pastello]) .room.all { background: color-mix(in srgb, var(--base) 35%, var(--chip)); }

/* compiti della settimana */
:where(:root[data-skin=pastello]) .bd-h.today b { color: var(--text); text-decoration: underline 3px var(--base); text-underline-offset: 5px; }
:where(:root[data-skin=pastello]) .bd-c.today { border: 0; box-shadow: inset 0 0 0 2px var(--base); }
:where(:root[data-skin=pastello]) .bd-kid:hover { background: var(--chip); }
:where(:root[data-skin=pastello]) .hw { border-left: 0; border-radius: 12px; box-shadow: inset 3px 0 0 var(--p-blue); }
:where(:root[data-skin=pastello]) .hw.verifica { background: var(--p-coral); color: var(--on-p); box-shadow: none; } :where(:root[data-skin=pastello]) .hw.verifica b { color: var(--on-p-2); }
:where(:root[data-skin=pastello]) .hw.promemoria { box-shadow: inset 3px 0 0 var(--p-mint); }

/* faccine al posto delle iniziali: ogni figlio ha il suo colore e la sua forma */
:where(:root[data-skin=pastello]) .avatar { --face: var(--p-blue); position: relative; overflow: hidden; border-radius: 28%; }
/* il disegno della faccina vince su tutti gli sfondi degli altri stili (selettore volutamente forte) */
:root[data-skin=pastello] .avatar.avatar { color: transparent; font-size: 0; box-shadow: none;
  background: radial-gradient(circle at 34% 44%, #0a0a0a 0 7%, transparent 8%), radial-gradient(circle at 66% 44%, #0a0a0a 0 7%, transparent 8%), var(--face); }
:where(:root[data-skin=pastello]) .avatar::after { content: ""; position: absolute; left: 32%; top: 55%; width: 36%; height: 15%; box-sizing: border-box; border: 0 solid #0a0a0a; border-bottom-width: 2px; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
:where(:root[data-skin=pastello]) .avatar.penny { --face: var(--p-peach); border-radius: 50%; }
:where(:root[data-skin=pastello]) .avatar.morgana { --face: var(--p-mint); border-radius: 62% 38% 55% 45% / 50% 55% 45% 50%; }
:where(:root[data-skin=pastello]) .avatar.draco { --face: var(--p-lav); border-radius: 50% 50% 30% 30%; }
:where(:root[data-skin=pastello]) .avatar.x { --face: var(--p-blue); }

/* bambini: scelta del figlio a pillola, «Ciao Morgana!» con la faccina grande */
:where(:root[data-skin=pastello]) .kidpick { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--card); margin: 0 0 14px; max-width: 100%; overflow-x: auto; }
:where(:root[data-skin=pastello]) .kidpick button { background: transparent; border: 0; box-shadow: none; padding: 9px 18px; border-radius: 999px; color: var(--muted); font-weight: 600; opacity: 1; gap: 8px; }
:where(:root[data-skin=pastello]) .kidpick button .avatar { width: 24px; height: 24px; }
:where(:root[data-skin=pastello]) .kidpick button.on { background: var(--text); color: var(--bg); box-shadow: none; }
:where(:root[data-skin=pastello]) .kidhero { background: none; color: var(--text); box-shadow: none; padding: 4px 0; gap: 18px; flex-wrap: wrap; }
:where(:root[data-skin=pastello]) .kidhero .avatar { width: 76px; height: 76px; }
:where(:root[data-skin=pastello]) .kidhero .avatar::after { border-bottom-width: 4px; }
:where(:root[data-skin=pastello]) .kidhero h2 { font-family: var(--font-display); font-size: clamp(34px, 4.4vw, 50px); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
:where(:root[data-skin=pastello]) .kidhero h2::before { content: "Ciao "; } :where(:root[data-skin=pastello]) .kidhero h2::after { content: "!"; }
:where(:root[data-skin=pastello]) .kidhero small { color: var(--muted); opacity: 1; }
:where(:root[data-skin=pastello]) .kh-n { background: var(--p-peach); color: var(--on-p); border-radius: 22px; padding: 10px 18px; }
:where(:root[data-skin=pastello]) .kh-n + .kh-n { background: var(--p-coral); }
:where(:root[data-skin=pastello]) .kidhero .kh-n small { color: var(--on-p-2); }
:where(:root[data-skin=pastello]) .kh-n b { font-size: 30px; }
:where(:root[data-skin=pastello]) .tmw-alert { background: var(--p-yellow); color: var(--on-p); }
:where(:root[data-skin=pastello]) .hwitem.verifica { box-shadow: inset 3px 0 0 var(--p-coral); }
:where(:root[data-skin=pastello]) .hwday.today { border-color: transparent; box-shadow: inset 0 0 0 2px var(--kid, var(--base)); }
:where(:root[data-skin=pastello]) .hwday.today .hwday-h b { color: var(--text); }
:where(:root[data-skin=pastello]) .eng .opts button, :where(:root[data-skin=pastello]) .opts button { border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--text); }
:where(:root[data-skin=pastello]) .opts button.ok { background: var(--p-mint); border-color: var(--p-mint); color: var(--on-p); }
:where(:root[data-skin=pastello]) .opts button.bad { background: var(--p-coral); border-color: var(--p-coral); color: var(--on-p); }

/* progetti e card colorate: il pastello resta, il testo diventa nero */
:where(:root[data-skin=pastello]) .pcard { border: 0; box-shadow: none; }
:where(:root[data-skin=pastello]) .pcard.soft { background: var(--card); }

/* scheda dal basso */
:where(:root[data-skin=pastello]) .sheet { border-radius: 32px 32px 0 0; border-top: 0; box-shadow: 0 -18px 50px -20px rgba(0, 0, 0, .45); }
:where(:root[data-skin=pastello]) .sheet-title { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -.035em; }
:where(:root[data-skin=pastello]) .sheet-grab i { background: var(--sc, var(--base)); width: 54px; }
@media (min-width: 861px) { :where(:root[data-skin=pastello]) .sheet { border-radius: 32px; max-width: 760px; } }

/* login */
:where(:root[data-skin=pastello]) body.login-body { background: var(--bg); }
:where(:root[data-skin=pastello]) .login-form { background: var(--card); border-radius: 32px; } :where(:root[data-skin=pastello]) .login-img { border: 0; }

/* telefono: barra nera fluttuante con «Altro», titoli un po' più piccoli */
@media (max-width: 860px) {
  :where(:root[data-skin=pastello]) .side { display: none; }
  :where(:root[data-skin=pastello]) .main { padding: 14px 16px calc(104px + env(safe-area-inset-bottom)); }
  :where(:root[data-skin=pastello]) .top { position: static; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; margin: 0 0 14px; padding: 0; }
  :where(:root[data-skin=pastello]) .top h1 { font-size: 44px; }
  :where(:root[data-skin=pastello]) .clock { display: none; }
  :where(:root[data-skin=pastello]) .chat-wrap { height: calc(100dvh - 270px); min-height: 320px; }
  :where(:root[data-skin=pastello]) .tabbar { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 6px; gap: 2px; border-radius: 999px; background: var(--dock); border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .55); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :where(:root[data-skin=pastello]) .tabbar button, :where(:root[data-skin=pastello]) .tabbar [data-more] { color: var(--dock-ink); border-radius: 999px; min-height: 52px; padding: 7px 2px 6px; font-weight: 700; }
  :where(:root[data-skin=pastello]) .tabbar button.on, :where(:root[data-skin=pastello]) .tabbar [data-more].on { background: var(--base); color: var(--on-p); }
  :where(:root[data-skin=pastello]) .strip .chip { min-height: 0; padding: 14px 16px; gap: 8px; }
  :where(:root[data-skin=pastello]) .strip .chip b { font-size: 20px; }
  :where(:root[data-skin=pastello]) .climate .t { font-size: 60px; }
  :where(:root[data-skin=pastello]) .card { padding: 18px 18px; }
  :where(:root[data-skin=pastello]) .seg.tabs button { padding: 10px 18px; font-size: 14px; }
  :where(:root[data-skin=pastello]) .kidpick { display: inline-flex; }
  :where(:root[data-skin=pastello]) .kidpick button { flex-direction: row; padding: 8px 14px; font-size: 15px; }
  :where(:root[data-skin=pastello]) .kidhero { gap: 12px; }
  :where(:root[data-skin=pastello]) .kidhero .avatar { width: 60px; height: 60px; }
  :where(:root[data-skin=pastello]) .kidhero .grow { flex: 1 1 60%; }
  :where(:root[data-skin=pastello]) .kidhero h2 { font-size: 36px; }
  :where(:root[data-skin=pastello]) .kh-n { flex: 1; padding: 8px 12px; }
}

/* ── aggiunte di pastello.js: esistono solo con questo stile ── */
.px-only { display: none !important; }
:root[data-skin=pastello] .px-only { display: revert !important; }
:root[data-skin=pastello] .px-hero.px-only, :root[data-skin=pastello] .px-tiles.px-only { display: grid !important; }
:root[data-skin=pastello] .px-hello.px-only { display: flex !important; }

/* saluto in alto a sinistra */
.px-hello { order: 1; align-items: center; gap: 12px; min-width: 0; }
.px-hello .avatar { width: 50px; height: 50px; }
.px-hello .avatar::after { border-bottom-width: 3px; }
.px-hello div { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.px-hello small { font-size: 13.5px; color: var(--muted); }
.px-hello b { font-family: var(--font-display); font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* casa: il benvenuto con l'orologio grande e il prossimo impegno */
.px-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; margin: 0 0 18px; }
.px-day, .px-next { position: relative; border-radius: 32px; padding: 26px 28px; min-height: 300px; display: flex; flex-direction: column; min-width: 0; }
.px-day { background: var(--card); }
.px-day-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.px-fam { display: flex; gap: 6px; flex-wrap: wrap; }
.px-fam button { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 0; background: var(--chip); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.px-fam button:hover { background: color-mix(in srgb, var(--base) 35%, var(--chip)); }
.px-fam .avatar { width: 28px; height: 28px; }
.px-wx { margin-left: auto; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.px-day h2 { margin: 28px 0 0; max-width: 560px; font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.px-day .px-date { margin-top: 6px; font-size: 15px; color: var(--muted); }
.px-clock { margin-top: auto; align-self: flex-end; font-family: var(--font-display); font-weight: 800; font-size: clamp(64px, 7.5vw, 104px); line-height: .85; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.px-clock i { font-style: normal; color: var(--muted); }
.px-next { background: var(--p-mint); color: var(--on-p); }
.px-next .px-lab { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.px-next .px-lab .ic { width: 17px; height: 17px; }
.px-next h3 { margin: 18px 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -.035em; overflow-wrap: anywhere; }
.px-next .px-sub { margin-top: 4px; font-size: 14px; color: var(--on-p-2); }
.px-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.px-keys div { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px 6px; border-radius: 18px; min-width: 0; }
.px-keys div:first-child { background: #0a0a0a; color: #fff; }
.px-keys b { font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.px-keys small { font-size: 12px; opacity: .65; }
.px-next-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 18px; }
.px-next-f small { font-size: 13.5px; color: var(--on-p-2); }
.px-btn { border: 0; border-radius: 999px; padding: 13px 22px; background: #0a0a0a; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.px-btn:hover { opacity: .85; }
.px-next.none { background: var(--p-lav); }

/* casa: prima il benvenuto, poi i riquadri, poi «Da guardare» e il resto */
:root[data-skin=pastello] #sec-casa:not([hidden]) { display: flex; flex-direction: column; }
:root[data-skin=pastello] #sec-casa > * { order: 5; margin-top: 0; margin-bottom: 18px; }
:root[data-skin=pastello] #sec-casa > #casaError { order: 0; } :root[data-skin=pastello] #sec-casa > #pxHero { order: 1; }
:root[data-skin=pastello] #sec-casa > #strip { order: 2; } :root[data-skin=pastello] #sec-casa > #attnCard { order: 3; }
:root[data-skin=pastello] #sec-casa > .h2 { margin: 10px 0 12px; }

/* striscia di oggi in forma di riquadri: etichetta, numero, riga sotto, pallino di stato */
.strip .chip.px-st { justify-content: flex-start; }
.strip .chip.px-st .px-l { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 14px; font-weight: 700; }
.strip .chip.px-st .px-l i { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--st, transparent); }
.strip .chip.px-st b { font-size: 32px; }
.strip .chip.px-st[data-tone=ok] { --st: oklch(0.62 0.16 155); } .strip .chip.px-st[data-tone=warn] { --st: oklch(0.72 0.16 70); } .strip .chip.px-st[data-tone=bad] { --st: oklch(0.6 0.21 25); }

/* bambini: riquadri colorati che aprono il dettaglio nella scheda dal basso */
.px-tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin: 18px 0; }
.px-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 120px; padding: 16px; border: 0; border-radius: 24px; background: var(--px); color: var(--on-p); font: inherit; text-align: left; cursor: pointer; transition: transform .15s; min-width: 0; }
.px-tile:hover { transform: translateY(-2px); }
.px-tile > span:first-child { width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, .55); display: grid; place-items: center; margin-bottom: auto; }
.px-tile > span:first-child .ic { width: 18px; height: 18px; }
.px-tile small { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--on-p-2); }
.px-tile b { font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; overflow-wrap: anywhere; }
:root[data-skin=pastello] #sec-bambini .px-sheeted { display: none; }
:root[data-skin=pastello] #sec-bambini .grid:not(:has(> :not(.px-sheeted))) { display: none; }
.sheet-body > .px-in-sheet { --kid: var(--sc); margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.sheet-body > .px-in-sheet > .card-h h3 { display: none; }
.sheet-body > .px-in-sheet > .card-h:not(:has(.seg, button, .pill:not(:empty))) { display: none; }

/* bambini: «Domani» e «Routine» affiancati */
@media (min-width: 1000px) {
  :root[data-skin=pastello] #sec-bambini .px-kidtop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  :root[data-skin=pastello] #sec-bambini .px-kidtop > .card { margin: 0; }
}

/* feste: un animaletto attraversa lo schermo con la scia arcobaleno quando si spunta qualcosa */
.px-party { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.px-party .fly, .px-party .tr { position: absolute; left: 0; top: 0; animation: px-fly 1.7s cubic-bezier(.45, .05, .4, 1) both; }
.px-party .fly { font-size: 64px; line-height: 1; }
.px-party .tr { margin: 30px 0 0 22px; border-radius: 50%; }
.px-party .toast { position: absolute; left: 50%; bottom: 96px; padding: 12px 22px; border-radius: 999px; background: #ffdd55; color: #0a0a0a; font: 700 17px var(--font); white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); animation: px-pop 2.2s ease-out both; }
@keyframes px-fly { 0% { transform: translate(-12vw, 78vh) rotate(-12deg); } 50% { transform: translate(44vw, 36vh) rotate(6deg); } 100% { transform: translate(112vw, 2vh) rotate(-6deg); } }
@keyframes px-pop { 0% { transform: translate(-50%, 20px) scale(.9); opacity: 0; } 12% { transform: translate(-50%, 0) scale(1); opacity: 1; } 82% { opacity: 1; } 100% { transform: translate(-50%, -10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .px-party .fly, .px-party .tr { display: none; } .px-party .toast { animation-duration: 2.6s; } }

/* scelte dello stile nella tavolozza: colore di base e feste */
.px-opts { display: none; padding: 10px 12px 6px; border-top: 1px solid var(--line); margin-top: 6px; }
:root[data-skin=pastello] .px-opts { display: block; }
.px-opts .px-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.px-opts .px-row span { flex: 1; }
.skinmenu .px-opts button.px-sw { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: var(--c); flex: none; }
.skinmenu .px-opts button.px-sw.on { border-color: var(--text); box-shadow: inset 0 0 0 2px var(--card); }
.skinmenu .px-opts button.px-tg { width: auto; padding: 5px 12px; border-radius: 999px; background: var(--chip); color: var(--text); font-size: 13px; }
.skinmenu .px-opts button.px-tg.on { background: var(--text); color: var(--bg); }
.sw.pastello { background: radial-gradient(circle at 34% 42%, #0a0a0a 0 7%, transparent 8%), radial-gradient(circle at 66% 42%, #0a0a0a 0 7%, transparent 8%), linear-gradient(135deg, #cdb4fa 0 50%, #a8ec8c 50% 75%, #ffdd55 75%); border-radius: 50%; }

@media (max-width: 860px) {
  .px-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .px-day, .px-next { min-height: 0; padding: 20px; border-radius: 28px; }
  .px-day h2 { margin-top: 18px; }
  .px-clock { margin-top: 12px; }
  .px-wx { margin-left: 0; width: 100%; }
  .px-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .px-tile { min-height: 104px; padding: 14px; }
  .px-hello .avatar { width: 42px; height: 42px; }
}

/* lavoro: la lavagna dei progetti come nel design, corsie grigie e schede bianche con lo stato a colori */
.q4-st { display: none; }
:root[data-skin=pastello] .q4-st { display: inline-block; }
:root[data-skin=pastello] .q4-top .q4-due.bad { display: none; }
:root[data-skin=pastello] #q4Card { background: none; padding: 0; }
:root[data-skin=pastello] #q4Card > .card-h { padding: 0 4px; }
:root[data-skin=pastello] #q4Card > .etable { padding: 0 4px; }
:root[data-skin=pastello] .q4 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: start; }
:root[data-skin=pastello] .q4-col { background: var(--bg-2); border-radius: 30px; padding: 18px 16px 8px; }
:root[data-skin=pastello][data-theme=dark] .q4-col { background: #131315; }
:root[data-skin=pastello] .q4-h { justify-content: space-between; padding: 0 6px; margin: 0 0 14px; }
:root[data-skin=pastello] .q4-h .ring { display: none; }
:root[data-skin=pastello] .q4-h > div:not(.ring) { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; }
:root[data-skin=pastello] .q4-h b { font-size: 19px; font-weight: 700; }
:root[data-skin=pastello] .q4-h small { text-align: right; font-size: 14px; }
:root[data-skin=pastello] .q4-item { background: var(--card); border: 0; border-radius: 22px; padding: 16px 18px; margin-bottom: 10px; box-shadow: none; }
:root[data-skin=pastello] .q4-item::before { display: none; }
:root[data-skin=pastello] .q4-item.on { box-shadow: 0 0 0 2px var(--base); }
:root[data-skin=pastello] .q4-item.done { opacity: .6; }
:root[data-skin=pastello] .q4-n { display: none; }
:root[data-skin=pastello] .q4-c { font-size: 17px; font-weight: 600; }
:root[data-skin=pastello] .q4-top .pill { font-size: 13px; padding: 4px 11px; }
:root[data-skin=pastello] .q4-t, :root[data-skin=pastello] .q4-bars, :root[data-skin=pastello] .q4-next { margin-left: 0; }
:root[data-skin=pastello] .q4-t { margin-top: 6px; font-size: 14.5px; }
:root[data-skin=pastello] .q4-next { display: flex; background: none; padding: 0; margin-top: 2px; font-size: 14.5px; color: var(--muted); max-width: 100%; }
:root[data-skin=pastello] .q4-next .ic { display: none; }
:root[data-skin=pastello] .q4-next.wait { background: none; color: var(--muted); }
:root[data-skin=pastello] .q4-bars { grid-template-columns: 1fr; gap: 6px; margin: 12px 0 2px; order: 9; }
:root[data-skin=pastello] .q4-bar { grid-template-columns: 54px minmax(0, 1fr) 42px; }
:root[data-skin=pastello] .q4-bar .bar { height: 6px; background: var(--chip); }
:root[data-skin=pastello] .q4-bar .bar i, :root[data-skin=pastello] .q4-bar.dz .bar i, :root[data-skin=pastello] .q4-bar.dv .bar i { background: var(--base); }
:root[data-skin=pastello] .q4-bar.full .bar i { background: var(--p-mint); }
:root[data-skin=pastello] .q4-bar > span { font-weight: 500; color: var(--muted); }
:root[data-skin=pastello] .q4-item { display: flex; flex-direction: column; }
:root[data-skin=pastello] .q4-item > .q4-edit { order: 10; }

/* briefing di oggi: compatto, titoletti piccoli e righe strette */
:root[data-skin=pastello] .md.brief h1 { display: none; }
:root[data-skin=pastello] .md.brief h2 { font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); margin: 12px 0 4px; }
:root[data-skin=pastello] .md.brief h2:first-child { margin-top: 0; }
:root[data-skin=pastello] .md.brief ul { margin: 0; padding-left: 18px; } :root[data-skin=pastello] .md.brief li { margin: 2px 0; font-size: 15px; line-height: 1.4; }
:root[data-skin=pastello] .md.brief p { margin: 4px 0; font-size: 15px; }

/* progetti personali: ogni card col suo pastello pieno e il testo nero (i colori restano quelli di sempre, in versione pastello) */
:root[data-skin=pastello] { --p-aqua: #9ee6dc; --p-sand: #e8d9bf; }
:root[data-skin=pastello] .pcard { --pp: var(--p-blue); background: var(--pp); color: var(--on-p); border: 0; box-shadow: none; border-radius: 28px; padding: 20px; }
:root[data-skin=pastello] .pcard::before { display: none; }
:root[data-skin=pastello] .pcard:hover { box-shadow: none; transform: translateY(-2px); }
:root[data-skin=pastello] .pcard[data-tab=lavori] { --pp: var(--p-blue); } :root[data-skin=pastello] .pcard[data-tab=vendita] { --pp: var(--p-mint); }
:root[data-skin=pastello] .pcard[data-tab=casanuova] { --pp: var(--p-pink); } :root[data-skin=pastello] .pcard[data-tab=maker] { --pp: var(--p-aqua); }
:root[data-skin=pastello] .pcard[data-tab=rumore] { --pp: var(--p-lav); } :root[data-skin=pastello] .pcard[data-tab=scelta] { --pp: var(--p-peach); }
:root[data-skin=pastello] .pcard[data-tab=quantistico] { --pp: var(--p-yellow); } :root[data-skin=pastello] .pcard[data-tab=documenti] { --pp: var(--p-sand); }
:root[data-skin=pastello] .pc-h .ic { background: rgba(255, 255, 255, .55); color: var(--on-p); border-radius: 12px; }
:root[data-skin=pastello] .pc-h .pill { background: rgba(255, 255, 255, .55); color: var(--on-p); }
:root[data-skin=pastello] .pc-n { font-weight: 700; }
:root[data-skin=pastello] .pc-v { font-weight: 800; font-size: 32px; letter-spacing: -.04em; }
:root[data-skin=pastello] .pc-s { color: var(--on-p-2); opacity: 1; }
:root[data-skin=pastello] .pc-bar { background: rgba(10, 10, 10, .12); } :root[data-skin=pastello] .pc-bar i { background: #0a0a0a; }
:root[data-skin=pastello] .pcard.sel { outline: 3px solid var(--text); }

/* assistente: il cervello prende i pastelli (brain.js legge --brain-1…4) */
:root[data-skin=pastello] { --brain-1: var(--base); --brain-2: var(--p-pink); --brain-3: var(--p-mint); --brain-4: var(--p-blue); }
:root[data-skin=pastello][data-theme=light] { --brain-1: color-mix(in oklab, var(--base) 80%, #6d4ce0); --brain-2: #f07ab8; --brain-3: #5fcf6f; --brain-4: #5f9ff0; }
:root[data-skin=pastello] .brainbox { background: var(--card); border: 0; }
:root[data-skin=pastello] .msg.bot { background: var(--card); border-radius: 22px 22px 22px 6px; }
:root[data-skin=pastello] .msg.user { border-radius: 22px 22px 6px 22px; }
:root[data-skin=pastello] .chatbar button[type=submit], :root[data-skin=pastello] #wpCmdCard .form-row button { background: var(--base); color: var(--on-p); }

:where(:root[data-skin=pastello]) .kidask .avatar::after, :where(:root[data-skin=pastello]) .ka-kids .avatar::after { border-bottom-width: 2.5px; }
:where(:root[data-skin=pastello]) .mort small { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; }