* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font-family: 'DM Sans', -apple-system, system-ui, sans-serif; background: #f2f2f7; color: #1d1d1f; }
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; position: relative; overflow-x: clip; }  /* clip, non hidden: hidden crea uno scroll container e rompe position:sticky */
[f-cloak] { display: none; }
.blue { color: var(--app-blue, #0071e3); }

/* TOPBAR */
.topbar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #fff; border-bottom: 1px solid #e5e5ea; position: sticky; top: 0; z-index: 10; }
.topbar .title { font-weight: 700; font-size: 18px; flex: 1; }
.topbar .back { background: 0; border: 0; font-size: 22px; color: var(--app-blue, #0071e3); cursor: pointer; padding: 0 4px 0 0; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--app-blue, #0071e3); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; cursor: pointer; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* LOGIN */
.login { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 32px 24px; }
.brand { text-align: center; margin-bottom: 36px; }
.brand h1 { font-size: 42px; font-weight: 800; letter-spacing: -1px; margin: 0; color: var(--app-blue, #0071e3); }
.brand p { color: #86868b; margin: 6px 0 0; }
.field { margin-bottom: 14px; }
.field input { width: 100%; padding: 15px 16px; font-size: 16px; border: 1px solid #d2d2d7; border-radius: 12px; background: #fff; outline: none; }
.field input:focus { border-color: var(--app-blue, #0071e3); }
.btn { width: 100%; padding: 15px; font-size: 17px; font-weight: 600; border: 0; border-radius: 12px; background: var(--app-blue, #0071e3); color: #fff; cursor: pointer; }
.btn:disabled { opacity: .6; }
p.error { color: var(--app-red, #ff3b30); text-align: center; margin-top: 14px; font-size: 14px; }
p.ok { color: var(--app-green, #34c759); text-align: center; margin-top: 14px; font-size: 14px; }

/* PROFILO ATTIVITÀ (home) */
.profile { background: #fff; padding: 28px 20px 24px; text-align: center; border-bottom: 1px solid #e5e5ea; }
.profile .logo { width: 84px; height: 84px; border-radius: 22px; margin: 0 auto 12px; background: linear-gradient(135deg, var(--app-blue, #0071e3), #8b7cf6); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; overflow: hidden; box-shadow: 0 6px 18px rgba(108,92,231,.25); }
.profile .logo img { width: 100%; height: 100%; object-fit: cover; }
.profile .biz { font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.profile .dom { color: var(--app-blue, #0071e3); font-size: 14px; margin-top: 3px; }
.profile .dom.muted { color: #86868b; }

/* CARTE */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; padding: 18px; }
.tile { background: #fff; border-radius: 18px; padding: 20px 16px; cursor: pointer; border: 1px solid #ececf0; transition: transform .1s; }
.tile:active { transform: scale(.97); }
.tile .ic { font-size: 30px; }
.tile .nm { font-weight: 700; margin-top: 8px; font-size: 15px; }
.tile .sub { color: #86868b; font-size: 12px; margin-top: 2px; }

/* STATS */
.wrap { padding: 18px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.card { background: #fff; border-radius: 16px; padding: 18px; }
.card .num { font-size: 30px; font-weight: 800; letter-spacing: -1px; }
.card .lbl { color: #86868b; font-size: 13px; margin-top: 2px; }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: #86868b; margin: 0 0 10px 4px; }
.list { background: #fff; border-radius: 16px; overflow: hidden; }
.list .row { display: flex; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #f0f0f2; font-size: 14px; }
.list .row:last-child { border-bottom: 0; }
.list .row .u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .row .c { font-weight: 700; color: var(--app-blue, #0071e3); }
.empty { text-align: center; color: #86868b; padding: 30px; }
.soon-box { text-align: center; padding: 70px 24px; color: #86868b; }
.soon-box .big { font-size: 48px; }

/* PICKER attività */
.picker-hint { color: #86868b; font-size: 14px; margin: 0 4px 14px; }
.blist { display: flex; flex-direction: column; gap: 10px; }
.brow { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #ececf0; border-radius: 16px; padding: 14px 16px; cursor: pointer; transition: transform .1s; }
.brow:active { transform: scale(.98); }
.brow .bav { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, var(--app-blue, #0071e3), #8b7cf6); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; flex-shrink: 0; }
.brow .bname { font-weight: 700; font-size: 16px; }
.brow .bdom { color: #86868b; font-size: 13px; }
.brow .bcur { margin-left: auto; color: var(--app-green, #34c759); font-size: 20px; font-weight: 700; }

/* DRAWER destro */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; }
.drawer { position: fixed; top: 0; right: 0; width: 82%; max-width: 360px; height: 100%; background: #f2f2f7; z-index: 21; box-shadow: -8px 0 30px rgba(0,0,0,.18); display: flex; flex-direction: column; }
.drawer .head { background: #fff; padding: 26px 20px; border-bottom: 1px solid #e5e5ea; display: flex; align-items: center; gap: 14px; }
.drawer .head .av { width: 52px; height: 52px; border-radius: 50%; background: var(--app-blue, #0071e3); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; overflow: hidden; }
.drawer .head .av img { width: 100%; height: 100%; object-fit: cover; }
.drawer .head .nm { font-weight: 700; font-size: 17px; }
.drawer .head .em { color: #86868b; font-size: 13px; }
.drawer .body { flex: 1; overflow-y: auto; padding: 16px; }
.menu { background: #fff; border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.menu .mi { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid #f0f0f2; cursor: pointer; font-size: 15px; }
.menu .mi:last-child { border-bottom: 0; }
.menu .mi .ico { font-size: 18px; width: 22px; text-align: center; }
.menu .mi .val { margin-left: auto; color: #86868b; font-size: 13px; }
.menu .mi.danger { color: var(--app-red, #ff3b30); }
.subcard { background: #fff; border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.subcard .plan { font-size: 20px; font-weight: 800; }
.subcard .meta { color: #86868b; font-size: 13px; margin-top: 4px; }
.ver { text-align: center; color: #b0b0b5; font-size: 12px; padding: 8px; }

/* ══ BRAND VELA — accento viola (globale, tema chiaro) ══ */
#app { --app-blue: #6c5ce7; --app-blue-hover: #7d6ef0; --app-blue-active: #5a4bd1; --app-blue-bg: rgba(108,92,231,.12); --app-primary: #6c5ce7; --app-green: #22c55e; --app-red: #ef4444; }
#app input, #app button, #app textarea, #app select { font-family: inherit; }
#app .app-btn-filled { background-image: linear-gradient(135deg, #6c5ce7, #8b7cf6); box-shadow: 0 4px 16px rgba(108,92,231,.30); }
#app .app-btn-filled:hover { background-image: linear-gradient(135deg, #7d6ef0, #9d8ef8); }

/* ══ LOGIN (splash brand DARK — il resto dell'app è chiaro) ══ */
.login-screen { position: relative; min-height: 100vh; padding: 48px 26px 64px;
	--app-blue: #6c5ce7; --app-blue-hover: #7d6ef0; --app-blue-active: #5a4bd1; --app-blue-bg: rgba(108,92,231,.16);
	background-color: #0c0f1a;
	background-image:
		radial-gradient(ellipse 520px 520px at 50% 22%, rgba(108,92,231,.16) 0%, transparent 70%),
		radial-gradient(ellipse 360px 360px at 22% 12%, rgba(162,155,254,.08) 0%, transparent 70%),
		url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.018'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
		linear-gradient(160deg, #0c0f1a 0%, #1a1040 45%, #2d1b69 78%, #1a1040 100%);
	background-repeat: no-repeat, no-repeat, repeat, no-repeat;
}
.login-form { width: 100%; }
.brand-logo { display: block; width: 320px; max-width: 82%; height: auto; margin: 0 auto 16px; opacity: .96; }
.brand-headline { font-family: 'Playfair Display', Georgia, serif; font-size: 1.85rem; font-weight: 700; line-height: 1.2; color: #fff; margin: 0; }
.brand-headline em { font-style: italic; background: linear-gradient(135deg, #a29bfe, #e0c3fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.login-form .app-input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; }
.login-form .app-input::placeholder { color: rgba(255,255,255,.4); }
.pw-wrap { position: relative; }
.pw-wrap .app-input { padding-right: 46px; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; line-height: 1; padding: 6px; cursor: pointer; display: flex; align-items: center; color: rgba(255,255,255,.55); }
.pw-toggle svg { display: block; }

/* registrazione — scrollabile a 100dvh (form alto): l'ultimo elemento ("Accedi")
   resta sopra la nav bar Android grazie al padding-bottom safe-area di .login-screen */
.reg-screen { justify-content: flex-start; min-height: 0; height: 100dvh; overflow-y: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
.reg-phone { display: flex; align-items: stretch; gap: 8px; }
.reg-phone .app-input { flex: 1; }
.reg-prefix { display: flex; align-items: center; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.7); font-weight: 600; font-size: 15px; flex-shrink: 0; }
.reg-otp-input { text-align: center; letter-spacing: 8px; font-size: 22px; font-weight: 700; }
.login-footer { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: rgba(255,255,255,.28); font-size: 12px; }

/* cellette codice 2FA (login + impostazioni): 6 input singoli, solo cifre */
.otp-cells { display: flex; gap: 8px; justify-content: center; margin: 12px 0 4px; }
.otp-cell { width: 42px; height: 52px; padding: 0; text-align: center; font-size: 22px; font-weight: 700; border: 1.5px solid #d3d7e0; border-radius: 10px; outline: none; background: #fff; color: #1a1d26; }
.otp-cell:focus { border-color: var(--app-blue, #6c5ce7); box-shadow: 0 0 0 3px rgba(108,92,231,.15); }
/* sul fondo scuro del login le cellette seguono lo stile degli altri input */
.login-form .otp-cell { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; }
.login-form .otp-cell:focus { border-color: #a29bfe; box-shadow: 0 0 0 3px rgba(162,155,254,.2); }
.login-footer a { color: rgba(255,255,255,.45); text-decoration: none; }

/* ══ HOME (profilo attività) — tema chiaro ══ */
.home-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.home-logo { height: 26px; width: auto; }
.home-topbar .home-menu { background: transparent; color: #6c5ce7; cursor: pointer; border: 0; }
.home-profile { text-align: center; padding: 10px 24px 22px; }
.home-bizlogo { width: 92px; height: 92px; border-radius: 24px; margin: 0 auto 14px; background: linear-gradient(135deg, #6c5ce7, #8b7cf6); display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 800; color: #fff; overflow: hidden; box-shadow: 0 8px 28px rgba(108,92,231,.32); }
.home-bizlogo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.home-bizname { font-size: 1.55rem; font-weight: 800; letter-spacing: -.3px; color: #1d1d1f; margin: 0 0 4px; }
.home-bizslogan { font-size: 14px; color: #86868b; margin: 2px 0 8px; line-height: 1.35; }
.home-bizdom { display: inline-block; color: #6c5ce7; font-size: 14px; font-weight: 600; text-decoration: none; }
.home-bizdom.muted { color: #86868b; font-weight: 500; }
/* home: indirizzo del sito come bottone (da scegliere / da attivare) e i due bottoni del sito online */
.home-bizdom-btn { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
/* uno sotto l'altro, larghi uguali e con lo spazio in mezzo (affiancati non ci stanno sul telefono) */
.home-site-btns { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 280px; margin: 12px auto 0; }
.home-site-btns .app-btn { width: 100%; justify-content: center; font-size: 14px; margin: 0; }
/* "Copia il link" e "QR code" affiancati sotto WhatsApp */
.home-site-btns-row { display: flex; gap: 10px; }
.home-site-btns-row .app-btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
.home-bizcolors { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.home-bizcolor { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.home-tiles-sep { border: none; border-top: 1px solid #ececf0; margin: 16px 6px; }

/* Checklist "Completa il profilo" (home) — sparisce a profilo completo */
.home-setup { margin: 2px 16px 8px; background: #fff; border: 1px solid #ececf0; border-radius: 18px; padding: 15px 16px 7px; box-shadow: 0 2px 10px rgba(20,12,40,.04); }
.home-setup-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.home-setup-title { font-weight: 800; font-size: 15px; color: #1d1d1f; }
.home-setup-prog { font-size: 12px; font-weight: 700; color: #6c5ce7; background: rgba(108,92,231,.10); padding: 3px 9px; border-radius: 100px; }
.home-setup-bar { height: 6px; border-radius: 100px; background: #ececf0; overflow: hidden; margin-bottom: 4px; }
.home-setup-bar-fill { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, #6c5ce7, #8b7cf6); transition: width .35s ease; }
.home-setup-steps { display: flex; flex-direction: column; }
.home-setup-step { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 2px; background: transparent; border: 0; border-top: 1px solid #f2f2f5; cursor: pointer; text-align: left; }
.home-setup-step:first-child { border-top: 0; }
.home-setup-step:not(.home-setup-step-done):active { background: #faf9ff; }
.home-setup-tick { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d6d6dd; display: flex; align-items: center; justify-content: center; color: #fff; transition: background .15s, border-color .15s; }
.home-setup-tick svg, .home-setup-tick i { opacity: 0; }
.home-setup-lbl { flex: 1; font-size: 14px; font-weight: 600; color: #1d1d1f; }
.home-setup-chev { flex-shrink: 0; color: #c4c4cc; }
.home-setup-step-done .home-setup-tick { background: #22c55e; border-color: #22c55e; }
.home-setup-step-done .home-setup-tick svg, .home-setup-step-done .home-setup-tick i { opacity: 1; }
.home-setup-step-done .home-setup-lbl { color: #86868b; font-weight: 500; text-decoration: line-through; text-decoration-color: rgba(134,134,139,.5); }
.home-setup-step-done .home-setup-chev { visibility: hidden; }
/* Passo non ancora sbloccato: si procede uno alla volta (come il lucchetto del menu).
   Il click è comunque fermato in setupGo: il colore da solo non basta. */
.home-setup-step-locked { cursor: not-allowed; }
.home-setup-step-locked .home-setup-lbl { color: #b8b8bf; }
.home-setup-step-locked .home-setup-tick { opacity: .5; }
.home-setup-step-locked .home-setup-chev { color: #c7c7cc; }
.home-setup-step-locked:active { background: transparent; }
.pg-notice { display:flex; align-items:flex-start; gap:8px; background:#eef2ff; border:1px solid #e0e7ff; color:#3730a3; font-size:12.5px; line-height:1.4; padding:10px 12px; border-radius:12px; margin-bottom:14px; }
.pg-notice i, .pg-notice svg { flex-shrink:0; color:#6366f1; margin-top:1px; }
.pg-notice b { font-weight:700; }
/* Nudge tappabile "completa prima le info" (pagine) */
.pg-nudge { display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:#fff8eb; border:1px solid #fde8c0; color:#92580a; font-size:12.5px; line-height:1.4; padding:11px 12px; border-radius:12px; margin-bottom:14px; cursor:pointer; }
.pg-nudge:active { background:#fdf1d8; }
.pg-nudge > span { flex:1; }
.pg-nudge i, .pg-nudge svg { flex-shrink:0; color:#d9920c; }
.pg-nudge b { font-weight:700; }
.pg-limit-note { display:flex; align-items:flex-start; gap:8px; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; font-size:12.5px; line-height:1.4; padding:10px 12px; border-radius:12px; margin:8px 0 14px; }
.pg-limit-note i, .pg-limit-note svg { flex-shrink:0; color:#ea580c; margin-top:1px; }
.pg-limit-note b { font-weight:700; }
.lst-tbtn:disabled { opacity:.5; cursor:not-allowed; }
.pg-list { display:flex; flex-direction:column; gap:12px; }
.pg-card { background:#fff; border:1px solid #ececf0; border-radius:16px; padding:14px 16px; }
.pg-card-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.pg-title { font-weight:700; font-size:15px; color:#1d1d1f; flex:1; min-width:0; }
.pg-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:3px 8px; border-radius:100px; flex-shrink:0; }
.pg-badge-on { background:#dcfce7; color:#15803d; }
.pg-badge-off { background:#fef3c7; color:#b45309; }
.pg-hint { font-size:11px; color:#6e6e73; }
/* pagina visibile ma sito non ancora online: si dice che e' un'anteprima */
.pg-hint-preview { margin:-2px 0 8px; font-size:12px; color:#b45309; }
.pg-chips { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.pg-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:5px 11px; border-radius:100px; border:none; cursor:pointer; }
.pg-chip-open { background:#ede9fe; color:#6d28d9; }
.pg-chip-share { background:#dbeafe; color:#1d4ed8; }
/* QR code della pagina: chip + scheda con anteprima (pixel netti, niente sfocatura) */
.pg-chip-qr { background:#f1f1f4; color:#1d1d1f; }
.pg-chip-qr.pg-chip-off { opacity:.45; }
.pg-qr-box { display:flex; justify-content:center; margin:4px 0 12px; }
.pg-qr-box img { width:220px; height:220px; image-rendering:pixelated; border-radius:8px; box-shadow:0 1px 6px rgba(0,0,0,.08); }
.pg-qr-title { margin:0; text-align:center; font-weight:700; font-size:15px; }
.pg-qr-url { margin:2px 0 10px; text-align:center; font-size:13px; color:#6c5ce7; word-break:break-all; }
.pg-qr-note { margin:0 0 14px; text-align:center; font-size:12px; color:var(--app-text-secondary); line-height:1.4; }
.pg-url { font-size:12px; color:#86868b; word-break:break-all; margin-bottom:6px; }
.pg-metatitle { margin-bottom:8px; }
.pg-meta { margin-bottom:8px; }
.pg-mlbl { display:block; font-size:10px; color:#a1a1a6; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.pg-mval { font-size:13px; color:#1d1d1f; }
.pg-meta .pg-mval { font-size:12px; color:#6e6e73; line-height:1.4; }
.pg-clamp { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pg-dates { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:11px; color:#86868b; margin-bottom:10px; }
.pg-dates b { color:#1d1d1f; font-weight:600; }
.pg-actions { display:flex; flex-wrap:wrap; gap:8px; }
.pg-act { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:7px 11px; border:1px solid #ececf0; border-radius:10px; background:#fff; color:#6c5ce7; cursor:pointer; }
.pg-act i, .pg-act svg { flex-shrink:0; }
.pg-act-del { color:#ff3b30; }

/* ══ PRENOTAZIONI / RICHIESTE DAL SITO (bk) ══ */
.bk-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.bk-stat { background:#fff; border:1px solid #ececf0; border-radius:14px; padding:12px 6px; text-align:center; }
.bk-stat-n { display:block; font-size:22px; font-weight:800; color:#1d1d1f; line-height:1.1; }
.bk-stat-l { display:block; font-size:11px; color:#86868b; margin-top:3px; font-weight:600; }
.bk-stat-new .bk-stat-n { color:#b45309; }
.bk-stat-ok .bk-stat-n { color:#15803d; }

.bk-filters { display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; margin-bottom:10px; scrollbar-width:none; }
.bk-filters::-webkit-scrollbar { display:none; }
.bk-chip { flex-shrink:0; font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:100px; border:1px solid #ececf0; background:#fff; color:#6e6e73; cursor:pointer; white-space:nowrap; }
.bk-chip-on { background:#6c5ce7; border-color:#6c5ce7; color:#fff; }

.bk-search { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #ececf0; border-radius:12px; padding:9px 12px; margin-bottom:14px; }
.bk-search i, .bk-search svg { flex-shrink:0; color:#a1a1a6; }
.bk-search-input { flex:1; border:none; outline:none; background:transparent; font-size:14px; color:#1d1d1f; min-width:0; }

.bk-empty { text-align:center; color:#a1a1a6; padding:40px 20px; }
.bk-empty i, .bk-empty svg { color:#d1d1d6; margin-bottom:10px; }
.bk-empty p { font-size:13.5px; line-height:1.5; margin:0; }
.bk-empty-filter { text-align:center; color:#a1a1a6; font-size:13px; padding:24px 0; }

.bk-list { display:flex; flex-direction:column; gap:10px; }
.bk-loadmore { display:flex; justify-content:center; padding:16px 0 4px; }
.alb-loading { display:flex; justify-content:center; padding:40px 0; }

/* ══ ONBOARDING crea attività (onb) ══ */
.onb { max-width:440px; margin:0 auto; padding:calc(40px + env(safe-area-inset-top)) 22px calc(32px + env(safe-area-inset-bottom)); }
.onb-mark { text-align:center; margin-bottom:14px; }
.onb-title { font-family:'Playfair Display', serif; font-size:1.7rem; font-weight:700; color:#1d1d1f; text-align:center; margin:0 0 6px; }
.onb-sub { font-size:14px; color:#86868b; text-align:center; line-height:1.45; margin:0 0 26px; }
.onb-seclabel { display:block; margin-top:4px; }
.onb-sectors { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:8px 0 18px; }
.onb-sector { padding:12px 10px; border-radius:12px; border:1.5px solid #ececf0; background:#fff; color:#1d1d1f; font-size:13.5px; font-weight:600; cursor:pointer; text-align:center; transition:border-color .12s, background .12s; }
.onb-sector:active { transform:scale(.98); }
.onb-sector-on { border-color:#6c5ce7; background:#6c5ce7; color:#fff; }
.onb-err { color:#dc2626; font-size:13px; text-align:center; margin:0 0 12px; }
.onb-btn { width:100%; }

/* ══ INDIRIZZO SITO (dominio mobile) ══ */
.site-domain-intro { margin-bottom:12px; }
.site-sub { display:flex; align-items:stretch; background:#fff; border:1.5px solid #ececf0; border-radius:12px; overflow:hidden; }
.site-sub-input { flex:1; min-width:0; border:none; outline:none; background:transparent; padding:11px 12px; font-size:15px; color:#1d1d1f; }
.site-sub-suffix { padding:0 12px; color:#86868b; font-size:14px; font-weight:600; white-space:nowrap; background:#f7f7f9; display:flex; align-items:center; }
.site-sub-hint { font-size:12.5px; color:#86868b; margin:8px 2px 0; }
.site-sub-hint.site-sub-ok { color:#15803d; }
.site-sub-hint.site-sub-bad { color:#dc2626; }
.site-domain-pub { margin-top:14px; }
.app-btn.site-domain-cancel { margin-top:10px; color:#dc2626; }

/* ══ ASSISTENZA (chat supporto) ══ */
.sup-list { display:flex; flex-direction:column; gap:10px; }
.sup-row { display:block; width:100%; text-align:left; background:#fff; border:1px solid #ececf0; border-radius:16px; padding:13px 15px; cursor:pointer; }
.sup-row:active { transform:scale(.995); }
.sup-row-top { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.sup-row-title { flex:1; min-width:0; font-weight:700; font-size:15px; color:#1d1d1f; }
.sup-row-preview { font-size:13px; color:#6e6e73; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sup-row-me { color:#a1a1a6; }
.sup-row-foot { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.sup-row-when { font-size:11.5px; color:#a1a1a6; }
.sup-row-unread { min-width:18px; height:18px; padding:0 5px; border-radius:100px; background:#ef4444; color:#fff; font-size:11px; font-weight:800; line-height:1; display:inline-flex; align-items:center; justify-content:center; }

/* Schermata "Il tuo referente": header contatto + chat */
.ref-head { display:flex; align-items:center; gap:12px; padding:12px 16px; background:#fff; border-bottom:1px solid #ececf0; }
.ref-avatar { flex-shrink:0; width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#6c5ce7,#8b7cf6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; }
.ref-card-meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ref-card-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#6c5ce7; }
.ref-card-name { font-size:16px; font-weight:700; color:#1d1d1f; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ref-head-actions { display:flex; gap:8px; flex-shrink:0; }
.ref-iconbtn { width:38px; height:38px; border-radius:50%; border:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.ref-iconbtn:active { transform:scale(.94); }
.ref-iconbtn-call { background:#e0f2fe; color:#0369a1; }
.ref-iconbtn-wa { background:#dcfce7; color:#128c4b; }
.ref-iconbtn-mail { background:#ede9fe; color:#6d28d9; }

/* striscia "N documenti condivisi" sotto l'intestazione del referente:
   compare solo se ce n'e' almeno uno, e apre il pannellino con l'elenco */
.ref-docs-bar { display:flex; align-items:center; gap:10px; padding:11px 16px; background:#f5f3ff; border-bottom:1px solid #ececf0; color:#5b21b6; font-size:14px; font-weight:600; cursor:pointer; }
.ref-docs-bar:active { background:#ede9fe; }

/* selettore foto in chat (bottom-sheet: galleria / fotocamera) */
.photo-src-btn { display:flex; align-items:center; gap:14px; width:100%; padding:13px 14px; background:#fff; border:1px solid #ececf0; border-radius:14px; margin-bottom:10px; cursor:pointer; font-size:15px; font-weight:600; color:#1d1d1f; text-align:left; }
.photo-src-btn:active { background:#f7f6fe; }
.photo-src-ic { flex-shrink:0; width:44px; height:44px; border-radius:12px; background:rgba(108,92,231,.12); border:1px solid rgba(108,92,231,.22); color:#6c5ce7; display:flex; align-items:center; justify-content:center; }
.photo-src-lbl { flex:1; }
.sup-badge { display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:2px 8px; border-radius:100px; flex-shrink:0; vertical-align:middle; }
.sup-badge-warning { background:#fef3c7; color:#b45309; }
.sup-badge-info { background:#dbeafe; color:#1d4ed8; }
.sup-badge-success { background:#dcfce7; color:#15803d; }
.sup-badge-secondary { background:#f1f1f4; color:#6e6e73; }
.drawer-badge { margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:100px; background:#ef4444; color:#fff; font-size:11px; font-weight:800; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
/* chat: riempi l'altezza sotto la navbar + safe-area sull'input */
.app-container > .app-chat-wrap { flex:1; min-height:0; }
.app-container > .app-chat-wrap .app-chat-input-bar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.app-chat-input-bar .sup-attach { width:40px; height:40px; border-radius:50%; background:transparent; color:#86868b; flex-shrink:0; }
.sup-msg-from { display:block; font-size:10.5px; font-weight:700; color:#6c5ce7; margin-bottom:3px; }
.sup-msg-body { display:block; white-space:pre-wrap; word-break:break-word; }
.sup-msg-img { margin-bottom:4px; }
.sup-msg-img img { max-width:100%; max-height:240px; border-radius:10px; display:block; }
.sup-msg-file { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; background:rgba(0,0,0,.06); color:inherit; text-decoration:none; font-size:13px; margin-bottom:4px; }
.app-chat-bubble-mine .sup-msg-file { background:rgba(255,255,255,.22); }
.bk-card { display:block; width:100%; text-align:left; background:#fff; border:1px solid #ececf0; border-radius:16px; padding:13px 15px; cursor:pointer; }
.bk-card:active { transform:scale(.995); }
.bk-card-new { border-color:#ddd6fe; box-shadow:0 0 0 1px #ddd6fe; }
.bk-card-row { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.bk-card-name { flex:1; min-width:0; font-weight:700; font-size:15px; color:#1d1d1f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bk-card-snippet { font-size:13px; color:#6e6e73; line-height:1.4; margin-bottom:3px; }
.bk-card-foot { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; }
.bk-card-when { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:#a1a1a6; }
.bk-card-when i, .bk-card-when svg { flex-shrink:0; }

.bk-badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:100px; flex-shrink:0; }
.bk-badge-warning { background:#fef3c7; color:#b45309; }
.bk-badge-info { background:#dbeafe; color:#1d4ed8; }
.bk-badge-success { background:#dcfce7; color:#15803d; }
.bk-badge-secondary { background:#f1f1f4; color:#6e6e73; }

.bk-sheet-head { display:flex; align-items:center; gap:10px; }
.bk-sheet-head .lst-sheet-title { flex:1; min-width:0; }

.bk-contacts { display:flex; gap:8px; margin-bottom:16px; }
.bk-contact { flex:1; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:12px 6px; border-radius:14px; border:none; font-size:12px; font-weight:700; cursor:pointer; }
.bk-contact i, .bk-contact svg { flex-shrink:0; }
.bk-contact:active { transform:scale(.97); }
.bk-contact-call { background:#e0f2fe; color:#0369a1; }
.bk-contact-wa { background:#dcfce7; color:#128c4b; }
.bk-contact-mail { background:#ede9fe; color:#6d28d9; }

.bk-dl { margin:0 0 16px; display:flex; flex-direction:column; }
.bk-dl-row { display:flex; gap:12px; padding:9px 0; border-bottom:1px solid #f2f2f5; }
.bk-dl-row:last-child { border-bottom:none; }
.bk-dl-row dt { flex-shrink:0; width:96px; font-size:12.5px; color:#a1a1a6; font-weight:600; }
.bk-dl-row dd { flex:1; min-width:0; margin:0; font-size:13.5px; color:#1d1d1f; word-break:break-word; }
.bk-dl-msg dd { white-space:pre-wrap; }   /* messaggio in colonna come gli altri campi; pre-wrap preserva gli a-capo */

.app-btn.bk-del-btn { background:#fef2f2; color:#dc2626; }

/* ══ WIZARD CREA PAGINA (pgw) ══ */
.pgw-progress { font-size:12px; font-weight:600; color:#6c5ce7; letter-spacing:.3px; margin:2px 0 10px; }
.pgw-title { font-size:1.25rem; font-weight:800; color:#1d1d1f; letter-spacing:-.3px; margin:0 0 4px; }
.pgw-sub { font-size:13px; color:#86868b; line-height:1.4; margin:0 0 16px; }
.pgw-cards { display:flex; flex-direction:column; gap:10px; }
.pgw-card { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:#fff; border:1.5px solid #ececf0; border-radius:14px; padding:14px 16px; cursor:pointer; transition:border-color .12s, background .12s; }
.pgw-card:active { transform:scale(.99); }
.pgw-card-on { border-color:#6c5ce7; background:#f4f2fe; }
.pgw-card-ic { flex-shrink:0; width:40px; height:40px; border-radius:11px; background:rgba(108,92,231,.10); border:1px solid rgba(108,92,231,.20); display:flex; align-items:center; justify-content:center; color:#6c5ce7; }
.pgw-card-ic svg { width:20px; height:20px; }
.pgw-card-soon { opacity:.55; }
.pgw-card-tx { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.pgw-card-t { font-weight:700; font-size:15px; color:#1d1d1f; }
.pgw-card-s { font-size:12.5px; color:#86868b; line-height:1.35; }
.pgw-card-ck { flex-shrink:0; width:24px; height:24px; border-radius:50%; background:#6c5ce7; color:#fff; display:flex; align-items:center; justify-content:center; }
.pgw-soon { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#b45309; background:#fef3c7; padding:1px 6px; border-radius:100px; margin-left:6px; vertical-align:middle; }
.pgw-chips { display:flex; flex-wrap:wrap; gap:8px; }
.pgw-chip { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; padding:8px 14px; border:1.5px solid #ececf0; border-radius:100px; background:#fff; color:#6e6e73; cursor:pointer; transition:border-color .12s, background .12s, color .12s; }
.pgw-chip-on { border-color:#6c5ce7; background:#f4f2fe; color:#6d28d9; }
.pgw-chip-lock { background:#f5f5f7; color:#a1a1a6; border-color:#ececf0; cursor:default; }
.pgw-pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.pgw-pill { display:inline-flex; align-items:center; gap:5px; padding:7px 10px; border-radius:100px; border:1.5px solid #ddd6fe; background:#f4f2fe; color:#4c1d95; font-size:13px; font-weight:600; }
.pgw-pill-lock { border-color:#ececf0; background:#f5f5f7; color:#a1a1a6; }
.pgw-pill-dragging { opacity:.92; box-shadow:0 8px 22px rgba(108,92,231,.28); position:relative; z-index:5; }
.pgw-pill-grip { display:inline-flex; align-items:center; background:none; border:0; padding:0; margin:0 -1px 0 -2px; color:#8b7cf6; cursor:grab; touch-action:none; }
.pgw-pill-grip:active { cursor:grabbing; }
.pgw-pill-lk { display:inline-flex; align-items:center; color:#a1a1a6; }
.pgw-pill-lbl { line-height:1; }
.pgw-pill-x { display:inline-flex; align-items:center; background:none; border:0; padding:0; margin:0 -3px 0 2px; color:#8b7cf6; cursor:pointer; }
.pgw-seg { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.pgw-label { display:block; font-size:13px; font-weight:600; color:#1d1d1f; margin:6px 0 6px; }
.pgw-opt { font-weight:500; color:#a1a1a6; }
.pgw-recap { margin-top:18px; border:1px solid #ececf0; border-radius:14px; padding:6px 14px; }
.pgw-recap-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; font-size:13px; color:#86868b; border-bottom:1px solid #f0f0f3; }
.pgw-recap-row:last-child { border-bottom:none; }
.pgw-recap-row b { color:#1d1d1f; font-weight:700; }
.pgw-foot { display:flex; gap:10px; margin-top:24px; }
.pgw-grow { flex:1; }
.home-tiles { padding: 8px 18px 40px; }
.home-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 18px 16px; text-align: left; cursor: pointer; border-radius: 18px; transition: transform .1s; }
.home-tile-badge { position:absolute; top:10px; right:10px; min-width:18px; height:18px; padding:0 5px; border-radius:100px; background:#ef4444; color:#fff; font-size:11px; font-weight:800; line-height:1; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(239,68,68,.4); }
.home-tile:active { transform: scale(.97); }
.home-tile-ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(108,92,231,.12); border: 1px solid rgba(108,92,231,.22); display: flex; align-items: center; justify-content: center; color: #6c5ce7; margin-bottom: 2px; }
.home-tile-ic svg { width: 21px; height: 21px; }
.home-tile-nm { font-weight: 700; font-size: 15px; color: #1d1d1f; }
.home-tile-sub { font-size: 12px; color: #86868b; }
/* Gruppo 2 home (Sito web): card piene indaco, icone + testo bianchi */
.home-tiles-g2 .home-tile { background: #5d70e6; }
.home-tiles-g2 .home-tile-ic { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.32); color: #fff; }
.home-tiles-g2 .home-tile-nm { color: #fff; }
.home-tiles-g2 .home-tile-sub { color: rgba(255,255,255,.85); }
/* il gruppo del blog, rosa e a tutta larghezza. #db2777 e non un rosa piu' chiaro: col testo
   bianco il contrasto e' 4,6:1 (accessibilita' AA), #e84393 si ferma a 3,7 */
.home-tiles-blog { grid-template-columns: 1fr; }
.home-tiles-blog .home-tile { background: #db2777; }
.home-tiles-blog .home-tile-ic { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.32); color: #fff; }
.home-tiles-blog .home-tile-nm,
.home-tiles-blog .home-tile-sub { color: #fff; }
/* "Hai bisogno di aiuto? Scrivici" in fondo alla home (bottone app-btn-plain, qui solo la posizione) */
.home-help { display: flex; justify-content: center; margin-top: 18px; }
/* ══ STATISTICHE (pagina dedicata) ══ */
.stat-intro { font-size: 13px; color: #86868b; margin: 2px 0 14px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.stat-card { background: #fff; border: 1px solid #ececf0; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.stat-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.stat-lbl { font-size: 10px; color: #86868b; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; line-height: 1.2; }
.stat-card-ic { flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.stat-ic-violet { background: rgba(108,92,231,.12); color: #6c5ce7; }
.stat-ic-green  { background: rgba(34,197,94,.14);  color: #15803d; }
.stat-ic-orange { background: rgba(245,158,11,.16); color: #b45309; }
.stat-ic-red    { background: rgba(239,68,68,.12);  color: #dc2626; }
.stat-num { font-size: 1.65rem; font-weight: 800; color: #1d1d1f; letter-spacing: -.5px; line-height: 1.05; margin-top: 2px; }
.stat-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 100px; align-self: flex-start; line-height: 1.35; max-width: 100%; }
.stat-delta i, .stat-delta svg { flex-shrink: 0; }
.stat-delta-up   { background: #dcfce7; color: #15803d; }
.stat-delta-down { background: #fee2e2; color: #b91c1c; }
.stat-delta-muted { background: transparent; color: #86868b; font-weight: 500; padding: 2px 0; }
.stat-section { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #a1a1a6; margin: 20px 0 10px; }
.stat-chart-card { padding: 14px 16px 40px; margin-top: 14px; overflow: hidden; }
.stat-chart-card .app-chart-area { overflow: visible; }
.stat-chart-card .stat-chart-inner { padding-bottom: 40px; gap: 1px; }
.stat-chart-card .stat-chart-inner .app-chart-bar { max-width: none; min-width: 2px; }
.stat-chart-card .stat-chart-inner .app-chart-bar-label { transform: rotate(-45deg); transform-origin: top right; right: 50%; top: calc(100% + 6px); }
.stat-chart-card .app-chart-yaxis { padding-bottom: 40px; }
/* override Vela sopra il componente app-list (statistiche pagine + fonti) */
.stat-purl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-pcount { font-weight: 700; color: #6c5ce7; }
.stat-bar { margin-top: 6px; }
.stat-bar .app-progress-bar { background: #6c5ce7; }

/* ══ ABBONAMENTO (bill-*) ══ */
.bill-current { background: linear-gradient(135deg, rgba(108,92,231,.10), rgba(139,124,246,.06)); border: 1px solid rgba(108,92,231,.20); padding: 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.bill-current-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bill-current-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #6c5ce7; line-height: 1.2; }
.bill-current-plan { font-size: 1.4rem; font-weight: 800; color: #1d1d1f; letter-spacing: -.3px; margin-top: 2px; }
.bill-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 100px; text-transform: uppercase; letter-spacing: .3px; flex-shrink: 0; }
.bill-badge-on   { background: #dcfce7; color: #15803d; }
.bill-badge-warn { background: #fef3c7; color: #b45309; }
.bill-badge-off  { background: #ede9fe; color: #6d28d9; }
.bill-price { display: flex; align-items: baseline; gap: 6px; }
.bill-price-eur { font-size: 1.6rem; font-weight: 800; color: #1d1d1f; letter-spacing: -.4px; }
.bill-price-cycle { font-size: 13px; color: #86868b; font-weight: 600; }
.bill-exp { font-size: 13px; color: #6e6e73; line-height: 1.4; }
.bill-exp-warn { color: #b45309; }
.bill-exp b { color: #1d1d1f; font-weight: 700; }
.bill-current-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bill-cancel-btn { color: #d97706 !important; }

.bill-card { padding: 12px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.bill-card-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #86868b; }
.bill-card-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #1d1d1f; }
.bill-card-brand { font-weight: 700; }
.bill-card-dots { color: #6e6e73; letter-spacing: 1px; flex: 1; min-width: 0; overflow: hidden; }
.bill-card-exp { color: #86868b; font-size: 12px; }

.bill-usage { padding: 14px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.bill-usage-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 13px; }
.bill-usage-row:first-child { margin-top: 0; }
.bill-usage-lbl { display: inline-flex; align-items: center; gap: 6px; color: #6e6e73; }
.bill-usage-val { color: #1d1d1f; }
.bill-usage-val b { color: #6c5ce7; font-weight: 700; }
.bill-bar { margin-bottom: 4px; }
.bill-bar .app-progress-bar { background: #6c5ce7; }
.bill-usage-extra { font-size: 11.5px; color: #15803d; font-weight: 600; margin: -2px 0 2px; }

.bill-plans { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.bill-plan { position: relative; padding: 18px 16px; display: flex; flex-direction: column; gap: 3px; }
.bill-plan-reco { border-color: rgba(108,92,231,.45); box-shadow: 0 4px 18px rgba(108,92,231,.12); }
.bill-plan-reco-badge { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 100px; background: #6c5ce7; color: #fff; text-transform: uppercase; letter-spacing: .4px; }
.bill-plan-name { font-size: 1rem; font-weight: 800; color: #1d1d1f; text-align: center; text-transform: uppercase; letter-spacing: .4px; }
.bill-plan-tagline { font-size: 12.5px; color: #86868b; line-height: 1.4; text-align: center; }
.bill-plan-price { font-size: 1.9rem; font-weight: 800; color: #6c5ce7; letter-spacing: -.5px; text-align: center; margin-top: 8px; }
.bill-plan-period { font-size: 14px; font-weight: 600; color: #86868b; margin-left: 2px; }
.bill-plan-note { font-size: 11.5px; color: #86868b; text-align: center; margin-bottom: 6px; }
.bill-plan-feats { display: flex; flex-direction: column; margin: 2px 0 4px; }
.bill-plan-feat { font-size: 13px; color: #1d1d1f; display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; border-top: 1px solid #f0f0f2; line-height: 1.35; }
.bill-plan-feat i, .bill-plan-feat svg { color: #6c5ce7; flex-shrink: 0; margin-top: 1px; }
.bill-plan-feat b { font-weight: 700; }
.bill-plan-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: #fff3cd; color: #8a6d00; white-space: nowrap; }
.bill-plan-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.bill-plan-sem { font-size: 12px; }

.bill-topups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.bill-topup { padding: 16px 14px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; border: 1px solid #ececf0; }
.bill-topup:active { transform: scale(.99); }
.bill-topup-credits { font-size: 13px; color: #1d1d1f; }
.bill-topup-credits b { font-size: 1.2rem; font-weight: 800; color: #6c5ce7; margin-right: 3px; }
.bill-topup-label { font-size: 11.5px; color: #86868b; }
.bill-topup-price { font-size: 14px; font-weight: 700; color: #1d1d1f; margin-top: 4px; }

.bill-history-amt { font-weight: 700; color: #6c5ce7; }
/* pallino icona storico per tipo (override del default .app-list-item-icon) */
.bill-hist-ic { width: 38px; height: 38px; }
.bill-hist-green  { background: #dcfce7; color: #15803d; }
.bill-hist-orange { background: #fef3c7; color: #b45309; }
.bill-hist-red    { background: #fee2e2; color: #dc2626; }

/* ══ DRAWER ACCOUNT — componenti framework + icone SVG ══ */
.drawer-user { display: flex; align-items: center; gap: 12px; }
.drawer-user-name { font-weight: 700; font-size: 15px; color: var(--app-text); }
.drawer-user-email { font-size: 12px; color: var(--app-text-secondary); }
.drawer-user-credits { font-size: 12px; color: #6c5ce7; font-weight: 600; margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.drawer-user-ver { font-size: 11px; color: var(--app-text-tertiary); margin-top: 2px; }
.drawer-ic { display: flex; align-items: center; justify-content: center; width: 24px; color: #6c5ce7; flex-shrink: 0; }
.drawer-ic svg { width: 20px; height: 20px; }
.drawer-sub { margin: 4px 16px 8px; padding: 14px 16px; border-radius: 14px; background: rgba(108,92,231,.10); border: 1px solid rgba(108,92,231,.18); }
.drawer-sub-plan { font-size: 18px; font-weight: 800; color: #6c5ce7; }
.drawer-sub-meta { font-size: 12px; color: var(--app-text-secondary); margin-top: 3px; }
.app-drawer-item.drawer-danger { color: var(--app-red); }
.app-drawer-item.drawer-danger .drawer-ic { color: var(--app-red); }
.drawer-foot { text-align: center; color: var(--app-text-tertiary); font-size: 12px; padding: 18px 8px 8px; }

/* ══ INFO ATTIVITÀ ══ */
.logo-row { display: flex; align-items: center; gap: 16px; margin: 8px 0 22px; }
.info-logo { position: relative; width: 116px; height: 116px; border-radius: 28px; flex-shrink: 0; background: linear-gradient(135deg, #6c5ce7, #8b7cf6); display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 800; color: #fff; overflow: hidden; box-shadow: 0 8px 24px rgba(108,92,231,.28); }
.info-logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.logo-spin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.6); border-radius: inherit; }
.logo-actions { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.logo-actions .app-btn { width: 100%; }
/* versioni del logo (views/info.html): tre riquadri, la bianca su fondo scuro */
.logo-kit { margin: -4px 0 20px; }
.logo-kit-row { display: flex; gap: 10px; }
.logo-kit-tile { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 1px solid #e3e3ea; border-radius: 14px; background: #fff; color: #1d1d1f; font: inherit; cursor: pointer; }
.logo-kit-img { width: 100%; height: 64px; border-radius: 10px; background: #f1f1f4; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.logo-kit-img-dark { background: #212529; }
.logo-kit-img img { max-width: 85%; max-height: 48px; object-fit: contain; }
.logo-kit-lbl { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #6c5ce7; }
.ai-spark { width: 15px; height: 15px; vertical-align: -2px; margin-right: 5px; }
.app-container { height: 100vh; height: 100dvh; }  /* 100vh = riserva per browser senza dvh (WebView vecchie): senza, height resta auto e scorre tutta la pagina */

/* Force-update gate: schermata di blocco a tutto schermo (versione app sotto la minima supportata) */
.update-gate { position: fixed; inset: 0; z-index: 100000; background: var(--app-bg, #f2f2f7); display: flex; align-items: center; justify-content: center; padding: max(32px, env(safe-area-inset-top)) 32px max(32px, env(safe-area-inset-bottom)); }
.update-gate-box { max-width: 340px; width: 100%; text-align: center; }
.update-gate-ic { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%; background: var(--app-blue-bg, rgba(108,92,231,.12)); color: var(--app-primary, #6c5ce7); margin-bottom: 20px; }
.update-gate-title { font-size: 22px; font-weight: 800; margin: 0 0 12px; }
.update-gate-msg { font-size: 14.5px; line-height: 1.5; color: #86868b; margin: 0 0 18px; }
.update-gate-vers { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 24px; padding: 9px 16px; border-radius: 12px; background: var(--app-blue-bg, rgba(108,92,231,.12)); font-size: 15px; font-weight: 600; }
.update-gate-vers-old { color: #86868b; text-decoration: line-through; }
.update-gate-vers-arrow { color: #b0b0b6; font-weight: 400; }
.update-gate-vers-new { color: var(--app-primary, #6c5ce7); font-weight: 800; }
/* Rotte INLINE (home/picker): figlie dirette di #app, senza .app-container/.app-content,
   quindi senza un proprio scroller. #app ha solo min-height:100vh (cresce col contenuto, non
   scrolla) → con contenuto oltre il viewport le ultime card restano tagliate. Le rendiamo
   scroller autonomi come le sezioni. overscroll-behavior:none per parità anti-bounce con .app-content. */
.inline-scroll { height: 100vh; height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: none; }
.info-tabs-wrap { padding: 12px 14px 2px; }
.info-sep { margin: 10px 16px 0; }
/* Avviso "perche' Salva e' spento": riga intera SOPRA il bottone. La tabbar e' flex in riga,
   quindi senza wrap + base 100% l'avviso si mette di fianco al bottone e lo schiaccia. */
.info-tabbar { flex-wrap: wrap; row-gap: 8px; }
/* La barra Salva ha altezza FISSA nel tema (64px + safe area): con l'avviso sopra il
   bottone il bottone restava tagliato a meta'. Solo quando l'avviso c'e' la barra cresce
   con il suo contenuto; senza avviso resta identica a prima. */
.info-tabbar:has(.info-save-hint) { height: auto; }
/* Barre "Salva" in fondo (tabbar con UN bottone a tutta larghezza; la tabbar delle icone
   non c'entra): nel tema il margine sotto e' solo l'area sicura del telefono, cioe' 0 sul
   web e su molti Android. Con l'avviso sopra (altezza auto) il bottone finiva attaccato
   al bordo, senza avviso restavano 9px. Margini propri, quasi uguali sopra e sotto. */
.app-tabbar:has(> .app-btn-block) { padding-top: 10px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
/* e il contenuto deve scorrere piu' in alto, o l'ultimo campo finisce dietro la barra */
.app-container:has(.info-save-hint) .app-content.has-tabbar { padding-bottom: calc(122px + env(safe-area-inset-bottom, 0px)); }
.info-save-hint {
	flex: 1 0 100%;
	/* senza questo la larghezza minima automatica del flex item segue il testo (nowrap)
	   e l'avviso esce dallo schermo invece di accorciare la frase */
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 7px 10px;
	border-radius: 9px;
	background: rgba(179, 38, 30, .07);
	color: #b3261e;
	font-size: 12.5px;
	line-height: 1.25;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.info-save-hint i { flex: 0 0 auto; }
.info-save-hint-tx { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-save-hint-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 1px; font-weight: 600; opacity: .85; }
/* quanti altri campi restano da correggere (l'avviso mostra solo il primo) */
.info-save-hint-n { flex: 0 0 auto; padding: 1px 6px; border-radius: 99px; background: rgba(179, 38, 30, .13); font-size: 11.5px; font-weight: 700; }
.info-edit-wrap { padding-bottom: 8px; }
.info-tab { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 4px; border-radius: 14px; background: #fff; border: 1px solid #ececf0; cursor: pointer; text-align: center; transition: background .12s, border-color .12s; }
.info-tab.active { background: var(--app-blue-bg); border-color: #6c5ce7; }
.info-tab-ic { color: #6c5ce7; display: flex; }
.info-tab-ic svg { width: 20px; height: 20px; }
.info-tab-lb { font-size: 11px; font-weight: 600; color: #1d1d1f; line-height: 1.15; }
.info-tab.active .info-tab-lb { color: #6c5ce7; }
.info-soon { text-align: center; color: #86868b; padding: 56px 24px; }
.ora-note { font-size: 12px; color: var(--app-text-secondary); margin: 0 0 14px; }
.ora-day { padding: 12px 0; border-bottom: 1px solid var(--app-separator); }
.ora-day:last-child { border-bottom: 0; }
.ora-dayname { font-weight: 700; font-size: 14px; color: var(--app-text); margin-bottom: 8px; }
/* "Chiuso" accanto al giorno senza fasce: si vede subito com'e' la settimana */
.ora-closed { margin-left: 6px; padding: 2px 8px; border-radius: 100px; background: var(--app-fill-tertiary); color: var(--app-text-secondary); font-size: 11px; font-weight: 600; vertical-align: 1px; }
.ora-slot { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ora-time { flex: 1; min-width: 0; padding: 9px 8px 9px 12px; }
.ora-sep { color: var(--app-text-secondary); flex-shrink: 0; }
[app-icon] { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.ora-del { background: none; border: 0; color: var(--app-red); padding: 6px; cursor: pointer; display: flex; flex-shrink: 0; }
.ora-del svg { width: 18px; height: 18px; }
.lst-edit { background: none; border: 0; color: #86868b; padding: 6px; cursor: pointer; display: flex; flex-shrink: 0; }
.lst-edit svg { width: 17px; height: 17px; }
.lst-eye { background: none; border: 0; color: #86868b; padding: 6px; cursor: pointer; display: flex; align-items: center; flex-shrink: 0; }
.lst-eye svg { width: 18px; height: 18px; }
/* "+ Aggiungi qui" dentro ogni gruppo: verde scuro su verde chiaro, leggibile (4,5:1) */
.lst-additem-btn { background: #dcfce7; border: 0; border-radius: 100px; color: #15803d; padding: 5px 10px 5px 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-family: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; }
.lst-additem-btn svg { width: 18px; height: 18px; }
.lst-cat-empty { padding: 12px 14px 0; }
.lst-cat-hidden .lst-cat-title, .lst-cat-hidden .lst-cat-text, .lst-cat-hidden .lst-item { opacity: 0.45; }
.ora-add { background: none; border: 0; color: #6c5ce7; font-size: 13px; font-weight: 600; padding: 4px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.ora-add svg { width: 16px; height: 16px; }
.cf-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.cf-name { flex: 0 0 38%; }
.cf-val { flex: 1 1 auto; min-width: 0; }
/* LISTINO */
.lst-cat { background:#fff; border:1px solid #ececf0; border-radius:14px; margin-bottom:14px; overflow:hidden; }
.lst-cat-head { padding:12px 14px; border-bottom:1px solid var(--app-separator); }
.lst-cat-name { display:block; min-width:0; font-weight:700; font-size:15px; overflow-wrap:anywhere; }
.lst-cat-title { display:flex; align-items:center; gap:12px; cursor:pointer; }
.lst-cat-chevron { color:#c7c7cc; flex-shrink:0; transition:transform .2s; display:inline-flex; }
.lst-cat-chevron svg { width:20px; height:20px; }
.lst-cat-open .lst-cat-chevron { transform:rotate(180deg); }
.lst-cat:not(.lst-cat-open) .lst-cat-head { border-bottom:none; }
.lst-cat-text { flex:1; min-width:0; }
.lst-cat-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:4px; row-gap:6px; padding-bottom:8px; margin-bottom:10px; border-bottom:1px solid var(--app-separator); }
.lst-cat-thumb { width:60px; height:60px; border-radius:13px; flex-shrink:0; overflow:hidden; background:#f0f0f2; color:#86868b; display:flex; align-items:center; justify-content:center; }
.lst-cat-thumb img { width:100%; height:100%; object-fit:cover; }
.lst-sheet-photo { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.lst-sheet-photo-thumb { position:relative; width:64px; height:64px; flex-shrink:0; border-radius:12px; background:#f0f0f2; color:#86868b; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lst-sheet-photo-thumb img { width:100%; height:100%; object-fit:cover; }
.lst-sheet-photo-btns { display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.lst-cat-desc { font-size:13px; color:#86868b; margin:3px 0 0; line-height:1.35; }
.lst-item { display:flex; flex-direction:column; padding:10px 14px; border-bottom:1px solid #f0f0f2; }
.lst-item-actions { display:flex; justify-content:flex-start; gap:4px; padding-bottom:3px; margin-bottom:10px; border-bottom:1px solid var(--app-separator); }
.lst-item-main { display:flex; align-items:flex-start; gap:8px; }
.lst-item-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.lst-item-name { font-size:14px; font-weight:500; }
.lst-item-desc { margin:0; font-size:12.5px; color:#8a8a8e; line-height:1.35; }
.lst-item-prices { display:flex; align-items:baseline; gap:8px; margin-top:1px; }
/* allergeni: riga nella lista voci + interruttore e chip nella scheda voce */
.lst-item-allergens { display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; margin:2px 0 0; font-size:12px; color:var(--app-text-secondary); line-height:1.35; }
.lst-item-allergens i { color:#e0a100; flex:0 0 auto; }
.lst-item-verify { font-size:10.5px; font-weight:600; padding:1px 7px; border-radius:100px; background:#fff4d6; color:#8a5a00; }
.lst-switch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 12px; }
.lst-switch-lbl { font-size:14px; }
.lst-allergens { margin:0 0 14px; }
.lst-allergen-chips { display:flex; flex-wrap:wrap; gap:8px; }
.lst-allergen-chips .app-chip { height:auto; min-height:32px; padding:5px 12px; white-space:normal; text-align:left; }
.lst-allergens-note { margin:8px 0 0; font-size:12px; color:var(--app-text-secondary); }
/* scheda "Importa listino": pagine in griglia (anteprima, numero d'ordine, togli) */
.lst-imp-intro { margin:-4px 0 14px; font-size:13.5px; line-height:1.45; color:var(--app-text-secondary); }
.lst-imp-pages { display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:10px; margin:0 0 14px; }
.lst-imp-page { position:relative; aspect-ratio:3/4; border-radius:10px; overflow:hidden; background:var(--app-fill-secondary, #f2f2f7); display:flex; align-items:center; justify-content:center; }
.lst-imp-page img { width:100%; height:100%; object-fit:cover; display:block; }
.lst-imp-pdf { display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px; text-align:center; color:#d92d20; }
.lst-imp-pdf span { font-size:10.5px; color:var(--app-text-secondary); word-break:break-all; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.lst-imp-num { position:absolute; left:6px; bottom:6px; min-width:20px; height:20px; padding:0 6px; border-radius:100px; background:rgba(0,0,0,.6); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.lst-imp-del { position:absolute; top:5px; right:5px; width:26px; height:26px; border-radius:50%; border:0; padding:0; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; }
.lst-imp-btns { display:flex; gap:10px; margin:0 0 16px; }
.lst-imp-btns .app-btn { flex:1; justify-content:center; }
.lst-item-price { font-weight:600; color:#6c5ce7; font-size:14px; }
.lst-item-price-old { font-size:13px; color:#b0b0b5; text-decoration:line-through; }
.lst-item-hidden .lst-item-main { opacity:0.45; }
.lst-item-thumb { width:44px; height:44px; border-radius:10px; flex-shrink:0; overflow:hidden; background:#f0f0f2; color:#86868b; display:flex; align-items:center; justify-content:center; }
.lst-item-thumb img { width:100%; height:100%; object-fit:cover; }
.lst-item-reorder-btn { display:inline-flex; align-items:center; gap:5px; background:none; border:0; color:#6c5ce7; font-size:13px; font-weight:600; cursor:pointer; padding:4px 6px; margin-right:auto; }
.lst-item-reorder-save { color:#34c759; }
.lst-item-grip { background:none; border:0; color:#c7c7cc; padding:2px 4px; cursor:grab; display:flex; flex-shrink:0; touch-action:none; align-self:center; margin-left:auto; }
.lst-item-grip svg { width:20px; height:20px; }
.lst-item-dragging { position:relative; z-index:50; box-shadow:0 8px 24px rgba(0,0,0,.18); cursor:grabbing; background:#fff; }
.alb-card { background:#fff; border-radius:14px; margin-bottom:12px; box-shadow:0 1px 3px rgba(0,0,0,.06); padding:12px 14px; }
.alb-actions { display:flex; align-items:center; justify-content:flex-end; gap:4px; padding-bottom:8px; margin-bottom:10px; border-bottom:1px solid var(--app-separator); }
.alb-main { display:flex; align-items:center; gap:12px; }
.alb-thumb { width:60px; height:60px; border-radius:13px; flex-shrink:0; overflow:hidden; background:#f0f0f2; color:#86868b; display:flex; align-items:center; justify-content:center; }
.alb-thumb img { width:100%; height:100%; object-fit:cover; }
.alb-text { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.alb-name { font-size:15px; font-weight:600; }
.alb-desc { margin:0; font-size:12.5px; color:#8a8a8e; line-height:1.35; }
.alb-count { font-size:12px; color:#86868b; }
.alb-hidden .alb-main { opacity:0.45; }
.alb-main { cursor:pointer; }
.alb-grip { margin-left:auto; background:none; border:0; color:#c7c7cc; padding:4px; cursor:grab; display:flex; flex-shrink:0; touch-action:none; }
.alb-grip svg { width:22px; height:22px; }
.alb-card-dragging { position:relative; z-index:50; box-shadow:0 8px 24px rgba(0,0,0,.18); cursor:grabbing; }
.faq-q { font-size:15px; font-weight:600; }
.faq-a { margin:2px 0 0; font-size:13px; color:#86868b; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ══ SITO WEB (sezione Dominio/Sito) ══ */
.site-card { background:#fff; border:1px solid #ececf0; border-radius:16px; padding:16px; margin-bottom:14px; }
.site-card-head { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:#1d1d1f; margin-bottom:12px; }
.site-card-head i, .site-card-head svg { color:#6c5ce7; }
.site-domain { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.site-domain-addr { font-weight:700; font-size:15px; color:#6c5ce7; word-break:break-all; }
.site-domain-empty { color:#86868b; font-size:14px; margin:0; }
.site-badge { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; padding:3px 9px; border-radius:100px; }
.site-badge-on { background:rgba(34,197,94,.12); color:#16a34a; }
.site-badge-wait { background:rgba(245,158,11,.14); color:#b45309; }
.site-note { display:flex; align-items:center; gap:6px; font-size:12px; color:#86868b; margin:10px 0 0; }
.site-note i, .site-note svg { flex-shrink:0; }
.site-favicon-row { display:flex; align-items:center; gap:14px; }
.site-favicon-thumb { position:relative; width:48px; height:48px; border-radius:12px; background:#f0f0f2; color:#86868b; display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.site-favicon-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.78); }
.site-favicon-thumb img { width:100%; height:100%; object-fit:contain; }
.site-favicon-actions { display:flex; flex-direction:column; gap:8px; flex:1; min-width:0; }
.site-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.site-opt { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px 10px; background:#fff; border:1.5px solid #ececf0; border-radius:14px; cursor:pointer; color:#1d1d1f; font-size:13px; font-weight:600; text-align:center; transition:border-color .12s, background .12s; }
.site-opt i, .site-opt svg { color:#86868b; }
.site-opt-sel { border-color:#6c5ce7; background:rgba(108,92,231,.08); }
.site-opt-sel i, .site-opt-sel svg { color:#6c5ce7; }
/* scelta tipo indirizzo + domanda "possiedi già il dominio?" */
.site-domtype { margin-bottom: 14px; }
.site-opt-sub { font-size: 11.5px; font-weight: 500; color: #86868b; line-height: 1.3; }
.site-domq { font-size: 14px; font-weight: 700; margin: 2px 0 10px; }
.site-upgrade { margin-top: 16px; padding-top: 16px; border-top: 1px solid #ececf0; }
.site-themes { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.site-theme-opt { display:flex; align-items:center; gap:10px; padding:10px 12px; background:#fff; border:1.5px solid #ececf0; border-radius:12px; cursor:pointer; color:#1d1d1f; font-size:13px; font-weight:600; text-align:left; transition:border-color .12s, background .12s; }
.site-theme-opt-sel { border-color:#6c5ce7; background:rgba(108,92,231,.08); }
.site-theme-dots { display:inline-flex; align-items:center; flex-shrink:0; }
.site-theme-dot { width:16px; height:16px; border-radius:50%; border:1.5px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.08); margin-left:-5px; }
.site-theme-dot:first-child { margin-left:0; }
.site-theme-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-theme-check { color:#6c5ce7; flex-shrink:0; }
.site-theme-gen { display:flex; flex-direction:column; gap:8px; }
.site-theme-desc { width:100%; border:1.5px solid #ececf0; border-radius:12px; padding:10px 12px; font-size:13px; font-family:inherit; resize:vertical; color:#1d1d1f; box-sizing:border-box; }
.site-theme-desc:focus { outline:none; border-color:#6c5ce7; }
.site-theme-row { display:flex; align-items:stretch; gap:8px; }
.site-theme-row .site-theme-opt { flex:1; min-width:0; }
.site-theme-edit { flex-shrink:0; width:42px; border:1.5px solid #ececf0; border-radius:12px; background:#fff; color:#6c5ce7; display:flex; align-items:center; justify-content:center; cursor:pointer; }
/* scheda "Cambia i colori" (app): 3 righe nome + spiegazione + campione da toccare.
   Prima era l'editor completo del tema (categorie, ~95 variabili): resta solo nel pannello */
.thv-grid { display:flex; flex-direction:column; gap:10px; margin:0 0 16px; }
.thv-row { display:flex; align-items:center; gap:12px; padding:10px 12px; background:#fff; border:1px solid #ececf0; border-radius:12px; cursor:pointer; }
.thv-label { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.thv-name { font-size:14px; font-weight:600; color:#1d1d1f; }
.thv-sub { font-size:12px; color:var(--app-text-secondary); }
.thv-pick { flex-shrink:0; width:52px; height:40px; padding:2px; border:1px solid #ddd; border-radius:10px; background:#fff; cursor:pointer; }

.alb-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.alb-photo { position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; background:#f0f0f2; }
.alb-photo img { width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; }
.alb-photo-preview { width:100%; max-height:280px; border-radius:12px; overflow:hidden; margin-bottom:14px; background:#f0f0f2; }
.alb-photo-preview img { width:100%; max-height:280px; object-fit:contain; display:block; }
.alb-photo-zoom, .alb-photo-grip { position:absolute; top:5px; right:5px; width:28px; height:28px; border:0; border-radius:50%; background:rgba(0,0,0,.5); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.alb-photo-grip { cursor:grab; touch-action:none; }
.alb-photo-dragging { z-index:50; opacity:0.92; box-shadow:0 8px 24px rgba(0,0,0,.28); }
.alb-photo-hidden img { opacity:0.4; }
.alb-photo-hbadge { position:absolute; top:5px; left:5px; width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; }
.lst-credit-warn { margin:10px 0 0; color:#ff3b30; font-size:13px; font-weight:600; }
.lst-cat .ora-add { padding:10px 14px; }
.lst-additem { display:flex; gap:8px; align-items:center; padding:10px 14px; }
.lst-ai-name { flex:1; min-width:0; }
.lst-ai-price { width:80px; flex-shrink:0; }
.lst-ai-ok { padding:0 14px; flex-shrink:0; }
.lst-addcat-btn { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:13px; border:1px dashed #c7c7cc; border-radius:12px; background:none; color:#6c5ce7; font-weight:600; font-size:14px; cursor:pointer; margin-bottom:14px; }
.lst-summary { margin-bottom:18px; }
.lst-summary-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.lst-summary-head .app-field-label { margin:0; }
.lst-summary-ai { flex-shrink:0; padding:8px 12px; font-size:13px; }
.lst-summary-hint { font-size:12px; color:#86868b; margin:6px 0 0; line-height:1.35; }
.lst-import-loading { position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:24px; }
.lst-import-box { background:#fff; border-radius:16px; padding:28px 26px; max-width:300px; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.2); }
.lst-import-box .app-spinner { margin:0 auto 14px; }

/* Overlay generazione pagina — checklist (sezioni/immagini) come il sito */
.pgw-gen-box { background:#fff; border-radius:18px; padding:22px 20px; width:100%; max-width:340px; box-shadow:0 12px 40px rgba(0,0,0,.2); }
.pgw-gen-msg { font-size:15px; font-weight:700; color:#1d1d1f; text-align:center; margin:0 0 12px; }
.pgw-gen-bar { height:6px; border-radius:100px; background:#ececf0; overflow:hidden; margin-bottom:6px; }
.pgw-gen-bar-fill { display:block; height:100%; border-radius:100px; background:linear-gradient(90deg,#6c5ce7,#8b7cf6); transition:width .3s ease; }
.pgw-gen-count { font-size:12px; font-weight:700; color:#6c5ce7; text-align:center; margin:0 0 14px; }
.pgw-gen-list { display:flex; flex-direction:column; max-height:46vh; overflow-y:auto; }
.pgw-gen-row { display:flex; align-items:center; gap:10px; padding:8px 2px; border-top:1px solid #f2f2f5; font-size:14px; }
.pgw-gen-row:first-child { border-top:0; }
.pgw-gen-ic { flex-shrink:0; width:20px; height:20px; display:flex; align-items:center; justify-content:center; color:#c4c4cc; }
.pgw-gen-lbl { flex:1; color:#6e6e73; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pgw-gen-st { flex-shrink:0; font-size:11px; font-weight:700; color:#d9920c; }
.pgw-gen-row-done .pgw-gen-ic { color:#22c55e; }
.pgw-gen-row-done .pgw-gen-lbl { color:#1d1d1f; }
.pgw-gen-row-fail .pgw-gen-ic { color:#ef4444; }
.pgw-gen-row-fail .pgw-gen-lbl { color:#ef4444; text-decoration:line-through; text-decoration-color:rgba(239,68,68,.5); }
.pgw-mini-spinner { width:16px; height:16px; border-radius:50%; border:2px solid rgba(108,92,231,.25); border-top-color:#6c5ce7; animation:pgw-spin .7s linear infinite; }
.pgw-mini-spinner-warn { border-color:rgba(217,146,12,.25); border-top-color:#d9920c; }
@keyframes pgw-spin { to { transform:rotate(360deg); } }
.lst-import-t { font-weight:700; font-size:15px; margin:0; }
.lst-import-s { font-size:13px; color:#86868b; margin:6px 0 0; }
.lst-reorder-btn { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:9px; border:0; background:none; color:#6c5ce7; font-weight:600; font-size:14px; cursor:pointer; margin-bottom:14px; }
.lst-reorder-btn svg { width:16px; height:16px; }
.lst-reorder-done { color:var(--app-green); }
.lst-toolbar { display:flex; gap:8px; margin-bottom:16px; }
.lst-tbtn { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding:10px 4px; border:1px solid #e3e3ea; border-radius:11px; background:#fff; color:#6c5ce7; font-weight:600; font-size:12px; cursor:pointer; white-space:nowrap; }
.lst-tbtn svg { width:17px; height:17px; flex-shrink:0; }
.lst-cat-grip { background:none; border:0; color:#c7c7cc; padding:4px; cursor:grab; display:flex; flex-shrink:0; touch-action:none; }
.lst-cat-grip svg { width:22px; height:22px; }
.lst-cat-dragging { position:relative; z-index:50; box-shadow:0 8px 24px rgba(0,0,0,.18); cursor:grabbing; }
.lst-cat-reorder button { background:none; border:0; color:#6c5ce7; padding:4px; cursor:pointer; display:flex; }
.lst-cat-reorder svg { width:22px; height:22px; }
.lst-sheet-title { margin:0 0 14px; font-size:17px; font-weight:700; }
.lst-sheet-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 14px; }
.lst-sheet-head .lst-sheet-title { margin:0; }
.lst-sheet-actions { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.lst-sheet-btn { width:100%; justify-content:center; }
.lst-sheet-row { display:flex; gap:10px; }
.lst-sheet-row .app-field { flex:1; min-width:0; }
.soc-hint { display: block; font-size: 12px; color: var(--app-text-secondary); margin-top: 4px; }
.soc-ic { font-size: 17px; vertical-align: -3px; margin-right: 6px; }
.app-field .app-select-wrap { display: flex; width: 100%; }
.app-select-arrow svg { width: 18px; height: 18px; display: block; }
.select-backdrop { position: fixed; inset: 0; z-index: 150; }
.app-select-list.up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }

/* ═══════════════════════════════════════════════════
   SAFE AREAS — edge-to-edge (Android 15+ / notch iOS)
   La WebView disegna sotto status bar e barra di navigazione:
   header con padding-top = inset (lo sfondo riempie la status bar),
   contenuto scrollabile con padding-bottom = inset (non finisce sotto la nav bar).
   commons.css è l'ultimo CSS caricato → vince su tutti i temi.
   ═══════════════════════════════════════════════════ */
.app-navbar   { padding-top: calc(8px + env(safe-area-inset-top)); }
.home-topbar  { padding-top: calc(16px + env(safe-area-inset-top)); }
.topbar       { padding-top: calc(16px + env(safe-area-inset-top)); }
.login-screen { padding-top: calc(48px + env(safe-area-inset-top)); padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.login-footer { bottom: calc(18px + env(safe-area-inset-bottom)); }

.app-content:not(.has-tabbar) { padding-bottom: env(safe-area-inset-bottom); }
.home-tiles   { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.blist        { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }  /* lista attività del picker (ora scrollabile): ultima riga sopra la nav bar */

/* menu laterale (drawer): pannello full-height → testa sotto la status bar, voci in fondo sotto la nav bar */
.app-drawer-header { padding-top: calc(20px + env(safe-area-inset-top)); }
.app-drawer-body   { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

/* bottom-sheet: il pulsante in fondo (es. Salva) non deve finire sotto la nav bar */
.app-sheet { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

/* ── Banner "Installa app" (web app / PWA, solo sul web: js/pwa.js) ─────────── */
.pwa-banner { position: fixed; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top)); z-index: 900; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; color: #111827; border-radius: 16px; box-shadow: 0 10px 30px rgba(17, 24, 39, .18); font-size: 14px; line-height: 1.35; }
.pwa-banner[hidden] { display: none; }
.pwa-banner-icon { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.pwa-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pwa-banner-text span { color: #6b7280; font-size: 13px; }
.pwa-banner-btn { flex: none; border: 0; border-radius: 10px; padding: 10px 14px; background: var(--app-primary, #6c5ce7); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.pwa-banner-btn[hidden] { display: none; }
.pwa-banner-x { flex: none; border: 0; background: transparent; color: #9ca3af; font-size: 22px; line-height: 1; padding: 4px 6px; cursor: pointer; }

/* ── Tablet e desktop ─────────────────────────────────────────────────────────
   Sui tablet l'app va a SCHERMO INTERO (scelta di Michael: la rotazione e' bloccata
   in verticale dal manifest quando l'app e' installata). Il tetto di 1024px serve solo
   ai monitor da scrivania, dove la colonna resta centrata. --app-max e' l'unica leva e
   TUTTO cio' che e' position:fixed si allinea a lei invece che ai bordi del viewport:
   barra Salva, fogli, drawer, banner. Fuori dalla colonna il fondo segue la schermata. */
:root { --app-max: 480px; }
@media (min-width: 768px) { :root { --app-max: 1024px; } }
#app, .app-container, .app-tabbar, .app-sheet { max-width: var(--app-max); }
@media (min-width: 768px) {
	body { background: #e5e5ea; }
	body.is-auth { background: #0c0f1a; }
	#app { box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 24px 80px rgba(0,0,0,.10); }
	body.is-auth #app { box-shadow: none; }
	/* drawer di destra: parte dal bordo della colonna e, chiuso, esce del tutto dallo schermo */
	.app-drawer.right { right: max(0px, calc((100vw - var(--app-max)) / 2)); transform: translateX(calc(100% + max(0px, (100vw - var(--app-max)) / 2))); }
	.app-drawer.right.open { transform: translateX(0); }
	.pwa-banner { left: max(12px, calc((100vw - var(--app-max)) / 2 + 12px)); right: max(12px, calc((100vw - var(--app-max)) / 2 + 12px)); }
}

/* ── Home: barra in alto ferma, sotto scorre solo il contenuto ─────────────────
   La home e' l'unica schermata "tutta scorrevole" (.inline-scroll e' lo scroller):
   la barra col logo e il menu resta incollata in cima, come la navbar delle altre viste. */
.home-topbar { position: sticky; top: 0; z-index: 10; background: #f2f2f7; }

/* ══ LINGUE (sezione: il sito tradotto) ══
   La barra di avanzamento riusa la stessa idea della checklist in home: fondo grigio,
   riempimento col viola di Vela. I colori arrivano dalle variabili del tema dell'app,
   non da valori scritti a mano, cosi' il tema scuro non va sistemato a parte. */
.lng-card { padding: 14px; margin-bottom: 12px; }
.lng-row { display: flex; align-items: center; gap: 12px; }
.lng-name { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lng-lbl { font-size: 15px; font-weight: 600; }
.lng-tag { font-size: 11px; color: var(--app-text-secondary); }
.lng-bar { height: 6px; border-radius: 100px; background: #ececf0; overflow: hidden; margin: 10px 0 6px; }
.lng-bar-lg { height: 10px; margin: 14px 0 8px; }
.lng-bar-fill { display: block; height: 100%; border-radius: 100px; background: linear-gradient(90deg, #6c5ce7, #8b7cf6); transition: width .35s ease; }
.lng-meta { font-size: 12px; color: var(--app-text-secondary); }
.lng-meta-c { text-align: center; }
.lng-warn { color: #c77700; }
.lng-go { width: 100%; justify-content: center; margin-top: 12px; }
.lng-done { display: flex; align-items: center; gap: 5px; margin: 10px 0 0; font-size: 12px; color: #2a9d5c; }
.lng-foot { margin-top: 18px; }

/* Piano senza multilingua: non un errore, una spiegazione di cosa si ottiene salendo. */
.lng-gate { text-align: center; padding: 28px 18px; }
.lng-gate-ic { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #efeafe; color: #6c5ce7; margin-bottom: 14px; }
.lng-gate-title { font-size: 19px; font-weight: 700; margin: 0 0 8px; }
.lng-gate-text { font-size: 14px; color: var(--app-text-secondary); line-height: 1.5; margin: 0 0 10px; }

.app-dark .lng-bar { background: rgba(255,255,255,.14); }
.app-dark .lng-gate-ic { background: rgba(108,92,231,.22); }

/* ══ PROMOZIONI (max 3: come una voce del listino, con scadenza) ══
   La scheda riusa alb-card e i prezzi del listino (lst-item-price*): qui c'e' solo
   quello che mancava — l'etichetta della scadenza, la riga dell'interruttore e la
   riga della data. */
.prm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.prm-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 100px; background: #efeafe; color: #6c5ce7; }
/* blog (views/blog.html): lo stato dell'articolo e la data */
.blog-tag-on  { background: #e7f8f0; color: #157347; }
.blog-tag-off { background: #f1f1f4; color: #55555f; }
.blog-date { font-size: 11px; color: var(--app-text-secondary); margin: 6px 0 0; }
/* l'articolo da leggere (views/blog.html, dettaglio): carta bianca come le card, testo scuro fisso */
.blog-art { background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); padding: 16px; margin-bottom: 14px; color: #1d1d1f; }
.blog-art-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 11px; margin-bottom: 12px; background: #f0f0f2; }
.blog-art-title { font-size: 21px; line-height: 1.25; font-weight: 700; margin: 10px 0 8px; }
.blog-art-lead { font-size: 15px; line-height: 1.5; color: #55555f; margin: 0 0 14px; }
.blog-art-body { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.blog-art-body h2 { font-size: 18px; line-height: 1.3; font-weight: 700; margin: 20px 0 8px; }
.blog-art-body h3 { font-size: 16px; line-height: 1.3; font-weight: 700; margin: 16px 0 6px; }
.blog-art-body p { margin: 0 0 12px; }
.blog-art-body ul, .blog-art-body ol { margin: 0 0 12px; padding-left: 22px; }
.blog-art-body li { margin-bottom: 4px; }
.blog-art-body blockquote { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid #db2777; background: #fdf2f8; border-radius: 0 8px 8px 0; color: #55555f; }
.blog-art-body img { display: block; max-width: 100%; height: auto; border-radius: 11px; margin: 14px 0; }
.blog-art-h { font-size: 17px; font-weight: 700; margin: 22px 0 6px; }
.blog-faq { border-top: 1px solid #efeff4; padding: 10px 0; }
.blog-faq-q { font-size: 14.5px; font-weight: 600; margin: 0 0 4px; }
.blog-faq-a { font-size: 14px; line-height: 1.5; color: #55555f; margin: 0; }
/* "Prepara le immagini" subito sotto l'avviso delle immagini mancanti */
.blog-resume { margin: -6px 0 14px; }
.prm-tag-exp { background: #ffe9e7; color: #d92d20; }
.prm-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 14px; }
.prm-switch-lbl { font-size: 14px; }
.prm-end-row { display: flex; align-items: center; gap: 8px; }
.prm-end-row .app-input { flex: 1; min-width: 0; }
.prm-hint { margin: 6px 0 0; font-size: 12px; color: var(--app-text-secondary); }

.app-dark .prm-tag { background: rgba(108,92,231,.22); color: #b9aefc; }
.app-dark .prm-tag-exp { background: rgba(255,69,58,.2); color: #ff8a80; }