:root{
  --navy:#1f3a5f; --navy-2:#1f4e78; --gold:#b8902f; --gold-soft:#d8b85a;
  --cream:#f6f2e9; --cream-2:#efe9da; --ink:#22252e; --muted:#6b7180;
  --line:#e4dcca; --card:#fffdf9; --ok:#2e7d52;
  --shadow:0 18px 40px -18px rgba(31,58,95,.35);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Inter",system-ui,sans-serif; color:var(--ink);
  background:
    radial-gradient(1200px 500px at 50% -10%, #fbf8f1 0%, transparent 60%),
    linear-gradient(180deg,#f1ece0 0%, #eae3d3 100%);
  min-height:100vh;
}

/* Topbar */
.topbar{padding:24px 20px 6px; text-align:center}
.brand-logo{display:block; height:74px; width:auto; margin:0 auto 8px}
.brand-sub{display:block; font-size:12.5px; letter-spacing:.6px; color:var(--muted); margin-top:2px}

.wrap{max-width:680px; margin:0 auto; padding:8px 18px 40px}

/* Stepper */
.stepper{display:flex; justify-content:space-between; gap:6px; margin:18px 2px 22px; position:relative}
.stepper::before{content:""; position:absolute; top:16px; left:6%; right:6%; height:2px; background:var(--line); z-index:0}
.step{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:7px; flex:1}
.step .dot{width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--cream); border:2px solid var(--line); color:var(--muted);
  font-weight:600; font-size:14px; transition:.25s}
.step .lbl{font-size:11px; color:var(--muted); text-align:center; letter-spacing:.2px}
.step.is-active .dot{background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 6px 14px -4px rgba(31,58,95,.6)}
.step.is-active .lbl{color:var(--navy); font-weight:600}
.step.done .dot{background:var(--gold); border-color:var(--gold); color:#fff}

/* Card */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:30px 30px 34px; box-shadow:var(--shadow); position:relative;
  animation:rise .35s ease both;
}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.card.hidden,.hidden{display:none !important}

.anim{display:flex; flex-direction:column; align-items:center; gap:6px; margin:-8px 0 8px}
.anim > img:first-child{width:132px; height:132px; object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(31,58,95,.18))}
.studio-logo{width:104px; height:auto; object-fit:contain; opacity:.9}
.card h2{font-family:"Cormorant Garamond",serif; font-weight:700; color:var(--navy);
  font-size:27px; text-align:center; margin:0 0 4px; letter-spacing:.3px}
.hint{text-align:center; color:var(--muted); font-size:13.5px; margin:0 0 22px}

/* Fields */
.row{display:flex; gap:16px}
.row .field{flex:1}
.field{margin-bottom:16px; display:flex; flex-direction:column}
.field.s{max-width:260px}
label{font-size:12.5px; font-weight:600; color:var(--navy); margin-bottom:6px; letter-spacing:.2px}
input{
  font:inherit; font-size:15px; padding:11px 13px; border:1px solid var(--line);
  border-radius:11px; background:#fffef9; color:var(--ink); transition:.18s; width:100%;
}
input::placeholder{color:#b7b0a0}
input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,144,47,.16)}
input[type=date]{color:var(--ink)}

.grp-label{display:block; font-size:12.5px; font-weight:600; color:var(--navy); margin:6px 0 8px}
.radio-cards{display:flex; gap:12px; margin-bottom:20px}
.rc{flex:1; border:1.5px solid var(--line); border-radius:14px; padding:14px 8px;
  display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer;
  background:#fffef9; transition:.18s; text-align:center}
.rc input{display:none}
.rc-ico{font-size:24px}
.rc-t{font-size:12.5px; font-weight:600; color:var(--ink)}
.rc:hover{border-color:var(--gold-soft); transform:translateY(-1px)}
.rc:has(input:checked){border-color:var(--navy); background:#f4f8fd; box-shadow:0 6px 16px -8px rgba(31,58,95,.45)}
.rc:has(input:checked) .rc-t{color:var(--navy)}

.suffix{display:flex; align-items:center; gap:6px}
.suffix input{max-width:120px}
.suffix span{font-weight:600; color:var(--muted)}

.divider{display:flex; align-items:center; gap:12px; margin:20px 0 16px; color:var(--muted); font-size:12px}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line)}
.note{font-size:12px; color:var(--muted); font-style:italic; margin:4px 0 0}

/* Spese rows */
.spese{display:flex; flex-direction:column; gap:10px}
.spesa{display:flex; gap:12px; align-items:center; animation:rise .25s ease both}
.spesa .n{width:26px; height:26px; flex:none; border-radius:50%; background:var(--cream-2);
  display:grid; place-items:center; font-size:12px; font-weight:600; color:var(--navy)}
.spesa .desc{flex:1}
.spesa .imp{width:150px}
.spesa input{margin:0}
.more{display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:18px; padding:14px 16px; border:1px dashed var(--line); border-radius:12px;
  background:#fbf8f1; font-size:13.5px; color:var(--muted)}
.more.hidden{display:none}

/* Buttons */
.nav{display:flex; gap:12px; justify-content:space-between; margin-top:22px}
.btn,.btn-ghost{font:inherit; font-weight:600; font-size:14.5px; border-radius:999px;
  padding:12px 26px; cursor:pointer; border:1.5px solid transparent; transition:.18s; display:inline-flex; align-items:center; gap:8px}
.btn{background:var(--navy); color:#fff; box-shadow:0 10px 22px -10px rgba(31,58,95,.7)}
.btn:hover{background:#244873; transform:translateY(-1px)}
.btn.gold{background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#3a2c08}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy); background:#fff}
.btn-ghost:disabled{opacity:.4; cursor:not-allowed}
.btn-ghost.sm{padding:8px 16px; font-size:13px}
.btn-anim{width:24px; height:24px}
#prevBtn{margin-right:auto}

.foot{text-align:center; font-size:11.5px; color:var(--muted); padding:18px; letter-spacing:.2px}
.foot em{color:var(--navy); font-style:normal; font-weight:600}

@media(max-width:560px){
  .row{flex-direction:column; gap:0}
  .radio-cards{flex-direction:column}
  .step .lbl{display:none}
  .card{padding:24px 18px 28px}
}

/* ===== Banner tabella applicata (Modulo 1) ===== */
.tab-banner{display:flex; align-items:center; gap:10px; margin-top:18px; padding:12px 14px;
  background:linear-gradient(180deg,#23456e,#1f3a5f); color:#f3eede;
  border-radius:12px; font-size:13.5px; box-shadow:0 8px 18px -10px rgba(31,58,95,.7)}
.tab-banner .tb-ico{font-size:17px}
.tab-banner .tb-text{flex:1; line-height:1.35}
.tab-banner .tb-text strong{color:#e9cf86}
.tab-banner .tb-dl{display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  color:#23456e; background:#e9cf86; transition:.18s; flex:none}
.tab-banner .tb-dl:hover{background:#f1dca0; transform:translateY(-1px)}

/* ===== Risultato ===== */
.final-anim{text-align:center; margin:-6px 0 6px}
.final-anim img{width:100%; max-width:330px; height:auto;
  filter:drop-shadow(0 12px 18px rgba(31,58,95,.18))}
.result h2{margin-bottom:14px}
.res-head{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:14px 16px; background:#f7f4ec; border:1px solid var(--line); border-radius:12px; font-size:13.5px}
.res-head span{color:var(--muted)}
.res-meta{text-align:right; color:var(--muted); line-height:1.5}
.res-tab{font-size:13.5px; margin:14px 2px 6px}
.res-tab strong{color:var(--navy)}
.res-tbl{width:100%; border-collapse:collapse; margin:6px 0 4px; font-size:14px}
.res-tbl td,.res-tbl th{padding:9px 10px; border-bottom:1px solid #efe9da}
.res-tbl .ar{text-align:right; white-space:nowrap}
.res-tbl tr.sub td{font-weight:700; color:var(--navy); border-top:2px solid var(--line); border-bottom:none; background:#faf7f0}
.res-tbl .muted,.muted{color:var(--muted); font-weight:400}
.res-tbl.small{font-size:12px} .res-tbl.small th{color:var(--muted); font-weight:600; text-align:left}
.fase{margin:18px 0 6px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#fffdf9}
.fase h3{margin:0; font-family:"Cormorant Garamond",serif; font-size:19px; color:var(--navy)}
.small{font-size:12px}
.dett{margin-top:8px} .dett summary{cursor:pointer; font-size:12.5px; color:var(--navy); font-weight:600}
.grand{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:20px;
  padding:18px 22px; border-radius:14px; color:#fff; background:linear-gradient(180deg,#23456e,#1f3a5f);
  font-family:"Cormorant Garamond",serif; font-size:18px; letter-spacing:.4px; box-shadow:var(--shadow)}
.grand span{font-size:26px; font-weight:700; color:#e9cf86}
.res-actions{display:flex; justify-content:space-between; gap:12px; margin-top:20px}

/* ===== Stampa PDF (carta intestata: intestazione a filo top, piè a filo bottom) ===== */
#printDoc{display:none}
@media print{
  html,body{background:#fff !important}
  body > *{display:none !important}
  #printDoc{display:block !important}
  #printDoc .ph{position:fixed; top:0; left:50%; transform:translateX(-50%); width:62%; height:auto}
  #printDoc .pf{position:fixed; bottom:0; left:0; width:100%; height:auto}
  .pd-body{padding:32mm 13mm 24mm}
  /* fondo bianco ovunque, niente tinte crema in stampa */
  .res-head,.fase,.more,.res-tab{background:#fff !important; border-color:#dcd3bf}
  .res-tbl tr.sub td{background:#fff !important}
  .final-anim,.res-actions,.note,.dett{display:none !important}
  /* compatto, per stare in una pagina */
  .pd-body h2{font-size:21px; margin:0 0 8px; color:var(--navy); font-family:"Cormorant Garamond",serif}
  .res-head{padding:10px 12px; font-size:12px}
  .res-tbl{font-size:12px; margin:4px 0} .res-tbl td,.res-tbl th{padding:5px 8px}
  .fase{padding:9px 12px; margin:11px 0} .fase h3{font-size:16px}
  .grand{padding:13px 18px; font-size:15px; margin-top:14px} .grand span{font-size:21px}
  .fase,.res-tbl tr,.grand,.res-head{break-inside:avoid}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  @page{size:A4; margin:0}
}