/* Layout: colonna unica da rivista (max 640px). Old school glam: avorio, cipria, oro champagne,
   linee tortora sottili, ombre piene rosa/oro; titoli Bodoni, testo Jost. Solo tema chiaro, per scelta. */
:root {
  --bg: #F7EFEA;          /* avorio rosato */
  --surface: #FFFBF8;     /* carta perlata */
  --surface-2: #F3E3DD;   /* cipria chiara */
  --ink: #3A2A2C;         /* testo */
  --muted: #94807A;
  --line: #8C6F68;        /* tortora: bordi sottili, mai neri */
  --soft-line: #E5D3CA;
  --blush: #F2D6D0;
  --rose: #C27A86;        /* rosa antico: accento */
  --rose-ink: #FFFFFF;
  --champagne: #E9D7B5;
  --gold: #B8975A;
  --hero-bg: #FBEDEA;
  --hero-ink: #3A2A2C;
  --hero-soft: #A4857E;
  --hero-a: #FFF6F3; --hero-c: #F6DCD6;
  --veil: #F3E3DD;
  --chip-ink: #3A2A2C;
  --pattern: rgba(184, 151, 90, .09);
  --danger: #A8434F;
  --ok: #7C8B6F;
  /* categorie */
  --c-self: #EBC3C0; --c-study: #E9D7B5; --c-sport: #CBD3BC; --c-home: #DBC9BE; --c-work: #D2CADC; --c-social: #F1D2B6;
  --shadow: 4px 4px 0 var(--blush);
  --shadow-sm: 3px 3px 0 var(--champagne);
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-body: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; border-radius: 0; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.05; text-wrap: balance; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

.display { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 11vw, 3.6rem); letter-spacing: -.02em; }
.display em, .display i { font-style: italic; font-weight: 500; }
.display-md { font-size: clamp(1.8rem, 8vw, 2.4rem); }
.eyebrow { margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--rose); }
.lead { margin: 0; color: var(--muted); font-size: 1.02rem; }
.fine { margin: 0; color: var(--muted); font-size: .84rem; text-align: center; }
.fine a { color: var(--ink); text-underline-offset: 3px; }

.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 1.45rem; letter-spacing: -.01em; }
.brand-mark { width: 18px; height: 18px; background: var(--rose); transform: rotate(45deg); box-shadow: 3px 3px 0 var(--champagne); flex: none; }

#screen-app { max-width: 640px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-bottom: 120px; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding-block: 14px 12px; }
.icon-btn { background: transparent; border: 1.5px solid transparent; width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; font-size: 1.5rem; line-height: 1; color: inherit; }
.icon-btn:hover { border-color: currentColor; }

/* ---- hero ---- */
.hero { background: linear-gradient(160deg, var(--hero-a) 0%, var(--hero-bg) 55%, var(--hero-c) 100%); color: var(--hero-ink); padding: 18px 18px 20px; position: relative; overflow: hidden; border: 1px solid var(--gold); outline: 1px solid var(--gold); outline-offset: -7px; box-shadow: 6px 6px 0 var(--champagne); }
.hero-checker { position: absolute; right: 0; top: 0; width: 96px; height: 48px; opacity: .22;
  background: conic-gradient(var(--hero-ink) 25%, transparent 0 50%, var(--hero-ink) 0 75%, transparent 0) 0 0 / 24px 24px; }
.week-nav { display: flex; align-items: center; justify-content: space-between; position: relative; }
.week-label { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.week-label span { font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.week-label small { color: var(--hero-soft); font-size: .86rem; font-family: var(--font-display); font-style: italic; }
.score { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-block: 6px 12px; }
.score-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 22vw, 6rem); line-height: .9; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.03em; }
.score-num.bump { animation: bump .5s ease; }
.score-unit { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--hero-soft); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid color-mix(in srgb, var(--hero-ink) 30%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--hero-ink) 30%, transparent); margin-bottom: 12px; }
.stat { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; text-align: center; min-width: 0; }
.stat + .stat { border-left: 1px solid color-mix(in srgb, var(--hero-ink) 30%, transparent); }
.stat b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.stat span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hero-soft); overflow-wrap: anywhere; }
.next-reward .nr-top { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; font-weight: 500; }
.next-reward .nr-top b { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }

.bar { height: 10px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; margin-top: 8px; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; width: 0; background: var(--rose); transition: width .7s cubic-bezier(.2,.9,.3,1); }
.hero .bar { border-color: var(--gold); background: var(--surface); }
.hero .bar > i { background: repeating-linear-gradient(-45deg, var(--blush) 0 6px, var(--champagne) 6px 12px); }

/* ---- tabs ---- */
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-block: 22px 16px; border: 1.5px solid var(--line); background: var(--surface); }
.tab { border: 0; background: transparent; padding: 11px 4px; font-weight: 600; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; color: var(--muted); }
.tab + .tab { border-left: 1.5px solid var(--line); }
.tab[aria-selected="true"] { background: var(--rose); color: var(--rose-ink); }

/* ---- striscia giorni ---- */
.strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 18px; }
.strip-day { border: 1.5px solid var(--line); background: var(--surface); padding: 6px 2px 0; display: flex; flex-direction: column; align-items: center; cursor: pointer; min-width: 0; overflow: hidden; }
.strip-day small { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.strip-day b { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; font-variant-numeric: lining-nums; }
.strip-fill { align-self: stretch; height: 5px; background: var(--surface-2); margin-top: 4px; position: relative; }
.strip-fill > i { position: absolute; inset: 0 auto 0 0; background: var(--rose); }
.strip-day.today { background: var(--rose); color: var(--rose-ink); box-shadow: var(--shadow-sm); }
.strip-day.today small { color: var(--rose-ink); opacity: .85; }
.strip-day.perfect b::after { content: "◆"; font-size: .55rem; color: var(--gold); vertical-align: super; margin-left: 1px; }

/* ---- giorni e impegni ---- */
.day { margin-bottom: 20px; scroll-margin-top: 16px; }
.day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1.5px solid var(--line); }
.day-name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.day-name i { font-weight: 500; color: var(--muted); }
.day.today .day-name { color: var(--rose); }
.day-pts { font-size: .78rem; color: var(--muted); font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.today-pill { display: inline-block; background: var(--rose); color: var(--rose-ink); font-family: var(--font-body); font-style: normal; font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: 3px 7px; margin-left: 8px; vertical-align: middle; }
.perfect-pill { display: inline-block; border: 1px solid var(--gold); color: var(--gold); font-family: var(--font-body); font-style: normal; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 2px 6px; margin-left: 6px; vertical-align: middle; }
.day-empty { color: var(--muted); font-size: .9rem; padding: 12px 14px; border: 1.5px dashed var(--soft-line); }

.item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  background: var(--surface); border: 1.5px solid var(--line); padding: 10px 12px 10px 10px; margin-bottom: 8px;
  position: relative; transition: transform .15s ease, box-shadow .15s ease;
}
.item::before { content: ""; position: absolute; left: -1.5px; top: -1.5px; bottom: -1.5px; width: 6px; background: var(--cat, var(--c-self)); }
.item:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.item-main { min-width: 0; cursor: pointer; padding-left: 2px; }
.item-title { font-weight: 600; overflow-wrap: anywhere; }
.item-meta { color: var(--muted); font-size: .78rem; display: flex; gap: 10px; flex-wrap: wrap; letter-spacing: .03em; }
.item-meta .cat-tag { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-size: .68rem; }
.item.done { background: var(--surface-2); }
.item.done .item-title { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--muted); }
.check { width: 34px; height: 34px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; display: grid; place-items: center; color: transparent; margin-left: 6px; transition: background .15s; }
.check svg { width: 20px; height: 20px; }
.check:hover { background: var(--blush); }
.item.done .check { background: var(--rose); color: var(--rose-ink); border-color: var(--rose); }
.item.done .check.pop { animation: pop .4s cubic-bezier(.3,1.6,.5,1); }
.item.future .check { opacity: .4; cursor: not-allowed; }
.pts-tag { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; padding: 2px 8px; border: 1.5px solid var(--line); background: var(--champagne); color: var(--chip-ink); }
.item.done .pts-tag { background: var(--rose); color: var(--rose-ink); border-color: var(--rose); }

/* ---- premi ---- */
.section-actions { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.reward { background: var(--surface); border: 1.5px solid var(--line); padding: 14px; margin-bottom: 14px; display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; cursor: pointer; box-shadow: var(--shadow); }
.reward-icon { font-size: 1.8rem; width: 56px; height: 56px; display: grid; place-items: center; background: var(--blush); border: 1.5px solid var(--line); grid-row: span 2; }
.reward-body { min-width: 0; display: grid; gap: 4px; }
.reward-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.reward-title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; overflow-wrap: anywhere; }
.reward-need { color: var(--muted); font-weight: 600; font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.reward-foot { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .84rem; color: var(--muted); }
.reward.unlocked { background: var(--blush); box-shadow: 6px 6px 0 var(--champagne); border-color: var(--gold); }
.reward.unlocked .reward-icon { background: var(--surface); animation: tilt 2.6s ease-in-out infinite; }
.reward.unlocked .reward-foot { color: var(--ink); font-weight: 600; }
.reward.claimed .reward-foot { color: var(--ok); }

/* ---- storico ---- */
.hist { background: var(--surface); border: 1.5px solid var(--line); padding: 12px 14px; margin-bottom: 10px; }
.hist-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.hist-top span { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.hist-top b { font-family: var(--font-display); font-size: 1.6rem; font-variant-numeric: tabular-nums lining-nums; }
.hist .bar > i { background: var(--rose); }
.hist-meta { color: var(--muted); font-size: .84rem; margin-top: 8px; }
.hist.current { border-style: dashed; }
.empty { text-align: center; color: var(--muted); padding: 28px 10px; border: 1.5px dashed var(--soft-line); }
.empty b { display: block; font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); margin-bottom: 4px; }
.empty + .empty { margin-top: 10px; }
.start-box { margin-bottom: 18px; background: var(--surface); }
.start-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

/* ---- pulsanti e campi ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1.5px solid var(--line); padding: 12px 18px; font-weight: 600; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: transform .1s ease, box-shadow .1s ease; background: var(--surface); color: var(--ink); text-align: center; }
.btn-primary { background: var(--rose); color: var(--rose-ink); box-shadow: var(--shadow); }
.btn-primary:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--champagne); }
.btn-primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--champagne); }
.btn-outline:hover { background: var(--surface-2); }
.btn-danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn-small { padding: 8px 12px; font-size: .72rem; }
.link { background: none; border: 0; color: var(--ink); font-weight: 500; cursor: pointer; padding: 6px; text-decoration: underline; text-underline-offset: 4px; font-size: .9rem; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .lang-select {
  width: 100%; min-width: 0; border: 1.5px solid var(--line); background: var(--surface); padding: 11px 12px; font-size: 1rem; appearance: none; -webkit-appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%); background-position: right 18px center, right 13px center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.field input:focus, .field select:focus { outline: none; box-shadow: var(--shadow-sm); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1.5px solid var(--line); background: var(--surface); padding: 6px 11px; font-weight: 600; font-size: .85rem; cursor: pointer; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }
.chip[aria-pressed="true"] { background: var(--rose); color: var(--rose-ink); border-color: var(--rose); }
.chip .sw { width: 10px; height: 10px; background: var(--cat); border: 1px solid var(--line); }
#reward-icons .chip { font-size: 1.25rem; padding: 4px 8px; }
.switch { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: .92rem; cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; width: 44px; height: 24px; border: 1.5px solid var(--line); background: var(--surface); position: relative; cursor: pointer; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; background: var(--ink); transition: transform .15s; }
.switch input:checked { background: var(--rose); }
.switch input:checked::after { transform: translateX(20px); background: var(--surface); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cal-box { border: 1px solid var(--gold); background: var(--surface-2); padding: 12px; display: grid; gap: 10px; }
.cal-label { font-size: .88rem; color: var(--ink); }
.cal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-actions .btn { flex: 1 1 140px; }
.level-box { border: 1.5px solid var(--line); padding: 12px; background: var(--surface-2); }
.level-box b { font-family: var(--font-display); font-size: 1.3rem; }
.form-error { color: var(--danger); font-weight: 500; margin: 0; font-size: .9rem; }
.grow { flex: 1; }
.card { background: var(--surface); border: 1px solid var(--gold); box-shadow: 6px 6px 0 var(--blush); }

/* ---- fab ---- */
.fab {
  position: fixed; right: max(18px, calc(env(safe-area-inset-right, 0px) + 18px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  width: 60px; height: 60px; border: 1.5px solid var(--line); background: var(--rose); color: var(--rose-ink); cursor: pointer; display: grid; place-items: center;
  box-shadow: 5px 5px 0 var(--champagne); transition: transform .12s, box-shadow .12s; z-index: 5;
}
.fab:hover { transform: translate(-2px, -2px) rotate(-3deg); box-shadow: 7px 7px 0 var(--champagne); }
.fab:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--champagne); }

/* ---- dialog ---- */
dialog.sheet { border: 1.5px solid var(--line); padding: 0; background: var(--surface); color: var(--ink); width: min(520px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); box-shadow: 8px 8px 0 var(--blush); }
dialog.sheet form { padding: 22px 20px 20px; }
.sheet-title { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; }
dialog::backdrop { background: color-mix(in srgb, var(--veil) 78%, transparent); backdrop-filter: blur(3px); }
dialog[open] { animation: rise .25s cubic-bezier(.2,.9,.3,1.1); }
.sheet-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }

/* ---- pagine d'ingresso ---- */
.gate { min-height: 100dvh; background:
  linear-gradient(var(--bg), var(--bg)) padding-box,
  var(--bg); padding-block: 18px 28px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); position: relative; overflow: hidden; }
.gate::before { content: ""; position: absolute; right: -60px; top: 120px; width: 260px; height: 260px; background: var(--blush); opacity: .7; transform: rotate(45deg); z-index: 0; }
.gate::after { content: ""; position: absolute; left: -40px; bottom: -40px; width: 180px; height: 120px; opacity: .25;
  background: conic-gradient(var(--gold) 25%, transparent 0 50%, var(--gold) 0 75%, transparent 0) 0 0 / 30px 30px; z-index: 0; }
.gate-inner { max-width: 980px; margin: 0 auto; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; }
.gate-narrow { max-width: 460px; }
.gate-top { display: flex; justify-content: space-between; align-items: center; }
.lang-select { width: auto; padding: 6px 10px; font-weight: 600; letter-spacing: .1em; font-size: .8rem; cursor: pointer; }
.landing { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: start; }
.landing-hero { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding-top: 10px; }
.landing-hero .display { font-size: clamp(2.8rem, 12vw, 4.6rem); }
.steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; counter-reset: s; border-top: 1.5px solid var(--line); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; padding: 12px 0; border-bottom: 1.5px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font-family: var(--font-display); font-style: italic; font-size: 1.6rem; color: var(--rose); line-height: 1; }
.steps b { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; }
.steps span { color: var(--muted); font-size: .95rem; }
.form-card { padding: 22px 20px; }
.card-title { font-family: var(--font-display); font-size: 1.6rem; }
.pay-card { padding: 24px 20px; }
.price { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); padding-block: 8px; text-align: center; }
.perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.perks li { padding-left: 26px; position: relative; }
.perks li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 9px; height: 9px; background: var(--rose); transform: rotate(45deg); }
.legal-links { display: flex; gap: 10px; justify-content: center; color: var(--muted); font-size: .84rem; }
.legal-links a { color: var(--muted); }
@media (max-width: 760px) { .landing { grid-template-columns: 1fr; gap: 26px; } }

/* ---- overlay: guida e celebrazione ---- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: color-mix(in srgb, var(--veil) 82%, transparent); backdrop-filter: blur(3px); padding: 20px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); }
.onboard-card, .celebrate-card { padding: 24px 22px; width: min(400px, 100%); display: flex; flex-direction: column; gap: 10px; animation: rise .4s cubic-bezier(.2,1.2,.4,1); text-align: left; }
.ob-art { height: 120px; border: 1.5px solid var(--line); background: var(--blush); position: relative; overflow: hidden; margin-bottom: 6px; }
.ob-art .d { position: absolute; background: var(--surface); border: 1.5px solid var(--line); transform: rotate(45deg); }
.ob-art .t { position: absolute; font-family: var(--font-display); font-weight: 700; font-size: 3rem; color: var(--ink); line-height: 1; }
.ob-dots { display: flex; gap: 6px; margin-top: 6px; }
.ob-dots i { width: 22px; height: 4px; background: var(--soft-line); }
.ob-dots i.on { background: var(--rose); }
.ob-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ob-actions .btn { flex: 1 1 140px; }
.celebrate-card { text-align: center; align-items: center; }
/* cornice da ritratto vittoriano: doppio filetto, ovale interno, ornamenti */
.celebrate-card { gap: 6px; }
.cel-frame { width: 108px; height: 128px; border: 1.5px solid var(--line); outline: 1.5px solid var(--line); outline-offset: 5px; background: var(--blush); display: grid; place-items: center; margin: 18px 0 14px; box-shadow: 9px 9px 0 var(--rose); position: relative; }
.cel-frame::before { content: ""; position: absolute; inset: 10px 11px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.cel-icon { position: relative; color: var(--rose); line-height: 0; }
.cel-orn { margin: 4px 0 0; color: var(--rose); font-size: .8rem; display: flex; align-items: center; gap: 10px; }
.cel-orn::before, .cel-orn::after { content: ""; width: 44px; height: 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; padding-top: 2px; }
.ico-wrap, .reward-icon, .icon-chip { line-height: 0; }
.nr-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.reward-icon { font-size: 0; color: var(--ink); }
.reward.unlocked .reward-icon { color: var(--rose); }
#reward-icons .chip { padding: 6px; }
.ob-art .t .ico { display: block; }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

.float-pts { position: fixed; z-index: 40; pointer-events: none; font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 1.6rem; color: var(--rose); animation: floatUp 1s ease-out forwards; }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 100px); transform: translateX(-50%); background: var(--surface); color: var(--ink); border: 1px solid var(--gold); padding: 10px 16px; font-weight: 500; z-index: 70; max-width: calc(100vw - 32px); text-align: center; box-shadow: 4px 4px 0 var(--blush); }

@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tilt { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes floatUp { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -70px); opacity: 0; } }

.no-anim *:not(.cv-p):not(.cv-blob):not(.cv-orb), .no-anim *::before, .no-anim *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 380px) { .row, .settings-grid { grid-template-columns: 1fr; } .strip { gap: 4px; } }


/* ================= Stili: Cipria (base), Rosé (chiaro deciso), Velluto (scuro lussuoso) ================= */
:root[data-skin="rose"] {
  --bg: #FFF3F5; --surface: #FFFFFF; --surface-2: #FFE3EA; --ink: #3A1F2B; --muted: #8E6A76;
  --line: #C04A72; --soft-line: #F6C6D3; --blush: #FFC9D6; --rose: #D6336C; --rose-ink: #FFFFFF;
  --champagne: #F7D98E; --gold: #C9962E; --hero-bg: #FFD3DE; --hero-a: #FFF0F4; --hero-c: #FFB9CB;
  --hero-ink: #3A1F2B; --hero-soft: #A0566F; --veil: #FFE3EA; --chip-ink: #3A1F2B; --pattern: rgba(214, 51, 108, .07);
  --c-self: #FFB3C4; --c-study: #FBD98C; --c-sport: #BFE3B4; --c-home: #F7C9B0; --c-work: #D6C6F2; --c-social: #FFC9A3;
  color-scheme: light;
}
:root[data-skin="bijou"] {
  --bg: #FBF5F2; --surface: #FFFFFF; --surface-2: #F6E9E6; --ink: #2A2030; --muted: #8C7A82;
  --line: #C9956B; --soft-line: #EAD8D0; --blush: #F6D9DF; --rose: #D27891; --rose-ink: #FFFFFF;
  --champagne: #EFD9B4; --gold: #C9956B; --hero-bg: #FFF1F3; --hero-a: #FFFFFF; --hero-c: #F8DCE3;
  --hero-ink: #2A2030; --hero-soft: #A0808C; --veil: #F1E2E4; --chip-ink: #2A2030; --pattern: rgba(201, 149, 107, .10);
  --c-self: #F5C6D2; --c-study: #F0DDB8; --c-sport: #CDE3D6; --c-home: #E8D3C8; --c-work: #DAD3F0; --c-social: #F7D3BE;
  color-scheme: light;
}
:root[data-skin="notte"] {
  --bg: #16111A; --surface: #211926; --surface-2: #2C2232; --ink: #F7EEE9; --muted: #C2B0B6;
  --line: #D6A77A; --soft-line: #3A2E40; --blush: #4A3646; --rose: #E8A0B4; --rose-ink: #1A1218;
  --champagne: #E3C58C; --gold: #D6A77A; --hero-bg: #2A1F30; --hero-a: #33253A; --hero-c: #1D1621;
  --hero-ink: #F7EEE9; --hero-soft: #C9A9B4; --veil: #0B080D; --chip-ink: #1A1218; --pattern: rgba(214, 167, 122, .08);
  --danger: #FF9AAE; --ok: #A9D1BE;
  --c-self: #B5627E; --c-study: #B8935A; --c-sport: #4F8A74; --c-home: #8C6E64; --c-work: #6F6AA8; --c-social: #C07A5A;
  color-scheme: dark;
}

/* trama di rombi sullo sfondo: più ricca, senza disturbare */
body {
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(45deg, var(--pattern) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, var(--pattern) 0 1px, transparent 1px 26px);
}
/* schede colorate dalla categoria */
.item { background: color-mix(in srgb, var(--cat, var(--c-self)) 22%, var(--surface)); border-color: color-mix(in srgb, var(--line) 55%, transparent); }
.item.done { background: color-mix(in srgb, var(--cat, var(--c-self)) 10%, var(--surface-2)); }
.item::before { width: 7px; }
/* ornamento dorato sui giorni */
.day-head { border-bottom: 1px solid var(--gold); box-shadow: 0 3px 0 -2px var(--gold); }
.day-name::before { content: "◆"; color: var(--gold); font-size: .55em; vertical-align: middle; margin-right: 8px; }
.reward { border-color: var(--gold); }
.reward-icon { border-color: var(--gold); }
.hist { border-color: color-mix(in srgb, var(--gold) 70%, transparent); }
.tabs { border-color: var(--gold); }
.tab + .tab { border-left-color: var(--gold); }
.strip-day { border-color: color-mix(in srgb, var(--gold) 80%, transparent); }

/* barra in alto: lingua e stile */
.top-actions { display: flex; align-items: center; gap: 6px; }
.top-actions .lang-select { padding: 7px 10px; border: 1px solid var(--gold); background: var(--surface); color: var(--ink); }
.skin-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.skin-label { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-right: 2px; }
.skin-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--gold); background: var(--surface); color: var(--ink); padding: 5px 10px; font-size: .8rem; font-weight: 600; cursor: pointer; }
.skin-chip i { width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid var(--gold); }
.skin-chip[data-skin="cipria"] i { background: linear-gradient(135deg, #F7EFEA 50%, #C27A86 50%); }
.skin-chip[data-skin="rose"] i { background: linear-gradient(135deg, #FFD3DE 50%, #D6336C 50%); }
.skin-chip[data-skin="bijou"] i { background: linear-gradient(135deg, #FBF5F2 50%, #D27891 50%); }
.skin-chip[data-skin="notte"] i { background: linear-gradient(135deg, #16111A 50%, #D6A77A 50%); }
.skin-chip[aria-pressed="true"] { background: var(--rose); color: var(--rose-ink); border-color: var(--rose); }
.ob-lang-row { display: flex; justify-content: flex-end; margin-bottom: 2px; }
.lang-menu { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--gold); background: var(--surface); color: var(--ink); padding: 7px 10px; font: inherit; font-weight: 600; font-size: .82rem; letter-spacing: .12em; cursor: pointer; }
.lang-btn .chev { transition: transform .15s; }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; list-style: none; margin: 0; padding: 4px; min-width: 170px; background: var(--surface); border: 1px solid var(--gold); box-shadow: 6px 6px 0 var(--veil); }
.lang-menu-left .lang-list { right: auto; left: 0; }
.lang-list button { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; background: transparent; color: var(--ink); padding: 9px 10px; font: inherit; font-size: .95rem; text-align: left; cursor: pointer; }
.lang-list button b { font-size: .72rem; letter-spacing: .14em; color: var(--gold); width: 22px; }
.lang-list button:hover, .lang-list button:focus-visible { background: var(--surface-2); outline: none; }
.lang-list button[aria-selected="true"] { background: var(--rose); color: var(--rose-ink); }
.lang-list button[aria-selected="true"] b { color: var(--rose-ink); }

/* ---- abbonamento: piani, codice, prova gratuita ---- */
.pay-reason { margin: 0; padding: 10px 12px; border: 1px solid var(--gold); background: var(--surface-2); font-weight: 500; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 18px 12px 14px; border: 1px solid var(--gold); background: var(--surface); color: var(--ink); text-decoration: none; text-align: center; box-shadow: 4px 4px 0 var(--blush); transition: transform .12s, box-shadow .12s; }
.plan:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--blush); }
.plan-best { background: var(--rose); color: var(--rose-ink); border-color: var(--rose); box-shadow: 4px 4px 0 var(--champagne); }
.plan-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--champagne); color: var(--chip-ink); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; white-space: nowrap; }
.plan-name { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.plan-price { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1.1; font-variant-numeric: lining-nums; }
.plan-note { font-size: .8rem; opacity: .85; }
.key-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.key-form .field input { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }
.trial-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px; border: 1px solid var(--gold); background: var(--surface); font-weight: 500; }
@media (max-width: 380px) { .plans, .key-form { grid-template-columns: 1fr; } }

/* ---- illustrazione scrivania in alto (originale, segue i colori dello stile) ---- */
.desk-banner { position: relative; margin: 0 0 14px; height: 150px; border: 1px solid var(--gold); outline: 1px solid var(--gold); outline-offset: -6px; overflow: hidden; background: var(--surface-2); }
.desk-banner svg { display: block; width: 100%; height: 100%; }
.d-table { fill: var(--surface-2); }
.d-grain path { stroke: color-mix(in srgb, var(--gold) 14%, transparent); stroke-width: 1; fill: none; }
.d-dark { fill: #2A2030; }
.d-paper { fill: #FFFFFF; }
.d-shadow { filter: drop-shadow(3px 3px 0 color-mix(in srgb, var(--gold) 25%, transparent)); }
.d-screen { fill: #F4EEF1; }
.d-screen-lines path, .d-lines path { stroke: #C9BFC6; stroke-width: 2; fill: none; }
.d-metal { fill: #DCD6DB; }
.d-keys path { stroke: #C3BBC2; stroke-width: 1.5; fill: none; }
.d-pad { fill: #CFC8CE; }
.d-grid path { stroke: #D9D0D5; stroke-width: 1; fill: none; }
.d-script { font-family: var(--font-display); font-style: italic; font-size: 17px; fill: #2A2030; }
.d-rose { fill: var(--rose); }
.d-rose-line { stroke: var(--rose); stroke-width: 3; fill: none; }
.d-gold { fill: var(--gold); }
.d-fold { stroke: #E6DCE0; stroke-width: 2; }
.d-spiral circle { fill: none; stroke: #9A8F96; stroke-width: 1.5; }
.d-saucer { fill: #FFFFFF; stroke: #E6DCE0; stroke-width: 1.5; }
.d-cup { fill: #F7F2F4; stroke: #D9D0D5; stroke-width: 1.5; }
.d-coffee { fill: #4A2E25; }
.d-handle { fill: none; stroke: #D9D0D5; stroke-width: 5; stroke-linecap: round; }
.desk-greet { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 1px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--gold); padding: 7px 12px; }
.desk-greet b { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.15rem; color: var(--ink); line-height: 1.1; }
.desk-greet span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.desk-banner { height: 170px; } .desk-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

/* ---- scheda Sogni ---- */
.tabs { grid-template-columns: repeat(4, 1fr); }
.tab { font-size: .7rem; letter-spacing: .12em; }
.next-dream { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--gold); background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; font: inherit; box-shadow: 4px 4px 0 var(--blush); }
.next-dream .ico-wrap { color: var(--rose); }
.nd-text { display: flex; flex-direction: column; min-width: 0; }
.nd-text small { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.nd-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.nd-cd { font-variant-numeric: tabular-nums; font-size: .85rem; white-space: nowrap; color: var(--rose); }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sec-title { font-family: var(--font-display); font-size: 1.45rem; }
.amb { display: flex; gap: 6px; }
.vb-hint { text-align: left; margin-bottom: 10px; }
.frames { margin-bottom: 12px; }
.frames .chip.locked { opacity: .7; }
.vb { margin-bottom: 26px; }
.vb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vb-tile { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); border: 1px solid var(--gold); display: grid; place-items: center; }
.vb-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-quote { background: var(--blush); padding: 14px; }
.vb-quote blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.1rem; line-height: 1.3; text-align: center; color: var(--ink); overflow-wrap: anywhere; }
.vb-missing { font-size: .8rem; color: var(--muted); padding: 10px; text-align: center; }
.vb-del { position: absolute; top: 6px; right: 6px; min-width: 28px; height: 28px; border: 1px solid var(--gold); background: var(--surface); color: var(--ink); cursor: pointer; font-size: .85rem; padding: 0 8px; }
.vb-del[data-armed] { background: var(--danger); color: #fff; border-color: var(--danger); }
.vb-add { aspect-ratio: 4 / 5; border: 1.5px dashed var(--gold); background: transparent; color: var(--ink); font: inherit; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; cursor: pointer; }
.vb-add:hover { background: var(--surface-2); }
/* cornici sbloccabili */
.frame-oro .vb-tile { border: 3px double var(--gold); box-shadow: 4px 4px 0 var(--champagne); }
.frame-perle .vb-tile { border: 2px solid #fff; outline: 2px dotted var(--gold); outline-offset: -8px; box-shadow: 0 0 0 4px var(--blush); }
.frame-vittoriana .vb-tile { border: 6px double var(--gold); outline: 1px solid var(--gold); outline-offset: -14px; box-shadow: 6px 6px 0 var(--rose); }
.vault { margin-bottom: 20px; }
.dream { background: var(--surface); border: 1px solid var(--gold); box-shadow: 5px 5px 0 var(--blush); padding: 14px; margin-bottom: 14px; display: grid; gap: 8px; }
.dream-top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.dream-icon { color: var(--rose); width: 48px; height: 48px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--gold); }
.dream-ttl { display: flex; flex-direction: column; min-width: 0; }
.dream-kind { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.dream-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; overflow-wrap: anywhere; }
.dream-cd { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--rose); font-variant-numeric: tabular-nums lining-nums; }
.dream-cd.done { color: var(--gold); }
.dream-date { font-size: .82rem; color: var(--muted); margin-top: -6px; }
.dream-btns { display: flex; gap: 6px; margin-top: 8px; }
.dream-list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 6px; }
.dream-list li { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.dream-list li.done span { text-decoration: line-through; color: var(--muted); }
.check.mini { width: 26px; height: 26px; margin-left: 0; }
.check.mini svg { width: 16px; height: 16px; }
.dream-list li.done .check.mini { background: var(--rose); color: var(--rose-ink); border-color: var(--rose); }
.quote-idea { font-family: var(--font-display); font-style: italic; text-align: left; }
.field textarea { width: 100%; min-width: 0; border: 1.5px solid var(--line); background: var(--surface); padding: 11px 12px; font: inherit; color: var(--ink); resize: vertical; }
@media (max-width: 380px) { .tab { font-size: .62rem; letter-spacing: .06em; } }

/* ================= Premium: grandi riquadri, vision board a categorie, sogni ================= */
.tabs.hub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border: 0; background: transparent; margin-block: 20px 18px; }
.hub .hub-tile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; align-items: start; text-align: left; min-height: 116px; padding: 15px 15px 12px; border: 1px solid var(--gold); background: linear-gradient(155deg, var(--surface) 30%, color-mix(in srgb, var(--tile) 70%, var(--surface)) 100%); color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 1rem; box-shadow: 4px 4px 0 var(--blush); transition: transform .15s, box-shadow .15s; overflow: hidden; }
.hub .tab + .tab { border-left: 1px solid var(--gold); }
.hub .hub-tile::after { content: ""; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); pointer-events: none; }
.hub-week { --tile: var(--c-self); } .hub-rewards { --tile: var(--champagne); } .hub-dreams { --tile: var(--c-work); } .hub-history { --tile: var(--c-sport); }
.hub-ico { grid-column: 2; grid-row: 1 / span 2; width: 38px; height: 38px; margin: 4px 4px 0 6px; display: grid; place-items: center; border: 1px solid var(--gold); background: var(--surface); color: var(--rose); transform: rotate(45deg); }
.hub-ico svg { transform: rotate(-45deg); width: 22px; height: 22px; }
.hub-eyebrow { grid-column: 1; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-name { grid-column: 1; font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1.1; margin-top: 3px; }
.hub-stat { grid-column: 1 / -1; align-self: end; font-style: normal; font-size: .8rem; margin-top: 10px; padding-top: 7px; border-top: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub .hub-tile:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--blush); }
.hub .hub-tile[aria-selected="true"] { background: var(--rose); color: var(--rose-ink); border-color: var(--rose); box-shadow: 4px 4px 0 var(--champagne); }
.hub .hub-tile[aria-selected="true"] .hub-eyebrow { color: var(--rose-ink); opacity: .85; }
.hub .hub-tile[aria-selected="true"] .hub-stat { border-top-color: color-mix(in srgb, var(--rose-ink) 45%, transparent); }
.hub .hub-tile[aria-selected="true"]::after { border-color: color-mix(in srgb, var(--rose-ink) 45%, transparent); }
@media (max-width: 380px) { .hub-name { font-size: 1.22rem; } .hub .hub-tile { padding: 13px 12px 11px; } .hub .hub-tile { font-size: 1rem; letter-spacing: 0; } }
@media (min-width: 760px) { .tabs.hub { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* illustrazioni */
.art { position: relative; overflow: hidden; }
.art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.next-dream .nd-art { width: 42px; height: 52px; border: 1px solid var(--gold); }

/* intestazioni eleganti */
.lux-head { text-align: center; margin: 6px 0 16px; }
.eyebrow { display: block; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.lux-head .sec-title { font-size: 1.95rem; margin: 2px 0 4px; }
.lux-head::after { content: "◆  ◆  ◆"; display: block; color: var(--gold); font-size: .5rem; letter-spacing: .3em; margin-top: 8px; }
.lux-head .vb-hint { text-align: center; max-width: 36ch; margin: 0 auto; }
.sub-title { font-family: var(--font-display); font-size: 1.15rem; }

/* categorie della vision board */
.vb-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.vb-cat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 4px 9px; border: 1px solid var(--gold); background: var(--surface); color: var(--ink); font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .03em; cursor: pointer; }
.vb-cat .ico-wrap { color: var(--rose); display: grid; }
.vb-cat small { position: absolute; top: 4px; right: 6px; font-size: .6rem; color: var(--muted); }
.vb-cat[aria-pressed="true"] { background: var(--rose); color: var(--rose-ink); border-color: var(--rose); box-shadow: 3px 3px 0 var(--champagne); }
.vb-cat[aria-pressed="true"] .ico-wrap, .vb-cat[aria-pressed="true"] small { color: var(--rose-ink); }
@media (min-width: 560px) { .vb-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* la bacheca */
.vb-board { background-color: var(--surface); background-image: radial-gradient(color-mix(in srgb, var(--gold) 22%, transparent) 1px, transparent 1.3px); background-size: 14px 14px; border: 1px solid var(--gold); padding: 14px 12px 4px; box-shadow: 5px 5px 0 var(--blush); }
.vb-board.frame-oro { border: 3px double var(--gold); box-shadow: 5px 5px 0 var(--champagne); }
.vb-board.frame-perle { outline: 2px dotted var(--gold); outline-offset: -7px; box-shadow: 0 0 0 4px var(--blush); }
.vb-board.frame-vittoriana { border: 6px double var(--gold); outline: 1px solid var(--gold); outline-offset: -12px; box-shadow: 6px 6px 0 var(--rose); padding: 20px 18px 8px; }
.vb-board-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; margin-bottom: 16px; border-bottom: 1px solid var(--gold); background: var(--surface); }
.vb-board-ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--gold); background: var(--surface-2); color: var(--rose); }
.vb-board-head b { display: block; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.1; }
.vb-board-head span { font-family: var(--font-display); font-style: italic; color: var(--muted); font-size: .95rem; }
.vb-board .vb-grid { display: block; columns: 2; column-gap: 12px; }
@media (min-width: 600px) { .vb-board .vb-grid { columns: 3; } }
.vb-empty { text-align: center; padding: 18px 0; }

/* le schede dentro la bacheca */
.vb-board .vb-tile { display: block; break-inside: avoid; margin: 0 0 16px; aspect-ratio: auto; overflow: visible; border: 0; outline: 0; box-shadow: none; background: transparent; place-items: initial; position: relative; }
.vb-pic { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-2); }
.vb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-pic .vb-missing { display: grid; place-items: center; height: 100%; }
.vb-cap { font-family: var(--font-display); font-style: italic; font-size: .92rem; text-align: center; padding: 7px 2px 3px; }
.vb-word { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.55rem; text-align: center; padding: 10px; overflow-wrap: anywhere; line-height: 1.1; }
.vb-board .vb-quote { padding: 18px 14px; }
.vb-board .vb-quote blockquote { color: inherit; font-size: 1.05rem; }
.vb-board .vb-quote blockquote::before { content: "“"; display: block; font-size: 2.2rem; line-height: .6; color: var(--rose); margin-bottom: 6px; }
.vb-board .vb-plan { padding: 16px 12px 12px; }
.plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; border-bottom: 1px dashed var(--gold); padding-bottom: 6px; margin-bottom: 8px; padding-right: 54px; }
.plan-head b { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.15; }
.plan-head small { color: var(--rose); font-weight: 700; font-size: .8rem; white-space: nowrap; }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.plan-list li { display: flex; gap: 8px; align-items: center; font-size: .84rem; line-height: 1.25; }
.plan-list li.done span { text-decoration: line-through; opacity: .6; }
.plan-list .check.mini { flex: none; width: 22px; height: 22px; }
.plan-list .check.mini svg { width: 14px; height: 14px; }
.plan-list li.done .check.mini { background: var(--rose); color: var(--rose-ink); border-color: var(--rose); }

/* cornici delle schede */
.vb-board .tf-polaroid { background: #fff; color: #3A2A2C; padding: 8px 8px 6px; border: 1px solid #EADBD3; box-shadow: 3px 4px 0 var(--blush); transform: rotate(-1.4deg); }
.vb-board .vb-tile.tf-polaroid:nth-child(3n) { transform: rotate(1.2deg); }
.vb-board .tf-cammeo { background: var(--blush); color: var(--ink); padding: 10px; border: 1px solid var(--gold); }
.tf-cammeo .vb-pic, .tf-cammeo .vb-word, .tf-cammeo blockquote { border-radius: 50%; border: 3px double var(--gold); }
.tf-cammeo .vb-word, .tf-cammeo blockquote { aspect-ratio: 4 / 5; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 16px; }
.vb-board .tf-cammeo.vb-quote { padding: 10px; }
.vb-board .tf-cammeo blockquote { font-size: .92rem; }
.vb-board .tf-oro { background: var(--surface); color: var(--ink); border: 4px double var(--gold); outline: 1px solid var(--gold); outline-offset: -10px; padding: 14px; box-shadow: 4px 4px 0 var(--champagne); }
.vb-board .tf-oro .vb-word { color: var(--rose); }
.vb-board .tf-carta { background-color: #FFFDF9; background-image: repeating-linear-gradient(180deg, transparent 0 23px, #EFE2DA 23px 24px); color: #3A2A2C; border: 1px solid #EADBD3; box-shadow: 3px 3px 0 var(--champagne); padding-top: 22px; }
.vb-board .tf-carta:not(.vb-quote):not(.vb-plan) { padding: 22px 10px 10px; }
.vb-board .tf-carta::before { content: ""; position: absolute; top: -8px; left: 50%; width: 58px; height: 16px; transform: translateX(-50%) rotate(-3deg); background: color-mix(in srgb, var(--rose) 50%, transparent); }
.vb-board .tf-nastro { background: var(--champagne); color: #3A2A2C; border: 1px dashed #B8975A; padding: 14px 18px; -webkit-mask: radial-gradient(circle 8px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 8px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat; }
.vb-board .tf-nastro.vb-quote { padding: 18px 20px; }
.vb-board .tf-polaroid .vb-quote blockquote::before, .vb-board .tf-carta blockquote::before, .vb-board .tf-nastro blockquote::before { color: #C27A86; }
.vb-board .tf-polaroid .plan-head small, .vb-board .tf-carta .plan-head small { color: #B0566A; }

/* bottoni sulle schede */
.vb-tile-tools { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; z-index: 2; }
.vb-btn { min-width: 26px; height: 26px; border: 1px solid var(--gold); background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); font: inherit; font-size: .8rem; line-height: 1; padding: 0 6px; cursor: pointer; }
.vb-tile-tools .vb-del { position: static; min-width: 26px; height: 26px; }
@media (hover: hover) { .vb-tile-tools { opacity: 0; transition: opacity .15s; } .vb-tile:hover .vb-tile-tools, .vb-tile:focus-within .vb-tile-tools { opacity: 1; } }

.vb-tools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 16px 0 10px; }
.vb-tool { border: 1px solid var(--gold); background: var(--surface); color: var(--ink); padding: 8px 12px; font: inherit; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.vb-tool:hover { background: var(--surface-2); }
.frames { justify-content: center; align-items: center; }

/* cassetto dei sogni */
.vault { margin-top: 30px; }
.vault-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--gold); border: 1px solid var(--gold); margin-bottom: 20px; box-shadow: 5px 5px 0 var(--blush); }
.vs-stat { background: var(--surface); padding: 12px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vs-stat b { font-family: var(--font-display); font-size: 1.3rem; color: var(--rose); font-variant-numeric: lining-nums; overflow-wrap: anywhere; }
.vs-stat span { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.vs-bar { grid-column: 1 / -1; background: var(--surface); padding: 10px 12px 12px; display: grid; gap: 6px; }
.vs-bar small { font-size: .78rem; color: var(--muted); }
.tpl-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 6px 14px 2px; margin-bottom: 16px; scroll-snap-type: x mandatory; }
.tpl-card { flex: 0 0 112px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; padding: 6px 6px 9px; border: 1px solid var(--gold); background: #fff; color: #3A2A2C; font: inherit; text-align: left; cursor: pointer; box-shadow: 3px 3px 0 var(--blush); transition: transform .12s; }
.tpl-card:hover { transform: translateY(-2px); }
.tpl-art { width: 100%; aspect-ratio: 4 / 5; }
.tpl-name { font-family: var(--font-display); font-weight: 700; font-size: .9rem; line-height: 1.15; }
.tpl-card small { font-size: .72rem; color: #94807A; }
.dream { padding: 0; gap: 0; overflow: hidden; margin-bottom: 18px; }
.dream-cover { position: relative; height: 160px; border-bottom: 1px solid var(--gold); }
.dream-art { position: absolute; inset: 0; }
.dream-ov { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 30px 14px 12px; background: linear-gradient(180deg, transparent, rgba(42, 32, 48, .66)); }
.dream-ov .dream-kind { color: rgba(255, 255, 255, .9); display: inline-flex; align-items: center; gap: 5px; }
.dream-ov .dream-name { color: #fff; font-size: 1.45rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.dream-edit { flex: none; border: 1px solid rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .18); color: #fff; padding: 6px 11px; font: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.dream-body { padding: 14px; display: grid; gap: 10px; }
.cd-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cd-box { border: 1px solid var(--gold); background: var(--surface-2); padding: 9px 4px 7px; text-align: center; display: flex; flex-direction: column; }
.cd-box b { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; color: var(--rose); font-variant-numeric: tabular-nums lining-nums; }
.cd-box small { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 4px; font-family: var(--font-body); font-weight: 600; }
.cd-boxes.cd-text { display: block; font-size: 1.35rem; }
.dream-date { margin-top: -2px; }
.dream-lh { border-top: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); padding-top: 10px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.dream-btns { flex-wrap: wrap; }
.art-pick { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.art-opt { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; aspect-ratio: 4 / 5; }
.art-opt .art { width: 100%; height: 100%; }
.art-opt[aria-pressed="true"] { border-color: var(--rose); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--gold); }
#dream-tpls .chip { font-size: .8rem; }
.dream-body .nr-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .9rem; } .dream-body .nr-top b { white-space: nowrap; color: var(--rose); font-variant-numeric: tabular-nums; }
.vb-board .vb-word { font-size: 1.15rem; overflow-wrap: normal; word-break: normal; hyphens: manual; } @media (min-width: 600px) { .vb-board .vb-word { font-size: 1.4rem; } }

/* ================= Struttura da app: barra in basso, riepilogo ad anello, giornata a linea del tempo ================= */
#screen-app { padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
.desk-banner { height: 128px; }

/* riepilogo compatto */
.hero.hero-compact { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px 16px; align-items: center; padding: 16px 16px 14px; }
.hc-ring { position: relative; width: 112px; height: 112px; }
.hc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: var(--surface); stroke: color-mix(in srgb, var(--gold) 30%, transparent); stroke-width: 8; }
.ring-fg { fill: none; stroke: var(--rose); stroke-width: 8; stroke-linecap: butt; transition: stroke-dasharray .8s cubic-bezier(.2, .9, .3, 1); }
.hero-compact .score { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; margin: 0; }
.hero-compact .score-num { font-size: 2.3rem; letter-spacing: -.02em; }
.hero-compact .score-unit { font-size: .9rem; }
.hc-side { min-width: 0; display: grid; gap: 10px; }
.hero-compact .week-nav .icon-btn { width: 32px; height: 32px; font-size: 1.3rem; }
.hero-compact .week-label span { font-size: .68rem; }
.hero-compact .next-reward .nr-top { font-size: .84rem; flex-wrap: wrap; gap: 2px 8px; }
.hero-compact .next-reward .bar { display: none; }
.hero-compact .stats { grid-column: 1 / -1; margin: 2px 0 0; }
.hero-compact .stat { padding: 6px 4px; }
.hero-compact .stat b { font-size: 1.25rem; }
.hero-compact .stat span { font-size: .6rem; }

/* striscia dei giorni */
.strip { margin: 18px 0 16px; }
.strip-day { padding-top: 7px; transition: transform .12s; }
.strip-day.sel:not(.today) { border-color: var(--rose); background: var(--blush); }
.strip-day.sel { transform: translateY(-3px); box-shadow: 3px 3px 0 var(--champagne); }

/* la giornata */
.tl-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--gold); scroll-margin-top: 16px; }
.tl-date { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; line-height: 1.1; }
.tl-date i { font-weight: 500; color: var(--muted); font-size: 1.1rem; }
.tl-head.today .tl-date { color: var(--rose); }
.tl-pills { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tl-pts { font-size: .74rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-group { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 4px 0 6px; }
.tl { list-style: none; margin: 0 0 12px; padding: 0; }
.tl-row, .tl-add { display: grid; grid-template-columns: 44px 44px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; position: relative; padding: 7px 0; }
.tl-row::before { content: ""; position: absolute; left: 75px; top: 0; bottom: 0; border-left: 2px dotted color-mix(in srgb, var(--gold) 65%, transparent); }
.tl-row:first-child::before { top: 50%; }
.tl-row:last-child::before { bottom: 50%; }
.tl-row:only-child::before { display: none; }
.tl-time { font-size: .8rem; font-weight: 600; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.tl-node { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--cat, var(--c-self)); color: var(--ink); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--gold); transition: background .2s; }
.tl-row.done .tl-node { background: var(--rose); color: var(--rose-ink); }
.tl-card { min-width: 0; cursor: pointer; padding: 9px 12px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); box-shadow: 3px 3px 0 color-mix(in srgb, var(--cat, var(--blush)) 70%, transparent); transition: transform .12s; }
.tl-card:hover { transform: translate(-1px, -1px); }
.tl-title { font-weight: 600; overflow-wrap: anywhere; line-height: 1.25; }
.tl-meta { display: flex; gap: 4px 10px; flex-wrap: wrap; font-size: .74rem; color: var(--muted); margin-top: 2px; }
.tl-meta .cat-tag { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-size: .64rem; }
.tl-p { color: var(--rose); font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-row.done .tl-title { text-decoration: line-through; color: var(--muted); }
.tl-row.done .tl-card { background: var(--surface-2); box-shadow: none; }
.check.tl-check { width: 34px; height: 34px; margin: 0; border-radius: 50%; border-color: var(--gold); }
.tl-row.done .check.tl-check { background: var(--rose); color: var(--rose-ink); border-color: var(--rose); }
.tl-row.done .check.pop { animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.tl-row.future .tl-check { opacity: .4; cursor: not-allowed; }
.tl-free { text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--muted); padding: 18px 0 6px; }
.tl-add { width: 100%; grid-template-columns: 44px 44px minmax(0, 1fr); background: none; border: 0; font: inherit; font-weight: 600; color: var(--muted); text-align: left; cursor: pointer; }
.tl-node.tl-plus { background: transparent; border: 1.5px dashed var(--gold); box-shadow: none; color: var(--rose); font-size: 1.4rem; }
.tl-add:hover { color: var(--rose); }

/* barra di navigazione in basso */
.tabbar { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 40; width: 100%; max-width: 640px; display: grid; grid-template-columns: 1fr 1fr 84px 1fr 1fr; margin: 0; padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--gold); box-shadow: 0 -6px 20px rgba(58, 42, 44, .07); }
.tabbar .tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px 2px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; min-width: 0; }
.tabbar .tab + .tab { border-left: 0; }
.tabbar .tab[aria-selected="true"] { background: none; color: var(--rose); }
.tabbar .tab[aria-selected="true"]::before { content: ""; position: absolute; top: -12px; left: 50%; width: 8px; height: 8px; background: var(--rose); transform: translateX(-50%) rotate(45deg); }
.tb-ico { display: grid; place-items: center; height: 26px; }
.tb-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fab { left: 50%; right: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); width: 54px; height: 54px; transform: translateX(-50%) rotate(45deg); z-index: 41; box-shadow: 4px 4px 0 var(--champagne); }
.fab svg { transform: rotate(-45deg); }
.fab:hover { transform: translateX(-50%) rotate(45deg) translate(-2px, -2px); box-shadow: 6px 6px 0 var(--champagne); }
.fab:active { transform: translateX(-50%) rotate(45deg) translate(2px, 2px); box-shadow: 1px 1px 0 var(--champagne); }
.toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 110px); }
@media (max-width: 380px) { .hero.hero-compact { grid-template-columns: 96px minmax(0, 1fr); } .hc-ring { width: 96px; height: 96px; } .hero-compact .score-num { font-size: 1.9rem; } .tl-row, .tl-add { grid-template-columns: 38px 40px minmax(0, 1fr) auto; gap: 0 8px; } .tl-row::before { left: 66px; } .tl-node { width: 40px; height: 40px; } }
@media (max-width: 440px) { .tabbar .tab { letter-spacing: .03em; font-size: .58rem; } .tabbar { grid-template-columns: 1fr 1fr 74px 1fr 1fr; padding-inline: 2px; } }
.desk-banner { height: 150px; } .desk-photo { object-position: 50% 36%; }
.dream-calbox { display: grid; gap: 4px; padding: 10px 12px; border: 1px dashed var(--gold); background: var(--surface-2); }
.dream-calbox b { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.dream-calbox small { font-size: .8rem; color: var(--muted); }
.dream-calbox .dream-btns { margin-top: 4px; }
.dream-calbox a.chip { text-decoration: none; color: inherit; }
.badge-on { display: flex; align-items: center; gap: 12px; width: 100%; margin: -6px 0 20px; padding: 10px 14px; border: 1px solid var(--gold); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; font-size: .88rem; text-align: left; cursor: pointer; box-shadow: 3px 3px 0 var(--blush); }
.badge-dot { flex: none; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 15px; background: #E5484D; color: #fff; display: grid; place-items: center; font-size: .85rem; font-variant-numeric: tabular-nums; }
.help-card { position: relative; margin: 0 0 18px; padding: 14px 14px 14px; background: linear-gradient(160deg, var(--surface) 40%, var(--hero-c) 140%); border: 1px solid var(--gold); outline: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); outline-offset: -6px; box-shadow: 4px 4px 0 var(--blush); display: grid; gap: 10px; }
.help-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.help-ico { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--gold); background: var(--surface); color: var(--rose); transform: rotate(45deg); margin: 4px; }
.help-ico svg { transform: rotate(-45deg); }
.help-head b { display: block; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.15; }
.help-head p { margin: 2px 0 0; font-size: .88rem; color: var(--muted); }
.help-steps { margin: 0; padding: 0; list-style: none; counter-reset: hs; display: grid; gap: 8px; }
.help-steps li { counter-increment: hs; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: .88rem; line-height: 1.35; }
.help-steps li::before { content: counter(hs); width: 24px; height: 24px; display: grid; place-items: center; background: var(--rose); color: var(--rose-ink); font-weight: 700; font-size: .75rem; }
.help-card .btn { justify-self: end; }
.help-mini { display: block; margin: 0 0 12px auto; border: 1px solid var(--gold); background: var(--surface); color: var(--muted); font: inherit; font-size: .74rem; font-weight: 600; letter-spacing: .08em; padding: 5px 11px; cursor: pointer; }
.help-mini:hover { color: var(--rose); }

/* ================= Stili per tutti (meno "girly") ================= */
:root[data-skin="studio"] {
  --bg: #F5F5F3; --surface: #FFFFFF; --surface-2: #F0F0EE; --ink: #1C1C1E; --muted: #76767B;
  --line: #CFCFCF; --soft-line: #E6E6E6; --blush: #EAEAEA; --rose: #1C1C1E; --rose-ink: #FFFFFF;
  --champagne: #E3E3E3; --gold: #CDCDCD; --hero-bg: #FFFFFF; --hero-a: #FFFFFF; --hero-c: #F3F3F1;
  --hero-ink: #1C1C1E; --hero-soft: #8A8A8F; --veil: #ECECEC; --chip-ink: #1C1C1E; --pattern: transparent;
  --c-self: #E9DCD3; --c-study: #DAE2EC; --c-sport: #DCE7DA; --c-home: #ECE5D8; --c-work: #E1DEEE; --c-social: #F0E1D4;
  --font-display: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif;
}
:root[data-skin="salvia"] {
  --bg: #F2F0E8; --surface: #FBFAF5; --surface-2: #EAE7DC; --ink: #2E392E; --muted: #78836F;
  --line: #A8B59E; --soft-line: #DADFD0; --blush: #DCE4D2; --rose: #5B7B57; --rose-ink: #FFFFFF;
  --champagne: #E6DEC6; --gold: #A69D7B; --hero-bg: #EEF1E6; --hero-a: #FBFAF5; --hero-c: #DFE7D6;
  --hero-ink: #2E392E; --hero-soft: #7D8A74; --veil: #E6E8DD; --chip-ink: #2E392E; --pattern: rgba(91, 123, 87, .06);
  --c-self: #E8D9C8; --c-study: #E6DDB8; --c-sport: #C9DABF; --c-home: #DDD2C2; --c-work: #CFD6DF; --c-social: #EBD0B8;
  --font-display: "Fraunces", Georgia, serif; --font-body: "Jost", system-ui, sans-serif;
}
:root[data-skin="oceano"] {
  --bg: #F1F4F8; --surface: #FFFFFF; --surface-2: #E8EDF4; --ink: #13203A; --muted: #67748A;
  --line: #B5C1D3; --soft-line: #DAE1EB; --blush: #DAE3F0; --rose: #1F3B66; --rose-ink: #FFFFFF;
  --champagne: #E9DFC4; --gold: #B49B5F; --hero-bg: #EAF0F8; --hero-a: #FFFFFF; --hero-c: #D9E4F2;
  --hero-ink: #13203A; --hero-soft: #6A7890; --veil: #E3E9F1; --chip-ink: #13203A; --pattern: transparent;
  --c-self: #E3D6EA; --c-study: #F0E2BC; --c-sport: #CFE5D9; --c-home: #E5D8CB; --c-work: #CFDDF0; --c-social: #F2D5C4;
  --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif;
}
:root[data-skin="grafite"] {
  --bg: #111317; --surface: #1A1D22; --surface-2: #242830; --ink: #ECEEF1; --muted: #9AA2AD;
  --line: #3A414B; --soft-line: #2A2F37; --blush: #262B33; --rose: #4FD1C5; --rose-ink: #0D1A19;
  --champagne: #2C323B; --gold: #47505C; --hero-bg: #1A1D22; --hero-a: #1F2329; --hero-c: #15181C;
  --hero-ink: #ECEEF1; --hero-soft: #9AA2AD; --veil: #08090B; --chip-ink: #0D1A19; --pattern: transparent;
  --danger: #FF8A8A; --ok: #7FD1A8;
  --c-self: #6B4E6E; --c-study: #7A6A3E; --c-sport: #3E6E5C; --c-home: #6A5A4E; --c-work: #3F5A82; --c-social: #84563F;
  --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif;
}
:root[data-skin="terra"] {
  --bg: #F6F0E8; --surface: #FFFCF7; --surface-2: #EFE4D7; --ink: #3A2A20; --muted: #8B7568;
  --line: #C8A68D; --soft-line: #EADCCD; --blush: #EFD8C6; --rose: #BD5E3B; --rose-ink: #FFFFFF;
  --champagne: #EEDCB6; --gold: #B78658; --hero-bg: #F8EADF; --hero-a: #FFFCF7; --hero-c: #F0D9C8;
  --hero-ink: #3A2A20; --hero-soft: #957B6C; --veil: #EFE3D6; --chip-ink: #3A2A20; --pattern: rgba(183, 134, 88, .07);
  --c-self: #EDCFC0; --c-study: #EEDDB4; --c-sport: #CFDCC2; --c-home: #E1CDBB; --c-work: #D3D3E2; --c-social: #F1CBA8;
  --font-display: "Fraunces", Georgia, serif; --font-body: "Jost", system-ui, sans-serif;
}
/* negli stili sobri: niente scacchiera e niente rombo sui giorni, angoli un po' più morbidi */
:root[data-skin="studio"] .hero-checker, :root[data-skin="oceano"] .hero-checker, :root[data-skin="grafite"] .hero-checker, :root[data-skin="salvia"] .hero-checker, :root[data-skin="terra"] .hero-checker { display: none; }
:root[data-skin="studio"] .hero, :root[data-skin="oceano"] .hero, :root[data-skin="grafite"] .hero { outline: 0; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.05); border-color: var(--soft-line); }
:root[data-skin="studio"] .score-num, :root[data-skin="oceano"] .score-num, :root[data-skin="grafite"] .score-num { letter-spacing: -.04em; }
:root[data-skin="studio"] .score-unit, :root[data-skin="oceano"] .score-unit, :root[data-skin="grafite"] .score-unit, :root[data-skin="studio"] .desk-greet b, :root[data-skin="oceano"] .desk-greet b, :root[data-skin="grafite"] .desk-greet b, :root[data-skin="studio"] .tl-date i, :root[data-skin="oceano"] .tl-date i, :root[data-skin="grafite"] .tl-date i, :root[data-skin="studio"] .week-label small, :root[data-skin="oceano"] .week-label small, :root[data-skin="grafite"] .week-label small { font-style: normal; }
:root[data-skin="studio"] .brand-mark, :root[data-skin="oceano"] .brand-mark, :root[data-skin="grafite"] .brand-mark { transform: none; border-radius: 6px; box-shadow: none; }
:root[data-skin="studio"] .brand, :root[data-skin="oceano"] .brand, :root[data-skin="grafite"] .brand { font-style: normal; }
:root[data-skin="studio"] .tl-card, :root[data-skin="oceano"] .tl-card, :root[data-skin="grafite"] .tl-card, :root[data-skin="studio"] .strip-day, :root[data-skin="oceano"] .strip-day, :root[data-skin="grafite"] .strip-day, :root[data-skin="studio"] .next-dream, :root[data-skin="oceano"] .next-dream, :root[data-skin="grafite"] .next-dream, :root[data-skin="studio"] .hero, :root[data-skin="oceano"] .hero, :root[data-skin="grafite"] .hero, :root[data-skin="studio"] .desk-banner, :root[data-skin="oceano"] .desk-banner, :root[data-skin="grafite"] .desk-banner { border-radius: 14px; }
:root[data-skin="studio"] .desk-banner, :root[data-skin="oceano"] .desk-banner, :root[data-skin="grafite"] .desk-banner { outline: 0; }
:root[data-skin="studio"] .tl-card, :root[data-skin="oceano"] .tl-card, :root[data-skin="grafite"] .tl-card { box-shadow: none; border-color: var(--soft-line); }
:root[data-skin="studio"] .fab, :root[data-skin="oceano"] .fab, :root[data-skin="grafite"] .fab { border-radius: 16px; }
:root[data-skin="studio"] .tl-head, :root[data-skin="oceano"] .tl-head, :root[data-skin="grafite"] .tl-head { border-bottom-color: var(--soft-line); }
#dlg-help .help-card { margin: 0; box-shadow: none; outline: 0; border: 0; background: transparent; padding: 0; }
.help-btn { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; width: 34px; height: 34px; border: 1px solid var(--gold); color: var(--ink); background: var(--surface); }

/* ================= Perla: stile predefinito, chiaro e leggibile (contrasti AA) ================= */
:root[data-skin="perla"] {
  --bg: #FFFCFA; --surface: #FFFFFF; --surface-2: #F7F1EF; --ink: #2B2024; --muted: #6E6266;
  --line: #D9CDD0; --soft-line: #EFE6E4; --blush: #F6E9E9; --rose: #A84A5F; --rose-ink: #FFFFFF;
  --champagne: #F1E6D6; --gold: #D9C6B8; --hero-bg: #FFFFFF; --hero-a: #FFFFFF; --hero-c: #FBF3F2;
  --hero-ink: #2B2024; --hero-soft: #6E6266; --veil: #F3ECEA; --chip-ink: #2B2024; --pattern: transparent;
  --c-self: #F3D9DA; --c-study: #F1E4C4; --c-sport: #D9E7D6; --c-home: #EADFD3; --c-work: #DCDDF0; --c-social: #F6DCC9;
  --font-display: "Fraunces", Georgia, serif; --font-body: "Inter", system-ui, sans-serif;
}
.skin-chip[data-skin="perla"] i { background: linear-gradient(135deg, #FFFCFA 50%, #A84A5F 50%); }
.skin-chip[data-skin="studio"] i { background: linear-gradient(135deg, #FFFFFF 50%, #1C1C1E 50%); }
.skin-chip[data-skin="salvia"] i { background: linear-gradient(135deg, #F2F0E8 50%, #5B7B57 50%); }
.skin-chip[data-skin="oceano"] i { background: linear-gradient(135deg, #F1F4F8 50%, #1F3B66 50%); }
.skin-chip[data-skin="grafite"] i { background: linear-gradient(135deg, #111317 50%, #4FD1C5 50%); }
.skin-chip[data-skin="terra"] i { background: linear-gradient(135deg, #F6F0E8 50%, #BD5E3B 50%); }

/* ================= Schermata "Focus su oggi": pulita, poche cose, facili da toccare ================= */
.today-hd { display: flex; align-items: center; gap: 16px; margin: 6px 0 18px; }
.today-photo { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: 50% 36%; flex: none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--line); }
.today-txt { min-width: 0; }
.today-txt small { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.today-txt h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 8.5vw, 2.5rem); line-height: 1.05; margin: 2px 0 0; white-space: nowrap; }
.hero.hero-lite { display: block; background: var(--hero-c); color: var(--ink); border: 0; outline: 0; box-shadow: none; border-radius: 18px; padding: 16px 16px 6px; }
.hero-lite .next-reward .nr-top { font-size: .95rem; font-weight: 600; }
.hero-lite .next-reward .nr-top b { color: var(--rose); }
.hero.hero-lite .bar { height: 7px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--ink) 10%, transparent); margin-top: 10px; }
.hero.hero-lite .bar > i { background: var(--rose); border-radius: 4px; }
.lite-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .86rem; color: var(--muted); margin-top: 12px; }
.lite-stats b { color: var(--ink); font-weight: 700; }
.lite-stats .score-num { font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: 0; font-weight: 700; }
.hero-lite .week-nav { margin-top: 10px; padding-top: 4px; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.hero-lite .week-nav .icon-btn { width: 44px; height: 44px; font-size: 1.4rem; }
.hero-lite .week-label span { font-size: .72rem; }
.hero-lite .week-label small { font-style: normal; font-family: var(--font-body); color: var(--muted); }
.next-dream { border: 0; box-shadow: none; border-radius: 18px; background: var(--surface-2); margin-top: 10px; }
.next-dream .nd-art { border: 0; border-radius: 12px; }
#tab-week .strip-day { border: 0; border-radius: 14px; background: var(--surface-2); box-shadow: none; padding: 8px 2px 0; min-height: 60px; }
#tab-week .strip-day.today { background: var(--rose); color: var(--rose-ink); }
#tab-week .strip-day.sel:not(.today) { background: var(--blush); outline: 2px solid var(--rose); outline-offset: -2px; }
#tab-week .strip-day.sel { transform: none; box-shadow: none; }
#tab-week .strip-fill { margin: 6px 8px 8px; height: 4px; border-radius: 2px; }
#tab-week .strip-fill > i { border-radius: 2px; }
#tab-week .strip-day.today .strip-fill { background: color-mix(in srgb, var(--rose-ink) 30%, transparent); }
#tab-week .strip-day.today .strip-fill > i { background: var(--rose-ink); }
.tl-head { border-bottom: 1px solid var(--soft-line); }
.tl-date { font-size: 1.3rem; }
.tl-date i { font-style: normal; font-size: 1rem; }
.tl-row { border-bottom: 1px solid var(--soft-line); padding: 6px 0; }
.tl-row::before { border-left: 2px solid var(--soft-line); }
.tl-node { width: 38px; height: 38px; box-shadow: 0 0 0 3px var(--bg); }
.tl-row, .tl-add { grid-template-columns: 42px 38px minmax(0, 1fr) auto; }
.tl-row::before { left: 71px; }
.tl-card { border: 0; box-shadow: none; background: transparent; padding: 8px 2px; }
.tl-row.done .tl-card { background: transparent; }
.tl-title { font-size: 1rem; }
.tl-meta { font-size: .78rem; }
.check.tl-check { width: 40px; height: 40px; border: 2px solid var(--line); }
.tl-time { font-size: .82rem; color: var(--muted); }
.tl-node.tl-plus { border-color: var(--line); }
.tabbar { border-top: 1px solid var(--soft-line); box-shadow: 0 -4px 16px rgba(0, 0, 0, .05); }
.tabbar .tab { font-size: .68rem; letter-spacing: .04em; text-transform: none; }
.tabbar .tab[aria-selected="true"]::before { top: -9px; width: 6px; height: 6px; border-radius: 50%; transform: translateX(-50%); }
.fab { border: 0; border-radius: 50%; transform: translateX(-50%); box-shadow: 0 6px 18px rgba(0, 0, 0, .2); width: 58px; height: 58px; }
.fab svg { transform: none; }
.fab:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.fab:active { transform: translateX(-50%) translateY(1px); box-shadow: 0 3px 10px rgba(0, 0, 0, .2); }
@media (max-width: 440px) { .tabbar .tab { font-size: .64rem; letter-spacing: 0; } }
@media (max-width: 380px) { .today-photo { width: 64px; height: 64px; } .tl-row, .tl-add { grid-template-columns: 38px 36px minmax(0, 1fr) auto; gap: 0 8px; } .tl-row::before { left: 63px; } .tl-node { width: 36px; height: 36px; } }

/* ================= Salvia rifinito: stile predefinito, neutro e leggibile ================= */
:root[data-skin="salvia"] {
  --bg: #F7F6F1; --surface: #FFFFFF; --surface-2: #EFEEE6; --ink: #222B22; --muted: #616B5B;
  --line: #CDD3C4; --soft-line: #E6E8DE; --blush: #E2E9DC; --rose: #4A6B47; --rose-ink: #FFFFFF;
  --champagne: #ECE6D2; --gold: #CEC8B3; --hero-bg: #FFFFFF; --hero-a: #FFFFFF; --hero-c: #ECF0E6;
  --hero-ink: #222B22; --hero-soft: #616B5B; --veil: #E9EAE1; --chip-ink: #222B22; --pattern: transparent;
  --c-self: #EBD9CF; --c-study: #ECE1BE; --c-sport: #CFE0C8; --c-home: #E2D7C8; --c-work: #D5DCE6; --c-social: #EED4BF;
  --font-display: "Fraunces", Georgia, serif; --font-body: "Inter", system-ui, sans-serif;
}

/* ================= Struttura A "Focus su oggi": data grande, un obiettivo, lista semplice ================= */
.today-photo, .greet-sep, #greet-text { display: none; }
.today-hd { margin: 16px 0 18px; }
.today-txt small { font-size: .8rem; }
.today-txt h1 { font-size: clamp(2.3rem, 10.5vw, 2.9rem); }
.lite-stats, #next-dream { display: none !important; }
.hero.hero-lite { padding: 16px 16px 4px; }
/* giorni: solo lettera e numero nel cerchio */
#tab-week .strip { gap: 2px; margin: 16px 0 10px; }
#tab-week .strip-day { background: transparent; min-height: 0; padding: 2px 0 4px; border-radius: 12px; color: var(--ink); outline: 0; }
#tab-week .strip-day small { font-size: .66rem; }
#tab-week .strip-day b { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; margin: 3px auto 0; font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1; }
#tab-week .strip-day.today, #tab-week .strip-day.sel:not(.today) { background: transparent; color: var(--ink); outline: 0; }
#tab-week .strip-day.today small { color: var(--rose); opacity: 1; }
#tab-week .strip-day.today b { background: var(--rose); color: var(--rose-ink); }
#tab-week .strip-day.sel:not(.today) b { box-shadow: inset 0 0 0 2px var(--rose); }
#tab-week .strip-day.perfect b::after { content: none; }
#tab-week .strip-fill, #tab-week .strip-day.today .strip-fill { width: 20px; height: 3px; margin: 5px auto 0; background: var(--soft-line); }
#tab-week .strip-day.today .strip-fill > i, #tab-week .strip-fill > i { background: var(--rose); }
/* la lista */
.tl-head { border: 0; margin: 4px 0 2px; padding-bottom: 4px; }
.tl-date { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; }
.tl-head.today .tl-date { display: none; }
.tl-row { grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; padding: 4px 0; border-bottom: 1px solid var(--soft-line); position: relative; }
.tl-row::before, .tl-row > .tl-node, .tl-row > .tl-time { display: none; }
.check.tl-check { order: -1; width: 30px; height: 30px; border-width: 1.5px; }
.tl-card { padding: 10px 56px 10px 0; }
.tl-p { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: .85rem; }
.tl-mtime { color: var(--ink); font-weight: 600; }
.tl-group { margin-top: 10px; }
.tl-add { display: block; padding: 16px 0 6px; font-weight: 500; color: var(--muted); }
.tl-add > .tl-time, .tl-add > .tl-node { display: none; }
.tl-add::before { content: "+ "; color: var(--rose); font-weight: 700; }
@media (max-width: 380px) { .tl-row { grid-template-columns: auto minmax(0, 1fr); } #tab-week .strip-day b { width: 34px; height: 34px; } }
.check.tl-check { position: relative; } .check.tl-check::after { content: ""; position: absolute; inset: -8px; }

/* ================= Studio rifinito: stile predefinito, semplice e neutro ================= */
:root[data-skin="studio"] {
  --bg: #F7F7F5; --surface: #FFFFFF; --surface-2: #EFEFEC; --ink: #1F2328; --muted: #656B73;
  --line: #D4D6D9; --soft-line: #E7E8EA; --blush: #E9EAEC; --rose: #1F2328; --rose-ink: #FFFFFF;
  --champagne: #E5E6E8; --gold: #D4D6D9; --hero-c: #EFEFEC; --hero-ink: #1F2328; --hero-soft: #656B73;
  --c-self: #F2E3C9; --c-study: #D9E4F2; --c-sport: #D7EAD9; --c-home: #ECE3D6; --c-work: #E0DDF0; --c-social: #F4DCCB;
}
/* niente corsivi, niente rombi: aspetto pulito per tutti */
:root[data-skin="studio"] .brand, :root[data-skin="studio"] .brand span, :root[data-skin="salvia"] .brand span, :root[data-skin="oceano"] .brand span, :root[data-skin="grafite"] .brand span, :root[data-skin="terra"] .brand span { font-style: normal; font-family: var(--font-body); font-weight: 700; letter-spacing: -.01em; }
:root[data-skin="studio"] .brand-mark, :root[data-skin="salvia"] .brand-mark, :root[data-skin="oceano"] .brand-mark, :root[data-skin="grafite"] .brand-mark, :root[data-skin="terra"] .brand-mark { transform: none; border-radius: 7px; box-shadow: none; width: 20px; height: 20px; }
:root[data-skin="studio"] .today-txt h1 { font-weight: 800; letter-spacing: -.03em; }
:root[data-skin="studio"] .lux-head::after, :root[data-skin="studio"] .day-name::before { content: none; }
:root[data-skin="studio"] .help-btn, :root[data-skin="studio"] .lang-btn, :root[data-skin="studio"] .icon-btn { border-radius: 10px; }
:root[data-skin="studio"] .lang-btn, :root[data-skin="studio"] .help-btn { border-color: var(--line); }
:root[data-skin="studio"] .today-pill, :root[data-skin="studio"] .perfect-pill { border-radius: 6px; }

/* ================= Copertina del mese con sticker animati ================= */
.today-hd.cover { position: relative; height: 150px; border-radius: 20px; overflow: hidden; align-items: flex-end; padding: 16px 18px; margin: 4px 0 16px; background: var(--surface-2); }
.cover-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cv-deco { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover .today-txt { position: relative; z-index: 1; }
.cover .today-txt small { color: #4F5560; }
.cover .today-txt h1 { color: #1F2328; }
.cover-dark .today-txt small { color: rgba(255, 255, 255, .8); }
.cover-dark .today-txt h1 { color: #FFFFFF; }
.cv-p { position: absolute; display: block; pointer-events: none; animation-iteration-count: infinite; animation-timing-function: linear; will-change: transform; }
.cv-p svg { display: block; width: 100%; height: 100%; }
.cv-snow { border-radius: 50%; background: var(--c); animation-name: cvFall; opacity: .95; box-shadow: 0 0 2px rgba(0, 0, 0, .08); }
.cv-leaf, .cv-petal { animation-name: cvLeaf; }
.cv-rain { width: 1.5px !important; background: linear-gradient(transparent, var(--c)); animation-name: cvRain; opacity: .75; }
.cv-spark { border-radius: 50%; background: var(--c); animation-name: cvFloat; animation-timing-function: ease-in-out; }
.cv-star { border-radius: 50%; background: var(--c); animation-name: cvTwinkle; animation-timing-function: ease-in-out; }
.cv-shoot { background: linear-gradient(90deg, transparent, var(--c)); animation-name: cvShoot; opacity: 0; }
@keyframes cvFall { 0% { transform: translate(0, 0); } 50% { transform: translate(14px, 90px); } 100% { transform: translate(-4px, 190px); } }
@keyframes cvLeaf { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(22px, 45px) rotate(90deg); } 50% { transform: translate(-8px, 95px) rotate(180deg); } 75% { transform: translate(18px, 140px) rotate(270deg); } 100% { transform: translate(0, 195px) rotate(360deg); } }
@keyframes cvRain { 0% { transform: translate(0, 0) rotate(12deg); } 100% { transform: translate(-40px, 190px) rotate(12deg); } }
@keyframes cvFloat { 0%, 100% { transform: translateY(0); opacity: .2; } 50% { transform: translateY(-22px); opacity: .9; } }
@keyframes cvTwinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes cvShoot { 0%, 80% { opacity: 0; transform: translate(0, 0) rotate(-20deg); } 86% { opacity: 1; } 100% { opacity: 0; transform: translate(-160px, 60px) rotate(-20deg); } }
.cv-sun { transform-box: fill-box; transform-origin: center; animation: cvSpin 40s linear infinite; }
@keyframes cvSpin { to { transform: rotate(360deg); } }
.cv-waves { animation: cvWave 6s ease-in-out infinite alternate; }
@keyframes cvWave { to { transform: translateX(30px); } }
.cv-bulb { animation: cvTwinkle 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cv-p, .cv-sun, .cv-waves, .cv-bulb { animation: none; } }
.cv-deco { overflow: visible; }
.tl-head .tl-date { display: none; } .tl-head { min-height: 0; } .today-txt h1, .today-txt small { transition: opacity .2s; }

/* ================= Copertina stile 2026: sfumature, grana, vetro ================= */
.today-hd.cover { height: 168px; border-radius: 24px; padding: 14px; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 30px -12px rgba(30, 30, 40, .25); }
.cv-blob { position: absolute; aspect-ratio: 1; border-radius: 50%; filter: blur(34px); opacity: .95; animation: cvDrift 22s ease-in-out infinite alternate; }
@keyframes cvDrift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8%, 6%) scale(1.12); } 100% { transform: translate(-6%, -4%) scale(.95); } }
.cv-orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #FFFFFF 0%, var(--c) 45%, transparent 72%); filter: blur(1px); box-shadow: 0 0 60px 20px color-mix(in srgb, var(--c) 45%, transparent); animation: cvGlow 6s ease-in-out infinite alternate; }
@keyframes cvGlow { to { transform: scale(1.06); opacity: .85; } }
.cover-dark .cv-orb { background: radial-gradient(circle at 40% 40%, #FFFFFF 0%, var(--c) 55%, transparent 74%); box-shadow: 0 0 40px 8px color-mix(in srgb, var(--c) 35%, transparent); }
.cv-grain { position: absolute; inset: 0; opacity: .22; mix-blend-mode: soft-light; pointer-events: none; }
.cover-dark .cv-grain { opacity: .3; }
.cv-far { filter: blur(1.2px); opacity: .6; }
.cv-snow { box-shadow: none; }
.cv-leaf svg, .cv-petal svg { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .08)); }
.cv-bokeh { border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, transparent 70%); animation-name: cvTwinkle; animation-timing-function: ease-in-out; opacity: .7; filter: blur(2px); }
/* data su vetro smerigliato */
.cover .today-txt { padding: 10px 16px 12px; border-radius: 18px; background: rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 8px 24px -10px rgba(30, 30, 40, .25); }
.cover-dark .today-txt { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }
.cover .today-txt h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
@media (prefers-reduced-motion: reduce) { .cv-blob, .cv-orb { animation: none; } }

/* ================= Nuove funzioni: importanti, sottoattività, rimasti indietro, abitudini, umore ================= */
.tl-star { color: #E0A526; }
.tl-row.starred .tl-title { font-weight: 700; }
.tl-subn { color: var(--muted); }
.tl-subs { list-style: none; margin: 6px 0 2px; padding: 0; display: grid; gap: 2px; }
.tl-sub { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 2px 0; border: 0; background: none; font: inherit; font-size: .88rem; color: var(--ink); text-align: left; cursor: pointer; }
.tl-sub i { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1.5px solid var(--line); display: grid; place-items: center; }
.tl-sub.on i { background: var(--rose); border-color: var(--rose); }
.tl-sub.on i::after { content: "✓"; color: var(--rose-ink); font-size: .7rem; font-style: normal; font-weight: 700; }
.tl-sub.on span { text-decoration: line-through; color: var(--muted); }
.star-field { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.star-field input { width: 20px; height: 20px; accent-color: var(--rose); }
.late-box { margin: 6px 0 12px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, #E0A526 12%, var(--surface)); border: 1px solid color-mix(in srgb, #E0A526 35%, transparent); }
.late-title { margin: 0 0 6px; color: #9A6A00; }
.late-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.late-row + .late-row { border-top: 1px solid color-mix(in srgb, #E0A526 25%, transparent); }
.late-txt { display: flex; flex-direction: column; min-width: 0; }
.late-txt b { font-weight: 600; overflow-wrap: anywhere; }
.late-txt small { color: var(--muted); font-size: .78rem; }
.hab-box { margin: 6px 0 10px; }
.hab-head { display: flex; align-items: center; justify-content: space-between; }
.hab-head .tl-group { margin: 0; }
.hab-manage { font-size: .82rem; font-weight: 600; color: var(--rose); background: none; border: 0; cursor: pointer; padding: 8px 0; }
.hab-empty { margin: 2px 0 4px; }
.hab-row { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 8px; scrollbar-width: none; }
.hab-row::-webkit-scrollbar { display: none; }
.hab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.hab-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; }
.hab.on { background: var(--rose); border-color: var(--rose); color: var(--rose-ink); }
.hab.on .hab-dot { background: var(--rose-ink); border-color: var(--rose-ink); }
.hab.future { opacity: .5; }
.hab-st { font-size: .75rem; }
.hab-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hab-li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.mood-box { margin: 18px 0 8px; padding: 14px; border-radius: 16px; background: var(--surface-2); }
.mood-box .tl-group { margin: 0 0 8px; }
.mood-row { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.mood { flex: 1; min-height: 46px; border-radius: 14px; border: 1.5px solid transparent; background: var(--surface); font-size: 1.5rem; cursor: pointer; filter: grayscale(.6); opacity: .75; transition: transform .12s; }
.mood.on { border-color: var(--rose); filter: none; opacity: 1; transform: scale(1.06); }
.mood-note { width: 100%; border: 1px solid var(--soft-line); border-radius: 12px; background: var(--surface); padding: 10px 12px; font: inherit; font-size: .9rem; color: var(--ink); resize: vertical; }
.hist-mood { font-size: .85rem; color: var(--muted); margin-top: 6px; letter-spacing: .05em; }
.tl-group { color: var(--muted); } .late-title { color: #8A5E00; }

/* ================= Installa sul telefono ================= */
.install-btn { width: 100%; }
.install-bar { display: flex; align-items: center; gap: 4px; margin: 6px 0 12px; padding: 4px 4px 4px 12px; border-radius: 16px; background: var(--rose); color: var(--rose-ink); }
.install-go { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; font-size: .9rem; text-align: left; cursor: pointer; }
.install-ico { font-size: 1.3rem; }
.install-x { width: 40px; height: 40px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--rose-ink) 15%, transparent); color: inherit; font-size: 1.2rem; cursor: pointer; }
.inst-steps { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.inst-steps ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.inst-ico { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; }