/* ==========================================================================
VisioBali - design system (redesign mockup). Classi semantiche, zero inline.
Token e componenti portati da mockup/Web Platform.dc.html.
========================================================================== */
:root {
--blue: #2467F0;
--blue-d: #1b56d4;
--ink: #16213E;
--ink-2: #243769;
--muted: #6E7686;
--muted-2: #4A5163;
--muted-3: #9AA0AE;
--bg: #F4F5FB;
--bg-2: #FBFBFD;
--card: #ffffff;
--line: rgba(20, 30, 55, .08);
--line-2: rgba(20, 30, 55, .06);
--line-3: rgba(20, 30, 55, .12);
--yellow: #E8FF2E;
--gold: #F5C451;
--green: #33D17A;
--green-l: #7ef0a8;
--r-sm: 10px;
--r: 12px;
--r-md: 13px;
--r-lg: 20px;
--r-xl: 22px;
--r-pill: 999px;
--font: 'Inter', system-ui, -apple-system, sans-serif;
--font-display: 'Plus Jakarta Sans', var(--font);
--font-mono: 'Geist Mono', ui-monospace, monospace;
--shadow-cta: 0 16px 34px -12px rgba(36, 103, 240, .6);
--shadow-cta-sm: 0 10px 24px -10px rgba(36, 103, 240, .6);
--shadow-card: 0 30px 60px -24px rgba(20, 30, 55, .35);
--shadow-card-dark: 0 30px 60px -24px rgba(20, 30, 55, .5);
--shadow-badge: 0 6px 16px -10px rgba(20, 30, 55, .3);
/* Compat: token HSL del vecchio design, usati negli inline di app/admin.
Mappati ai colori del nuovo design cosi' `hsl(var(--lime))` ecc. risolvono on-brand. */
--lime: 224 90% 54%;
--lime-hover: 222 80% 46%;
--lime-foreground: 0 0% 100%;
--lime-soft: 225 100% 96%;
--primary: 224 90% 54%;
--primary-foreground: 0 0% 100%;
--foreground: 223 48% 16%;
--foreground-muted: 220 9% 48%;
--card-foreground: 223 48% 16%;
--card: 0 0% 100%;
--card-elevated: 0 0% 100%;
--background: 220 25% 98%;
--background-secondary: 228 33% 97%;
--border: 220 16% 90%;
--input: 220 16% 88%;
--ring: 224 90% 54%;
--destructive: 0 74% 55%;
--success: 151 55% 42%;
--warning: 40 86% 52%;
--accent: 258 100% 82%;
--peach: 34 100% 86%;
--sun: 72 100% 59%;
--ocean-deep: 223 48% 16%;
--radius: 12px;
--dot: 224 90% 54%;
--shadow-lime: 0 14px 40px -16px rgba(36, 103, 240, .3);
}
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: #fff;
color: var(--ink);
font-family: var(--font);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--font-mono); }
.eyebrow {
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--blue);
font-weight: 700;
}
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.03em; margin: 0; }
/* ---------- layout ---------- */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.section-pad { padding: 88px 0; }
.section-tint { background: var(--bg-2); border-top: 1px solid var(--line-2); }
/* ---------- bottoni ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
font-family: var(--font);
font-size: 16px;
font-weight: 600;
line-height: 1;
border: 1px solid transparent;
border-radius: var(--r);
padding: 15px 26px;
cursor: pointer;
white-space: nowrap;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: #fff; background: var(--blue); box-shadow: var(--shadow-cta); }
.btn-primary:hover { background: var(--blue-d); }
.btn-ghost { color: var(--ink); background: var(--bg); border-color: var(--line-3); }
.btn-yellow { color: var(--ink); background: var(--yellow); }
.btn-yellow:hover { filter: brightness(.97); }
.btn-sm { font-size: 14px; padding: 10px 18px; border-radius: var(--r-sm); }
.btn-block { width: 100%; }
.btn .i { width: 18px; height: 18px; }
/* ---------- nav ---------- */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .86);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
}
.nav-inner { height: 68px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; gap: 11px; }
.nav-logo-img { height: 28px; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--muted-2); }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-lang-wrap { position: relative; }
.nav-lang { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted-2); background: none; border: 0; cursor: pointer; font-family: var(--font); padding: 4px 7px; border-radius: 8px; }
.nav-lang:hover { background: var(--bg); }
.nav-lang-caret { stroke: var(--muted-3); transition: transform .15s ease; }
.nav-lang-wrap.is-open .nav-lang-caret { transform: rotate(180deg); }
.nav-lang-flag { display: inline-block; width: 20px; height: 14px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); flex-shrink: 0; }
.nav-lang-flag svg { display: block; width: 100%; height: 100%; }
.nav-lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px; background: #fff; border: 1px solid var(--line-3); border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(20, 30, 55, .28); padding: 6px; z-index: 60; }
.nav-lang-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--ink); text-align: left; }
.nav-lang-item:hover { background: var(--bg); }
.nav-lang-item.is-active { color: var(--blue); font-weight: 600; }
.nav-signin { font-size: 14px; font-weight: 600; color: var(--ink); padding: 9px 14px; }
.burger { display: none; width: 42px; height: 42px; border-radius: 11px; background: var(--bg); border: 1px solid var(--line-3); align-items: center; justify-content: center; cursor: pointer; }
/* ---------- hero ---------- */
.hero { padding: 88px 0 96px; background: radial-gradient(900px 500px at 80% -10%, #EAF1FF 0%, transparent 60%); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid var(--line-3);
border-radius: var(--r-pill);
padding: 6px 12px 6px 8px;
font-size: 12.5px;
font-weight: 600;
color: var(--muted-2);
margin-bottom: 22px;
box-shadow: var(--shadow-badge);
}
.hero-badge-mark { width: 20px; height: 20px; border-radius: 6px; background: var(--blue); display: grid; place-items: center; }
.hero-h1 { font-size: 60px; line-height: 1.02; font-weight: 800; letter-spacing: -0.04em; margin: 0 0 20px; }
.hero-sub { font-size: 18px; line-height: 1.6; color: var(--muted-2); margin: 0 0 30px; max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hero-facts { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.hero-fact { display: flex; align-items: center; gap: 7px; }
.hero-fact svg { stroke: var(--green); }
/* hero visual: card impilate */
.hero-visual { position: relative; height: 440px; }
.hero-card-rec {
position: absolute; top: 20px; right: 0; width: 300px;
background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
padding: 20px; box-shadow: var(--shadow-card);
}
.hero-rec-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--blue); font-weight: 700; margin-bottom: 14px; }
.hero-rec-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.hero-rec-meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.hero-rec-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.hero-rec-stat { background: var(--bg); border-radius: var(--r); padding: 12px; }
.hero-rec-stat-k { font-size: 10px; color: var(--muted-3); text-transform: uppercase; }
.hero-rec-stat-v { font-weight: 700; font-size: 16px; }
.hero-rec-cta { margin-top: 14px; background: var(--blue); color: #fff; border-radius: var(--r); padding: 12px; text-align: center; font-size: 14px; font-weight: 600; }
.hero-card-wallet {
position: absolute; bottom: 10px; left: 0; width: 250px;
background: var(--ink); color: #fff; border-radius: var(--r-lg);
padding: 18px; box-shadow: var(--shadow-card-dark);
}
.hero-wallet-row { display: flex; align-items: center; gap: 10px; }
.hero-wallet-ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: rgba(51, 209, 122, .2); display: grid; place-items: center; }
.hero-wallet-t { font-size: 13px; font-weight: 700; }
.hero-wallet-s { font-size: 11px; color: rgba(255, 255, 255, .6); }
.hero-wallet-bar { margin-top: 14px; height: 6px; background: rgba(255, 255, 255, .15); border-radius: 3px; overflow: hidden; }
.hero-wallet-bar > span { display: block; height: 100%; width: 100%; background: var(--green); }
/* ---------- logos / trust bar ---------- */
.logos { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--bg-2); }
.logos-inner { padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.logos-label { font-size: 12px; color: var(--muted-3); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; }
.logos-list { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; opacity: .55; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink); }
/* ---------- section heading ---------- */
.sec-head-center { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.sec-head-center .eyebrow { margin-bottom: 12px; }
.sec-title { font-weight: 800; font-size: 38px; letter-spacing: -0.03em; margin: 0 0 12px; }
.sec-sub { font-size: 16px; color: var(--muted-2); line-height: 1.6; margin: 0; }
.sec-head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.sec-link { font-size: 14px; font-weight: 600; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; }
/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 24px; }
.step-ic { width: 44px; height: 44px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 16px; }
.step-ic svg { stroke: var(--blue); }
.step-num { font-size: 12px; color: var(--blue); margin-bottom: 6px; }
.step h3 { font-weight: 700; font-size: 18px; margin: 0 0 6px; }
.step p { font-size: 14px; color: var(--muted-2); line-height: 1.55; margin: 0; }
.step-wide {
background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 24px;
grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
}
.step-wide-l { display: flex; align-items: center; gap: 18px; }
.step-wide-ic { width: 44px; height: 44px; border-radius: var(--r-md); background: rgba(51, 209, 122, .2); display: grid; place-items: center; }
.step-wide .step-num { color: var(--green-l); margin-bottom: 4px; }
.step-wide h3 { font-weight: 700; font-size: 18px; margin: 0; }
.step-wide p { font-size: 14px; color: rgba(255, 255, 255, .7); margin: 4px 0 0; }
/* ---------- services cards ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: block; transition: transform .12s ease, box-shadow .12s ease; }
.svc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.svc-ic { width: 46px; height: 46px; border-radius: var(--r-md); background: rgba(36, 103, 240, .1); display: grid; place-items: center; margin-bottom: 16px; }
.svc-ic svg { stroke: var(--blue); }
.svc-ic.teal { background: rgba(27, 198, 201, .12); }
.svc-ic.teal svg { stroke: #1BC6C9; }
.svc-ic.gold { background: rgba(245, 196, 81, .14); }
.svc-ic.gold svg { stroke: #c99a1f; }
.svc-card h3 { font-weight: 700; font-size: 18px; margin: 0 0 6px; }
.svc-card p { font-size: 14px; color: var(--muted-2); line-height: 1.55; margin: 0 0 14px; }
.svc-from { font-size: 13px; font-weight: 600; color: var(--blue); }
/* ---------- pricing / membership ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plan { background: #fff; border: 1px solid var(--line-3); border-radius: var(--r-xl); padding: 28px; position: relative; }
.plan-name { font-weight: 800; font-size: 20px; margin: 0 0 4px; }
.plan-tag { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.plan-price { font-family: var(--font-display); font-weight: 800; font-size: 36px; letter-spacing: -0.02em; }
.plan-price span { font-size: 15px; font-weight: 500; color: var(--muted); }
.plan-price-note { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.plan-cta { display: block; text-align: center; border-radius: var(--r); padding: 13px; font-size: 14px; font-weight: 600; margin-bottom: 20px; background: var(--bg); color: var(--ink); border: 1px solid var(--line-3); }
.plan-feats { display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; color: var(--muted-2); }
.plan-feat { display: flex; gap: 9px; }
.plan-feat svg { flex: none; stroke: var(--green); }
.plan-featured { background: linear-gradient(160deg, var(--ink), var(--ink-2)); color: #fff; box-shadow: var(--shadow-card-dark); }
.plan-featured .plan-tag,
.plan-featured .plan-price-note,
.plan-featured .plan-price span { color: rgba(255, 255, 255, .6); }
.plan-featured .plan-feats { color: rgba(255, 255, 255, .85); }
.plan-featured .plan-feat svg { stroke: var(--yellow); }
.plan-featured .plan-cta { background: var(--yellow); color: var(--ink); border: 0; font-weight: 700; }
.plan-badge { position: absolute; top: 20px; right: 20px; font-size: 11px; font-weight: 700; background: var(--yellow); color: var(--ink); border-radius: var(--r-pill); padding: 5px 11px; }
.plan-matrix { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: 40px; }
.plan-matrix-head { padding: 18px 22px; border-bottom: 1px solid var(--line-2); font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.plan-matrix-scroll { overflow-x: auto; }
.plan-matrix table { width: 100%; min-width: 560px; border-collapse: collapse; }
.plan-matrix th, .plan-matrix td { padding: 13px 22px; font-size: 13.5px; border-bottom: 1px solid var(--line-2); text-align: center; }
.plan-matrix th:first-child, .plan-matrix td:first-child { text-align: left; color: var(--ink); }
.plan-matrix thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-3); font-weight: 700; }
.plan-matrix tbody tr:last-child td { border-bottom: 0; }
.plan-matrix .yes { color: #2a9d63; font-weight: 700; }
.plan-matrix .no { color: var(--muted-3); }
.plan-matrix .val { font-weight: 600; color: var(--ink); }
/* ---------- VOA / levy quick services ---------- */
.pill-blue { display: inline-flex; align-items: center; gap: 7px; background: rgba(36, 103, 240, .08); color: var(--blue); border-radius: var(--r-pill); padding: 6px 13px; font-size: 12px; font-weight: 700; margin-bottom: 14px; }
.quick2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.quick-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px; display: flex; gap: 20px; align-items: flex-start; }
.quick-ic { width: 54px; height: 54px; border-radius: 15px; background: rgba(36, 103, 240, .1); display: grid; place-items: center; flex: none; }
.quick-ic svg { stroke: var(--blue); }
.quick-ic.gold { background: rgba(245, 196, 81, .14); }
.quick-ic.gold svg { stroke: #c99a1f; }
.quick-body { flex: 1; }
.quick-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.quick-head h3 { font-weight: 700; font-size: 19px; margin: 0; }
.quick-min { font-size: 10px; font-weight: 700; background: rgba(51, 209, 122, .12); color: #2a9d63; border-radius: var(--r-pill); padding: 3px 8px; }
.quick-card p { font-size: 14px; color: var(--muted-2); line-height: 1.55; margin: 0 0 14px; }
.quick-foot { display: flex; align-items: center; justify-content: space-between; }
.quick-price { font-size: 14px; font-weight: 700; }
.quick-price span { font-size: 12px; font-weight: 500; color: var(--muted-3); }
/* ---------- reviews ---------- */
.rating-row { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 44px; }
.rating-card { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--line-3); border-radius: 16px; padding: 14px 20px; box-shadow: 0 10px 26px -16px rgba(20, 30, 55, .3); }
.rating-k { font-size: 12px; color: var(--muted); }
.rating-v { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.rating-v span { font-size: 12px; font-weight: 500; color: var(--muted-3); }
.rating-stars { display: flex; gap: 2px; }
.rating-stars span { width: 18px; height: 18px; background: #00B67A; display: grid; place-items: center; }
.testi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testi-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.testi-stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
.testi-quote { font-size: 14.5px; color: var(--muted-2); line-height: 1.6; margin: 0 0 16px; }
.testi-who { display: flex; align-items: center; gap: 10px; }
.testi-av { width: 36px; height: 36px; border-radius: 999px; background: var(--bg); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--muted-2); }
.testi-name { font-size: 13px; font-weight: 700; }
.testi-role { font-size: 12px; color: var(--muted); }
/* ---------- payment methods ---------- */
.pay { padding: 44px 0; background: var(--bg-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.pay-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pay-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 4px; }
.pay-sub { font-size: 13.5px; color: var(--muted); margin: 0; max-width: 36ch; }
.pay-list { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-chip { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line-3); border-radius: 11px; padding: 10px 14px; font-size: 13px; font-weight: 600; }
.pay-chip svg { stroke: var(--blue); }
.pay-chip-tag { font-size: 9px; font-weight: 700; background: rgba(36, 103, 240, .12); color: var(--blue); border-radius: 6px; padding: 2px 6px; }
/* ---------- instagram ---------- */
.ig-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.ig-follow { font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); border-radius: 11px; padding: 11px 18px; display: inline-flex; align-items: center; gap: 8px; }
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.ig-cell { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; display: block; }
.ig-cell img { width: 100%; height: 100%; object-fit: cover; }
.ig-cell.flip img { transform: scaleX(-1); }
/* ---------- app download ---------- */
.appdl { background: linear-gradient(160deg, var(--ink), var(--ink-2)); color: #fff; }
.app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.app-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .12); border-radius: var(--r-pill); padding: 6px 13px; font-size: 12px; font-weight: 700; color: var(--yellow); margin-bottom: 20px; }
.app-title { font-weight: 800; font-size: 40px; letter-spacing: -0.03em; margin: 0 0 16px; }
.app-sub { font-size: 17px; color: rgba(255, 255, 255, .75); line-height: 1.6; margin: 0 0 28px; max-width: 44ch; }
.app-stores { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.store-btn { display: inline-flex; align-items: center; gap: 11px; background: #fff; color: var(--ink); border-radius: 14px; padding: 12px 20px; }
.store-btn-k { font-size: 10px; color: var(--muted); }
.store-btn-v { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1; }
.app-rating { display: flex; align-items: center; gap: 8px; }
.app-rating-stars { display: flex; gap: 1px; }
.app-rating-txt { font-size: 13px; color: rgba(255, 255, 255, .75); }
.app-phone-wrap { display: flex; justify-content: center; }
.app-phone { width: 230px; background: #fff; border-radius: 36px; padding: 10px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
.app-phone-screen { background: var(--bg); border-radius: 28px; overflow: hidden; }
.app-phone-hero { height: 150px; background: linear-gradient(160deg, var(--blue), var(--ink)); position: relative; }
.app-phone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 70px; height: 20px; background: #000; border-radius: 12px; }
.app-phone-cap { position: absolute; bottom: 16px; left: 16px; color: #fff; }
.app-phone-cap-k { font-size: 10px; opacity: .7; }
.app-phone-cap-v { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.app-phone-body { padding: 14px; }
.app-phone-row { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.app-phone-row-k { font-size: 10px; color: var(--muted-3); }
.app-phone-row-v { font-size: 13px; font-weight: 600; color: var(--blue); }
.app-phone-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.app-phone-stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; }
.app-phone-stat-v { font-size: 16px; font-weight: 800; font-family: var(--font-display); }
.app-phone-stat-k { font-size: 9px; color: var(--muted-3); }
/* ---------- guarantee ---------- */
.guarantee { padding: 56px 0; background: #fff; }
.guarantee-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gtee { text-align: center; padding: 0 8px; }
.gtee-ic { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; margin: 0 auto 12px; background: rgba(36, 103, 240, .1); }
.gtee-ic svg { stroke: var(--blue); }
.gtee-ic.green { background: rgba(51, 209, 122, .12); }
.gtee-ic.green svg { stroke: #2a9d63; }
.gtee-ic.gold { background: rgba(245, 196, 81, .14); }
.gtee-ic.gold svg { stroke: #c99a1f; }
.gtee-t { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.gtee-d { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
/* ---------- CTA banner ---------- */
.cta-band { padding: 72px 0; }
.cta-box { background: radial-gradient(600px 300px at 80% 0%, rgba(36, 103, 240, .25), transparent 60%), var(--ink); border-radius: 28px; padding: 56px 40px; text-align: center; }
.cta-title { font-weight: 800; font-size: 36px; letter-spacing: -0.03em; color: #fff; margin: 0 0 12px; }
.cta-sub { font-size: 17px; color: rgba(255, 255, 255, .75); margin: 0 auto 28px; max-width: 48ch; }
/* ---------- footer ---------- */
.footer { background: #0F1729; color: rgba(255, 255, 255, .7); padding: 56px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.footer-brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--blue); display: grid; place-items: center; }
.footer-brand-text { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: #fff; }
.footer-desc { font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; max-width: 32ch; }
.footer-addr { font-size: 12px; color: rgba(255, 255, 255, .4); }
.footer-col-t { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #fff; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
.footer-col a { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .7); margin-bottom: 10px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 36px; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255, 255, 255, .5); }
/* ---------- form controls (riusabili app/admin) ---------- */
.field { margin-bottom: 16px; }
.field-label,
label.field-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 7px; }
.input {
width: 100%; background: var(--bg); border: 1px solid var(--line-3); border-radius: var(--r);
padding: 13px; font-size: 14px; font-family: var(--font); color: var(--ink); outline: none;
transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36, 103, 240, .1); background: var(--bg); }
.input::placeholder { color: var(--muted-3); }
.alert { border-radius: var(--r); padding: 13px 15px; font-size: 13.5px; line-height: 1.5; }
.alert-success { background: rgba(51, 209, 122, .1); color: #1f7a49; border: 1px solid rgba(51, 209, 122, .3); }
.alert-error { background: rgba(234, 67, 53, .08); color: #c0392b; border: 1px solid rgba(234, 67, 53, .25); }
.divider-or { display: flex; align-items: center; gap: 14px; color: var(--muted-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.divider-or::before, .divider-or::after { content: ''; height: 1px; flex: 1; background: var(--line-3); }
/* ---------- business / company ---------- */
.biz-hero { background: linear-gradient(160deg, var(--ink), var(--ink-2)); color: #fff; padding: 64px 0; }
.biz-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.biz-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .12); border-radius: var(--r-pill); padding: 6px 13px; font-size: 12px; font-weight: 700; color: var(--yellow); margin-bottom: 20px; }
.biz-h1 { font-weight: 800; font-size: 42px; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 16px; color: #fff; }
.biz-sub { font-size: 17px; color: rgba(255, 255, 255, .75); line-height: 1.6; margin: 0 0 28px; max-width: 46ch; }
.biz-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-ghost-dark { background: rgba(255, 255, 255, .12); color: #fff; border: 0; }
.btn-ghost-dark:hover { background: rgba(255, 255, 255, .2); }
.biz-price-card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-xl); padding: 26px; }
.biz-price-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: #8fb4ff; font-weight: 700; margin-bottom: 8px; }
.biz-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; }
.biz-price-from { font-size: 13px; color: rgba(255, 255, 255, .6); }
.biz-price-val { font-family: var(--font-display); font-weight: 800; font-size: 34px; }
.biz-feats { display: flex; flex-direction: column; gap: 12px; }
.biz-feat { display: flex; gap: 10px; font-size: 14px; }
.biz-feat svg { flex: none; stroke: var(--green-l); }
@media (max-width: 1000px) { .biz-hero-grid { grid-template-columns: 1fr; gap: 32px; } .biz-h1 { font-size: 34px; } }
/* ---------- pagina pricing (servizi + liste) ---------- */
.stack > * + * { margin-top: 48px; }
.gap-top { margin-top: 24px; }
.eyebrow.warn { color: var(--gold); }
.price-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; }
.price-card-name { font-weight: 600; font-size: 16px; line-height: 1.3; margin-top: 12px; }
.price-card-price { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: 4px 0; }
.price-card-aud { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }
.price-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.check-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 10px; font-size: 14.5px; color: var(--muted-2); }
.check-list li .mk { flex: none; font-weight: 700; }
.check-list.pos li .mk { color: #2a9d63; }
.check-list.neg li .mk { color: var(--gold); }
.card-sub-h { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin: 4px 0 0; }
.card-title-sm { font-weight: 600; font-size: 15px; }
.card-text { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 8px 0 0; }
.card-text a { color: var(--blue); font-weight: 600; }
.cta-card { padding: 28px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.cta-card-title { font-size: 22px; font-weight: 700; font-family: var(--font-display); letter-spacing: -0.02em; }
.cta-card-sub { color: var(--muted); margin-top: 6px; font-size: 15px; }
/* ---------- pagina contenuto / statiche (render_static_page) ---------- */
.page { padding: 56px 0 72px; }
.page-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.page-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--blue); font-weight: 700; margin-bottom: 12px; }
.page-title { font-weight: 800; font-size: 40px; letter-spacing: -0.03em; margin: 0 0 12px; line-height: 1.05; }
.page-desc { font-size: 17px; color: var(--muted-2); line-height: 1.6; margin: 0 0 8px; max-width: 60ch; }
.page-updated { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.page-updated a { color: var(--blue); font-weight: 600; }
.prose { margin-top: 28px; }
.prose > .lead { font-size: 17px; color: var(--muted-2); line-height: 1.7; margin: 0 0 24px; }
.prose h2 { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; margin: 32px 0 8px; }
.prose h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 24px 0 6px; }
.prose p { font-size: 14.5px; color: var(--muted-2); line-height: 1.7; margin: 0 0 18px; }
.prose a:not(.btn) { color: var(--blue); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 20px; }
.prose li { font-size: 14.5px; color: var(--muted-2); line-height: 1.7; margin-bottom: 8px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { color: var(--ink); font-weight: 700; }
/* ---------- componenti contenuto (usati nei callback delle pagine) ---------- */
.muted { color: var(--muted); }
.text-brand { color: var(--blue); }
.lead { font-size: 17px; color: var(--muted-2); line-height: 1.7; }
.card {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 20px 22px; box-shadow: 0 1px 2px rgba(20, 30, 55, .04);
}
.card-premium {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 20px 22px; transition: border-color .18s, box-shadow .18s, transform .18s;
}
.card-premium:hover { border-color: rgba(36, 103, 240, .25); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.not-prose { margin: 20px 0; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card-kicker { font-weight: 600; font-size: 14.5px; color: var(--ink); margin: 16px 0 6px; }
.card-warn { border-color: rgba(245, 196, 81, .5); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.card-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; }
.badge-row.center { justify-content: center; margin-top: 32px; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .card-grid-3 { grid-template-columns: repeat(3, 1fr); } }
/* accordion (FAQ) */
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-item summary { cursor: pointer; font-weight: 600; font-size: 15px; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after { content: "+"; color: var(--muted); font-size: 18px; }
.accordion-item[open] summary::after { content: "\2212"; }
.accordion-item > div, .accordion-item > p { padding: 0 0 16px; font-size: 14px; color: var(--muted-2); line-height: 1.6; }
.accordion { margin: 20px 0; }
.accordion-body { padding: 0 0 16px; font-size: 14px; color: var(--muted-2); line-height: 1.6; }
.service-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; }
/* ---------- utility ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ==========================================================================
App console shell (/app) - sidebar + topbar + main, mobile tabbar
========================================================================== */
.app-console { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; background: #F7F8FC; }
.app-sidebar { display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--line); padding: 22px 16px; position: sticky; top: 0; height: 100vh; }
.app-sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.app-sidebar-logo .nav-logo-mark { width: 32px; height: 32px; }
.app-nav { display: flex; flex-direction: column; gap: 3px; }
.app-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-sm); color: var(--muted-2); font-size: 14px; }
.app-nav a:hover { background: var(--bg); color: var(--ink); }
.app-nav a.is-active { background: rgba(36, 103, 240, .08); color: var(--blue); font-weight: 600; }
.app-nav a svg { flex: none; }
.app-upgrade { margin-top: auto; background: linear-gradient(150deg, var(--ink), var(--ink-2)); border-radius: 16px; padding: 16px; color: #fff; }
.app-upgrade-t { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.app-upgrade-d { font-size: 11px; color: rgba(255, 255, 255, .65); line-height: 1.5; margin-bottom: 10px; }
.app-upgrade-btn { display: block; background: var(--yellow); color: var(--ink); border-radius: 9px; padding: 8px; text-align: center; font-size: 12px; font-weight: 700; }
.app-body { min-width: 0; display: flex; flex-direction: column; }
.app-mobilebar { display: none; align-items: center; justify-content: space-between; padding: 16px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.app-mobilebar-logo { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.app-mobilebar-logo .nav-logo-mark { width: 28px; height: 28px; }
.app-topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; border-bottom: 1px solid var(--line); background: #fff; gap: 16px; flex-wrap: wrap; }
.app-topbar-l { min-width: 0; }
.app-topbar-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.app-topbar-sub { font-size: 12px; color: var(--muted-3); }
.app-topbar-actions { display: flex; align-items: center; gap: 12px; }
.app-icon-btn { width: 40px; height: 40px; border-radius: 11px; background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; position: relative; color: var(--muted-2); }
.app-icon-btn .dot { position: absolute; top: 7px; right: 8px; min-width: 8px; height: 8px; padding: 0 3px; border-radius: 999px; background: var(--blue); border: 2px solid #fff; font-size: 8px; color: #fff; line-height: 8px; }
.app-avatar { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(150deg, var(--ink), var(--blue)); display: grid; place-items: center; color: #fff; font-weight: 700; }
.app-back { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin-bottom: 4px; }
.app-content { padding: 28px; width: 100%; max-width: 1120px; }
.app-content > .stack > * + * { margin-top: 20px; }
/* KPI cards */
.app-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.kpi-k { font-size: 12px; color: var(--muted); }
.kpi-v { font-family: var(--font-display); font-weight: 800; font-size: 28px; margin-top: 4px; }
.kpi-v.warn { color: #c99a1f; }
.kpi-v.green { color: #2a9d63; }
/* form app/admin: stila automaticamente label/input dentro .app-content e .admin-main */
.app-content .field, .admin-main .field { margin-bottom: 16px; }
.app-content .field > label, .admin-main .field > label { display: block; font-size: 13px; font-weight: 600; color: var(--muted-2); margin-bottom: 6px; }
.app-content input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not(.btn),
.app-content select,
.app-content textarea,
.admin-main input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not(.btn):not(.admin-search input),
.admin-main select,
.admin-main textarea {
width: 100%; max-width: 100%; background: #fff; border: 1px solid var(--line-3); border-radius: var(--r);
padding: 12px 14px; font-size: 14px; font-family: var(--font); color: var(--ink); outline: none;
transition: border-color .12s ease, box-shadow .12s ease;
}
.app-content input:focus, .app-content select:focus, .app-content textarea:focus,
.admin-main input:focus, .admin-main select:focus, .admin-main textarea:focus {
border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36, 103, 240, .1);
}
.app-content textarea, .admin-main textarea { min-height: 90px; resize: vertical; }
/* ---------- admin back office console ---------- */
.admin-wrap { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; background: #F7F8FC; }
.admin-sidebar { display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--line); padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.admin-brand { display: flex; align-items: center; gap: 8px; padding: 0 8px 16px; font-family: var(--font-display); font-weight: 800; }
.admin-brand-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-3); font-weight: 700; }
.admin-nav { display: flex; flex-direction: column; }
.admin-nav-group { margin-bottom: 10px; }
.admin-nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-3); font-weight: 700; padding: 8px 12px 4px; }
.admin-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--muted-2); font-size: 13.5px; }
.admin-nav-item:hover { background: var(--bg); color: var(--ink); }
.admin-nav-item.is-active { background: rgba(36, 103, 240, .08); color: var(--blue); font-weight: 600; }
.admin-nav-item svg { flex: none; }
.admin-switch { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 13px; color: var(--muted); }
.admin-main-col { min-width: 0; display: flex; flex-direction: column; }
.admin-topbar { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.admin-burger { display: none; }
.admin-search { flex: 1; max-width: 420px; position: relative; }
.admin-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-3); display: inline-flex; }
.admin-search input { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px 9px 34px; font-size: 13px; font-family: var(--font); color: var(--ink); outline: none; }
.admin-search input:focus { border-color: var(--blue); background: #fff; }
.admin-topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.admin-quick { position: relative; }
.admin-quick-menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-card); padding: 6px; min-width: 180px; z-index: 40; display: flex; flex-direction: column; }
.admin-quick-menu a { padding: 8px 10px; border-radius: var(--r-sm); font-size: 13px; color: var(--muted-2); }
.admin-quick-menu a:hover { background: var(--bg); color: var(--ink); }
.admin-role-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted-2); background: var(--bg); border-radius: var(--r-pill); padding: 5px 11px; }
.admin-icon-btn { width: 36px; height: 36px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted-2); cursor: pointer; }
.admin-user-email { font-size: 12px; }
.admin-nav-mobile { display: none; }
.admin-main { padding: 24px; width: 100%; max-width: 1200px; }
@media (max-width: 1000px) {
.admin-wrap { grid-template-columns: 1fr; }
.admin-sidebar { display: none; }
.admin-burger { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); cursor: pointer; }
.admin-search { display: none; }
.admin-user-email { display: none; }
.admin-main { padding: 16px; }
.admin-nav-mobile:not([hidden]) { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.admin-nav-mobile a { font-size: 12px; color: var(--muted-2); padding: 6px 10px; border-radius: var(--r-sm); background: var(--bg); display: inline-flex; align-items: center; gap: 6px; }
}
/* status badge (compat con render_status_badge) */
.status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: var(--r-pill); padding: 4px 10px; background: var(--bg); color: var(--muted-2); }
.status-badge .status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-badge.tone-success { background: rgba(51, 209, 122, .12); color: #1f7a49; }
.status-badge.tone-destructive { background: rgba(234, 67, 53, .1); color: #c0392b; }
.status-badge.tone-warning { background: rgba(245, 196, 81, .18); color: #a97d10; }
.status-badge.tone-ocean, .status-badge.tone-lime { background: rgba(36, 103, 240, .1); color: var(--blue); }
/* mobile tabbar (bottom) */
.app-mobile-tabbar { display: none; }
.mobile-tabbar-inner { display: flex; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; font-size: 10px; color: var(--muted); }
.tab.is-active { color: var(--blue); }
.tab-ico { position: relative; }
.tab-badge { position: absolute; top: -4px; right: -8px; background: var(--blue); color: #fff; font-size: 9px; font-weight: 700; border-radius: 999px; min-width: 15px; height: 15px; display: grid; place-items: center; padding: 0 3px; }
@media (max-width: 900px) {
.app-console { grid-template-columns: 1fr; }
.app-sidebar { display: none; }
.app-mobilebar { display: flex; }
.app-content { padding: 20px 16px 90px; }
.app-kpi { grid-template-columns: 1fr 1fr; }
.app-mobile-tabbar { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
}
/* ---------- tracker landing ---------- */
.tk-hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
.tk-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.tk-note { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-top: 24px; font-size: 14px; line-height: 1.6; color: var(--muted-2); max-width: 34rem; }
.tk-note strong { color: var(--ink); }
.tk-step-num { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: rgba(36, 103, 240, .25); line-height: 1; }
.tk-step-t { font-weight: 600; font-size: 15px; margin-top: 12px; line-height: 1.35; }
.tk-card-head { display: flex; align-items: center; justify-content: space-between; }
.tk-uc { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-3); font-weight: 600; }
.tk-visa-name { font-weight: 700; font-size: 18px; margin-top: 4px; }
.tk-visa-name.sm { font-size: 15px; }
.pill + .sec-title, .pill + h1 { margin-top: 16px; }
.sec-sub + .badge-row { margin-top: 24px; }
.cta-card.center { justify-content: center; text-align: center; }
.tk-inner { margin-top: 12px; }
.tk-inner + .tk-inner { margin-top: 10px; }
.tk-days { font-size: 30px; font-weight: 700; line-height: 1; }
.tk-progress { margin-top: 14px; height: 6px; border-radius: 999px; background: rgba(20, 30, 55, .1); overflow: hidden; }
.tk-progress > span { display: block; height: 100%; width: 60%; background: var(--gold); }
.tk-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.tk-reminders { padding: 8px; }
.tk-reminder { display: flex; gap: 14px; padding: 14px; }
.tk-reminder + .tk-reminder { border-top: 1px solid var(--line); }
.tk-reminder-dot { height: 38px; width: 38px; border-radius: var(--r); display: grid; place-items: center; flex-shrink: 0; background: rgba(36, 103, 240, .12); color: var(--blue); }
.tk-reminder.now .tk-reminder-dot { background: rgba(245, 196, 81, .2); color: #a97d10; }
.tk-reminder-t { font-weight: 600; font-size: 14px; }
.tk-reminder-s { font-weight: 500; font-size: 14px; margin-top: 3px; }
.tk-reminder-d { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.tk-sponsor-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.tk-sponsor-av { height: 48px; width: 48px; border-radius: 14px; background: rgba(36, 103, 240, .12); display: grid; place-items: center; font-weight: 700; color: var(--blue); }
.tk-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; max-width: 34rem; }
.tk-channel { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--muted-2); }
.tk-channel .mk { flex: none; font-weight: 700; color: #2a9d63; }
.tk-upgrade-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tk-upgrade-caption { font-size: 12.5px; color: var(--muted); margin: 0; }
@media (max-width: 1000px) { .tk-hero-grid, .tk-2col { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 560px) { .tk-channels { grid-template-columns: 1fr; } }
/* ---------- path finder (wizard) ---------- */
.wizard { min-height: 100vh; display: flex; flex-direction: column; }
.wizard-head { max-width: 46rem; margin: 0 auto; width: 100%; padding: 20px 24px 0; }
.wizard-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wizard-back { color: var(--muted); padding: 6px; margin-left: -6px; font-size: 18px; }
.wizard-head-right { display: flex; align-items: center; gap: 12px; }
.wizard-head-right a { font-size: 13px; color: var(--muted); }
.wizard-head-time { margin-top: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.wizard-progress { display: flex; gap: 6px; margin-top: 16px; }
.wizard-bar { height: 5px; border-radius: 3px; flex: 1; background: #EAEBF4; transition: background-color .2s; }
.wizard-bar.is-active { background: var(--blue); }
.wizard-main { flex: 1; max-width: 46rem; margin: 0 auto; width: 100%; padding: 40px 24px 120px; }
.wizard-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--blue); margin-bottom: 14px; }
.wizard-step { display: none; }
.wizard-step.is-current { display: block; }
.wizard-step.is-active { display: block; } /* apply.js (app) usa is-active; wizard.js (pubblico) usa is-current */
.wizard-variant { display: none; }
.wizard-variant.is-active { display: block; }
.wizard-h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.wizard-sub { color: var(--muted); margin-top: 10px; line-height: 1.6; }
.wizard-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.wizard-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 16px; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; transition: border-color .15s, background-color .15s; }
.wizard-opt:hover { border-color: rgba(36, 103, 240, .4); }
.wizard-opt.is-selected { border-color: var(--blue); background: rgba(36, 103, 240, .06); }
.wizard-opt-label { font-weight: 600; display: block; }
.wizard-opt-desc { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.wizard-opt-dot { height: 22px; width: 22px; border-radius: 999px; border: 2px solid var(--line-3); flex-shrink: 0; position: relative; }
.wizard-opt.is-selected .wizard-opt-dot { border-color: var(--blue); background: var(--blue); }
.wizard-opt.is-selected .wizard-opt-dot::after { content: ""; position: absolute; inset: 0; margin: auto; height: 9px; width: 5px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.wizard-nat, .wizard-date-input { width: 100%; background: #fff; border: 1px solid var(--line-3); border-radius: var(--r); padding: 15px 16px; font-size: 15px; color: var(--ink); font-family: var(--font); margin-top: 24px; }
.wizard-nat:focus, .wizard-date-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36, 103, 240, .15); }
.wizard-date-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 24px; }
.wizard-date-input { margin-top: 7px; }
.wizard-unsure { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin-top: 14px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--line-3); background: #fff; font-size: 14px; color: var(--muted-2); cursor: pointer; }
.wizard-unsure.is-selected { border-color: var(--blue); background: rgba(36, 103, 240, .08); color: var(--ink); }
.wizard-hint { font-size: 12px; color: var(--muted); margin-top: 12px; }
.wizard-foot { position: sticky; bottom: 0; padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.wizard-foot-inner { max-width: 46rem; margin: 0 auto; }
.wizard-seo { max-width: 46rem; margin: 0 auto; width: 100%; padding: 40px 24px 56px; display: flex; flex-direction: column; gap: 32px; }
.wizard-seo-h2 { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.wizard-seo-h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.wizard-routes { display: flex; flex-direction: column; gap: 12px; }
.wizard-route { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
.wizard-route-title { font-weight: 600; font-size: 14.5px; display: block; }
.wizard-route-desc { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.wizard-route-price { display: block; font-size: 13px; color: var(--blue); font-weight: 600; margin-top: 6px; }
.wizard-disclaimer { padding: 16px; border-left: 4px solid var(--blue); }
.wizard-disclaimer-t { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.wizard-disclaimer-p { font-size: 13px; color: var(--muted); line-height: 1.6; }
/* ---------- pill ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(36, 103, 240, .08); color: var(--blue); border-radius: var(--r-pill); padding: 6px 13px; font-size: 12px; font-weight: 700; }
.pill-warn { background: rgba(245, 196, 81, .18); color: #a97d10; }
/* ---------- path result (recommendation) ---------- */
.result-page { max-width: 640px; margin: 0 auto; width: 100%; padding: 0 24px 72px; }
.result-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.result-head a { color: var(--muted); font-size: 14px; }
.result-hero { text-align: center; margin-bottom: 24px; }
.result-hero h1 { font-weight: 800; font-size: 28px; letter-spacing: -0.03em; margin: 16px 0 0; }
.result-hero p { color: var(--muted); margin-top: 8px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-box { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.stat-box + .stat-box-row, .stat-box.mt { margin-top: 12px; }
.stat-box-v { font-weight: 600; margin-top: 6px; }
.stat-box.warn { border-color: rgba(245, 196, 81, .5); }
.stat-box.next { background: rgba(36, 103, 240, .06); border-color: rgba(36, 103, 240, .25); }
.stat-box p { font-size: 14px; margin-top: 6px; line-height: 1.6; color: var(--muted-2); }
.stat-box ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.result-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.alt-card { display: block; padding: 16px; }
.alt-card-row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.alt-card-name { font-weight: 600; }
.alt-card-price { color: var(--blue); font-size: 14px; font-weight: 600; white-space: nowrap; }
.alt-card-sum { color: var(--muted); font-size: 14px; margin-top: 6px; }
.result-disclaimer { color: var(--muted); margin: 32px auto 0; font-size: 12.5px; text-align: center; line-height: 1.6; max-width: 30rem; }
.result-alts { margin-top: 32px; }
.result-alts .eyebrow { margin-bottom: 12px; }
.stat-box .pill { margin-top: 10px; }
.upsell { display: block; padding: 16px; margin-top: 16px; }
.upsell .eyebrow { margin-bottom: 4px; }
.upsell-t { font-weight: 600; }
.upsell-d { color: var(--muted); font-size: 13px; margin-top: 4px; }
/* ---------- card centrata (verify-email, reset-password, 404, stati) ---------- */
.center-page { min-height: 100vh; display: grid; place-items: center; background: var(--bg); padding: 40px 24px; }
.center-card { width: 100%; max-width: 460px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 40px; text-align: center; box-shadow: var(--shadow-card); }
.center-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.center-logo .nav-logo-mark { width: 32px; height: 32px; }
.center-card h1 { font-weight: 800; font-size: 28px; letter-spacing: -0.03em; margin: 0 0 8px; }
.center-card > p { font-size: 14px; color: var(--muted); margin: 0 0 4px; line-height: 1.6; }
.center-card .alert { text-align: left; margin: 18px 0; }
.center-card .field { text-align: left; }
.center-card form { margin-top: 20px; }
.center-card .btn-block + .btn-block, .center-card form + .btn { margin-top: 12px; }
.center-404 { font-family: var(--font-display); font-weight: 800; font-size: 72px; letter-spacing: -0.04em; line-height: 1; color: var(--blue); margin-bottom: 8px; }
/* ---------- auth (split) ---------- */
.auth-page { min-height: 100vh; display: grid; place-items: center; background: var(--bg); padding: 40px 24px; }
.auth-shell { width: 100%; max-width: 460px; }
.auth-split { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line-3); border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px -40px rgba(20, 30, 55, .4); background: #fff; }
.auth-form { background: #fff; padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.auth-form h1 { font-weight: 800; font-size: 26px; letter-spacing: -0.03em; margin: 0 0 6px; }
.auth-form-sub { font-size: 14px; color: var(--muted); margin: 0 0 26px; }
.auth-form-sub a, .auth-link { color: var(--blue); font-weight: 600; }
.auth-terms { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--muted-2); line-height: 1.5; margin-bottom: 20px; cursor: pointer; }
.auth-terms input { margin: 2px 0 0; accent-color: var(--blue); width: 16px; height: 16px; flex: none; }
.auth-alt { margin-top: 18px; text-align: center; font-size: 14px; color: var(--muted); }
.auth-form .alert { margin: 18px 0; }
.auth-form .btn-ghost { margin-top: 18px; }
.auth-forgot { background: none; border: 0; color: var(--muted); font-size: 13px; cursor: pointer; font-family: var(--font); margin-top: 10px; }
/* ---------- responsive ---------- */
@media (max-width: 1000px) {
.testi { grid-template-columns: 1fr 1fr; }
.ig-grid { grid-template-columns: repeat(4, 1fr); }
.app-grid { grid-template-columns: 1fr; gap: 32px; }
.guarantee-grid { grid-template-columns: 1fr 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 760px) {
.ig-grid { grid-template-columns: repeat(3, 1fr); }
.footer-grid { grid-template-columns: 1fr; }
.app-title { font-size: 32px; }
.auth-form { padding: 32px 24px; }
}
@media (max-width: 1000px) {
.hero-grid { grid-template-columns: 1fr; gap: 36px; }
.hero-h1 { font-size: 46px; }
}
@media (max-width: 760px) {
.nav-links, .nav-cta { display: none; }
.burger { display: inline-flex; }
.hero-h1 { font-size: 38px; }
.hero-visual { display: none; }
.steps, .cards-3, .pricing, .quick2, .testi { grid-template-columns: 1fr; }
.section-pad { padding-top: 56px; padding-bottom: 56px; }
}
/* ============================================================
APP / ADMIN - classi strutturali portate da style.css.
Sulle pagine app/admin ($redesign) carica solo site.css, ma il contenuto
usa ancora questi componenti (app-card, admin-table, timeline, kpi-*,
stepper, progress...). Portati verbatim: usano i token compat gia' presenti
piu' sopra -> resa on-brand. (input-base NON serve: gli in
.app-content/.admin-main sono gia' stilizzati dalla regola form globale.)
============================================================ */
.surface-navy { background: hsl(var(--ocean-deep)); color: hsl(var(--primary-foreground)); }
.btn-pill { border-radius: 999px; }
.status-badge.tone-muted { background: hsl(var(--card-elevated)); color: hsl(var(--foreground-muted)); border-color: hsl(var(--border)); }
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; background: hsl(var(--background)); }
.auth-head { max-width: 28rem; margin: 0 auto; width: 100%; padding: 1.25rem 1.25rem 0; display: flex; align-items: center; justify-content: space-between; }
.auth-main { flex: 1; max-width: 28rem; margin: 0 auto; width: 100%; padding: 2.5rem 1.25rem; }
.auth-logo { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.03em; }
.auth-logo b { color: hsl(var(--lime)); }
.app-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 1rem 1.1rem; }
.app-list { display: flex; flex-direction: column; gap: 0.75rem; }
.app-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.app-row:hover { border-color: hsl(var(--primary) / 0.25); }
.section-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--foreground-muted)); margin: 1.5rem 0 0.6rem; font-weight: 600; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: hsl(var(--foreground-muted)); }
.empty-state svg { margin: 0 auto 0.75rem; opacity: 0.5; }
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content: ""; position: absolute; left: 0.35rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: hsl(var(--border)); }
.timeline-item { position: relative; padding: 0 0 1.1rem 0; }
.timeline-item::before { content: ""; position: absolute; left: -1.5rem; top: 0.3rem; height: 0.75rem; width: 0.75rem; border-radius: 999px; background: hsl(var(--lime)); border: 2px solid hsl(var(--background)); }
.timeline-item .t-time { font-size: 0.7rem; color: hsl(var(--foreground-muted)); }
.stepper { display: flex; gap: 0.35rem; margin-bottom: 1.25rem; }
.stepper .step { flex: 1; height: 0.3rem; border-radius: 999px; background: hsl(var(--border)); }
.stepper .step.done, .stepper .step.current { background: hsl(var(--lime)); }
.progress { height: 0.5rem; background: hsl(var(--border)); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: hsl(var(--lime)); border-radius: 999px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.admin-table th { text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: hsl(var(--foreground-muted)); padding: 0.5rem 0.75rem; border-bottom: 1px solid hsl(var(--border)); }
.admin-table td { padding: 0.7rem 0.75rem; border-bottom: 1px solid hsl(var(--border) / 0.6); }
.admin-table tr:hover td { background: hsl(var(--card-elevated) / 0.5); }
.admin-table-wrap { overflow-x: auto; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.85rem; }
.kpi-value { font-size: 1.75rem; font-weight: 700; font-family: var(--font-display); }
.kpi-label { font-size: 0.72rem; color: hsl(var(--foreground-muted)); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.2rem; }
.admin-h1 { font-size: 1.5rem; font-weight: 600; font-family: var(--font-display); margin-bottom: 0.25rem; }
.admin-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.admin-filters a, .admin-filters .chip { font-size: 0.8rem; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid hsl(var(--border)); color: hsl(var(--foreground-muted)); }
.admin-filters a.is-active { background: hsl(var(--lime)); color: hsl(var(--lime-foreground)); border-color: transparent; }
/* ============================================================
APP / ADMIN CONTENT - vocabolario condiviso (migrazione inline -> classi)
Piccolo set di classi testo/colore riusabili in tutte le pagine app/admin.
NB: .muted (testo attenuato) e .mono (font monospazio) esistono gia' piu'
sopra - riusarle, non ridefinirle. .stack e' gia' preso (spaziatura
margin-based) - non usarlo per flex-column.
============================================================ */
.tx-lime { color: hsl(var(--lime)); }
.tx-lime-h { color: hsl(var(--lime-hover)); }
.tx-fg { color: hsl(var(--foreground)); }
.tx-danger { color: hsl(var(--destructive)); }
.tx-warn { color: hsl(var(--warning)); }
.tx-success { color: hsl(var(--success)); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
/* >>> WF-CONTENT-COMPONENTS: le classi component-specific delle pagine
app/admin vengono appese qui sotto dalla migrazione inline->classi <<< */
/* --- migrazione inline->classi: app/case.php --- */
/* ============================================================
app/case.php - classi component-specific (migrazione inline -> classi)
Namespace: case-*
NB: .app-card e' definita in style.css (che carica DOPO site.css),
quindi gli override di border-color usano selettore composto
(.app-card.case-*) per vincere la cascata a parita' di sorgente.
============================================================ */
/* Riga chiave/valore (card ricevuta/corriere) */
.case-kv-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.78rem; }
.case-kv-val { font-weight: 500; text-align: right; text-transform: capitalize; max-width: 60%; }
/* Contenitore pagina */
.case-page { display: flex; flex-direction: column; gap: 1.25rem; }
/* Wrapper flessibile che consente il troncamento del contenuto */
.case-min0 { min-width: 0; }
.case-noshrink { flex-shrink: 0; }
/* Hero */
.case-hero { padding: 1.25rem; position: relative; overflow: hidden; }
.case-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.case-eyebrow { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; }
.case-hero-title { font-size: 1.35rem; line-height: 1.2; font-weight: 700; margin-top: 0.25rem; }
.case-hero-sub { font-size: 0.72rem; margin-top: 0.25rem; }
.case-stat-grid { margin-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.case-stat-tile { border-radius: 0.75rem; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); padding: 0.6rem 0.75rem; }
.case-stat-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; }
.case-stat-value { font-size: 0.85rem; font-weight: 600; margin-top: 0.15rem; }
/* Prossima azione (card premium: composto per vincere anche su :hover) */
.card-premium.case-next-action { display: flex; align-items: center; gap: 0.85rem; padding: 1rem; border-color: hsl(var(--warning) / 0.4); background: hsl(var(--warning) / 0.06); }
.case-next-icon { height: 2.5rem; width: 2.5rem; border-radius: 0.75rem; background: hsl(var(--warning) / 0.15); display: grid; place-items: center; flex-shrink: 0; }
.case-next-body { min-width: 0; flex: 1; }
.case-action-eyebrow { display: block; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.case-action-label { display: block; font-size: 0.9rem; font-weight: 600; }
/* Blocca l'invio */
.case-blocker-banner { margin-bottom: 0.75rem; display: flex; align-items: flex-start; gap: 0.6rem; border-radius: 0.75rem; background: hsl(var(--warning) / 0.15); border: 1px solid hsl(var(--warning) / 0.3); padding: 0.6rem 0.75rem; }
.case-blocker-icon { flex-shrink: 0; margin-top: 0.1rem; }
.case-blocker-eyebrow { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.case-label-strong { font-size: 0.85rem; font-weight: 600; }
.case-ready { margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; }
.case-blocker-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.case-blocker-item { display: flex; align-items: center; gap: 0.75rem; border-radius: 0.5rem; padding: 0.4rem 0.5rem; }
.case-blocker-dot { height: 0.5rem; width: 0.5rem; border-radius: 999px; flex-shrink: 0; }
.case-body-sm { font-size: 0.85rem; }
.case-blocker-hint { font-size: 0.72rem; margin-left: auto; text-align: right; }
.case-fine-print { margin-top: 0.75rem; font-size: 0.72rem; }
/* Titoli di sezione: icona inline nell'h2 */
.case-h2-icon { display: inline-flex; }
/* Visto approvato (app-card: composto per l'override di border-color) */
.app-card.case-approved-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border-color: hsl(var(--success) / 0.4); }
.case-title-sm { display: block; font-weight: 600; font-size: 0.85rem; }
.case-approved-sub { display: block; font-size: 0.72rem; margin-top: 0.15rem; }
.case-approved-icon { flex-shrink: 0; display: inline-flex; }
/* Card impilata (pagamento / corriere) */
.case-card-stack { display: flex; flex-direction: column; gap: 0.5rem; }
.case-price-note { font-size: 0.72rem; padding-top: 0.25rem; line-height: 1.6; }
.case-pay-warn { font-size: 0.72rem; padding-top: 0.25rem; }
.case-manage-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 600; padding-top: 0.25rem; }
/* Timeline */
.case-timeline-label { font-size: 0.78rem; line-height: 1.35; }
/* Documenti */
.case-docs-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.case-docs-count { font-size: 0.72rem; }
.case-doc-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.case-doc-label { font-weight: 500; font-size: 0.85rem; display: flex; align-items: center; gap: 0.4rem; }
.case-req-dot { font-size: 0.7rem; }
.case-doc-meta { font-size: 0.72rem; margin-top: 0.2rem; display: inline-flex; align-items: center; gap: 0.35rem; max-width: 200px; }
.case-dot-sep { opacity: 0.6; }
.case-doc-empty { font-size: 0.72rem; margin-top: 0.2rem; }
.case-doc-btn { flex-shrink: 0; cursor: pointer; }
.case-hidden { display: none; }
/* Attivita' */
.case-event-title { font-weight: 500; font-size: 0.85rem; }
.case-event-note { font-size: 0.78rem; margin-top: 0.25rem; }
.case-event-date { font-size: 0.65rem; margin-top: 0.35rem; }
/* Azioni rapide */
.case-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.case-quick-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.case-quick-icon { height: 2.25rem; width: 2.25rem; border-radius: 0.75rem; background: hsl(var(--card-elevated)); border: 1px solid hsl(var(--border)); display: grid; place-items: center; }
.case-assist { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.85rem; }
.case-assist-sub { display: block; font-size: 0.72rem; }
/* Card flag documento (app-card: composto per l'override di border-color) */
.app-card.case-flagged { border-color: hsl(var(--destructive) / 0.4); }
/* CTA fissa in basso */
.case-cta-dock { position: fixed; left: 0; right: 0; bottom: calc(4.75rem + env(safe-area-inset-bottom)); z-index: 35; padding: 0 1.25rem; pointer-events: none; }
.case-cta-inner { max-width: 42rem; margin: 0 auto; pointer-events: auto; }
.case-cta-btn { min-height: 3rem; }
/* --- migrazione inline->classi: app/family.php --- */
/* app/family.php - family dashboard. Semantic classes extracted from inline styles (prefix fam-). */
/* page shell */
.fam-page { display:flex;flex-direction:column;gap:1.5rem; }
/* hero header */
.fam-hero { padding:1.25rem;display:flex;align-items:flex-start;gap:.75rem; }
.fam-hero-icon { height:2.75rem;width:2.75rem;border-radius:.85rem;background:hsl(var(--lime) / .15);display:grid;place-items:center;flex-shrink:0; }
.fam-title { font-family:var(--font-display);font-size:1.25rem;font-weight:600;line-height:1.2; }
.fam-hero-sub { font-size:.72rem;margin-top:.25rem; }
/* generic flex-column helpers used across rows */
.fam-col-min { min-width:0; }
.fam-col-grow { flex:1;min-width:0; }
.fam-noshrink { flex-shrink:0; }
/* identity block (holder / member name + subtitle) */
.fam-name { font-weight:600;font-size:.9rem; }
.fam-sub { font-size:.7rem;margin-top:.15rem; }
.fam-edit { font-size:.72rem;flex-shrink:0; }
/* section header row (title left, action right) */
.fam-row-head { display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.6rem; }
.fam-pill-tall { min-height:2.25rem; }
/* empty-state card body */
.fam-empty { padding:1.5rem;font-size:.85rem; }
/* members list */
.fam-members { display:flex;flex-direction:column;gap:.7rem; }
.fam-member { padding:1rem;display:flex;flex-direction:column;gap:.6rem; }
.fam-member-head { display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem; }
.fam-del-form { flex-shrink:0;line-height:0; }
.fam-member-stats { display:grid;grid-template-columns:1fr 1fr;gap:.5rem; }
/* family bundle card */
.fam-bundle-card { padding:1rem;display:flex;flex-direction:column;gap:.5rem; }
.fam-bundle-row { display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.82rem; }
.fam-amount { font-weight:500; }
.fam-fine { font-size:.72rem; }
.fam-bundle-cta { align-self:flex-start;margin-top:.5rem; }
/* upsell card */
.fam-upsell-icon { height:2.5rem;width:2.5rem;border-radius:.85rem;background:hsl(var(--lime) / .15);display:grid;place-items:center;flex-shrink:0; }
.fam-upsell-label { font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600; }
.fam-upsell-title { font-size:.9rem;font-weight:600; }
.fam-upsell-tagline { font-size:.7rem; }
.fam-upsell-note { font-size:.7rem;margin-top:.5rem;text-align:center; }
/* shared vault */
.fam-vault-title { display:inline-flex;align-items:center;gap:.4rem; }
.fam-vault-upload { cursor:pointer;white-space:nowrap; }
.fam-doc-icon { display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:.7rem;background:hsl(var(--card-elevated));flex-shrink:0; }
.fam-doc-name { font-size:.85rem; }
/* footer notice */
.fam-notice { display:flex;align-items:flex-start;gap:.6rem;font-size:.72rem; }
/* risk pill (static base; tone colors stay inline via $styles[$tone]) */
.fam-risk-pill { display:inline-flex;align-items:center;gap:.35rem;border:1px solid;border-radius:999px;padding:.25rem .7rem;font-size:.7rem;font-weight:500; }
/* --- compound modifiers: override component classes defined in style.css
(loaded after site.css, where these fam- classes are appended), so a plain
class would lose the cascade on the same property. --- */
.card-premium.fam-upsell { padding:1rem;display:flex;align-items:center;gap:.75rem;border-color:hsl(var(--lime) / .25);background:hsl(var(--lime) / .05); }
.section-title.fam-flush-top { margin-top:0; }
.section-title.fam-flush { margin:0; }
.btn-ghost.fam-del-btn { color:hsl(var(--foreground-muted));padding:.25rem; }
/* --- migrazione inline->classi: app/index.php --- */
/* app/index.php - home dashboard. Semantic classes extracted from inline styles (prefix dash-). */
/* shell */
.dash-home { display:flex;flex-direction:column;gap:1.5rem; }
/* greeting header */
.dash-eyebrow { font-size:.66rem;text-transform:uppercase;letter-spacing:.2em; }
.dash-h1 { font-size:1.6rem;margin-top:.25rem; }
/* hero card (active case / no active case) */
.dash-hero-card { display:block;padding:1.25rem; }
.dash-active-head { display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem; }
.dash-minw0 { min-width:0; }
.dash-card-eyebrow { font-size:.62rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600; }
.dash-card-title { font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin-top:.35rem; }
.dash-card-ref { font-size:.7rem;margin-top:.25rem; }
.dash-noactive-eyebrow { display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:600;margin-bottom:.5rem; }
.dash-noactive-title { font-family:var(--font-display);font-size:1.1rem;font-weight:600;line-height:1.3; }
.dash-cta-pill { display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;background:hsl(var(--lime));color:hsl(var(--lime-foreground));border-radius:999px;padding:.6rem 1rem;font-size:.85rem;font-weight:600; }
.dash-promo-sub { font-size:.78rem;margin-top:.4rem;line-height:1.35; }
/* priority / action-required card */
.dash-priority-card { padding:1rem 1.1rem; }
.dash-priority-row { display:flex;align-items:center;gap:.75rem; }
.dash-action-label { font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600; }
.dash-priority-title { font-size:.9rem;font-weight:600; }
.dash-priority-actions { display:flex;gap:.5rem;margin-top:.85rem; }
.dash-btn-round { border-radius:.85rem; }
.dash-btn-grow { flex:1; }
/* quick actions grid */
.dash-section-eyebrow { font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;margin-bottom:.6rem; }
.dash-quick-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem; }
.dash-quick-tile { aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:.5rem; }
.dash-quick-label { font-size:.66rem;font-weight:500;text-align:center;line-height:1.2; }
/* recent updates section */
.dash-section-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem; }
.dash-viewall { font-size:.66rem;display:inline-flex;align-items:center;gap:.25rem; }
.dash-empty { padding:1.25rem;text-align:center;font-size:.75rem;display:flex;align-items:center;justify-content:center;gap:.5rem; }
.dash-notif-list { display:flex;flex-direction:column;gap:.5rem; }
.dash-notif { display:flex;align-items:flex-start;gap:.75rem;padding:.85rem .9rem; }
.dash-notif-icon { height:2rem;width:2rem;border-radius:.65rem;display:grid;place-items:center;flex-shrink:0;background:hsl(var(--card-elevated));color:hsl(var(--foreground-muted)); }
.dash-notif-title { display:block;font-size:.85rem;font-weight:600; }
.dash-notif-body { display:block;font-size:.7rem; }
.dash-notif-dot { height:.5rem;width:.5rem;border-radius:999px;background:hsl(var(--lime));margin-top:.35rem;flex-shrink:0; }
/* home_nav_card() row (renewal / emergency / rewards / recommend / assistant) */
.dash-nav-card { display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem; }
.dash-tile { height:2.5rem;width:2.5rem;border-radius:.85rem;display:grid;place-items:center;flex-shrink:0; }
.dash-fill { min-width:0;flex:1; }
.dash-nav-eyebrow { display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600; }
.dash-nav-title { display:block;font-weight:600;font-size:.9rem; }
.dash-nav-sub { display:block;font-size:.72rem;margin-top:.1rem; }
.dash-nav-arrow { flex-shrink:0; }
/* --- inline->classi: app/apply.php --- */
/* app/apply.php - classi estratte dagli inline style (namespace: aapply-) */
/* -- stato "visa non trovato" -- */
.app-card.aapply-notice-card { text-align: center; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; }
.aapply-icon-center { display: inline-flex; justify-content: center; }
.aapply-notice-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
/* -- wizard shell / stepper header -- */
.aapply-wizard { display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: 7rem; }
.aapply-step-eyebrow { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.aapply-step-title { font-size: 1.5rem; font-weight: 600; margin-top: 0.25rem; }
/* -- contenitore verticale di ogni step -- */
.aapply-section-body { display: flex; flex-direction: column; gap: 1rem; }
/* -- micro-label uppercase riutilizzabile -- */
.aapply-eyebrow { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; }
.aapply-eyebrow-gap { margin-bottom: 0.5rem; }
/* -- step Confirm: visa selezionata + pacchetti -- */
.card-premium.aapply-visa-card { padding: 1.25rem; }
.aapply-visa-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin-top: 0.25rem; }
.aapply-visa-summary { font-size: 0.85rem; margin-top: 0.4rem; }
.aapply-duration { margin-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; }
.aapply-body-sm { font-size: 0.85rem; }
.section-title.aapply-section-title-tight { margin: 0 0 0.6rem; }
.aapply-block { display: block; }
.aapply-pkg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.aapply-min0 { min-width: 0; }
.aapply-pkg-name-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.aapply-w600 { font-weight: 600; }
.pill.aapply-pill-bestfit { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.05em; background: hsl(var(--lime)); color: hsl(var(--lime-foreground)); }
.aapply-note { font-size: 0.68rem; margin-top: 0.2rem; }
.aapply-pkg-price-col { text-align: right; flex-shrink: 0; }
.aapply-pkg-price { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.aapply-micro { font-size: 0.6rem; }
/* -- step Trip -- */
.aapply-field-hint { font-size: 0.68rem; margin-top: 0.3rem; }
/* -- step Documents -- */
.card-premium.aapply-empty-note { padding: 1.25rem; font-size: 0.85rem; }
.aapply-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.aapply-doc-label { font-weight: 500; font-size: 0.85rem; display: flex; align-items: center; gap: 0.4rem; }
.aapply-doc-uploaded { display: none; font-size: 0.68rem; margin-top: 0.3rem; align-items: center; gap: 0.35rem; }
.aapply-doc-up-btn { flex-shrink: 0; cursor: pointer; }
.aapply-hidden { display: none; }
.aapply-docs-footnote { font-size: 0.68rem; line-height: 1.6; margin-top: 0.75rem; }
/* -- step Review -- */
.aapply-review-visa { font-weight: 600; margin-top: 0.25rem; }
.aapply-doc-present-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.aapply-status-gap { margin-top: 0.5rem; }
.aapply-review-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.aapply-capitalize { text-transform: capitalize; }
.aapply-total-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 0.4rem; }
.aapply-strong-sm { font-weight: 600; font-size: 0.85rem; }
.aapply-amount-lg { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.aapply-complex-note { display: none; font-size: 0.68rem; line-height: 1.6; margin-top: 0.5rem; }
.aapply-agree-row { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.78rem; }
.aapply-agree-check { margin-top: 0.15rem; width: auto; }
/* -- step Payment -- */
.aapply-amount-row { display: flex; align-items: baseline; justify-content: space-between; }
.aapply-pay-row { display: flex; align-items: flex-start; gap: 0.75rem; }
.aapply-pay-icon { height: 2.5rem; width: 2.5rem; border-radius: 0.75rem; background: hsl(var(--card-elevated)); border: 1px solid hsl(var(--border)); display: grid; place-items: center; flex-shrink: 0; }
.aapply-min0-grow { min-width: 0; flex: 1; }
.aapply-noshrink { flex-shrink: 0; }
.aapply-secure-note { border-radius: var(--radius); border: 1px solid hsl(var(--border) / 0.6); background: hsl(var(--card-elevated) / 0.4); padding: 0.75rem; font-size: 0.68rem; line-height: 1.6; display: flex; align-items: flex-start; gap: 0.5rem; }
.aapply-shield-icon { flex-shrink: 0; margin-top: 0.1rem; }
/* -- barra azioni fissa -- */
.aapply-actionbar { position: fixed; left: 0; right: 0; bottom: calc(4.75rem + env(safe-area-inset-bottom)); z-index: 35; padding: 0 1.25rem; pointer-events: none; }
.aapply-actionbar-inner { max-width: 42rem; margin: 0 auto; pointer-events: auto; display: flex; gap: 0.6rem; }
.aapply-action-back { min-height: 3rem; flex-shrink: 0; }
.aapply-action-next { min-height: 3rem; flex: 1; }
/* --- inline->classi: app/approved-visa.php --- */
.aapprovedvisa-page { display:flex; flex-direction:column; gap:1.25rem; }
.aapprovedvisa-row { display:flex; align-items:flex-start; gap:0.75rem; }
.aapprovedvisa-icon-badge { height:2.75rem; width:2.75rem; border-radius:0.85rem; background:hsl(var(--lime) / 0.1); display:grid; place-items:center; flex-shrink:0; }
.aapprovedvisa-title { font-family:var(--font-display); font-size:1.5rem; font-weight:600; line-height:1.2; }
.aapprovedvisa-lead { font-size:0.85rem; margin-top:0.25rem; }
.aapprovedvisa-empty { padding:2rem; text-align:center; }
.aapprovedvisa-empty-title { font-weight:600; }
.aapprovedvisa-empty-text { font-size:0.85rem; margin-top:0.4rem; }
.aapprovedvisa-empty-action { margin-top:1.25rem; }
.aapprovedvisa-card-icon { flex-shrink:0; margin-top:0.15rem; display:inline-flex; }
.aapprovedvisa-card-body { flex:1; min-width:0; }
.aapprovedvisa-card-name { font-weight:600; font-size:0.85rem; }
.aapprovedvisa-card-meta { font-size:0.68rem; margin-top:0.15rem; }
.aapprovedvisa-card-actions { margin-top:0.75rem; display:flex; gap:0.5rem; flex-wrap:wrap; }
/* --- inline->classi: app/assistant.php --- */
.aassistant-empty-card { font-size: .85rem; line-height: 1.6; }
.aassistant-lang-note { font-size: .7rem; margin-top: .5rem; opacity: .8; }
/* --- inline->classi: app/business-dashboard.php --- */
/* ============================================================
app/business-dashboard.php - classi component-specific (migrazione inline -> classi)
Namespace: abusinessdashboard-*
NB: .card-premium e' definita anche in style.css (che carica DOPO site.css)
e imposta 'background'; l'override del gradiente hero usa selettore
composto (.card-premium.abusinessdashboard-hero) per vincere la cascata.
Il solo override di 'padding' (che style.css non imposta) usa classe piana.
============================================================ */
/* Contenitore pagina */
.abusinessdashboard-page { display: flex; flex-direction: column; gap: 1.25rem; }
/* Eyebrow header (sopra il titolo) */
.abusinessdashboard-eyebrow { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.2em; }
.abusinessdashboard-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.2; margin-top: 0.15rem; }
/* Hero riepilogo (card-premium con gradiente lime) */
.card-premium.abusinessdashboard-hero { padding: 1.25rem; background: linear-gradient(135deg, hsl(var(--lime) / 0.1), hsl(var(--card))); }
/* Sezioni card-premium standard (solo padding) */
.abusinessdashboard-section { padding: 1.25rem; }
/* Statistiche compatte (bd_stat) */
.abusinessdashboard-stat { border: 1px solid hsl(var(--border)); border-radius: 0.75rem; padding: 0.75rem; background: hsl(var(--card)); }
.abusinessdashboard-stat-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; }
.abusinessdashboard-stat-value { font-size: 0.9rem; font-weight: 600; margin-top: 0.3rem; line-height: 1.25; }
.abusinessdashboard-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
/* Riga status/tipo */
.abusinessdashboard-status { font-size: 0.72rem; margin-top: 0.85rem; }
.abusinessdashboard-strong { font-weight: 600; }
/* Etichette di sezione */
.abusinessdashboard-section-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 1rem; }
.abusinessdashboard-section-label-icon { display: flex; align-items: center; gap: 0.5rem; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 0.75rem; }
.abusinessdashboard-notes-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 0.4rem; }
/* Stepper milestone */
.abusinessdashboard-milestones { display: flex; flex-direction: column; gap: 0.85rem; list-style: none; }
.abusinessdashboard-milestone { display: flex; align-items: flex-start; gap: 0.75rem; }
.abusinessdashboard-milestone-icon { height: 2.25rem; width: 2.25rem; border-radius: 0.85rem; display: grid; place-items: center; flex-shrink: 0; }
.abusinessdashboard-milestone-body { flex: 1; min-width: 0; }
.abusinessdashboard-milestone-label { font-size: 0.9rem; font-weight: 500; }
.abusinessdashboard-milestone-sub { font-size: 0.72rem; }
.abusinessdashboard-milestone-pending { color: hsl(var(--foreground-muted) / 0.5); margin-top: 0.55rem; flex-shrink: 0; }
/* Documenti richiesti */
.abusinessdashboard-doc-list { display: flex; flex-direction: column; gap: 0.6rem; list-style: none; }
.abusinessdashboard-doc-item { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; }
.abusinessdashboard-doc-check { flex-shrink: 0; margin-top: 0.1rem; }
/* Note manager */
.abusinessdashboard-notes-text { font-size: 0.9rem; white-space: pre-wrap; }
/* Azioni in fondo */
.abusinessdashboard-actions { display: flex; flex-direction: column; gap: 0.6rem; }
/* --- inline->classi: app/business.php --- */
/* app/business.php - classi semantiche estratte dagli style inline (namespace abusiness-). */
/* Card statistica compatta (bq_stat) */
.abusiness-stat-card { border:1px solid hsl(var(--border));border-radius:0.75rem;padding:0.75rem;background:hsl(var(--card)); }
.abusiness-stat-label { display:flex;align-items:center;gap:0.4rem;font-size:0.62rem;text-transform:uppercase;letter-spacing:0.06em;color:hsl(var(--foreground-muted)); }
.abusiness-stat-value { font-size:0.9rem;font-weight:600;margin-top:0.3rem;line-height:1.25; }
/* Result screen */
.abusiness-result { display:flex;flex-direction:column;gap:1.25rem; }
.abusiness-result-header { padding:1.25rem;background:linear-gradient(135deg, hsl(var(--lime) / 0.14), hsl(var(--card))); }
.abusiness-result-eyebrow { display:flex;align-items:center;gap:0.4rem;font-size:0.62rem;text-transform:uppercase;letter-spacing:0.2em;font-weight:600; }
.abusiness-result-title { font-family:var(--font-display);font-size:1.5rem;font-weight:600;margin-top:0.5rem; }
.abusiness-stat-grid { display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-top:0.85rem; }
/* Pannelli card-premium della result screen */
.abusiness-panel { padding:1.25rem; }
.abusiness-panel-label { display:flex;align-items:center;gap:0.5rem;font-size:0.62rem;text-transform:uppercase;letter-spacing:0.2em;color:hsl(var(--foreground-muted));margin-bottom:0.75rem; }
.abusiness-doc-list { display:flex;flex-direction:column;gap:0.6rem;list-style:none; }
.abusiness-doc-item { display:flex;align-items:flex-start;gap:0.5rem;font-size:0.9rem; }
.abusiness-doc-icon { flex-shrink:0;margin-top:0.1rem; }
.abusiness-next-label { font-size:0.62rem;text-transform:uppercase;letter-spacing:0.2em;color:hsl(var(--foreground-muted));margin-bottom:0.35rem; }
.abusiness-panel-text { font-size:0.9rem; }
.abusiness-cta-stack { display:flex;flex-direction:column;gap:0.6rem; }
/* Wizard */
.abusiness-counter-row { display:flex;justify-content:flex-end; }
.abusiness-progress-init { width:12.5%; }
.abusiness-form-error { padding:0.85rem 1rem;margin-bottom:1rem;background:hsl(var(--destructive) / 0.08);border-color:hsl(var(--destructive) / 0.3);font-size:0.82rem; }
.abusiness-answers { margin-top:0.85rem; }
.abusiness-contact-fields { margin-top:1rem; }
.abusiness-field-flush { margin-bottom:0; }
.abusiness-btn-flex { flex:1; }
/* --- inline->classi: app/case-courier.php --- */
/* app/case-courier.php - classi semantiche estratte da stili inline (prefix acasecourier-) */
/* timeline dot markers */
.acasecourier-dot-icon { display:inline-flex; }
.acasecourier-dot-current { height:.85rem;width:.85rem;border-radius:999px;background:hsl(var(--lime));box-shadow:0 0 0 4px hsl(var(--lime) / .2); }
.acasecourier-dot-todo { color:hsl(var(--foreground-muted) / .4); }
/* page + hero */
.acasecourier-page { display:flex;flex-direction:column;gap:1.25rem;padding-bottom:1.5rem; }
.acasecourier-hero { padding:1.25rem;display:flex;align-items:flex-start;gap:.75rem; }
.acasecourier-hero-badge { height:2.75rem;width:2.75rem;border-radius:.85rem;background:hsl(var(--lime) / .15);display:grid;place-items:center;flex-shrink:0; }
.acasecourier-hero-title { font-family:var(--font-display);font-size:1.25rem;font-weight:600;line-height:1.2; }
.acasecourier-hero-sub { font-size:.72rem;margin-top:.25rem; }
/* shared bits */
.acasecourier-flex-min { min-width:0; }
.acasecourier-lead-icon { flex-shrink:0;margin-top:.1rem; }
.acasecourier-strong { font-weight:500; }
.acasecourier-subtext { font-size:.72rem;margin-top:.15rem; }
/* reassurance / note cards */
.acasecourier-note-lime { padding:1rem;display:flex;align-items:flex-start;gap:.75rem;border-color:hsl(var(--lime) / .3);background:hsl(var(--lime) / .06); }
.acasecourier-note-text { font-size:.75rem;line-height:1.55; }
/* pickup summary */
.acasecourier-summary { display:flex;flex-direction:column;gap:.5rem; }
.acasecourier-eyebrow { font-size:.6rem;text-transform:uppercase;letter-spacing:.08em; }
.acasecourier-addr-row { display:flex;align-items:flex-start;gap:.5rem;font-size:.85rem; }
.acasecourier-when-row { display:flex;align-items:center;gap:.4rem;font-size:.72rem; }
/* timeline */
.acasecourier-section-title { font-family:var(--font-display);font-size:1rem;font-weight:600;margin:0 0 .75rem; }
.acasecourier-tl-text { font-size:.78rem;line-height:1.35;padding-top:.05rem; }
.acasecourier-tl-note { font-size:.68rem;margin-top:.15rem; }
.acasecourier-tl-time { font-size:.62rem;margin-top:.15rem; }
.acasecourier-empty-note { font-size:.68rem;margin-top:.75rem; }
/* custody actions */
.acasecourier-eyebrow-bold { font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:.75rem; }
.acasecourier-opt-stack { display:grid;grid-template-columns:1fr;gap:.5rem; }
.acasecourier-btn-tap { min-height:2.75rem; }
.acasecourier-btn-report { background:hsl(var(--destructive) / .1);border:1px solid hsl(var(--destructive) / .3); }
.acasecourier-help-note { font-size:.68rem;margin-top:.75rem;line-height:1.5; }
.acasecourier-custody-log { list-style:none;margin:1rem 0 0;padding:.75rem 0 0;border-top:1px solid hsl(var(--border) / .5);display:flex;flex-direction:column;gap:.6rem; }
.acasecourier-custody-item { display:flex;align-items:flex-start;gap:.5rem;font-size:.72rem; }
/* issue alert */
.acasecourier-alert-danger { border-color:hsl(var(--destructive) / .3);background:hsl(var(--destructive) / .05);display:flex;align-items:flex-start;gap:.75rem; }
.acasecourier-alert-body { font-size:.85rem; }
.acasecourier-alert-title { font-weight:600; }
/* request form */
.acasecourier-form { display:flex;flex-direction:column;gap:.85rem; }
.acasecourier-warn-box { padding:1rem;align-items:flex-start;gap:.75rem;border-color:hsl(var(--warning) / .4);background:hsl(var(--warning) / .05); }
.acasecourier-form-row2 { display:grid;grid-template-columns:1fr 1fr;gap:.75rem; }
.acasecourier-consent-box { flex-direction:column;gap:.75rem;border-radius:.85rem;border:1px solid hsl(var(--warning) / .4);background:hsl(var(--warning) / .05);padding:1rem; }
.acasecourier-consent-head { display:flex;align-items:flex-start;gap:.5rem; }
.acasecourier-consent-text { font-size:.78rem;line-height:1.4; }
.acasecourier-confirm-pad { padding:.5rem .25rem 0; }
.acasecourier-err-pad { padding:0 .25rem; }
.acasecourier-fee-note { font-size:.68rem;padding:0 .25rem; }
.acasecourier-btn-submit { min-height:3.25rem; }
/* --- inline->classi: app/case-renew.php --- */
/* app/case-renew.php - classi semantiche estratte da stili inline (prefix acaserenew-) */
/* label/value rows (rn_row + review member row) */
.acaserenew-row { display:flex;align-items:center;justify-content:space-between;gap:0.75rem;font-size:0.8rem; }
.acaserenew-row-val { font-weight:500;text-align:right; }
.acaserenew-label-md { font-weight:500;font-size:0.9rem; }
/* page + overview */
.acaserenew-page { padding-bottom:2rem; }
.acaserenew-overview { display:flex;flex-direction:column;gap:1.25rem; }
/* hero (compound: .card-premium in style.css imposta background) */
.card-premium.acaserenew-hero { padding:1.25rem;background:linear-gradient(135deg, hsl(var(--lime) / 0.12), hsl(var(--card))); }
.acaserenew-hero-row { display:flex;align-items:flex-start;gap:0.85rem; }
.acaserenew-hero-icon { width:2.75rem;height:2.75rem;border-radius:1rem;background:hsl(var(--lime) / 0.15);display:grid;place-items:center;flex-shrink:0; }
.acaserenew-hero-body { min-width:0;flex:1; }
.acaserenew-h1 { font-size:1.25rem;font-weight:600;line-height:1.2; }
.acaserenew-hero-sub { font-size:0.75rem;margin-top:0.25rem; }
.acaserenew-hero-badge { margin-top:0.5rem; }
/* stat grid */
.acaserenew-stat-grid { display:grid;grid-template-columns:1fr 1fr;gap:0.5rem; }
.app-card.acaserenew-stat { padding:0.75rem 0.85rem; }
.acaserenew-stat-k { font-size:0.6rem;text-transform:uppercase;letter-spacing:0.06em; }
.acaserenew-stat-v { font-size:0.85rem;font-weight:600;margin-top:0.2rem; }
/* recommended-action + package summary cards */
.acaserenew-card-col { padding:1rem 1.15rem;display:flex;flex-direction:column;gap:0.5rem; }
.acaserenew-rec-eyebrow { font-size:0.6rem;text-transform:uppercase;letter-spacing:0.08em;font-weight:700; }
.acaserenew-badge-inline { align-self:flex-start;margin-top:0.15rem; }
.acaserenew-pkg-head { display:flex;align-items:center;justify-content:space-between;gap:0.5rem; }
.acaserenew-pkg-name { font-weight:600;font-size:0.9rem; }
.pill.acaserenew-rec-pill { font-size:0.58rem;text-transform:uppercase;letter-spacing:0.05em; }
.acaserenew-save { font-size:0.7rem; }
.acaserenew-join { font-size:0.72rem;display:inline-flex;align-items:center;gap:0.3rem;font-weight:600; }
/* quick actions */
.acaserenew-actions { display:flex;flex-direction:column;gap:0.6rem; }
.acaserenew-btn-tall { min-height:3rem; }
.acaserenew-approw { justify-content:space-between;min-height:3.25rem; }
.acaserenew-approw-plain { justify-content:space-between; }
.acaserenew-approw-btn { width:100%;justify-content:space-between;min-height:3.25rem;background:hsl(var(--card));cursor:pointer;text-align:left; }
.acaserenew-row-label { display:inline-flex;align-items:center;gap:0.5rem;font-weight:500;font-size:0.9rem; }
.acaserenew-icon-primary { color:hsl(var(--primary)); }
.acaserenew-dim { opacity:0.55; }
.acaserenew-nocontact { font-size:0.68rem; }
.acaserenew-form-flush { margin:0; }
/* wizard shell (compound: .section-title in style.css imposta margin) */
.acaserenew-wizard { display:flex;flex-direction:column;gap:1rem; }
.acaserenew-back { align-self:flex-start; }
.section-title.acaserenew-stepcount-flush { margin:0; }
.acaserenew-bar { width:20%; }
/* wizard steps */
.acaserenew-h2 { font-size:1.1rem;font-weight:600;margin-bottom:0.85rem; }
.acaserenew-h2-tight { font-size:1.1rem;font-weight:600;margin-bottom:0.5rem; }
.acaserenew-summary { display:flex;flex-direction:column;gap:0.5rem; }
.acaserenew-btn-mt { margin-top:1rem; }
.acaserenew-note { font-size:0.82rem;margin-bottom:0.85rem; }
.acaserenew-empty { font-size:0.85rem; }
.acaserenew-pkg-body { min-width:0; }
.acaserenew-pkg-title { font-weight:600;font-size:0.9rem;display:flex;align-items:center;gap:0.5rem; }
.pill.acaserenew-pkg-pill { font-size:0.55rem;text-transform:uppercase;letter-spacing:0.05em; }
.acaserenew-pkg-sub { font-size:0.7rem;margin-top:0.2rem; }
.acaserenew-submit-note { font-size:0.7rem;margin-top:0.6rem; }
/* --- inline->classi: app/cases.php --- */
.acases-section-title { margin-top: 0; }
.acases-row-muted { opacity: .8; }
.acases-row-main { min-width: 0; flex: 1; }
.acases-row-title { font-weight: 600; font-size: .9rem; }
.acases-row-sub { font-size: .7rem; margin-top: .15rem; }
.acases-row-aside { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.acases-page { display: flex; flex-direction: column; gap: 1.5rem; }
.acases-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.acases-title { font-size: 1.4rem; }
.acases-new { min-height: 2.25rem; }
.acases-empty-text { font-size: .9rem; }
/* --- inline->classi: app/courier-request.php --- */
.acourierrequest-page { display:flex;flex-direction:column;gap:1.25rem; }
.acourierrequest-header { display:flex;align-items:flex-start;gap:.75rem; }
.acourierrequest-badge { height:2.75rem;width:2.75rem;border-radius:.85rem;background:hsl(var(--lime) / .1);display:grid;place-items:center;flex-shrink:0; }
.acourierrequest-header-text { min-width:0; }
.acourierrequest-title { font-family:var(--font-display);font-size:1.5rem;font-weight:600;line-height:1.2; }
.acourierrequest-subtitle { font-size:.85rem;margin-top:.25rem; }
.empty-state.acourierrequest-empty { text-align:center;padding:2rem 1.5rem; }
.acourierrequest-empty-title { font-weight:600; }
.acourierrequest-empty-text { font-size:.85rem;margin-top:.4rem; }
.acourierrequest-empty-cta { margin-top:1.25rem;display:inline-flex; }
.section-title.acourierrequest-section-flush { margin-top:0; }
.acourierrequest-row { min-height:4rem; }
.acourierrequest-row-body { flex:1;min-width:0; }
.acourierrequest-row-title { font-weight:600;font-size:.9rem; }
.acourierrequest-row-status { font-size:.7rem;margin-top:.15rem;text-transform:uppercase;letter-spacing:.06em; }
.acourierrequest-row-cta { flex-shrink:0;font-size:.75rem;font-weight:600;display:inline-flex;align-items:center;gap:.25rem; }
/* --- inline->classi: app/courier-tracking.php --- */
.acouriertracking-page { display:flex; flex-direction:column; gap:1.25rem; }
.acouriertracking-header { display:flex; align-items:flex-start; gap:.75rem; }
.acouriertracking-icon-badge { height:2.75rem; width:2.75rem; border-radius:.85rem; background:hsl(var(--lime) / .1); display:grid; place-items:center; flex-shrink:0; }
.acouriertracking-header-text { min-width:0; }
.acouriertracking-title { font-family:var(--font-display); font-size:1.5rem; font-weight:600; line-height:1.2; }
.acouriertracking-subtitle { font-size:.85rem; margin-top:.25rem; }
.acouriertracking-empty { text-align:center; padding:2rem 1.5rem; }
.acouriertracking-empty-icon { margin-bottom:.5rem; display:flex; justify-content:center; }
.acouriertracking-empty-title { font-weight:600; }
.acouriertracking-empty-text { font-size:.85rem; margin-top:.4rem; }
.acouriertracking-empty-action { margin-top:1.25rem; display:inline-flex; }
.acouriertracking-row-icon { flex-shrink:0; display:inline-flex; }
.acouriertracking-row-body { flex:1; min-width:0; }
.acouriertracking-row-title { font-weight:600; font-size:.85rem; }
.acouriertracking-row-meta { font-size:.68rem; margin-top:.15rem; }
/* --- inline->classi: app/documents.php --- */
/* app/documents.php - semantic classes extracted from inline styles (zero visual change). */
/* intro / empty state */
.adocuments-intro { font-size:.82rem;margin-bottom:1.1rem; }
.adocuments-empty-title { font-weight:600; }
.adocuments-empty-text { margin-top:.4rem;font-size:.82rem; }
.adocuments-empty-action { margin-top:1rem; }
/* case selector */
.adocuments-case-field { display:block;margin-bottom:0; }
.adocuments-case-label { display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem; }
/* summary stat tiles */
.adocuments-stat-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.9rem;text-align:center; }
.adocuments-stat-tile { background:hsl(var(--card-elevated));border:1px solid hsl(var(--border));border-radius:.7rem;padding:.55rem .35rem; }
.adocuments-stat-label { font-size:.58rem;text-transform:uppercase;letter-spacing:.05em; }
.adocuments-stat-value { font-weight:600;margin-top:.15rem; }
/* requirements note */
.adocuments-note { font-size:.82rem; }
/* requirement / document card */
.adocuments-doc-card { margin-bottom:.7rem; }
.adocuments-doc-head { display:flex;align-items:flex-start;justify-content:space-between;gap:.85rem; }
.adocuments-info { min-width:0; }
.adocuments-doc-title { font-weight:600;font-size:.88rem;display:flex;align-items:center;gap:.35rem; }
.adocuments-req-mark { font-weight:700; }
.adocuments-doc-file { margin-top:.35rem;display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;max-width:220px; }
.adocuments-doc-status { margin-top:.45rem; }
.adocuments-doc-meta { margin-top:.35rem;font-size:.68rem; }
.adocuments-hint { margin-top:.35rem;font-size:.74rem; }
.adocuments-upload-btn { cursor:pointer;white-space:nowrap;align-self:flex-start; }
.adocuments-reupload-alert { margin-top:.6rem;border-radius:.6rem;background:hsl(var(--destructive)/.1);border:1px solid hsl(var(--destructive)/.3);padding:.5rem .65rem;font-size:.72rem; }
.adocuments-doc-actions { margin-top:.6rem;display:flex;gap:.5rem;flex-wrap:wrap; }
.adocuments-inline-form { display:inline; }
/* additional uploads */
.adocuments-other-head { display:flex;align-items:center;justify-content:space-between;gap:.85rem; }
.adocuments-other-title { font-weight:600;font-size:.88rem; }
.adocuments-file-row { margin-top:.6rem; }
.adocuments-file-icon { display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:.7rem;background:hsl(var(--card-elevated));flex-shrink:0; }
.adocuments-file-main { flex:1;min-width:0; }
.adocuments-file-name { font-size:.85rem; }
.adocuments-file-date { font-size:.68rem; }
/* preview modal */
.adocuments-preview-name { font-size:.82rem; }
/* Delete buttons: compound selector so the destructive colour beats .btn-ghost
(style.css .btn-ghost sets color:hsl(var(--foreground)) and loads after site.css's
.tx-danger, so a plain utility class would lose the equal-specificity cascade;
the original inline style won on specificity 1,0,0,0). */
.btn-ghost.adocuments-del-btn { color:hsl(var(--destructive)); }
/* --- inline->classi: app/emergency.php --- */
/* --- migrazione inline->classi: app/emergency.php --- */
/* ============================================================
app/emergency.php - classi component-specific (migrazione inline -> classi)
Namespace: aemergency-*
Colori delegati al vocabolario condiviso (muted, tx-lime, tx-success,
tx-danger). L'header di allerta e' una .card-premium che sovrascrive
border-color: usa selettore composto (.card-premium.aemergency-alert-header)
per vincere anche su .card-premium:hover (stessa specificita', appeso dopo).
============================================================ */
/* Badge di rischio (server-rendered + preview live JS): parte statica dello span */
.aemergency-risk-badge { display:inline-flex; align-items:center; gap:0.4rem; border-radius:999px; padding:0.25rem 0.7rem; font-size:0.7rem; font-weight:500; border:1px solid; }
/* Etichetta gruppo campo bool (Yes/No) */
.aemergency-field-label { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.4rem; }
.aemergency-seg-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
/* Flusso verticale di pagina (conferma / form) */
.aemergency-flow { display:flex; flex-direction:column; gap:1.25rem; }
/* Conferma richiesta inviata */
.aemergency-done-card { padding:1.25rem; display:flex; flex-direction:column; gap:0.75rem; }
.aemergency-done-icon { height:2.75rem; width:2.75rem; border-radius:0.85rem; background:hsl(var(--success) / 0.15); display:grid; place-items:center; }
.aemergency-done-title { font-family:var(--font-display); font-size:1.25rem; font-weight:600; }
.aemergency-body { font-size:0.85rem; }
.aemergency-expert-link { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.85rem; font-weight:600; }
/* Header di allerta (card-premium: composto per vincere su :hover) */
.card-premium.aemergency-alert-header { padding:1.25rem; background:hsl(var(--destructive) / 0.06); border-color:hsl(var(--destructive) / 0.25); display:flex; align-items:flex-start; gap:0.75rem; }
.aemergency-alert-icon { height:2.75rem; width:2.75rem; border-radius:0.85rem; background:hsl(var(--destructive) / 0.15); display:grid; place-items:center; flex-shrink:0; }
.aemergency-alert-title { font-family:var(--font-display); font-size:1.25rem; font-weight:600; line-height:1.2; }
.aemergency-alert-sub { font-size:0.72rem; margin-top:0.25rem; }
/* Gruppo campi del form */
.aemergency-fields { display:flex; flex-direction:column; gap:1rem; }
/* Card upload documento */
.aemergency-upload-card { padding:1rem; display:flex; align-items:center; justify-content:space-between; gap:0.75rem; cursor:pointer; }
.aemergency-min0 { min-width:0; }
.aemergency-upload-label { font-size:0.85rem; font-weight:500; display:inline-flex; align-items:center; gap:0.5rem; }
.aemergency-icon-inline { display:inline-flex; }
.aemergency-hint { font-size:0.68rem; margin-top:0.15rem; }
.aemergency-hidden { display:none; }
/* Azioni submit */
.aemergency-actions { display:flex; flex-direction:column; gap:0.65rem; }
.aemergency-btn-danger { background:hsl(var(--destructive)); color:#fff; }
.aemergency-btn-tall { min-height:3.25rem; }
.aemergency-legal { font-size:0.68rem; text-align:center; }
/* --- inline->classi: app/family-add.php --- */
.afamilyadd-form { display:flex;flex-direction:column;gap:1.25rem; }
.card-premium.afamilyadd-header { padding:1.25rem;display:flex;align-items:flex-start;gap:.75rem; }
.afamilyadd-icon-badge { height:2.75rem;width:2.75rem;border-radius:.85rem;background:hsl(var(--lime) / .15);display:grid;place-items:center;flex-shrink:0; }
.afamilyadd-header-text { min-width:0; }
.afamilyadd-title { font-family:var(--font-display);font-size:1.25rem;font-weight:600;line-height:1.2; }
.afamilyadd-subtitle { font-size:.72rem;margin-top:.25rem; }
.afamilyadd-seg-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem; }
.afamilyadd-grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:.75rem; }
.card-premium.afamilyadd-upload { padding:1rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;cursor:pointer; }
.afamilyadd-upload-label { font-size:.85rem;font-weight:500;display:inline-flex;align-items:center;gap:.5rem; }
.afamilyadd-submit { min-height:3.25rem; }
/* --- inline->classi: app/help.php --- */
/* ============================================================
app/help.php - classi component-specific (migrazione inline -> classi)
Namespace: ahelp-*
NB: .section-title e' definita in site.css e style.css (che carica DOPO)
e imposta 'margin'; l'override margin:0 usa selettore composto
(.section-title.ahelp-section-flush) per vincere la cascata.
Gli override di 'padding' su .card-premium (che style.css non imposta)
usano classi piane. Colore testo attenuato -> classe esistente .muted.
============================================================ */
/* Contenitore pagina */
.ahelp-page { display:flex;flex-direction:column;gap:1.5rem; }
/* Header */
.ahelp-title { font-family:var(--font-display);font-size:1.5rem;font-weight:600;line-height:1.2; }
.ahelp-subtitle { font-size:0.85rem;margin-top:0.25rem; }
/* Gruppo (sezione di edge-case) */
.ahelp-group { display:flex;flex-direction:column;gap:0.75rem; }
.section-title.ahelp-section-flush { margin:0; }
/* Card edge-case */
.ahelp-card { padding:1rem; }
.ahelp-item { display:flex;align-items:flex-start;gap:0.75rem; }
.ahelp-icon-badge { height:2.25rem;width:2.25rem;border-radius:0.85rem;background:hsl(var(--card-elevated));display:grid;place-items:center;flex-shrink:0; }
.ahelp-item-body { min-width:0;flex:1; }
.ahelp-item-title { font-weight:600;font-size:0.85rem; }
.ahelp-item-text { font-size:0.75rem;margin-top:0.15rem; }
/* Chip di azione (tono via style inline dinamico) */
.ahelp-chips { margin-top:0.75rem;display:flex;flex-wrap:wrap;gap:0.5rem; }
.ahelp-chip { display:inline-flex;align-items:center;gap:0.4rem;border-radius:999px;padding:0.4rem 0.75rem;font-size:0.72rem;font-weight:600; }
/* CTA finale ("Still stuck?") */
.ahelp-cta { padding:1.25rem;text-align:center; }
.ahelp-cta-text { font-size:0.75rem;margin-top:0.25rem; }
.ahelp-cta-btn { margin-top:0.85rem; }
/* --- inline->classi: app/notifications.php --- */
/* app/notifications.php - inline -> semantic classes */
.anotifications-unread-bar { display:flex;align-items:center;justify-content:space-between;gap:0.75rem;margin-bottom:1rem; }
.anotifications-count { font-size:0.72rem; }
.anotifications-section-head { display:flex;align-items:center;justify-content:space-between; }
.anotifications-empty-group { text-align:center;font-size:0.8rem;padding:1rem; }
.anotifications-item-btn { display:flex;align-items:flex-start;gap:0.75rem;width:100%;text-align:left;background:transparent;border:0;padding:0;font:inherit;color:inherit;cursor:pointer; }
.anotifications-icon-tile { height:2.25rem;width:2.25rem;border-radius:0.85rem;display:grid;place-items:center;flex-shrink:0; }
.anotifications-item-body { min-width:0;flex:1; }
.anotifications-title-row { display:flex;align-items:center;gap:0.4rem; }
.anotifications-title { font-weight:600;font-size:0.9rem; }
.anotifications-unread-dot { height:0.5rem;width:0.5rem;border-radius:999px;background:hsl(var(--lime));flex-shrink:0; }
.anotifications-item-text { display:block;font-size:0.78rem;margin-top:0.15rem; }
.anotifications-meta { display:flex;flex-wrap:wrap;align-items:center;gap:0.4rem;font-size:0.68rem;margin-top:0.4rem; }
.anotifications-channel-pill { padding:0.05rem 0.5rem;font-size:0.62rem;background:hsl(var(--card-elevated));color:hsl(var(--foreground-muted)); }
.anotifications-status-badge { padding:0.05rem 0.5rem;font-size:0.62rem; }
.anotifications-item-arrow { flex-shrink:0;margin-top:0.15rem; }
.anotifications-tracker-actions { margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid hsl(var(--border));display:grid;grid-template-columns:1fr 1fr;gap:0.4rem; }
/* --- inline->classi: app/payment-failed.php --- */
/* --- migrazione inline->classi: app/payment-failed.php --- */
/* ============================================================
app/payment-failed.php - classi component-specific (migrazione inline -> classi)
Namespace: apaymentfailed-*
Colore icona delegato al vocabolario condiviso (tx-danger).
============================================================ */
/* Card centrale dell'esito pagamento (su .card-premium) */
.apaymentfailed-card { padding:1.5rem; text-align:center; }
/* Cerchio icona di errore */
.apaymentfailed-icon { height:3.5rem; width:3.5rem; border-radius:0.85rem; background:hsl(var(--destructive) / 0.1); display:grid; place-items:center; margin:0 auto 1rem; }
/* Titolo */
.apaymentfailed-title { font-family:var(--font-display); font-size:1.5rem; font-weight:600; }
/* Testo esplicativo (motivo) */
.apaymentfailed-lead { font-size:0.85rem; margin-top:0.5rem; }
/* Contenitore azioni (bottoni) */
.apaymentfailed-actions { margin-top:1.5rem; display:grid; gap:0.65rem; }
/* --- inline->classi: app/profile.php --- */
/* app/profile.php - semantic classes extracted from inline styles (zero visual change). */
/* avatar header */
.aprofile-avatar-row { display:flex;align-items:center;gap:1rem; }
.aprofile-avatar-btn { position:relative;width:4rem;height:4rem;border-radius:999px;background:hsl(var(--card-elevated));border:1px solid hsl(var(--border));overflow:hidden;flex-shrink:0;display:grid;place-items:center; }
.aprofile-avatar-img { width:100%;height:100%;object-fit:cover; }
.aprofile-avatar-spinner { position:absolute;inset:0;display:grid;place-items:center;background:hsl(0 0% 0% / .45);color:#fff;opacity:0;transition:opacity .15s; }
.aprofile-fill-col { min-width:0;flex:1; }
.aprofile-email { font-weight:600;overflow-wrap:anywhere; }
.aprofile-photo-hint { font-size:.72rem;margin-top:.15rem; }
/* completion meter */
.aprofile-meter { margin-top:1rem; }
.aprofile-meter-head { display:flex;align-items:center;justify-content:space-between;font-size:.72rem;margin-bottom:.4rem; }
.aprofile-meter-label { font-weight:600; }
.aprofile-meter-done { display:inline-flex;align-items:center;gap:.3rem; }
/* form sections */
.aprofile-section-title { margin-bottom:.15rem; }
.aprofile-section-sub { font-size:.72rem;margin-bottom:.55rem; }
.aprofile-field-last { margin-bottom:0; }
.aprofile-input-disabled { opacity:.65;cursor:not-allowed; }
.aprofile-action-gap { margin-top:1.25rem; }
/* account rows */
.aprofile-row-icon { display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:.7rem;background:hsl(var(--card-elevated));flex-shrink:0; }
.aprofile-row-title { font-weight:600;font-size:.9rem; }
.aprofile-row-desc { font-size:.72rem; }
/* --- inline->classi: app/recommend.php --- */
.arecommend-intro-pill { margin-bottom: .75rem; }
.arecommend-intro-lead { font-size: .85rem; margin-bottom: 1.1rem; line-height: 1.55; }
.arecommend-empty-title { font-weight: 600; }
.arecommend-empty-desc { margin-top: .4rem; font-size: .82rem; }
.arecommend-empty-action { margin-top: 1rem; }
.arecommend-field-last { margin-bottom: 0; }
.arecommend-notes-input { min-height: 88px; }
.arecommend-submit { margin-top: 1.1rem; }
.arecommend-fineprint { font-size: .68rem; text-align: center; margin-top: .7rem; line-height: 1.5; }
.arecommend-form-error { display: none; margin-top: .7rem; font-size: .78rem; text-align: center; }
/* --- inline->classi: app/renewal-package.php --- */
.arenewalpackage-page { display:flex;flex-direction:column;gap:1.25rem }
.arenewalpackage-title { font-size:1.5rem;line-height:1.2;font-weight:600 }
.arenewalpackage-note { font-size:0.85rem;margin-top:0.35rem }
.arenewalpackage-empty { text-align:center;padding:2rem 1.25rem }
.arenewalpackage-empty-title { font-weight:600 }
.arenewalpackage-empty-action { margin-top:1.25rem }
.arenewalpackage-row-main { flex:1;min-width:0 }
.arenewalpackage-row-head { display:flex;align-items:center;gap:0.5rem }
.arenewalpackage-row-name { font-weight:600;font-size:0.9rem }
.arenewalpackage-badge { display:inline-flex;align-items:center;gap:0.2rem;flex-shrink:0;font-size:0.6rem;text-transform:uppercase;letter-spacing:0.06em;font-weight:700 }
.arenewalpackage-row-meta { font-size:0.7rem;margin-top:0.15rem }
.arenewalpackage-price { flex-shrink:0;font-family:var(--font-display);font-size:1.15rem;font-weight:600 }
/* --- inline->classi: app/renewal.php --- */
/* /app/renewal.php - renewal case-selector hub */
.arenewal-page { display:flex;flex-direction:column;gap:1.25rem; }
.arenewal-header { display:flex;align-items:flex-start;gap:0.85rem; }
.arenewal-icon-badge { width:2.75rem;height:2.75rem;border-radius:1rem;background:hsl(var(--lime) / 0.10);display:grid;place-items:center;flex-shrink:0; }
.arenewal-header-text { min-width:0; }
.arenewal-title { font-size:1.5rem;line-height:1.15;font-weight:600; }
.arenewal-subtitle { font-size:0.85rem;margin-top:0.25rem; }
.arenewal-empty { text-align:center;padding:2rem 1.25rem; }
.arenewal-empty-title { font-weight:600; }
.arenewal-empty-text { font-size:0.85rem;margin-top:0.35rem; }
.arenewal-empty-cta { margin-top:1.25rem; }
.arenewal-section-flush { margin-top:0; }
.arenewal-row-fill { flex:1;min-width:0; }
.arenewal-row-title { font-weight:600;font-size:0.9rem; }
.arenewal-row-status { font-size:0.68rem;letter-spacing:0.05em;text-transform:uppercase;margin-top:0.15rem; }
.arenewal-row-cta { display:inline-flex;align-items:center;gap:0.25rem;flex-shrink:0;font-weight:600;font-size:0.78rem; }
/* --- inline->classi: app/reupload-required.php --- */
.areuploadrequired-page { display:flex; flex-direction:column; gap:1.25rem; }
.areuploadrequired-header { display:flex; align-items:flex-start; gap:0.75rem; }
.areuploadrequired-alert-icon { height:2.75rem; width:2.75rem; border-radius:0.85rem; background:hsl(var(--destructive) / 0.1); display:grid; place-items:center; flex-shrink:0; }
.areuploadrequired-title { font-family:var(--font-display); font-size:1.5rem; font-weight:600; line-height:1.2; }
.areuploadrequired-subtitle { font-size:0.85rem; margin-top:0.25rem; }
.areuploadrequired-empty-card { padding:2rem; text-align:center; }
.areuploadrequired-empty-icon { display:flex; justify-content:center; margin-bottom:0.5rem; }
.areuploadrequired-empty-title { font-weight:600; }
.areuploadrequired-empty-note { font-size:0.85rem; margin-top:0.4rem; }
.areuploadrequired-doc-card { display:flex; flex-direction:column; gap:0.75rem; }
.areuploadrequired-doc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:0.75rem; }
.areuploadrequired-doc-info { min-width:0; }
.areuploadrequired-doc-name { font-weight:600; font-size:0.85rem; text-transform:capitalize; }
.areuploadrequired-doc-file { font-size:0.68rem; margin-top:0.15rem; }
.areuploadrequired-doc-badge { flex-shrink:0; }
.areuploadrequired-doc-actions { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; }
.areuploadrequired-upload-btn { cursor:pointer; }
.areuploadrequired-file-input { display:none; }
.areuploadrequired-case-link { font-size:0.75rem; }
/* --- inline->classi: app/rewards.php --- */
.arewards-page { display: flex; flex-direction: column; gap: 1.25rem; }
.arewards-title { font-size: 1.4rem; margin-top: .15rem; }
.arewards-link-eyebrow { display: flex; align-items: center; gap: .4rem; margin-bottom: .75rem; }
.arewards-link-box { display: flex; align-items: center; gap: .5rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: .75rem; padding: .5rem .6rem; }
.arewards-link-input { flex: 1; min-width: 0; background: transparent; border: 0; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .72rem; color: inherit; padding: 0; }
.arewards-copy-btn { flex-shrink: 0; padding: .45rem .7rem; font-size: .75rem; }
.arewards-code-row { margin-top: .85rem; display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.arewards-min0 { min-width: 0; }
.arewards-code { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 1.05rem; font-weight: 600; letter-spacing: .15em; }
.arewards-noshrink { flex-shrink: 0; }
.arewards-stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }
.arewards-stat-card { padding: .75rem .85rem; }
.arewards-stat-val { font-weight: 600; font-size: .9rem; margin-top: .3rem; line-height: 1.2; }
.arewards-bonus-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.arewards-bonus-count { font-weight: 600; font-size: .9rem; margin-top: .35rem; }
.arewards-bonus-sub { font-size: .75rem; margin-top: .15rem; }
.arewards-bonus-icon { height: 3rem; width: 3rem; border-radius: 1rem; background: hsl(var(--lime)/0.15); display: grid; place-items: center; flex-shrink: 0; }
.arewards-progress-mt { margin-top: .85rem; }
.arewards-how-eyebrow { margin-bottom: .6rem; }
.arewards-rw-label { font-size: .85rem; flex: 1; min-width: 0; }
.arewards-rw-amount { font-size: .78rem; font-weight: 600; text-align: right; flex-shrink: 0; }
.arewards-friends-eyebrow { display: flex; align-items: center; gap: .4rem; }
.arewards-total { font-size: .72rem; }
.arewards-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.arewards-empty { font-size: .85rem; margin: 0; }
.arewards-item-title { font-weight: 500; font-size: .85rem; }
.arewards-item-sub { font-size: .7rem; margin-top: .1rem; }
.arewards-history-eyebrow { display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.arewards-credit-amount { font-weight: 600; font-size: .85rem; flex-shrink: 0; }
.arewards-disclaimer { font-size: .7rem; text-align: center; line-height: 1.6; margin: 0; }
/* --- inline->classi: app/service.php --- */
/* app/service.php - classi estratte dagli inline style (namespace: aservice-) */
/* -- stato "servizio non trovato" -- */
.app-card.aservice-notfound-card { text-align: center; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; }
.aservice-icon-center { display: inline-flex; justify-content: center; }
.aservice-notfound-title { font-weight: 600; }
.aservice-notfound-sub { font-size: 0.85rem; margin-top: 0.25rem; }
.aservice-notice-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
/* -- colonna pagina + header -- */
.aservice-page { display: flex; flex-direction: column; gap: 1.75rem; padding-bottom: 9rem; }
.aservice-title { font-size: 1.75rem; line-height: 1.2; font-weight: 600; }
.aservice-summary { margin-top: 0.5rem; }
.aservice-meta { margin-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; }
.aservice-desc { font-size: 0.9rem; line-height: 1.7; color: hsl(var(--foreground) / 0.85); }
/* -- sezioni (pacchetti / documenti) -- */
.aservice-section-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-bottom: 0.85rem; }
.aservice-note-card { font-size: 0.85rem; }
/* .pill: definita in style.css (carica DOPO site.css) -> selettore composto per vincere la cascata */
.pill.aservice-link-plain { background: none; padding: 0; color: hsl(var(--lime)); }
/* -- card pacchetto -- */
.aservice-pkg-card { cursor: pointer; display: block; }
.aservice-pkg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.aservice-pkg-main { min-width: 0; }
.aservice-pkg-name-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.aservice-pkg-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
/* .pill: composto per l'override di background/color/font-size (style.css carica dopo) */
.pill.aservice-badge { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; background: hsl(var(--lime)); color: hsl(var(--lime-foreground)); }
.aservice-pkg-days { font-size: 0.72rem; margin-top: 0.25rem; }
.aservice-pkg-price-col { text-align: right; flex-shrink: 0; }
.aservice-pkg-price { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; }
.aservice-pkg-idr { font-size: 0.62rem; }
.aservice-feat-list { list-style: none; padding: 0; margin: 0.85rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.aservice-feat-icon { flex-shrink: 0; margin-top: 0.05rem; }
/* -- requisiti documenti -- */
.aservice-req-label { font-weight: 500; font-size: 0.9rem; }
.aservice-req-desc { font-size: 0.78rem; margin-top: 0.2rem; }
/* -- barra CTA fissa -- */
.aservice-cta-bar { position: fixed; left: 0; right: 0; bottom: calc(4.75rem + env(safe-area-inset-bottom)); z-index: 35; padding: 0 1.25rem; pointer-events: none; }
.aservice-cta-inner { max-width: 42rem; margin: 0 auto; pointer-events: auto; }
.aservice-cta-btn { min-height: 3rem; }
/* --- inline->classi: app/settings-language.php --- */
.asettingslanguage-lang-btn { width:100%; min-height:3.6rem; cursor:pointer; text-align:left; }
.asettingslanguage-lang-text { flex:1; display:flex; flex-direction:column; gap:0.2rem; }
.asettingslanguage-lang-name { font-weight:600; font-size:0.95rem; }
.asettingslanguage-lang-code { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.15em; }
.asettingslanguage-check { display:inline-flex; }
/* --- inline->classi: app/settings-notifications.php --- */
.asettingsnotifications-master-title { margin: 0 0 0.75rem; }
.asettingsnotifications-master-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }
.asettingsnotifications-master-option { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; cursor: pointer; background: hsl(var(--card-elevated)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 0.6rem 0.7rem; }
.asettingsnotifications-note { font-size: 0.72rem; margin-top: 0.6rem; }
.asettingsnotifications-type-label { font-weight: 600; font-size: 0.9rem; }
.asettingsnotifications-type-help { font-size: 0.76rem; margin-top: 0.15rem; }
.asettingsnotifications-channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem; }
.asettingsnotifications-channel-option { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; cursor: pointer; background: hsl(var(--card-elevated)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 0.55rem 0.65rem; }
.asettingsnotifications-channel-icon { display: inline-flex; }
.asettingsnotifications-submit { margin-top: 0.25rem; }
/* --- inline->classi: app/settings.php --- */
/* ============================================================
app/settings.php - classi component-specific (inline -> classi)
Namespace: asettings-*
NB: color:hsl(var(--destructive)) -> classe esistente .tx-danger.
============================================================ */
/* Righe della lista impostazioni + bottone logout (stessa min-height app-row) */
.asettings-row { min-height:3.4rem; }
/* Span-contenitore icona (inline-flex): icona leading, chevron, icona logout */
.asettings-icon { display:inline-flex; }
/* Etichetta della riga (occupa lo spazio, semibold) */
.asettings-label { flex:1;font-weight:600;font-size:0.9rem; }
/* Variante etichetta allineata a sinistra (bottone logout) */
.asettings-label-left { text-align:left; }
/* Form del bottone di logout */
.asettings-signout-form { margin-top:1rem; }
/* Bottone di logout (full width, cursore; min-height via .asettings-row, colore via .tx-danger) */
.asettings-signout { width:100%;cursor:pointer; }
/* --- inline->classi: app/support.php --- */
.asupport-page { display:flex;flex-direction:column;gap:1.25rem; }
.asupport-title { font-family:var(--font-display);font-size:1.5rem;font-weight:600; }
.asupport-lead { font-size:0.85rem;margin-top:0.25rem; }
.asupport-channels { display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:0.75rem; }
.card-premium.asupport-channel { display:flex;align-items:center;gap:0.75rem;padding:1rem;min-height:4.5rem; }
.asupport-channel-icon { height:2.5rem;width:2.5rem;border-radius:0.75rem;background:hsl(var(--lime) / 0.1);display:grid;place-items:center;flex-shrink:0; }
.asupport-channel-text { min-width:0; }
.asupport-channel-label { display:block;font-weight:600;font-size:0.85rem; }
.asupport-channel-desc { display:block;font-size:0.68rem; }
.card-premium.asupport-faq-card { padding:1.25rem; }
.asupport-faq-head { display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem; }
.asupport-faq-icon { display:inline-flex; }
.asupport-faq-label { font-weight:600; }
.asupport-faq-text { font-size:0.85rem; }
/* --- inline->classi: app/tracker-new.php --- */
/* ============================================================
app/tracker-new.php - classi component-specific (migrazione inline -> classi)
Namespace: atrackernew-*
Schermata di successo dopo la creazione del visto (4 CTA).
Colori testo/troncamento riusano il vocabolario condiviso
(tx-lime-h, muted, truncate) - qui solo layout/spaziatura.
============================================================ */
.atrackernew-success { display: flex; flex-direction: column; gap: 1.25rem; }
.atrackernew-confirm-card { border: 1px solid hsl(var(--lime) / 0.3); background: hsl(var(--lime) / 0.05); border-radius: var(--radius); padding: 1.5rem; text-align: center; }
.atrackernew-confirm-icon { height: 3.25rem; width: 3.25rem; margin: 0 auto; border-radius: 1rem; background: hsl(var(--lime) / 0.15); display: grid; place-items: center; }
.atrackernew-confirm-title { font-size: 1.35rem; font-weight: 600; margin-top: 1rem; }
.atrackernew-confirm-lead { font-size: 0.85rem; margin-top: 0.5rem; line-height: 1.5; max-width: 24rem; margin-left: auto; margin-right: auto; }
.atrackernew-actions { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
.atrackernew-cta-primary { width: 100%; display: flex; align-items: center; gap: 0.75rem; text-align: left; border: 1px solid hsl(var(--lime) / 0.4); background: hsl(var(--lime) / 0.1); border-radius: var(--radius); padding: 0.9rem 1rem; cursor: pointer; min-height: 3rem; }
.atrackernew-cta { width: 100%; display: flex; align-items: center; gap: 0.75rem; text-align: left; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: var(--radius); padding: 0.9rem 1rem; cursor: pointer; min-height: 3rem; }
.atrackernew-cta-link { display: flex; align-items: center; gap: 0.75rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: var(--radius); padding: 0.9rem 1rem; min-height: 3rem; }
.atrackernew-cta-link-dashed { display: flex; align-items: center; gap: 0.75rem; border: 1px dashed hsl(var(--border)); background: hsl(var(--card)); border-radius: var(--radius); padding: 0.9rem 1rem; min-height: 3rem; }
.atrackernew-cta-icon { flex-shrink: 0; }
.atrackernew-cta-icon-fg { color: hsl(var(--foreground) / 0.7); }
.atrackernew-cta-label { font-weight: 600; font-size: 0.88rem; }
.atrackernew-cta-textcol { min-width: 0; }
.atrackernew-cta-line-title { display: block; font-weight: 600; font-size: 0.88rem; }
.atrackernew-cta-line-sub { display: block; font-size: 0.68rem; margin-top: 0.1rem; }
.atrackernew-cta-hint { font-weight: 400; }
.atrackernew-skip { display: block; text-align: center; font-size: 0.82rem; margin-top: 0.25rem; }
/* --- inline->classi: app/tracker-view.php --- */
/* --- migrazione inline->classi: app/tracker-view.php --- */
/* ============================================================
app/tracker-view.php - classi component-specific (migrazione inline -> classi)
Namespace: atrackerview-*
NB: .app-card e' definita in style.css (che carica DOPO site.css), quindi gli
override di proprieta' di .app-card (padding/background/border) usano selettore
composto (.app-card.atrackerview-*) per vincere la cascata a parita' di sorgente.
============================================================ */
/* Contenitore pagina */
.atrackerview-col { display:flex;flex-direction:column;gap:1.25rem; }
/* Hero stato */
.app-card.atrackerview-hero { padding:1.25rem; }
.atrackerview-hero-head { display:flex;align-items:flex-start;justify-content:space-between;gap:1rem; }
.atrackerview-minw0 { min-width:0; }
.atrackerview-badge { display:inline-flex;align-items:center;border-radius:999px;padding:0.15rem 0.6rem;font-size:0.6rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em; }
.atrackerview-title { font-size:1.35rem;font-weight:600;margin-top:0.6rem;overflow-wrap:anywhere; }
.atrackerview-subtitle { font-size:0.72rem;margin-top:0.25rem; }
.atrackerview-days-col { text-align:right;flex-shrink:0; }
.atrackerview-days-label { font-size:0.6rem;text-transform:uppercase;letter-spacing:0.05em; }
.atrackerview-days-num { font-size:1.9rem;font-weight:600;line-height:1;margin-top:0.35rem; }
.atrackerview-days-date { font-size:0.68rem;margin-top:0.35rem; }
/* Barra di avanzamento */
.atrackerview-progress { margin-top:1.25rem; }
.atrackerview-progress-track { height:0.5rem;border-radius:999px;background:hsl(var(--card-elevated));overflow:hidden; }
.atrackerview-progress-bar { height:100%;border-radius:999px; }
.atrackerview-progress-help { font-size:0.72rem;margin-top:0.5rem; }
/* Prossimo passo */
.app-card.atrackerview-nextstep { background:hsl(var(--card-elevated));display:flex;align-items:flex-start;gap:0.75rem; }
.atrackerview-nextstep-icon { flex-shrink:0;margin-top:0.1rem; }
.atrackerview-nextstep-body { font-size:0.85rem;margin-top:0.25rem;line-height:1.5; }
/* Etichetta overline riusata (next step / fatti / label form) */
.atrackerview-overline { font-size:0.6rem;text-transform:uppercase;letter-spacing:0.05em;font-weight:600; }
/* Fatti rapidi */
.atrackerview-facts-grid { display:grid;grid-template-columns:1fr 1fr;gap:0.6rem; }
.app-card.atrackerview-fact { padding:0.85rem; }
.atrackerview-fact-head { display:flex;align-items:center;gap:0.4rem; }
.atrackerview-fact-val { font-size:0.85rem;font-weight:500;margin-top:0.4rem; }
/* Azioni */
.atrackerview-actions-grid { display:grid;grid-template-columns:1fr;gap:0.6rem; }
.app-card.atrackerview-action { display:flex;align-items:center;gap:0.65rem;padding:0.9rem 1rem; }
.atrackerview-action-btn { width:100%;text-align:left;cursor:pointer; }
.app-card.atrackerview-action-dashed { border-style:dashed; }
.app-card.atrackerview-action-plus { border-color:hsl(var(--lime) / 0.3);background:hsl(var(--lime) / 0.05); }
.atrackerview-action-title { font-size:0.85rem;font-weight:600; }
.atrackerview-action-sub { font-size:0.68rem; }
.atrackerview-icon-primary { color:hsl(var(--primary)); }
/* Form "gia' rinnovato" */
.app-card.atrackerview-form { padding:1rem; }
.atrackerview-form-row { display:flex;gap:0.5rem;margin-top:0.5rem; }
.atrackerview-input-grow { flex:1; }
.atrackerview-form-hint { font-size:0.68rem;margin-top:0.5rem; }
/* --- inline->classi: app/tracker.php --- */
/* ============================================================
/app/tracker.php - classi semantiche estratte dagli stili inline.
Zero cambiamento visivo: stessi valori CSS degli inline sostituiti.
NB: .btn* e .app-card sono definite in style.css (che carica DOPO
site.css). Dove un inline sovrascriveva una proprieta' gia' settata
da quelle classi, uso un selettore COMPOSTO (.btn.atracker-* /
.app-card.atracker-*) per vincere la cascata a prescindere
dall'ordine di caricamento, come i precedenti .btn-ghost.fam-del-btn
e .app-card.case-*.
============================================================ */
/* --- layout pagina --- */
.atracker-page { display: flex; flex-direction: column; gap: 1.5rem; }
.atracker-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.atracker-textcol { min-width: 0; }
.atracker-noshrink { flex-shrink: 0; }
/* --- intestazione --- */
.atracker-eyebrow { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.atracker-title { font-size: 1.4rem; font-weight: 600; margin-top: 0.35rem; }
.atracker-lead { font-size: 0.82rem; margin-top: 0.35rem; line-height: 1.5; }
/* --- riepilogo (3 stat card) --- */
.atracker-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.app-card.atracker-stat-danger { padding: 0.85rem; background: hsl(var(--destructive) / 0.08); border-color: hsl(var(--destructive) / 0.2); }
.app-card.atracker-stat-warn { padding: 0.85rem; background: hsl(var(--warning) / 0.08); border-color: hsl(var(--warning) / 0.2); }
.app-card.atracker-stat-ok { padding: 0.85rem; background: hsl(var(--lime) / 0.08); border-color: hsl(var(--lime) / 0.2); }
.atracker-stat-num { font-size: 1.25rem; font-weight: 600; margin-top: 0.5rem; line-height: 1; }
.atracker-stat-label { font-size: 0.68rem; margin-top: 0.3rem; }
/* --- empty state --- */
.atracker-empty-title { font-weight: 600; font-size: 0.95rem; }
.atracker-empty-text { font-size: 0.82rem; margin: 0.5rem auto 0; max-width: 20rem; line-height: 1.5; }
.atracker-empty-cta { margin-top: 1.25rem; }
/* --- lista visti --- */
.atracker-list { display: flex; flex-direction: column; gap: 0.75rem; }
.app-card.atracker-visa-card { padding: 1rem; }
.atracker-visa-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.atracker-tag-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.atracker-tag { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; }
.atracker-visa-name { display: block; font-weight: 600; font-size: 0.92rem; margin-top: 0.4rem; }
.atracker-visa-meta { font-size: 0.7rem; margin-top: 0.15rem; }
.atracker-visa-expiry { text-align: right; flex-shrink: 0; }
.atracker-expiry-label { font-size: 0.65rem; }
.atracker-expiry-date { font-weight: 600; font-size: 0.82rem; }
.atracker-expiry-days { font-size: 0.65rem; margin-top: 0.15rem; }
/* --- barra azioni card --- */
.atracker-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid hsl(var(--border) / 0.6); }
.atracker-inline-form { display: inline; }
.btn.atracker-reminder-btn { font-size: 0.7rem; gap: 0.35rem; }
.btn.atracker-open-btn { border: 1px solid hsl(var(--border)); font-size: 0.7rem; gap: 0.35rem; }
.atracker-actions-right { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; }
.btn-ghost.atracker-icon-btn { padding: 0.4rem; }
.btn-ghost.atracker-icon-btn-del { color: hsl(var(--foreground-muted)); }
/* --- pill rischio (inline in stringa PHP; tail dinamico $style resta inline) --- */
.atracker-risk-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid; }
/* --- inline->classi: admin/analytics.php --- */
.adanalytics-kpi-delta { margin-top: 0.25rem; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; }
.adanalytics-page { display: flex; flex-direction: column; gap: 2rem; }
.adanalytics-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.adanalytics-subtitle { font-size: 0.9rem; }
.adanalytics-period-nav { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.adanalytics-section-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 0.85rem; }
.adanalytics-footnote { font-size: 0.72rem; margin-top: 0.5rem; }
.adanalytics-settings-form { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.adanalytics-form-hint { font-size: 0.75rem; margin: 0; }
.adanalytics-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.adanalytics-field-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.adanalytics-input-full { width: 100%; }
/* --- inline->classi: admin/audit-log.php --- */
.adauditlog-page { display: flex; flex-direction: column; gap: 1.25rem; }
.adauditlog-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }
.adauditlog-subtitle { font-size: 0.9rem; }
.adauditlog-header-actions { display: flex; align-items: center; gap: 0.5rem; }
.adauditlog-filters { padding: 0.85rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.adauditlog-filter-full { grid-column: span 2; }
.adauditlog-filter-actor { font-size: 0.78rem; }
.adauditlog-filter-actions { display: flex; gap: 0.5rem; }
.adauditlog-table { min-width: 960px; }
.adauditlog-entity { font-size: 0.75rem; }
.adauditlog-action { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.adauditlog-id { font-size: 0.72rem; }
.adauditlog-case-link { font-weight: 600; }
.adauditlog-actor { font-size: 0.78rem; }
.adauditlog-role { font-size: 0.75rem; }
/* --- inline->classi: admin/case.php --- */
/* ============================================================
admin/case.php - classi component-specific (migrazione inline -> classi)
Namespace: adcase-*
Colori delegati al vocabolario condiviso (muted, mono, tx-fg, tx-lime,
tx-warn, tx-danger, tx-success). Nessun conflitto con il blocco