/* Benvi – una colonna mobile-first (max 640px): fascia colorata in alto, schede a colori per le funzioni, guide come "fascicoli" con copertina. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../fonts/poppins-700.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("../fonts/inter-700.woff") format("woff"); }
:root {
  --bg: #F3F4F1; --card: #FFFFFF; --input-bg: #FFFFFF;
  --ink: #17212B; --ink-2: #384452; --muted: #57636F;
  --line: #DEE2DF; --line-strong: #C6CCC9;
  --accent: #1F5FAD; --accent-hover: #174A87; --accent-ink: #1F5FAD; --accent-soft: #E4EDF8; --on-accent: #FFFFFF;
  --band: #1F5FAD; --band-ink: #FFFFFF; --band-sub: #DCE8F7; --sun: #FFC94D;
  --c-orange: #C2410C; --c-orange-soft: #FDEADF; --c-orange-ink: #9A3412;
  --c-teal: #0F766E; --c-teal-soft: #DDF3F0; --c-teal-ink: #0B5E57;
  --c-blue-soft: #E4EDF8; --c-blue-ink: #1F5FAD;
  --c-amber-soft: #FFF1D1; --c-amber-ink: #7A4D00;
  --c-purple-soft: #EEE8F9; --c-purple-ink: #5B3E9E;
  --c-green-soft: #E2F3E6; --c-green-ink: #1C6B3A;
  --amber-ink: #6E4500; --amber-soft: #FFF3DB;
  --green: #1C6B3A; --green-soft: #DFF2E5; --wa: #157A3E; --wa-hover: #11652F;
  --danger: #B42318; --focus: #F59E0B;
  --overlay: rgba(23,33,43,0.5); --bar: rgba(255,255,255,0.97); --topbar: rgba(243,244,241,0.95);
  --ai-bg: #EEF3FA; --ai-border: #9DB5D6; --shadow: rgba(23,33,43,0.12);
  --paper: #FFFFFF; --paper-ink: #111111; --paper-muted: #4A5560; --paper-accent: #1F5FAD; --paper-line: #E5E8EC;
  --font-display: "Poppins", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --radius: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1519; --card: #182128; --input-bg: #1C2730;
    --ink: #E8ECEF; --ink-2: #C5CDD4; --muted: #9AA6B1;
    --line: #26333D; --line-strong: #3A4955;
    --accent: #2C6CC0; --accent-hover: #3779CF; --accent-ink: #8DB8F0; --accent-soft: #1B2C40; --on-accent: #FFFFFF;
    --band: #17406F; --band-ink: #FFFFFF; --band-sub: #C9DAF0; --sun: #FFC94D;
    --c-orange: #B7410E; --c-orange-soft: #3A2116; --c-orange-ink: #F7A37A;
    --c-teal: #0E6F67; --c-teal-soft: #12322F; --c-teal-ink: #7FD6CB;
    --c-blue-soft: #1B2C40; --c-blue-ink: #8DB8F0;
    --c-amber-soft: #3A2D12; --c-amber-ink: #F5CE85;
    --c-purple-soft: #2A2240; --c-purple-ink: #C3AEF2;
    --c-green-soft: #16301F; --c-green-ink: #8FD8A8;
    --amber-ink: #F6CF8A; --amber-soft: #3A2C12;
    --green: #8FD8A8; --green-soft: #173323; --wa: #167A3F; --wa-hover: #1A8A48;
    --danger: #F59A8F; --overlay: rgba(0,0,0,0.6); --bar: rgba(24,33,40,0.97); --topbar: rgba(15,21,25,0.95);
    --ai-bg: #172434; --ai-border: #3B5677; --shadow: rgba(0,0,0,0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1519; --card: #182128; --input-bg: #1C2730;
  --ink: #E8ECEF; --ink-2: #C5CDD4; --muted: #9AA6B1;
  --line: #26333D; --line-strong: #3A4955;
  --accent: #2C6CC0; --accent-hover: #3779CF; --accent-ink: #8DB8F0; --accent-soft: #1B2C40; --on-accent: #FFFFFF;
  --band: #17406F; --band-ink: #FFFFFF; --band-sub: #C9DAF0; --sun: #FFC94D;
  --c-orange: #B7410E; --c-orange-soft: #3A2116; --c-orange-ink: #F7A37A;
  --c-teal: #0E6F67; --c-teal-soft: #12322F; --c-teal-ink: #7FD6CB;
  --c-blue-soft: #1B2C40; --c-blue-ink: #8DB8F0;
  --c-amber-soft: #3A2D12; --c-amber-ink: #F5CE85;
  --c-purple-soft: #2A2240; --c-purple-ink: #C3AEF2;
  --c-green-soft: #16301F; --c-green-ink: #8FD8A8;
  --amber-ink: #F6CF8A; --amber-soft: #3A2C12;
  --green: #8FD8A8; --green-soft: #173323; --wa: #167A3F; --wa-hover: #1A8A48;
  --danger: #F59A8F; --overlay: rgba(0,0,0,0.6); --bar: rgba(24,33,40,0.97); --topbar: rgba(15,21,25,0.95);
  --ai-bg: #172434; --ai-border: #3B5677; --shadow: rgba(0,0,0,0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.55; }
a { color: var(--accent-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { flex-shrink: 0; }
.num { font-variant-numeric: tabular-nums; }

#app { max-width: 640px; margin: 0 auto; min-height: 100vh; }
.page { padding-block: 22px 36px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 18px; }
.page.has-bottom { padding-bottom: 120px; }
.display { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.08; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.h1 { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.2; margin: 0; text-wrap: balance; }
.muted { color: var(--muted); margin: 0; }
.small { font-size: 15px; }
.block { display: block; }
.center { text-align: center; }
.lead { font-size: 19px; color: var(--ink-2); margin: 0; }
.label-caps { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 8px 0 -4px; }
.opt { font-weight: 400; color: var(--muted); font-size: 14px; }

/* barra in alto */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; align-items: center; gap: 10px; padding-block: 10px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); background: var(--topbar); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topbar-title { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; flex-shrink: 0; }
.iconbtn.small { width: 40px; height: 40px; }
.iconbtn.tiny { width: 36px; height: 36px; border-radius: 999px; }
.brandrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand-name { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.logo { width: 38px; height: 38px; border-radius: 12px; background: var(--sun); color: #17212B; display: inline-flex; align-items: center; justify-content: center; }
.logo.big { width: 64px; height: 64px; border-radius: 20px; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 700; }
.chip-btn.on-band { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.35); color: var(--band-ink); }

/* fascia home */
.band { background: var(--band); color: var(--band-ink); border-radius: 0 0 28px 28px; position: relative; overflow: hidden; }
.band::after { content: ""; position: absolute; right: -60px; top: -40px; width: 220px; height: 220px; border-radius: 50%; border: 28px solid rgba(255,201,77,0.18); pointer-events: none; }
.band-inner { position: relative; z-index: 1; padding-block: 20px 28px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 8px; }
.band-greet { margin: 18px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--sun); min-height: 1.6em; }
#greet { display: inline-block; }
#greet.in { animation: greetIn 0.45s ease-out; }
@keyframes greetIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.band-title { color: var(--band-ink); font-size: 34px; }
.band-sub { margin: 0; color: var(--band-sub); font-size: 17px; max-width: 34ch; }

/* lingua */
.lang-page { padding-top: 36px; }
.lang-hero { display: flex; flex-direction: column; gap: 12px; }
.greet-line { margin: 0; color: var(--muted); font-size: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lang-btn { min-height: 68px; border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 12px 14px; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.lang-btn.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.lang-native { font-size: 19px; font-weight: 700; }
.soon-tag { font-size: 13px; color: var(--muted); }

/* funzioni principali */
.features { display: grid; gap: 12px; }
.feature { position: relative; overflow: hidden; display: flex; align-items: stretch; justify-content: space-between; gap: 12px; padding: 20px; border-radius: 22px; color: var(--on-accent); text-decoration: none; min-height: 150px; }
.feature:hover { color: var(--on-accent); filter: brightness(1.06); }
.f-cv { background: var(--c-orange); }
.f-talk { background: var(--c-teal); }
.feature-txt { display: flex; flex-direction: column; gap: 6px; max-width: 58%; z-index: 1; }
.feature-title { font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.feature-sub { font-size: 15px; line-height: 1.4; opacity: 0.95; }
.small-feature { min-height: 0; }
.small-feature .feature-txt { max-width: 100%; }
.mini-cv { position: absolute; right: 16px; top: 18px; width: 96px; height: 124px; background: #FFFFFF; border-radius: 6px; transform: rotate(5deg); box-shadow: 0 10px 24px rgba(0,0,0,0.22); padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.mcv-name { height: 9px; width: 70%; border-radius: 3px; background: #17212B; }
.mcv-role { height: 6px; width: 50%; border-radius: 3px; background: #1F5FAD; margin-bottom: 4px; }
.mcv-line { height: 5px; width: 100%; border-radius: 3px; background: #D9DEE3; }
.mcv-line.short { width: 65%; }
.mcv-tag { margin-top: auto; align-self: flex-end; font-size: 11px; font-weight: 800; color: #9A3412; background: #FDEADF; padding: 2px 6px; border-radius: 6px; font-family: var(--font-display); }
.bubbles { position: absolute; right: 12px; top: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.bub { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 16px 16px 4px 16px; background: #FFFFFF; color: #0B5E57; font-weight: 700; font-size: 14px; box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
.bub.b1 { transform: rotate(-3deg); }
.bub.b2 { border-radius: 16px 16px 16px 4px; background: var(--sun); color: #17212B; margin-right: 14px; }

/* primi passi */
.steps-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.steps-ring { --p: 0; width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(var(--c-teal) calc(var(--p) * 1%), var(--line) 0); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.steps-ring span { width: 44px; height: 44px; border-radius: 50%; background: var(--card); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.steps-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.steps-title { font-weight: 700; font-size: 17px; }
.progress-big { display: flex; flex-direction: column; gap: 6px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.step.is-done { border-color: var(--c-teal); }
.step-row { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 12px; }
.step-check { position: relative; display: inline-flex; padding: 8px; }
.step-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.step-check .box { width: 30px; height: 30px; border-radius: 9px; border: 2px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; color: transparent; background: var(--input-bg); }
.step-check input:checked + .box { background: var(--c-teal); border-color: var(--c-teal); color: #FFFFFF; }
.step-check input:focus-visible + .box { outline: 3px solid var(--focus); outline-offset: 2px; }
.step-title { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; border: none; background: none; text-align: left; font-weight: 700; font-size: 17px; color: var(--ink); padding: 4px 6px; }
.step.is-done .step-title { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.step-title[aria-expanded="true"] .ic { transform: rotate(90deg); }
.step-body { padding: 0 16px 16px 62px; display: flex; flex-direction: column; gap: 8px; }
.step-body p { margin: 0; color: var(--ink-2); }
.text-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; text-decoration: none; }

/* guide orizzontali */
.gscroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 62%); gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); padding-right: 16px; }
.gcard { scroll-snap-align: start; display: flex; flex-direction: column; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); overflow: hidden; color: var(--ink); text-decoration: none; }
.gcard-cover { height: 86px; display: flex; align-items: center; padding: 0 16px; }
.gcard-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.gcard-title { font-weight: 700; font-size: 17px; line-height: 1.3; }
.gcard-meta { font-size: 14px; color: var(--muted); margin-top: auto; }
.c-blue .gcard-cover, .c-blue.pcat .pcat-ic, .cat-head.c-blue .pcat-ic, .g-cover.c-blue { background: var(--c-blue-soft); color: var(--c-blue-ink); }
.c-amber .gcard-cover, .c-amber.pcat .pcat-ic, .cat-head.c-amber .pcat-ic, .g-cover.c-amber { background: var(--c-amber-soft); color: var(--c-amber-ink); }
.c-orange .gcard-cover, .c-orange.pcat .pcat-ic, .cat-head.c-orange .pcat-ic, .g-cover.c-orange { background: var(--c-orange-soft); color: var(--c-orange-ink); }
.c-purple .gcard-cover, .c-purple.pcat .pcat-ic, .cat-head.c-purple .pcat-ic, .g-cover.c-purple { background: var(--c-purple-soft); color: var(--c-purple-ink); }
.c-teal .gcard-cover, .c-teal.pcat .pcat-ic, .cat-head.c-teal .pcat-ic, .g-cover.c-teal { background: var(--c-teal-soft); color: var(--c-teal-ink); }
.c-green .gcard-cover, .c-green.pcat .pcat-ic, .cat-head.c-green .pcat-ic, .g-cover.c-green { background: var(--c-green-soft); color: var(--c-green-ink); }

/* in arrivo */
.tile { border: 1px dashed var(--line-strong); background: var(--card); border-radius: var(--radius); padding: 14px; text-align: left; display: flex; flex-direction: column; gap: 10px; min-height: 120px; color: var(--ink); }
.tile-ic { width: 36px; height: 36px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tile-title { font-size: 15px; font-weight: 700; line-height: 1.35; }
.tile-soon { margin-top: auto; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; color: var(--muted); font-size: 15px; padding-top: 10px; }
.foot a { color: var(--muted); }

/* frasi */
.pcat { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); min-height: 140px; }
.pcat-ic { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; }
.pcat-title { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.15; }
.pcat-meta { margin-top: auto; font-size: 14px; color: var(--muted); }
.cat-head { display: flex; align-items: center; gap: 14px; }
.phrases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: ph; }
.phrase { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.phrase-main { width: 100%; border: none; background: none; text-align: left; padding: 16px 16px 10px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.phrase-it { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; }
.phrase-tr { color: var(--muted); font-size: 16px; }
.phrase-btns { display: flex; gap: 8px; padding: 0 16px 14px; }
.pbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border-radius: 999px; border: none; background: var(--c-teal); color: #FFFFFF; font-weight: 700; font-size: 15px; }
.pbtn.ghost { background: var(--c-teal-soft); color: var(--c-teal-ink); }

/* note */
.note { margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 16px; line-height: 1.5; display: flex; gap: 10px; align-items: flex-start; }
.note .ic { margin-top: 3px; }
.warn-note { background: var(--amber-soft); color: var(--amber-ink); }
.tip-note { background: var(--accent-soft); color: var(--accent-ink); }
.ok-note { background: var(--green-soft); color: var(--green); font-weight: 700; }

/* modulo CV */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 14px; margin: 0; min-width: 0; }
fieldset.card { padding-top: 12px; }
legend { font-weight: 700; padding: 0; margin-bottom: 8px; font-size: 17px; }
.card-title { margin: 0; font-size: 18px; font-weight: 700; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field label, .field legend { font-size: 15px; font-weight: 700; }
input[type=text], input[type=tel], input[type=email], input[type=search], input[type=month], input:not([type]), select {
  width: 100%; min-height: 50px; border: 1px solid var(--line-strong); background: var(--input-bg); color: var(--ink); border-radius: 12px; padding: 10px 12px; font-size: 17px;
}
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A96A3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lang-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.lang-row .field:nth-child(2) { grid-column: 1; }
.lang-row .iconbtn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.subgroup { display: flex; flex-direction: column; gap: 8px; }
.subhead { margin: 4px 0 0; font-size: 15px; color: var(--muted); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--input-bg); font-size: 16px; line-height: 1.3; }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip input:checked + span::before { content: "✓"; margin-right: 6px; font-weight: 700; }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; }
.seg-opt span { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--input-bg); font-weight: 700; }
.seg-opt input:checked + span { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.seg-opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.radio-row, .check-row { display: flex; align-items: flex-start; gap: 10px; min-height: 40px; font-size: 16px; }
.radio-row input, .check-row input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.progress { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--c-teal); border-radius: 999px; }
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stepper a { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-weight: 800; font-family: var(--font-display); }
.stepper .done a { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.stepper .now a { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.step-of { margin: 0 0 -12px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.xp-head { display: flex; align-items: center; justify-content: space-between; }
.xp-num { width: 32px; height: 32px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.empty { margin: 0; padding: 18px; text-align: center; border: 2px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.ai-card { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px; border-radius: var(--radius); border: 1px dashed var(--ai-border); background: var(--ai-bg); color: var(--ink); }
.ai-title { font-weight: 700; display: block; }

/* pulsanti */
.btn-primary, .btn-ghost, .btn-wa, .link-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 18px; border-radius: 14px; font-weight: 700; font-size: 17px; text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); border: none; }
.btn-primary:hover { color: var(--on-accent); background: var(--accent-hover); }
.btn-primary.big { min-height: 58px; font-size: 18px; }
.btn-ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); }
.btn-ghost:hover { color: var(--ink); border-color: var(--muted); }
.btn-wa { background: var(--wa); color: var(--on-accent); border: none; }
.btn-wa:hover { color: var(--on-accent); background: var(--wa-hover); }
.link-btn { min-height: 40px; padding: 0 10px; background: none; border: none; font-size: 15px; color: var(--muted); }
.danger { color: var(--danger); }
.wide { width: 100%; }
.actions { display: flex; flex-direction: column; gap: 10px; }
.bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); background: var(--bar); border-top: 1px solid var(--line); max-width: 640px; margin: 0 auto; }

/* guide */
.guide p { margin: 0; }
.g-cover { height: 110px; border-radius: 22px; display: flex; align-items: flex-end; justify-content: space-between; padding: 16px 18px; }
.g-cover-ic { width: 54px; height: 54px; border-radius: 16px; background: var(--card); display: inline-flex; align-items: center; justify-content: center; }
.g-meta { font-weight: 700; font-size: 14px; }
.brief { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.brief-h { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.brief ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.brief li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; }
.brief li .ic { color: var(--c-teal); margin-top: 4px; }
.g-sec { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.g-h { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.2; margin: 0; text-wrap: balance; }
.g-ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.g-ul li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.words .word-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.words { display: flex; flex-direction: column; gap: 10px; }
.word { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); text-align: left; }
.word-it { font-weight: 700; }
.word-tr { color: var(--muted); font-size: 14px; }
.word .ic { color: var(--c-teal-ink); }
.gloss { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.gloss-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.gloss-item dt { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; color: var(--c-orange-ink); font-family: var(--font-display); font-size: 19px; }
.gloss-item dd { margin: 2px 0 0; color: var(--ink-2); }

/* bolletta interattiva */
.bill-wrap { display: flex; flex-direction: column; gap: 10px; }
.bill { background: var(--paper); color: var(--paper-ink); border-radius: 14px; box-shadow: 0 10px 28px var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.bill-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 2px solid #FFC94D; margin-bottom: 6px; flex-wrap: wrap; }
.bill-brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: #7A4D00; }
.bill-kind { font-size: 13px; color: var(--paper-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.bill-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; }
.bill-row.big .bill-v { font-size: 22px; font-weight: 800; }
.bill-l { color: var(--paper-muted); }
.bill-v { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.bill-row.hl, .bill-costs.hl { background: #FFF1D1; }
.bill-costs { margin-top: 6px; padding: 6px; border-radius: 10px; border-top: 1px solid var(--paper-line); }
.bill-costs-head { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 4px; }
.bill-cost { display: flex; justify-content: space-between; gap: 10px; }
.bill-cost .num { white-space: nowrap; }
.bill-cost { padding: 4px 0 4px 42px; color: var(--paper-muted); font-size: 14px; }
.hs { width: 32px; height: 32px; border-radius: 999px; border: 2px solid #C2410C; background: #FFFFFF; color: #C2410C; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.hs.on { background: #C2410C; color: #FFFFFF; }
.hs.small { width: 26px; height: 26px; font-size: 13px; }
.bill-note { margin: 0; display: flex; gap: 10px; align-items: flex-start; background: var(--c-orange-soft); color: var(--ink); border-radius: 14px; padding: 12px 14px; }

/* finestra "in arrivo" */
.overlay { position: fixed; inset: 0; z-index: 20; background: var(--overlay); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 640px; background: var(--card); border-radius: 24px 24px 0 0; padding-top: 20px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 12px; max-height: 92vh; overflow-y: auto; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; }
.badge { font-size: 13px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); padding: 5px 10px; border-radius: 999px; }

/* statistiche */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.kpi-n { font-family: var(--font-display); font-weight: 800; font-size: 30px; font-variant-numeric: tabular-nums; }
.kpi-l { font-size: 13px; color: var(--muted); }
.bar-row { display: flex; flex-direction: column; gap: 6px; }
.bar-top { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; flex-wrap: wrap; }
.bar { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--c-teal); border-radius: 999px; }
.stat-line { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.stat-line:last-child { border-bottom: none; }

/* CV */
.cv-paper { background: var(--paper); color: var(--paper-ink); border-radius: 6px; box-shadow: 0 8px 28px var(--shadow); padding: 26px 22px; font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; gap: 14px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.cv-head { border-bottom: 2px solid var(--paper-accent); padding-bottom: 10px; display: flex; flex-direction: column; gap: 2px; }
.cv-name { margin: 0; font-size: 25px; letter-spacing: -0.01em; }
.cv-role { margin: 0; color: var(--paper-accent); font-weight: 700; }
.cv-contacts { margin: 0; color: var(--paper-muted); font-size: 13px; }
.cv-sec h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--paper-accent); }
.cv-sec p { margin: 0; }
.cv-item { margin-bottom: 10px; }
.cv-item:last-child { margin-bottom: 0; }
.cv-item-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cv-dates { color: var(--paper-muted); font-size: 13px; white-space: nowrap; }
.cv-place { color: var(--paper-muted); font-size: 13px; }
.cv-gdpr { margin: 6px 0 0; font-size: 11px; color: var(--paper-muted); border-top: 1px solid var(--paper-line); padding-top: 8px; }

@media (min-width: 640px) {
  .features { grid-template-columns: 1fr 1fr; }
  .feature-txt { max-width: 100%; padding-top: 130px; }
  .cv-paper { padding: 36px 34px; }
  .gscroll { grid-auto-columns: minmax(200px, 44%); }
}
@media (prefers-reduced-motion: reduce) { #greet.in { animation: none; } }
@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #FFFFFF; }
  body * { visibility: hidden; }
  #print-area, #print-area * { visibility: visible; }
  #print-area { position: absolute; left: 0; top: 0; width: 100%; }
  .cv-paper { box-shadow: none; padding: 0; border-radius: 0; font-size: 11pt; }
}

/* ================= v0.3 ================= */
:root {
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%231F5FAD' stroke-opacity='0.025' stroke-width='1.6'%3E%3Cpath d='M44 14l6 24 24 6-24 6-6 24-6-24-24-6 24-6z'/%3E%3Ccircle cx='44' cy='44' r='9'/%3E%3Cpath d='M0 0l10 10M88 0L78 10M0 88l10-10M88 88l-10-10'/%3E%3C/g%3E%3C/svg%3E");
  --il-bg: #E4EDF8; --il-main: #1F5FAD; --il-sun: #FFC94D; --il-paper: #FFFFFF; --il-ink: #17212B; --il-orange: #C2410C;
  --ok: #1C6B3A; --ok-soft: #DDF3E4; --bad: #B42318; --bad-soft: #FDE4E1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%238DB8F0' stroke-opacity='0.02' stroke-width='1.6'%3E%3Cpath d='M44 14l6 24 24 6-24 6-6 24-6-24-24-6 24-6z'/%3E%3Ccircle cx='44' cy='44' r='9'/%3E%3Cpath d='M0 0l10 10M88 0L78 10M0 88l10-10M88 88l-10-10'/%3E%3C/g%3E%3C/svg%3E");
    --il-bg: #1B2C40; --il-main: #4F8FDC; --il-sun: #FFC94D; --il-paper: #E8ECEF; --il-ink: #0F1519; --il-orange: #E0672E;
    --ok: #8FD8A8; --ok-soft: #173323; --bad: #F59A8F; --bad-soft: #3D1D1A;
  }
}
:root[data-theme="dark"] {
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%238DB8F0' stroke-opacity='0.02' stroke-width='1.6'%3E%3Cpath d='M44 14l6 24 24 6-24 6-6 24-6-24-24-6 24-6z'/%3E%3Ccircle cx='44' cy='44' r='9'/%3E%3Cpath d='M0 0l10 10M88 0L78 10M0 88l10-10M88 88l-10-10'/%3E%3C/g%3E%3C/svg%3E");
  --il-bg: #1B2C40; --il-main: #4F8FDC; --il-sun: #FFC94D; --il-paper: #E8ECEF; --il-ink: #0F1519; --il-orange: #E0672E;
  --ok: #8FD8A8; --ok-soft: #173323; --bad: #F59A8F; --bad-soft: #3D1D1A;
}
body { background-color: var(--bg); background-image: var(--pattern); background-size: 88px 88px; }
.page.has-tabs { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.home-btn { margin-left: auto; }
.topbar .iconbtn:first-child + .topbar-title { flex: 1; }
.topbar-title { flex: 1; }

/* barra in basso */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; max-width: 640px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--bar); border-top: 1px solid var(--line); padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); backdrop-filter: blur(8px); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; min-height: 52px; text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 700; border-radius: 12px; }
.tab.on { color: var(--accent-ink); }
.tab.on .ic { background: var(--accent-soft); border-radius: 999px; padding: 2px 10px; width: 44px; }

/* testate delle pagine */
.phead { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; }
.phead .h1 { font-size: 24px; }
.phead .muted { color: inherit; opacity: 0.85; }
.phead-ic { width: 52px; height: 52px; border-radius: 16px; background: var(--card); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.phead.c-blue { background: var(--c-blue-soft); color: var(--c-blue-ink); }
.phead.c-teal { background: var(--c-teal-soft); color: var(--c-teal-ink); }
.phead.c-amber { background: var(--c-amber-soft); color: var(--c-amber-ink); }
.phead.c-purple { background: var(--c-purple-soft); color: var(--c-purple-ink); }
.phead.c-orange { background: var(--c-orange-soft); color: var(--c-orange-ink); }
.phead .h1 { color: var(--ink); }

/* home: scorciatoie */
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qcard { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; min-height: 68px; }
.qic { width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qic.c-purple { background: var(--c-purple-soft); color: var(--c-purple-ink); }
.qic.c-teal { background: var(--c-teal-soft); color: var(--c-teal-ink); }
.qtitle { font-weight: 700; display: block; }
.feature-chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.fchip { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.18); padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 14px; }

/* corso */
.learn-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.lstat { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.lstat .ic { color: var(--c-orange); }
.unit { display: flex; flex-direction: column; gap: 12px; }
.unit-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; }
.unit-head h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ink); }
.unit-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--card); display: inline-flex; align-items: center; justify-content: center; }
.unit-head.c-green { background: var(--c-green-soft); color: var(--c-green-ink); }
.unit-head.c-orange { background: var(--c-orange-soft); color: var(--c-orange-ink); }
.unit-head.c-blue { background: var(--c-blue-soft); color: var(--c-blue-ink); }
.unit-head.c-teal { background: var(--c-teal-soft); color: var(--c-teal-ink); }
.unit-head.c-amber { background: var(--c-amber-soft); color: var(--c-amber-ink); }
.unit-head.c-purple { background: var(--c-purple-soft); color: var(--c-purple-ink); }
.nodes { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 10px; }
.node { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--ink); width: 120px; }
.node.left { align-self: center; transform: translateX(-46px); }
.node.right { align-self: center; transform: translateX(46px); }
.node-dot { width: 76px; height: 76px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; box-shadow: 0 6px 0 rgba(0,0,0,0.18); }
.node-lbl { font-weight: 700; font-size: 15px; }
.node.c-green .node-dot { background: #2E8B57; } .node.c-orange .node-dot { background: var(--c-orange); } .node.c-blue .node-dot { background: var(--accent); }
.node.c-teal .node-dot { background: var(--c-teal); } .node.c-amber .node-dot { background: #B7791F; } .node.c-purple .node-dot { background: #6D4FB8; }
.node.done .node-dot { background: #F2B705; color: #17212B; }
.node.locked .node-dot { background: var(--line-strong); color: var(--muted); box-shadow: none; }
.node.locked { color: var(--muted); }
a.node:active .node-dot { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,0.18); }

/* lezione */
.lesson { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.lesson-top { display: flex; align-items: center; gap: 12px; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); }
.lprog { flex: 1; height: 14px; }
.lprog span { background: #2E8B57; }
.lesson-body { flex: 1; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 180px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 16px; }
.ex-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 24px; }
.ex-prompt { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; padding: 14px 18px; border-radius: 18px; border: 2px solid var(--line-strong); background: var(--card); font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--ink); }
.spk { color: var(--c-teal); }
.ex-mean { margin: 0; font-size: 22px; font-weight: 700; padding: 14px 16px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); }
.xopts { display: flex; flex-direction: column; gap: 10px; }
.xopt { min-height: 58px; padding: 12px 16px; border-radius: 16px; border: 2px solid var(--line-strong); border-bottom-width: 4px; background: var(--card); text-align: left; font-size: 18px; font-weight: 700; color: var(--ink); }
.xopt.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.xopt.right { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.xopt.wrong { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.listen-row { display: flex; gap: 14px; align-items: center; }
.big-spk { width: 96px; height: 96px; border-radius: 24px; border: none; background: var(--c-teal); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 0 rgba(0,0,0,0.2); }
.big-spk.slow { width: 72px; height: 72px; background: var(--c-teal-soft); color: var(--c-teal-ink); }
.built { min-height: 64px; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; border-bottom: 2px solid var(--line-strong); }
.built-ph { display: block; height: 44px; }
.bank { display: flex; flex-wrap: wrap; gap: 8px; }
.tok { min-height: 46px; padding: 8px 14px; border-radius: 14px; border: 2px solid var(--line-strong); border-bottom-width: 4px; background: var(--card); font-size: 18px; font-weight: 700; color: var(--ink); }
.tok.used { opacity: 0.25; }
.tok.on { border-color: var(--accent); }
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mcol { display: flex; flex-direction: column; gap: 10px; }
.mbtn { min-height: 58px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--line-strong); border-bottom-width: 4px; background: var(--card); font-weight: 700; font-size: 16px; color: var(--ink); }
.mbtn.sel { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.mbtn.ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); opacity: 0.7; }
.mbtn.bad { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.ex-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; max-width: 640px; margin: 0 auto; padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: var(--card); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.ex-foot.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.ex-foot.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.ex-fb { font-size: 18px; }
.btn-big { min-height: 56px; border-radius: 16px; border: none; border-bottom: 4px solid rgba(0,0,0,0.2); background: #2E8B57; color: #FFFFFF; font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: 0.04em; }
.ex-foot.bad .btn-big { background: var(--bad); }
.btn-big:disabled { background: var(--line-strong); color: var(--muted); border-bottom-color: transparent; }
.lesson-done { align-items: center; text-align: center; padding-top: 60px; }
.done-burst { width: 130px; height: 130px; border-radius: 50%; background: #F2B705; color: #17212B; display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 0 0 14px rgba(242,183,5,0.25); }
.done-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.done-stats .kpi-n { display: inline-flex; align-items: center; gap: 4px; justify-content: center; }

/* traduttore */
textarea { width: 100%; border: 1px solid var(--line-strong); background: var(--input-bg); color: var(--ink); border-radius: 12px; padding: 12px; font-size: 18px; resize: vertical; }
.tr-out { background: var(--card); border: 2px solid var(--c-purple-ink); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tr-text { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 700; }

/* profilo */
.me-head { display: flex; align-items: center; gap: 14px; }
.avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--sun); color: #17212B; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 24px; flex-shrink: 0; }
.acc-line { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 700; color: var(--green); }
.mycv { display: flex; gap: 12px; align-items: center; }
.mycv-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--c-orange-soft); color: var(--c-orange-ink); display: inline-flex; align-items: center; justify-content: center; }
.plain { margin: 0; padding-left: 20px; }
.danger-zone { border-style: dashed; }
.btn-danger { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 14px; border: none; background: var(--danger); color: var(--bg); font-weight: 700; }
.auth-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
input[type=password] { width: 100%; min-height: 50px; border: 1px solid var(--line-strong); background: var(--input-bg); color: var(--ink); border-radius: 12px; padding: 10px 12px; font-size: 17px; }

/* elenco guide */
.gbig { display: flex; gap: 14px; padding: 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); align-items: stretch; }
.gbig-cover { width: 76px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gbig-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.c-blue .gbig-cover { background: var(--c-blue-soft); color: var(--c-blue-ink); } .c-amber .gbig-cover { background: var(--c-amber-soft); color: var(--c-amber-ink); }
.c-orange .gbig-cover { background: var(--c-orange-soft); color: var(--c-orange-ink); } .c-purple .gbig-cover { background: var(--c-purple-soft); color: var(--c-purple-ink); }

/* bolletta vera */
.rbill { background: #FFFFFF; color: #1A1A1A; border-radius: 10px; box-shadow: 0 12px 30px var(--shadow); padding: 14px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4; display: flex; flex-direction: column; gap: 10px; border-top: 6px solid #F2B705; }
.rbill small { color: #5A6470; font-size: 11px; }
.rb-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.rb-logo { display: flex; gap: 8px; align-items: center; }
.rb-mark { width: 36px; height: 36px; border-radius: 10px; background: #F2B705; color: #17212B; display: inline-flex; align-items: center; justify-content: center; }
.rb-doc { text-align: right; }
.rb-cust { background: #F5F6F7; border-radius: 8px; padding: 8px 10px; }
.rb-sec { position: relative; border: 1px solid #E3E6EA; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; transition: background 0.2s; }
.rb-sec.hl { background: #FFF6DB; border-color: #F2B705; }
.rb-sec h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #1F5FAD; display: flex; align-items: center; gap: 6px; }
.rb-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rb-hero > div { display: flex; flex-direction: column; gap: 2px; background: #1F5FAD; color: #FFFFFF; border-radius: 8px; padding: 10px; position: relative; }
.rb-hero small { color: #DCE8F7; }
.rb-amount { font-size: 24px; font-weight: 800; }
.rb-date { font-size: 18px; font-weight: 800; }
.rb-line { font-size: 13px; }
.rb-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rb-t td { padding: 5px 0; border-bottom: 1px dotted #D5DAE0; vertical-align: middle; }
.rb-t td:last-child { text-align: right; font-weight: 700; padding-left: 8px; white-space: nowrap; }
.rb-t tr.tot td { border-bottom: none; font-size: 14px; font-weight: 800; padding-top: 8px; }
.rb-chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; align-items: end; height: 110px; padding-top: 14px; }
.rb-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.rb-bar { width: 100%; background: #C9D7EA; border-radius: 4px 4px 0 0; position: relative; display: block; }
.rb-bar.last { background: #1F5FAD; }
.rb-bar em { position: absolute; top: -15px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 10px; color: #4A5560; }
.rb-col i { font-style: normal; font-size: 9px; color: #5A6470; white-space: nowrap; }
.rb-paybox { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.rb-qr { width: 64px; height: 64px; flex-shrink: 0; border-radius: 4px; background: repeating-linear-gradient(90deg, #17212B 0 4px, transparent 4px 8px), repeating-linear-gradient(0deg, #17212B 0 4px, #FFFFFF 4px 8px); background-blend-mode: difference; border: 4px solid #17212B; }
.rb-barcode { display: block; height: 34px; background: repeating-linear-gradient(90deg, #17212B 0 2px, #FFFFFF 2px 4px, #17212B 4px 5px, #FFFFFF 5px 8px, #17212B 8px 11px, #FFFFFF 11px 12px); }
.rb-foot { margin: 0; font-size: 11px; color: #5A6470; text-align: center; }
.mk { width: 28px; height: 28px; border-radius: 999px; border: 2px solid #FFFFFF; background: #C2410C; color: #FFFFFF; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 6px; box-shadow: 0 0 0 2px #C2410C; vertical-align: middle; animation: pulse 2.4s infinite; }
.mk.on { background: #17212B; box-shadow: 0 0 0 3px #F2B705; animation: none; }
.mk.static { animation: none; margin: 0; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 2px #C2410C; } 50% { box-shadow: 0 0 0 6px rgba(194,65,12,0.25); } }
.rb-hero .mk { position: absolute; top: -10px; right: -6px; }
.callout { background: #17212B; color: #FFFFFF; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-family: var(--font-body); font-size: 14.5px; line-height: 1.45; }
.callout b { color: #FFC94D; }
.points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.point { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 16px; }
.point.on { border-color: #C2410C; box-shadow: 0 0 0 1px #C2410C inset; }

/* codice fiscale */
.cfcard { background: linear-gradient(135deg, #E9F1FB, #FFFFFF 60%); color: #17212B; border-radius: 16px; padding: 16px; box-shadow: 0 12px 30px var(--shadow); display: flex; flex-direction: column; gap: 12px; border: 1px solid #C9D7EA; }
.cf-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 800; color: #1F5FAD; font-size: 13px; letter-spacing: 0.06em; }
.cf-top span:first-child { display: inline-flex; gap: 6px; align-items: center; }
.cf-stamp { border: 2px solid #C2410C; color: #C2410C; border-radius: 6px; padding: 2px 8px; transform: rotate(-4deg); font-size: 11px; text-transform: uppercase; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cf-grid span { display: flex; flex-direction: column; }
.cf-grid small { color: #5A6470; font-size: 11px; text-transform: uppercase; }
.cf-code { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; background: #FFFFFF; border-radius: 10px; padding: 10px 6px; border: 1px dashed #9DB5D6; }
.cfseg { font-family: "Courier New", monospace; font-weight: 800; font-size: 22px; letter-spacing: 0.08em; border: none; border-radius: 8px; padding: 6px 6px; color: #17212B; border-bottom: 4px solid transparent; }
.cfseg.on { outline: 3px solid #17212B; }
.p1 { background: #FFE2D2; border-color: #C2410C !important; } .p2 { background: #FFF1C2; border-color: #B7791F !important; } .p3 { background: #DDF3E4; border-color: #1C6B3A !important; }
.p4 { background: #DCEBFF; border-color: #1F5FAD !important; } .p5 { background: #EEE4FF; border-color: #6D4FB8 !important; } .p6 { background: #D7F2EF; border-color: #0F766E !important; } .p7 { background: #F1F1F1; border-color: #57636F !important; }
.cf-call { color: #17212B; background: #FFFFFF; border: 2px solid; }
.cf-call b { color: #17212B; }
.uses { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.use { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; text-align: center; }
.use-ic { width: 54px; height: 54px; border-radius: 16px; background: var(--c-blue-soft); color: var(--c-blue-ink); display: inline-flex; align-items: center; justify-content: center; }
.ways { display: flex; flex-direction: column; gap: 10px; position: relative; }
.way { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.way p { margin: 4px 0 0; color: var(--ink-2); }
.way-ic { width: 52px; height: 52px; border-radius: 16px; background: var(--c-purple-soft); color: var(--c-purple-ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* lavoro */
.jpath { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.jpath li { position: relative; padding-bottom: 12px; }
.jpath > li:not(:last-child)::after { content: ""; position: absolute; left: 31px; top: 56px; bottom: 0; width: 3px; background: repeating-linear-gradient(var(--c-orange) 0 6px, transparent 6px 12px); }
.jp { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; position: relative; z-index: 1; }
.jp-n { width: 40px; height: 40px; border-radius: 50%; background: var(--c-orange); color: #FFFFFF; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-display); }
.jp-ic { color: var(--c-orange-ink); }
.jp-txt { flex: 1; display: flex; flex-direction: column; }
.channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.channel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.illus { display: block; width: 100%; height: auto; }
.il-bg { fill: var(--il-bg); } .il-main { fill: var(--il-main); } .il-sun { fill: var(--il-sun); } .il-paper { fill: var(--il-paper); } .il-ink { fill: var(--il-ink); } .il-orange { fill: var(--il-orange); }
.il-st { stroke: var(--il-ink); stroke-width: 2.5; stroke-linejoin: round; }
.ch-body { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.ch-body p { margin: 0; font-size: 15px; color: var(--ink-2); }
.free-tag { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; background: var(--ok-soft); color: var(--ok); padding: 2px 8px; border-radius: 999px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmp { border-radius: 16px; padding: 14px; }
.cmp h3 { margin: 0 0 8px; display: flex; gap: 6px; align-items: center; font-size: 16px; }
.cmp ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.cmp li { display: flex; gap: 6px; align-items: flex-start; }
.cmp li .ic { margin-top: 3px; }
.cmp.yes { background: var(--ok-soft); color: var(--ok); }
.cmp.no { background: var(--bad-soft); color: var(--bad); }
.cmp li span { color: var(--ink); }

/* dizionario */
.filter { margin-top: -4px; }
.fbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font-weight: 700; font-size: 14px; }
.fbtn.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.gloss-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.gl-card { display: flex; gap: 14px; padding: 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.gl-ic { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gc-docs .gl-ic { background: var(--c-blue-soft); color: var(--c-blue-ink); } .gc-offices .gl-ic { background: var(--c-purple-soft); color: var(--c-purple-ink); }
.gc-work .gl-ic { background: var(--c-orange-soft); color: var(--c-orange-ink); } .gc-home .gl-ic { background: var(--c-amber-soft); color: var(--c-amber-ink); }
.gc-health .gl-ic { background: var(--c-teal-soft); color: var(--c-teal-ink); } .gc-money .gl-ic { background: var(--c-green-soft); color: var(--c-green-ink); }
.gl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gl-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gl-term { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.gl-cat { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.gl-body p { margin: 4px 0 0; color: var(--ink-2); }
@media (min-width: 560px) { .gloss-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .uses { grid-template-columns: repeat(3, minmax(0, 1fr)); } .compare, .channels { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mk { animation: none; } }

/* ===================== v0.4 ===================== */
:root { --node-shadow: rgba(0,0,0,0.22); --bn-body: #2FA66A; --bn-belly: #CFF1DC; --bn-ink: #12301F; --gold: #F2B705; --gold-ink: #3D2C00; --heart: #E5484D; --fire: #F07A1A; --xp: #E8A900; --tb-shadow: 0 10px 30px rgba(23,33,43,0.18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --node-shadow: rgba(0,0,0,0.5); --bn-body: #34B072; --bn-belly: #1F4D33; --bn-ink: #0B1F14; --heart: #FF6B70; --fire: #FF9640; --xp: #FFC83D; --tb-shadow: 0 10px 30px rgba(0,0,0,0.55); } }
:root[data-theme="dark"] { --node-shadow: rgba(0,0,0,0.5); --bn-body: #34B072; --bn-belly: #1F4D33; --bn-ink: #0B1F14; --heart: #FF6B70; --fire: #FF9640; --xp: #FFC83D; --tb-shadow: 0 10px 30px rgba(0,0,0,0.55); }

/* barra in basso: pillola fluttuante che si nasconde scorrendo */
.tabbar { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); max-width: 560px; border: 1px solid var(--line); border-radius: 22px; padding: 6px; box-shadow: var(--tb-shadow); transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s; }
@media (min-width: 600px) { .tabbar { left: 0; right: 0; } }
.tabbar .tab { border-radius: 16px; transition: background .15s, color .15s; }
.tabbar .tab.on { background: var(--accent-soft); color: var(--accent-ink); }
html.tb-hide .tabbar, html.tb-kbd .tabbar { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }

/* mascotte */
.benni { display: block; flex: none; overflow: visible; }
.bn-body { fill: var(--bn-body); }
.bn-belly { fill: var(--bn-belly); }
.bn-eye { fill: #FFFFFF; } .bn-pupil { fill: #10202A; } .bn-glint { fill: #FFFFFF; }
.bn-line { fill: none; stroke: var(--bn-ink); stroke-width: 3; stroke-linecap: round; }
.bn-mouth { fill: #7A1F1F; stroke: var(--bn-ink); stroke-width: 2.5; stroke-linejoin: round; }
.bn-arm { fill: none; stroke: var(--bn-body); stroke-width: 9; stroke-linecap: round; }
.bn-cheek { fill: #FF8A80; opacity: .55; }
.bn-sc-g { fill: #1F9D55; } .bn-sc-w { fill: #F4F6F2; } .bn-sc-r { fill: #D64545; }
.bn-leaf { fill: #6BCB77; }
.bn-shadow { fill: rgba(0,0,0,0.12); }
@media (prefers-reduced-motion: no-preference) {
  .bn-happy, .bn-cheer { animation: bn-bob 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
  .bn-cheer { animation: bn-jump .9s ease-in-out infinite; }
}
@keyframes bn-bob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes bn-jump { 0%,100% { transform: translateY(0) scale(1,1); } 30% { transform: translateY(-12px) scale(.97,1.04); } 60% { transform: translateY(0) scale(1.04,.96); } }

/* pagina del corso */
.learn-page { gap: 16px; }
.learn-top { display: flex; gap: 10px; align-items: center; }
.lstat { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 16px; color: var(--ink); }
.lstat b { font-family: var(--font-display); font-size: 18px; }
.st-fire .ic { color: var(--fire); } .st-xp .ic { color: var(--xp); }
.lstat.snd { margin-left: auto; cursor: pointer; color: var(--ink-2); min-height: 44px; }
.hello { display: flex; align-items: center; gap: 12px; }
.speech { position: relative; margin: 0; padding: 14px 16px; background: var(--card); border: 2px solid var(--line); border-radius: 18px; font-weight: 700; color: var(--ink); }
.speech::before { content: ""; position: absolute; left: -9px; top: 50%; width: 14px; height: 14px; background: var(--card); border-left: 2px solid var(--line); border-bottom: 2px solid var(--line); transform: translateY(-50%) rotate(45deg); }
.daily { display: flex; flex-direction: column; gap: 8px; }
.daily-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.daily-top b { display: inline-flex; align-items: center; gap: 6px; }
.daily-bar { height: 14px; } .daily-bar span { background: linear-gradient(90deg, var(--xp), var(--fire)); }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; border-radius: 22px; color: #FFFFFF; background: linear-gradient(135deg, #1F9D55, #167A44); box-shadow: 0 6px 0 rgba(0,0,0,0.15); }
.sec-head h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 21px; }
.sec-head p { margin: 4px 0 0; opacity: .92; font-size: 15px; }
.sec-prog { background: rgba(255,255,255,0.2); padding: 6px 12px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.unit2 { display: flex; flex-direction: column; gap: 6px; }
.ubanner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 20px; color: #FFFFFF; box-shadow: 0 5px 0 var(--node-shadow); }
.ubanner small { font-weight: 700; opacity: .9; letter-spacing: .04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 4px; }
.ubanner h2 { margin: 2px 0 0; font-family: var(--font-display); font-size: 21px; font-weight: 800; }
.ub-guide { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; min-height: 44px; border-radius: 14px; border: 2px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.14); color: #FFFFFF; font-weight: 700; cursor: pointer; }
.ubanner.c-green, .pnode.c-green .pn-dot { background: #2E9B5C; }
.ubanner.c-blue, .pnode.c-blue .pn-dot { background: #2F6FDE; }
.ubanner.c-orange, .pnode.c-orange .pn-dot { background: #E26A1B; }
.ubanner.c-purple, .pnode.c-purple .pn-dot { background: #8257D8; }
.ubanner.c-amber, .pnode.c-amber .pn-dot { background: #C98A00; }
.ubanner.c-teal, .pnode.c-teal .pn-dot { background: #13897F; }
.pnodes { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 0 26px; }
.pnode { position: relative; transform: translateX(var(--x, 0)); text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; }
.pn-dot { width: 72px; height: 66px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; box-shadow: 0 7px 0 var(--node-shadow); transition: transform .1s, box-shadow .1s; }
.pnode.test .pn-dot { width: 84px; height: 76px; }
.pnode.done .pn-dot { background: var(--gold) !important; color: var(--gold-ink); }
.pnode.locked .pn-dot { background: var(--line-strong) !important; color: var(--muted); box-shadow: 0 7px 0 var(--line); }
a.pnode:active .pn-dot { transform: translateY(5px); box-shadow: 0 2px 0 var(--node-shadow); }
.pnode.cur .pn-dot { outline: 6px solid color-mix(in srgb, var(--card) 70%, transparent); box-shadow: 0 7px 0 var(--node-shadow), 0 0 0 12px var(--accent-soft); }
.start-bub { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 12px; background: var(--card); border: 2px solid var(--line-strong); color: var(--c-green-ink); font-family: var(--font-display); font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.start-bub::after { content: ""; position: absolute; top: 100%; left: 50%; width: 12px; height: 12px; background: var(--card); border-right: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); transform: translate(-50%, -6px) rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .start-bub { animation: bub 1.4s ease-in-out infinite; } }
@keyframes bub { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -6px); } }
.pdeco { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; }
.pdeco.l { left: 4%; } .pdeco.r { right: 4%; }
.pdeco-emo { font-size: 54px; filter: drop-shadow(0 6px 0 rgba(0,0,0,0.08)); }
.sec-locked { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 22px; border: 2px dashed var(--line-strong); background: var(--card); color: var(--muted); flex-wrap: wrap; }
.sec-locked > div { flex: 1; min-width: 180px; } .sec-locked b { color: var(--ink); } .sec-locked p { margin: 4px 0 0; }
.tip-sheet .tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tip-sheet .tips li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--c-green-soft); color: var(--ink); }
.tip-sheet .tips .ic { color: var(--c-green-ink); flex: none; margin-top: 2px; }
.tip-sheet .word-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* lezione */
.lesson-top .lprog { flex: 1; height: 16px; }
.lprog span { background: linear-gradient(90deg, #58CC02, #2E9B5C); transition: width .35s ease; position: relative; }
.lprog span::after { content: ""; position: absolute; left: 8px; right: 8px; top: 3px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.35); }
.is-test .lprog span { background: linear-gradient(90deg, var(--xp), var(--fire)); }
.hearts { display: inline-flex; align-items: center; gap: 4px; color: var(--heart); font-family: var(--font-display); font-size: 20px; }
.hearts b { color: var(--heart); }
@media (prefers-reduced-motion: no-preference) { .hearts.lost { animation: hb .6s ease; } .lesson-body.shake { animation: shake .4s ease; } .lesson-body.pop > * { animation: pop .3s ease both; } }
@keyframes hb { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 60% { transform: scale(.85); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.test-banner { margin: 0 16px; display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--amber-soft); color: var(--amber-ink); font-weight: 700; }
.ex-kicker { margin: 0; display: inline-flex; align-items: center; gap: 6px; color: #8257D8; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; }
.intro-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 18px; border-radius: 24px; background: var(--card); border: 2px solid var(--line); border-bottom-width: 5px; text-align: center; }
.intro-pic { font-size: 84px; line-height: 1; }
.intro-pic.txt { width: 104px; height: 104px; border-radius: 28px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 56px; font-weight: 800; color: #FFFFFF; background: linear-gradient(135deg, #8257D8, #2F6FDE); }
.intro-it { display: inline-flex; align-items: center; gap: 10px; border: none; background: none; font-family: var(--font-display); font-size: 34px; font-weight: 800; color: var(--ink); cursor: pointer; }
.intro-it .ic { color: var(--c-teal); }
.intro-tr { font-size: 20px; color: var(--muted); font-weight: 700; }
.ex-say { display: flex; align-items: flex-end; gap: 10px; }
.ex-say .bubble { position: relative; flex: 1; margin: 0; }
.imgopts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.imgcard { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px 12px; border-radius: 18px; border: 2px solid var(--line-strong); border-bottom-width: 5px; background: var(--card); color: var(--ink); font-weight: 700; font-size: 16px; cursor: pointer; }
.img-emo { font-size: 52px; line-height: 1; }
.imgcard.sel { border-color: var(--accent); background: var(--accent-soft); }
.imgcard.right { border-color: var(--ok); background: var(--ok-soft); } .imgcard.wrong { border-color: var(--bad); background: var(--bad-soft); }
.xopt { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.xkey { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); flex: none; }
.xopt.sel .xkey { border-color: var(--accent); color: var(--accent-ink); }
.typeform textarea { width: 100%; font-size: 20px; padding: 14px; border-radius: 16px; border: 2px solid var(--line-strong); background: var(--input-bg); color: var(--ink); resize: none; font-family: var(--font-body); }
.accents { display: flex; gap: 8px; flex-wrap: wrap; }
.acc { min-width: 44px; min-height: 44px; border-radius: 12px; border: 2px solid var(--line-strong); border-bottom-width: 4px; background: var(--card); color: var(--ink); font-size: 18px; font-weight: 700; cursor: pointer; }
.fill-sent { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.slot { display: inline-block; min-width: 90px; padding: 0 10px; margin: 0 4px; border-bottom: 3px solid var(--line-strong); text-align: center; color: var(--accent-ink); }
.slot.full { border-color: var(--accent); } .slot.ok { color: var(--ok); border-color: var(--ok); } .slot.bad { color: var(--bad); border-color: var(--bad); }
.fill-mean { margin: 0; }
.ex-foot.ok { background: var(--ok-soft); border-top-color: transparent; } .ex-foot.bad { background: var(--bad-soft); border-top-color: transparent; }
.ex-fb { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; }
.ex-foot.ok .ex-fb { color: var(--ok); } .ex-foot.bad .ex-fb { color: var(--bad); }
.fb-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--card); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fb-ans, .fb-note { display: block; font-weight: 700; margin-top: 2px; }
.ex-foot.bad .btn-big { background: var(--bad); box-shadow: 0 5px 0 rgba(0,0,0,0.25); }
.ex-foot.ok .btn-big { background: #2E9B5C; }
.lesson-end { align-items: center; text-align: center; gap: 18px; padding-top: 48px; min-height: 100vh; }
.end-mascot { display: flex; justify-content: center; }
.end-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.ekpi { border-radius: 18px; border: 2px solid; overflow: hidden; display: flex; flex-direction: column; }
.ek-l { padding: 6px 4px; font-size: 12px; line-height: 1.2; font-weight: 800; text-transform: uppercase; color: #FFFFFF; }
.ek-n { flex: 1; padding: 12px 6px; display: inline-flex; justify-content: center; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 22px; font-weight: 800; background: var(--card); color: var(--ink); }
.k-xp { border-color: var(--xp); } .k-xp .ek-l { background: var(--xp); color: #3D2C00; }
.k-acc { border-color: #2E9B5C; } .k-acc .ek-l { background: #2E9B5C; }
.k-fire { border-color: var(--fire); } .k-fire .ek-l { background: var(--fire); }
.lesson-end .daily { width: 100%; text-align: left; }
.wide-link { width: 100%; text-decoration: none; display: inline-flex; justify-content: center; align-items: center; }
.end-btns { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 30; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .confetti i { animation: fall linear forwards; } }
@keyframes fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(105vh) rotate(720deg); } }

/* traduttore */
.tr-langs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.tr-langs .field { margin: 0; }
.swap { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--card); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-bottom: 2px; }
.tr-out .row2 { flex-wrap: wrap; }

/* uffici vicino a te */
.offices { display: flex; flex-direction: column; gap: 10px; }
.offices .g-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.near { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--c-teal-ink); background: var(--c-teal-soft); padding: 2px 10px; border-radius: 999px; }
.placebox { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: var(--c-teal-soft); }
.pb-head { display: flex; gap: 10px; align-items: flex-start; }
.pb-head p { margin: 2px 0 0; }
.pb-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--card); color: var(--c-teal-ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pb-row { display: flex; gap: 8px; }
.pb-row input { flex: 1; min-width: 0; min-height: 48px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line-strong); background: var(--input-bg); color: var(--ink); font-size: 17px; }
.pb-row .btn-primary { white-space: nowrap; }
@media (max-width: 380px) { .pb-row { flex-direction: column; } }
.office { border-radius: 18px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.office.open { border-color: var(--line-strong); }
.ohead { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px; border: none; background: none; text-align: left; color: var(--ink); cursor: pointer; }
.ohead.static { cursor: default; padding-bottom: 6px; }
.ohead > .ic:last-child { transition: transform .2s; color: var(--muted); flex: none; }
.office.open .ohead > .ic:last-child { transform: rotate(90deg); }
.oic { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.otxt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.obody { padding: 0 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.omaps { justify-content: center; text-decoration: none; }
.ophones { display: flex; flex-direction: column; gap: 6px; }
.ophone { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--bg); color: var(--ink); text-decoration: none; }
.ophone .ic { color: var(--c-teal-ink); }
.ocols, .req { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .ocols, .req { grid-template-columns: 1fr; } }
.ocols h4, .req h3, .permit h4, .tipcol h4 { margin: 0 0 6px; display: flex; gap: 6px; align-items: center; font-size: 16px; }
.ocols ul, .req ul, .permit ul, .tipcol ul, .gl-more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ocols li, .req li, .permit li, .tipcol li, .gl-more li { display: flex; gap: 8px; align-items: flex-start; }
.ocols li .ic, .req li .ic, .permit li .ic, .tipcol li .ic, .gl-more li .ic { flex: none; margin-top: 3px; color: var(--c-teal-ink); }
.asks li { font-style: italic; }
.req-col { padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.office.mini { padding-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.office.mini .omaps, .office.mini .ophones { margin: 0 12px; }
.minis { display: flex; flex-direction: column; gap: 8px; }

/* guida lavoro */
.jstep .jp { width: 100%; border: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.jstep .chev { margin-left: auto; color: var(--muted); transition: transform .2s; display: inline-flex; }
.jstep.open .chev { transform: rotate(90deg); }
.jstep.open .jp { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.jbody { padding: 14px; background: var(--card); border: 1px solid var(--line); border-top: none; border-radius: 0 0 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.sites { display: flex; flex-direction: column; gap: 8px; }
.site { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); text-decoration: none; }
.site-logo { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #FFFFFF; font-family: var(--font-display); font-weight: 800; font-size: 20px; flex: none; }
.site-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.permit { padding: 14px; border-radius: 16px; background: var(--amber-soft); color: var(--ink); }
.permit h4 { color: var(--amber-ink); }
.permit.flags { background: var(--bad-soft); } .permit.flags h4, .permit.flags li .ic { color: var(--bad); }
.tipcols { display: grid; grid-template-columns: 1fr; gap: 10px; }
.tipcol { padding: 14px; border-radius: 16px; background: var(--c-blue-soft); }
.tipcol h4 { color: var(--c-blue-ink); }
.qtitle2 { margin: 0; font-size: 17px; }
.qlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.qline { width: 100%; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--card); color: var(--ink); cursor: pointer; }
.q-it { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-size: 17px; }
.q-it .ic { color: var(--c-teal); }
.ai-teaser { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px; border-radius: 18px; border: 2px dashed var(--ai-border); background: var(--ai-bg); color: var(--ink); cursor: pointer; }
.ai-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--accent); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ai-teaser .tile-soon { margin-left: auto; }
.text-link { background: none; border: none; padding: 0; cursor: pointer; font: inherit; }

/* dizionario espandibile */
.gl-card.open { grid-column: 1 / -1; border-color: var(--line-strong); }
.gl-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 8px 12px; min-height: 40px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--accent-ink); font-weight: 700; cursor: pointer; }
.gl-toggle .ic { transition: transform .2s; }
.gl-card.open .gl-toggle .ic { transform: rotate(90deg); }
.gl-more { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.gl-body { display: flex; flex-direction: column; min-width: 0; }
.guide > .placebox { margin-bottom: 4px; }

/* ===================== v0.5 ===================== */
.band-actions { display: inline-flex; align-items: center; gap: 8px; }
.login-chip { background: var(--sun); color: #17212B; border: none; font-weight: 700; }
.acc-chip { display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,0.7); }
.avatar { border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-display); font-weight: 700; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.big { font-size: 28px; }
.acc-chip .avatar { font-size: 15px; }
.photo-card { display: flex; flex-direction: column; gap: 12px; }
.photo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.photo-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.photo-btn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.me-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.me-links a { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; }
.me-links a .ic { color: var(--accent-ink); }
.install-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: linear-gradient(135deg, var(--accent-soft), var(--c-teal-soft)); border: 1px solid var(--line); flex-wrap: wrap; }
.inst-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--accent); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.inst-txt { flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: 2px; color: var(--ink); }
.inst-btn { white-space: nowrap; }
.inst-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.inst-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; }
.about-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.about-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.about-list li { display: flex; gap: 10px; align-items: flex-start; }
.about-list .ic { color: var(--c-teal-ink); flex: none; margin-top: 3px; }
.contact-ok { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 0; }
#ct-msg { width: 100%; font-size: 17px; padding: 12px; border-radius: 14px; border: 2px solid var(--line-strong); background: var(--input-bg); color: var(--ink); font-family: var(--font-body); resize: vertical; }

/* ===================== v0.6 ===================== */
.qic.c-orange { background: var(--c-orange-soft); color: var(--c-orange-ink); }
.qic.c-blue { background: var(--c-blue-soft); color: var(--c-blue-ink); }
.rem-home { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); color: var(--ink); text-decoration: none; }
.rem-home .rem-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rem-ic { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--ok-soft); color: var(--ok); }
.rem-home.soon, .rem.soon { border-color: var(--xp); } .soon .rem-ic { background: var(--amber-soft); color: var(--amber-ink); }
.rem-home.late, .rem.late { border-color: var(--bad); } .late .rem-ic { background: var(--bad-soft); color: var(--bad); }
.rems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rem { padding: 14px; border-radius: 18px; background: var(--card); border: 2px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.rem-top { display: flex; gap: 12px; align-items: flex-start; }
.rem-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rem-date { color: var(--ink-2); }
.rem.late .rem-when { color: var(--bad); } .rem.soon .rem-when { color: var(--amber-ink); } .rem.ok .rem-when { color: var(--ok); }
.rem-hint { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-weight: 700; color: var(--ink); }
.rem-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pbtn.danger { color: var(--danger); margin-left: auto; }
.rem-todo { padding: 12px; border-radius: 14px; background: var(--bg); display: flex; flex-direction: column; gap: 8px; }
.rem-todo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rem-todo li { display: flex; gap: 8px; } .rem-todo li .ic { flex: none; margin-top: 3px; color: var(--c-teal-ink); }
input[type="date"] { min-height: 48px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line-strong); background: var(--input-bg); color: var(--ink); font-size: 17px; font-family: var(--font-body); width: 100%; }
.calc { display: flex; flex-direction: column; gap: 10px; border: 2px solid var(--c-teal); }
.calc .card-title, .rems + form .card-title { display: flex; align-items: center; gap: 6px; }
.calc-res { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.calc-res.bad { background: var(--bad-soft); color: var(--bad); }
.ok-txt { color: var(--ok); font-weight: 700; }
.cost-t td.num { white-space: nowrap; font-weight: 700; }
.pslip .ps-mk1 { margin: 8px 0 4px; }
.sos { display: flex; flex-direction: column; gap: 10px; }
.sos-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; flex-wrap: wrap; }
.sos-n { min-width: 74px; padding: 8px 10px; border-radius: 12px; background: var(--bad); color: #FFFFFF; font-family: var(--font-display); font-weight: 700; font-size: 18px; text-align: center; white-space: nowrap; }
.sos-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; }
.sos-call { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.letter { padding: 20px 18px; border-radius: 14px; background: var(--paper); color: var(--paper-ink); border: 1px solid var(--paper-line); box-shadow: 0 6px 20px var(--shadow); font-size: 15.5px; line-height: 1.6; }
fieldset.field { border: none; padding: 0; margin: 0; } fieldset.field legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.c-teal .gbig-cover, .c-teal .gcard-cover { background: var(--c-teal-soft); color: var(--c-teal-ink); }
.c-green .gbig-cover { background: var(--c-green-soft); color: var(--c-green-ink); }
.c-purple .gcard-cover { background: var(--c-purple-soft); color: var(--c-purple-ink); }

/* ---------- v0.7: lingue da destra a sinistra, installazione iPhone, Scrivici ---------- */
[dir=rtl] .ic-arrow, [dir=rtl] .ic-back { transform: scaleX(-1); }
[dir=rtl] body { text-align: right; }
.sheet-ios { gap: 14px; }
.ios-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ios-steps li { display: grid; grid-template-columns: 34px 1fr; grid-template-areas: "n t" "n m"; gap: 6px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); }
.ios-n { grid-area: n; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); }
.ios-txt { grid-area: t; display: flex; flex-direction: column; gap: 2px; font-size: 17px; }
.imock { grid-area: m; display: flex; align-items: center; border-radius: 14px; background: var(--card); border: 1px solid var(--line); padding: 8px 12px; min-height: 44px; }
.imock-bar { justify-content: space-around; }
.imock-dot { width: 18px; height: 6px; border-radius: 3px; background: var(--line); }
.imock-share { color: #0a84ff; display: grid; place-items: center; width: 44px; height: 36px; border-radius: 10px; box-shadow: 0 0 0 3px rgba(10,132,255,.35); animation: instPulse 1.6s ease-in-out infinite; }
.imock-menu { flex-direction: column; align-items: stretch; gap: 6px; }
.imock-row { height: 10px; border-radius: 5px; background: var(--line); }
.imock-row.dim { opacity: .6; }
.imock-row.on { height: auto; background: transparent; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; box-shadow: 0 0 0 3px rgba(10,132,255,.35); font-size: 15px; font-weight: 600; }
.imock-add { justify-content: space-between; gap: 10px; }
.imock-app { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.imock-app .logo { width: 32px; height: 32px; border-radius: 9px; }
.imock-pill { color: #0a84ff; font-weight: 700; padding: 4px 12px; border-radius: 999px; box-shadow: 0 0 0 3px rgba(10,132,255,.35); }
.ios-here { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #0a84ff; font-weight: 700; font-size: 15px; }
.ios-here .ic { display: none; }
.ios-arrow { animation: instBounce 1.1s ease-in-out infinite; }
@keyframes instPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(10,132,255,.35); } 50% { box-shadow: 0 0 0 7px rgba(10,132,255,.12); } }
@keyframes instBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .imock-share, .ios-arrow { animation: none; } }
.fb-card { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; padding: 16px; border-radius: 22px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #ff7a45, #e6406d); box-shadow: 0 8px 24px rgba(230,64,109,.25); }
.fb-ic { width: 48px; height: 48px; border-radius: 16px; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.fb-txt { display: flex; flex-direction: column; gap: 3px; }
.fb-txt b { font-family: var(--font-display); font-size: 19px; }
.fb-txt .small { opacity: .95; }
.fb-btn { grid-column: 1 / -1; justify-self: stretch; display: flex; justify-content: center; align-items: center; gap: 6px; background: #fff; color: #c23358; font-weight: 700; border-radius: 14px; padding: 12px; font-size: 17px; }
[dir=rtl] .mini-cv { right: auto; left: 16px; transform: rotate(-5deg); }
[dir=rtl] .bubbles { right: auto; left: 12px; align-items: flex-start; }
[dir=rtl] .bub.b2 { margin-right: 0; margin-left: 14px; }
[dir=rtl] .bub, [dir=rtl] .mini-cv { direction: ltr; }

/* ---------- v0.8: negozi e ristoranti ---------- */
.stack-m { display: flex; flex-direction: column; gap: 16px; }
.flabel { display: block; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.shop-card { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; padding: 16px; border-radius: 22px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #1F9D55, #0F766E); box-shadow: 0 8px 24px rgba(15,118,110,.25); }
.shop-ic { width: 48px; height: 48px; border-radius: 16px; background: rgba(255,255,255,.2); display: grid; place-items: center; flex: none; }
.shop-ic.sm { width: 40px; height: 40px; border-radius: 12px; background: var(--c-orange-soft); color: var(--c-orange-ink); }
.shop-btns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shop-btn { display: flex; text-decoration: none; justify-content: center; align-items: center; gap: 6px; background: #fff; color: #0F766E; font-weight: 700; border-radius: 14px; padding: 12px; font-size: 17px; }
.pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pic { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--input-bg); }
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pic-x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; cursor: pointer; }
.pic-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed var(--line-strong); color: var(--accent-ink); font-weight: 600; font-size: 14px; text-align: center; padding: 8px; cursor: pointer; }
.myshop { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.myshop:last-of-type { border-bottom: 0; }
.myshop-top { display: flex; align-items: center; gap: 12px; }
.myshop-top > span:nth-child(2) { flex: 1; min-width: 0; }
.st { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.st-wait { background: var(--c-orange-soft); color: var(--c-orange-ink); }
.st-live { background: #DCF5E6; color: #146C3A; }
.stack-s { display: flex; flex-direction: column; gap: 12px; }

.shop-btn.ghost { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.5); }
.sh-search { position: relative; }
.sh-search input { width: 100%; min-height: 52px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--input-bg); padding: 12px 14px 12px 44px; font-size: 17px; color: var(--ink); }
.sh-sic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; }
.sh-list { display: flex; flex-direction: column; gap: 16px; }
.sh-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 6px 20px rgba(23,33,43,.06); }
.sh-cover { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #DCF5E6, #E4EDF8); }
.sh-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-noimg { position: absolute; inset: 0; display: grid; place-items: center; color: #0F766E; }
.sh-type, .sh-demo { position: absolute; top: 10px; font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.sh-type { left: 10px; background: rgba(255,255,255,.92); color: #17212B; }
.sh-demo { right: 10px; background: #FFC93C; color: #17212B; }
[dir=rtl] .sh-type { left: auto; right: 10px; } [dir=rtl] .sh-demo { right: auto; left: 10px; }
.sh-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sh-name { font-family: var(--font-display); font-size: 21px; line-height: 1.2; margin: 0; }
.sh-country { display: flex; align-items: center; gap: 6px; color: var(--accent-ink); font-weight: 700; margin: 0; }
.sh-what { margin: 0; color: var(--ink); }
.sh-strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.sh-strip img { width: 120px; height: 120px; object-fit: cover; border-radius: 14px; flex: none; scroll-snap-align: start; }
.sh-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 15px; }
.sh-info li { display: flex; gap: 8px; align-items: flex-start; } .sh-info .ic { flex: none; margin-top: 2px; }
.sh-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-actions a { flex: 1 1 auto; justify-content: center; }
.sh-wa { background: #1FA855; border-color: #1FA855; }
.sh-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.sh-chips::-webkit-scrollbar { display: none; }
.sh-chips .fbtn { flex: none; white-space: nowrap; }
.shop-btn { white-space: nowrap; font-size: 16px; padding: 12px 8px; }

/* ---------- v0.8: Benni che parla, card che si muovono, sfondo più leggero ---------- */
body { background-size: 120px 120px; }
.btip { display: flex; align-items: flex-end; gap: 8px; width: 100%; background: none; border: 0; padding: 0; margin: 2px 0; text-align: left; cursor: pointer; color: var(--ink); font: inherit; -webkit-tap-highlight-color: transparent; }
[dir=rtl] .btip { text-align: right; }
.btip .benni { flex: none; }
.btip-bubble { position: relative; flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 20px 20px 20px 6px; padding: 12px 14px; box-shadow: 0 6px 18px rgba(23,33,43,.08); font-weight: 600; font-size: 16px; line-height: 1.4; }
[dir=rtl] .btip-bubble { border-radius: 20px 20px 6px 20px; }
.btip-more { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--muted); }
.btip.hop .benni { animation: bnHop .55s cubic-bezier(.3,1.6,.5,1); }
.btip-bubble.pop { animation: tipPop .35s cubic-bezier(.3,1.5,.5,1); }
@keyframes bnHop { 0% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-14px) rotate(-6deg); } 70% { transform: translateY(2px) rotate(3deg); } 100% { transform: none; } }
@keyframes tipPop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: none; opacity: 1; } }
.f-shop { background: linear-gradient(135deg, #1F9D55, #0F766E); }
.fs-link { color: #fff; text-decoration: none; }
.f-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.f-btns a { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #0F766E; font-weight: 700; font-size: 14px; padding: 8px 12px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.f-btns a.ghost { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.55); }
.shop-tags { position: absolute; right: 12px; top: 16px; bottom: 16px; width: 36%; display: block; }
[dir=rtl] .shop-tags { right: auto; left: 12px; }
.stag { position: absolute; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap; box-shadow: 0 6px 14px rgba(0,0,0,.18); direction: ltr; }
.stag.s1 { top: 0; right: 4px; background: #FFC93C; color: #17212B; transform: rotate(4deg); }
.stag.s2 { top: 36%; right: 34%; background: #fff; color: #C2410C; transform: rotate(-5deg); }
.stag.s3 { top: 52%; right: 0; background: #FDE2E4; color: #9F1239; transform: rotate(3deg); }
.stag.s4 { bottom: 0; right: 22%; background: #E4EDF8; color: #1F5FAD; transform: rotate(-3deg); }
.jh-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 10px; scrollbar-width: none; }
.jh-row::-webkit-scrollbar { display: none; }
.jh-card { flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(23,33,43,.06); }
.jh-card b { font-family: var(--font-display); font-size: 18px; line-height: 1.2; }
.jh-card .small { color: var(--muted); flex: 1; }
.jh-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.jh-card.c-teal .jh-ic { background: var(--c-teal-soft); color: var(--c-teal); }
.jh-card.c-orange .jh-ic { background: var(--c-orange-soft); color: var(--c-orange-ink); }
.jh-card.c-purple .jh-ic { background: #EFE7FB; color: #6D3FC0; }
.jh-card.c-green .jh-ic { background: #DCF5E6; color: #146C3A; }
.jh-card.c-red .jh-ic { background: #FDE2E4; color: #B4232F; }
.jh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 14px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; }
/* movimento leggero: col mouse le card si sollevano, col dito si "premono" */
.gcard, .gbig, .qcard, .feature, .tile, .sh-card, .office, .fb-card, .shop-card, .jh-card, .steps-card, .install-card, .channel, .gl-card, .jstep { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
@media (hover: hover) {
  .gcard:hover, .gbig:hover, .qcard:hover, .feature:hover, .tile:hover, .sh-card:hover, .office:hover, .fb-card:hover, .shop-card:hover, .jh-card:hover, .steps-card:hover, .install-card:hover, .channel:hover, .gl-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(23,33,43,.14); }
  .btip:hover .benni { animation: bnHop .55s cubic-bezier(.3,1.6,.5,1); }
  .stag { transition: transform .25s ease; }
}
.gcard:active, .gbig:active, .qcard:active, .feature:active, .tile:active, .sh-card:active, .fb-card:active, .jh-card:active, .steps-card:active, .btip:active .btip-bubble { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .btip.hop .benni, .btip-bubble.pop, .btip:hover .benni { animation: none; } .gcard, .gbig, .qcard, .feature, .tile, .sh-card, .office, .fb-card, .shop-card, .jh-card { transition: none; } }

/* correzioni: linea tratteggiata sotto i contenuti aperti, card del lavoro su computer, etichette dei negozi */
.jstep .jp, .jstep .jbody { position: relative; z-index: 1; }
.jstep .jp { background: var(--card); }
.jpath li.open::after { display: none; }
@media (min-width: 700px) {
  .jh-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); overflow: visible; margin: 0; padding: 4px 0 10px; }
  .jh-card { max-width: none; }
}
.f-shop { flex-direction: column; justify-content: flex-start; }
.f-shop .feature-txt { max-width: 100%; }
.shop-tags { position: static; width: auto; display: flex; flex-wrap: wrap; gap: 8px; order: -1; margin-bottom: 4px; }
.stag { position: static; }
.stag.s1, .stag.s2, .stag.s3, .stag.s4 { top: auto; right: auto; bottom: auto; }
.shop-tags, .shop-tags:hover { text-decoration: none; }

/* etichette dei negozi che scorrono */
.shop-tags { display: block; overflow: hidden; margin: 0 -20px 6px; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); direction: ltr; }
.stag-track { display: flex; gap: 10px; width: max-content; animation: tagScroll 26s linear infinite; }
.stag { flex: none; }
.stag.s1 { transform: rotate(3deg); } .stag.s2 { transform: rotate(-3deg); } .stag.s3 { transform: rotate(2deg); } .stag.s4 { transform: rotate(-2deg); }
@keyframes tagScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.f-shop:hover .stag-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .stag-track { animation: none; flex-wrap: wrap; width: auto; padding: 0 20px; } }

.sh-mapbtn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--input-bg); color: var(--accent-ink); font: inherit; font-weight: 700; font-size: 15px; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.sh-mapbtn.on { background: var(--accent-soft); }
.sh-map { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--accent-soft); }
.sh-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.jbody li::after { content: none !important; }
.f-job { background: linear-gradient(135deg, #2C6CC0, #5B3FC0); }
.job-deco { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 120px; height: 110px; }
[dir=rtl] .job-deco { right: auto; left: 18px; }
.jd-ic { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 20px; background: #fff; color: #2C6CC0; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.jd-pin { position: absolute; width: 32px; height: 32px; border-radius: 50%; background: #FFC93C; color: #17212B; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(0,0,0,.2); animation: pinBob 2.4s ease-in-out infinite; }
.jd-pin.p1 { left: 0; top: 4px; } .jd-pin.p2 { right: 0; top: 0; animation-delay: .6s; background: #fff; color: #C2410C; } .jd-pin.p3 { right: 8px; bottom: 0; animation-delay: 1.2s; background: #DCF5E6; color: #146C3A; }
@keyframes pinBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .jd-pin { animation: none; } }
@media (min-width: 640px) {
  .job-deco { top: 18px; transform: none; }
  .f-shop .feature-txt { padding-top: 0; }
}

/* sezione «In arrivo su Benvi» più visibile */
.soon-sec { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 24px; background: linear-gradient(160deg, #FFF4D6, #FDE7EF 55%, #E8EEFB); border: 1px solid rgba(0,0,0,.04); }
.soon-head { display: flex; align-items: center; gap: 12px; }
.soon-ic { width: 48px; height: 48px; flex: none; border-radius: 16px; background: #FFC93C; color: #17212B; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(242,183,5,.35); }
.soon-title { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 1.2; color: #17212B; }
.soon-sub { margin: 2px 0 0; font-size: 15px; line-height: 1.4; color: #4A5763; }
.soon-sec .tile { border: 0; background: #fff; box-shadow: 0 6px 16px rgba(23,33,43,.08); color: #17212B; }
.soon-sec .tile-ic { width: 44px; height: 44px; border-radius: 14px; }
.soon-sec .tile-title { font-size: 16px; }
.soon-sec .tile-soon { align-self: flex-start; background: #FFF1C7; color: #7A5600; padding: 4px 10px; border-radius: 999px; letter-spacing: .03em; }
.tc0 .tile-ic { background: #E4EDF8; color: #1F5FAD; } .tc1 .tile-ic { background: #FDEADF; color: #C2410C; } .tc2 .tile-ic { background: #DCF5E6; color: #146C3A; }
.tc3 .tile-ic { background: #EFE7FB; color: #6D3FC0; } .tc4 .tile-ic { background: #FDE2E4; color: #B4232F; } .tc5 .tile-ic { background: #D9F2F0; color: #0F766E; }
:root[data-theme="dark"] .soon-sec { background: linear-gradient(160deg, #2A2414, #2A1820 55%, #18213A); border-color: var(--line); }
:root[data-theme="dark"] .soon-title { color: #fff; } :root[data-theme="dark"] .soon-sub { color: #C9D2DA; }
:root[data-theme="dark"] .soon-sec .tile { background: var(--card); color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .soon-sec { background: linear-gradient(160deg, #2A2414, #2A1820 55%, #18213A); border-color: var(--line); } :root:not([data-theme="light"]) .soon-title { color: #fff; } :root:not([data-theme="light"]) .soon-sub { color: #C9D2DA; } :root:not([data-theme="light"]) .soon-sec .tile { background: var(--card); color: var(--ink); } }