*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:#f0f4f8;color:#1e293b;min-height:100vh}
:root{
  --blu:#1d4ed8;--blu-dark:#1e3a8a;--blu-light:#dbeafe;
  --verde:#059669;--verde-light:#d1fae5;
  --viola:#7c3aed;--viola-light:#ede9fe;
  --arancio:#d97706;--arancio-light:#fef3c7;
  --rosa:#db2777;--rosa-light:#fce7f3;
  --grigio:#64748b;--border:#e2e8f0;--white:#ffffff;
  --shadow:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);
  --radius:10px;--radius-lg:14px
}
/* TOPBAR */
.topbar{background:var(--blu-dark);color:#93c5fd;font-size:.78rem;padding:7px 24px;display:flex;justify-content:flex-end;align-items:center;gap:20px}
.topbar a{color:#93c5fd;text-decoration:none;display:flex;align-items:center;gap:5px}
.topbar a:hover{color:#fff}
/* HERO */
.hero{background:linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 55%,#2563eb 100%);color:#fff;padding:32px 24px 28px}
.hero-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:22px}
.hero-logo{width:72px;height:72px;border-radius:12px;object-fit:contain;background:#fff;padding:4px;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.hero-text h1{font-size:1.55rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.hero-text p{margin-top:6px;font-size:.88rem;color:#bfdbfe;max-width:620px;line-height:1.5}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.badge{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:20px;letter-spacing:.04em}
/* PRINT HEADER */
#print-header{display:none}
/* MAIN LAYOUT */
.main-wrap{max-width:1400px;margin:28px auto;padding:0 20px 40px}
.intro-tip{background:#eff6ff;border:1px solid #bfdbfe;border-left:4px solid var(--blu);border-radius:8px;padding:12px 16px;font-size:.83rem;color:#1e40af;margin-bottom:22px;display:flex;align-items:flex-start;gap:10px}
.intro-tip i{margin-top:1px;flex-shrink:0}
/* FORM GRID */
.form-grid{display:grid;grid-template-columns:380px 380px 1fr;gap:20px;align-items:start}
@media(max-width:1300px){.form-grid{grid-template-columns:340px 340px 1fr}}
@media(max-width:1100px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .results-panel{grid-column:1 / -1}}
@media(max-width:720px){.form-grid{grid-template-columns:1fr}}
/* CARD */
.card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px}
.card:last-child{margin-bottom:0}
.card-head{padding:14px 18px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:.88rem;letter-spacing:.01em;color:#fff}
.card-head.blu{background:linear-gradient(90deg,#1e3a8a,#2563eb)}
.card-head.verde{background:linear-gradient(90deg,#064e3b,#059669)}
.card-head.viola{background:linear-gradient(90deg,#4c1d95,#7c3aed)}
.card-head.arancio{background:linear-gradient(90deg,#78350f,#d97706)}
.card-head.rosa{background:linear-gradient(90deg,#831843,#db2777)}
.card-head.grigio{background:linear-gradient(90deg,#334155,#64748b)}
.card-body{padding:18px}
/* FIELDS */
.field-group{display:flex;flex-direction:column;gap:3px;margin-bottom:14px}
.field-group:last-child{margin-bottom:0}
.field-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.field-row-2:last-child{margin-bottom:0}
.field-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}
@media(max-width:480px){.field-row-2,.field-row-3{grid-template-columns:1fr}}
label{font-size:.78rem;font-weight:600;color:#475569;display:flex;align-items:center;gap:5px;margin-bottom:3px;flex-wrap:wrap}
input[type="text"],input[type="number"],input[type="date"],select{width:100%;padding:8px 11px;border:1.5px solid #cbd5e1;border-radius:7px;font-size:.85rem;color:#1e293b;background:#fff;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
input:focus,select:focus{outline:none;border-color:var(--blu);box-shadow:0 0 0 3px rgba(29,78,216,.12)}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%2364748b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.hint-text{font-size:.71rem;color:#94a3b8;margin-top:2px;line-height:1.3}
/* TOOLTIP */
.info-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:#94a3b8;font-size:.82rem;padding:0 2px;position:relative;vertical-align:middle;flex-shrink:0}
.info-btn:hover{color:var(--blu)}
.info-btn .tooltip{display:none;position:absolute;z-index:200;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#1e293b;color:#e2e8f0;font-size:.74rem;font-weight:400;padding:8px 12px;border-radius:7px;width:260px;line-height:1.45;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.info-btn:hover .tooltip{display:block}
/* SECTION LABEL */
.section-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;padding:12px 0 8px;border-bottom:1px solid #f1f5f9;margin-bottom:14px;display:flex;align-items:center;gap:7px}
/* TIP BOXES */
.tip{border-radius:8px;padding:10px 14px;font-size:.80rem;line-height:1.5;margin-bottom:14px;display:flex;gap:10px;align-items:flex-start}
.tip i{margin-top:1px;flex-shrink:0}
.tip.viola{background:var(--viola-light);color:#4c1d95;border-left:3px solid var(--viola)}
.tip.verde{background:var(--verde-light);color:#064e3b;border-left:3px solid var(--verde)}
.tip.blu{background:var(--blu-light);color:#1e3a8a;border-left:3px solid var(--blu)}
.tip.arancio{background:var(--arancio-light);color:#78350f;border-left:3px solid var(--arancio)}
/* PERIODI */
.periodo-row{background:#f8fafc;border:1px solid #e2e8f0;border-radius:9px;padding:14px;margin-bottom:10px;position:relative}
.p-tit{font-size:.78rem;font-weight:700;color:var(--viola);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.btn-remove{position:absolute;top:10px;right:10px;background:none;border:1px solid #fecaca;color:#ef4444;border-radius:6px;width:28px;height:28px;cursor:pointer;font-size:.78rem;display:flex;align-items:center;justify-content:center;transition:background .15s}
.btn-remove:hover{background:#fee2e2}
.btn-add-periodo{width:100%;padding:9px;border:2px dashed #c7d2fe;border-radius:8px;background:#eef2ff;color:#4338ca;font-size:.82rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:background .15s,border-color .15s;margin-top:4px}
.btn-add-periodo:hover{background:#e0e7ff;border-color:#818cf8}
/* BUTTONS */
.btn-calc{width:100%;padding:13px 20px;background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;border:none;border-radius:9px;font-size:.95rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 4px 12px rgba(29,78,216,.35);transition:transform .1s,box-shadow .1s;letter-spacing:.01em;margin-top:6px}
.btn-calc:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(29,78,216,.40)}
.btn-calc:active{transform:translateY(0)}
.btn-reset-main{width:100%;padding:10px 20px;background:#fff;color:#64748b;border:1.5px solid #cbd5e1;border-radius:9px;font-size:.85rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,color .15s,border-color .15s;margin-top:8px}
.btn-reset-main:hover{background:#fef2f2;color:#ef4444;border-color:#fca5a5}
/* LOADER */
#loader{display:none;text-align:center;padding:50px 20px;color:var(--grigio)}
.loader-spin{width:40px;height:40px;border:4px solid #dbeafe;border-top-color:var(--blu);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 14px}
@keyframes spin{to{transform:rotate(360deg)}}
/* PLACEHOLDER */
#placeholder{text-align:center;padding:60px 30px;color:#94a3b8}
#placeholder i{font-size:3rem;margin-bottom:16px;display:block;color:#cbd5e1}
#placeholder h3{font-size:1rem;color:#64748b;margin-bottom:8px}
#placeholder p{font-size:.82rem;max-width:280px;margin:0 auto;line-height:1.5}
/* RESULTS */
.results-panel .card-body{padding:0}
#risultati{display:none}
#risultati.show{display:block}
/* EXPORT BAR */
.export-bar{background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:10px 16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ebtn{padding:7px 13px;border:none;border-radius:7px;font-size:.78rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;transition:opacity .15s}
.ebtn:hover{opacity:.88}
.ebtn-pdf{background:#1e3a8a;color:#fff}
.ebtn-email{background:#0891b2;color:#fff}
.ebtn-wa{background:#16a34a;color:#fff}
.ebtn-reset{background:#fff;color:#ef4444;border:1.5px solid #fca5a5}
/* TOTAL STRIP */
.tot-strip{background:linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 100%);color:#fff;padding:20px 22px;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.tot-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#93c5fd;margin-bottom:4px}
.tot-amount,.ts-amount{font-size:2rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.tot-sub{font-size:.74rem;color:#bfdbfe;margin-top:5px}
.tot-name{font-size:1.1rem;font-weight:700}
/* PARAMETER GRID */
.pg{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid #e2e8f0}
.pg-item{padding:12px 16px;border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0}
.pg-item:nth-child(4n){border-right:none}
.pg-k{font-size:.70rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;margin-bottom:4px}
.pg-v{font-size:.88rem;font-weight:700;color:#1e293b;word-break:break-all}
.pv-viola{color:var(--viola)}
.pv-blu{color:var(--blu)}
.pv-verde{color:var(--verde)}
.pv-arancio{color:var(--arancio)}
@media(max-width:900px){.pg{grid-template-columns:repeat(2,1fr)}.pg-item:nth-child(2n){border-right:none}.pg-item:nth-child(4n){border-right:1px solid #e2e8f0}}
/* RES CARDS */
.res-card{border-top:1px solid #e2e8f0}
.res-card-head{padding:12px 18px;display:flex;align-items:center;gap:9px;font-weight:700;font-size:.83rem;color:#fff}
.res-card-head.c-blu{background:linear-gradient(90deg,#1e3a8a,#2563eb)}
.res-card-head.c-arancio{background:linear-gradient(90deg,#78350f,#d97706)}
.res-card-head.c-rosa{background:linear-gradient(90deg,#831843,#db2777)}
.res-card-head.c-verde{background:linear-gradient(90deg,#064e3b,#059669)}
.res-card-head.c-viola{background:linear-gradient(90deg,#4c1d95,#7c3aed)}
.res-card-body{padding:16px 18px}
/* TABLES */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px;border:1px solid #e2e8f0}
.tbl{width:100%;border-collapse:collapse;font-size:.80rem}
.tbl th{background:#f8fafc;padding:9px 12px;text-align:left;font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;border-bottom:1.5px solid #e2e8f0;white-space:nowrap}
.tbl td{padding:9px 12px;border-bottom:1px solid #f1f5f9;color:#334155;vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:#f8fafc}
.tbl tfoot td{background:#f1f5f9;font-weight:700;border-top:1.5px solid #e2e8f0;border-bottom:none}
.tbl .tr{text-align:right}
.tbl .imp{font-weight:700}
.tbl .red{color:#dc2626 !important}
.tbl .formula{color:#475569;font-size:.74rem;font-family:'Courier New',monospace}
.tbl-more{text-align:center;color:#94a3b8;font-style:italic;font-size:.75rem;padding:8px 12px}
/* PAY BOXES */
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
@media(max-width:600px){.pay-grid{grid-template-columns:1fr}}
.pay-box{border:1.5px solid #e2e8f0;border-radius:10px;padding:14px 16px;background:#f8fafc}
.pay-box-sel{border-color:var(--blu);background:#eff6ff}
.pay-title{font-size:.80rem;font-weight:700;color:#334155;margin-bottom:6px;display:flex;align-items:center;gap:7px}
.pay-amount{font-size:1.4rem;font-weight:800;color:#1e293b;line-height:1.1;margin-bottom:4px}
.pay-mes{font-size:.82rem;font-weight:500;color:#64748b}
.pay-sub{font-size:.74rem;color:#64748b}
.tip-inline{border-radius:8px;padding:9px 13px;font-size:.78rem;margin-top:12px;display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.tip-inline.tip-viola{background:var(--viola-light);color:#4c1d95}
.tip-inline.tip-verde{background:var(--verde-light);color:#064e3b}
.tip-inline.tip-blu{background:var(--blu-light);color:#1e3a8a}
.tip-inline i{margin-top:1px;flex-shrink:0}
/* FISCAL */
.fisc-rows{border:1px solid #e2e8f0;border-radius:9px;overflow:hidden;margin-bottom:14px}
.fisc-row{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-bottom:1px solid #f1f5f9;font-size:.82rem;color:#334155;gap:12px}
.fisc-row:last-child{border-bottom:none}
.fisc-row span:first-child{color:#475569;flex:1}
.fv{font-weight:700;color:#1e293b;white-space:nowrap}
.fisc-total{background:#f0fdf4}
.fisc-total span:first-child{font-weight:700;color:#166534}
.fv-big{font-size:1.05rem;color:var(--verde) !important}
.saving-box{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1px solid #bbf7d0;border-radius:9px;padding:12px 16px;font-size:.82rem;color:#166534;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.saving-box i{font-size:1.1rem}
.norm-note{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px 14px;font-size:.76rem;color:#475569;line-height:1.5;display:flex;gap:8px;align-items:flex-start}
.norm-note i{margin-top:1px;flex-shrink:0;color:#64748b}
/* RELAZIONE */
.rel-card{border-top:1px solid #e2e8f0}
.rel-head{padding:13px 18px;background:linear-gradient(90deg,#1e293b,#334155);color:#fff;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;font-size:.85rem;font-weight:700;gap:10px}
.rel-head:hover{background:linear-gradient(90deg,#0f172a,#1e293b)}
.rel-head span{display:flex;align-items:center;gap:9px}
.rel-body{display:none;padding:22px;font-size:.83rem;line-height:1.65;color:#334155}
.rel-body.open{display:block}
.rel-body h4{font-size:.88rem;font-weight:700;color:#1e3a8a;margin:20px 0 8px;padding-bottom:5px;border-bottom:1.5px solid #dbeafe}
.rel-body p{margin-bottom:10px}
.rel-body ul{padding-left:20px;margin-bottom:10px}
.rel-body li{margin-bottom:4px}
.norm-ref{background:#f0f4ff;border:1px solid #c7d2fe;border-radius:8px;padding:11px 14px;font-size:.77rem;color:#312e81;margin-bottom:18px;line-height:1.55;display:flex;gap:9px;align-items:flex-start}
.norm-ref i{margin-top:1px;flex-shrink:0}
.firma{background:#f8fafc;border:1px solid #e2e8f0;border-top:3px solid var(--blu);border-radius:8px;padding:14px 18px;font-size:.77rem;color:#475569;margin-top:20px;line-height:1.7}
.firma a{color:var(--blu);text-decoration:none}
.firma a:hover{text-decoration:underline}
/* FOOTER */
.footer{background:#1e293b;color:#94a3b8;text-align:center;padding:20px 24px;font-size:.78rem}
.footer a{color:#93c5fd;text-decoration:none}
.footer a:hover{color:#fff}
/* PRINT */
@media print{
  .topbar,.hero,.intro-tip,.card-head.grigio,.form-grid>*:not(.results-panel),
  .export-bar,.btn-calc,.btn-reset-main,.btn-remove,.btn-add-periodo,.footer{display:none !important}
  body{background:#fff}
  .main-wrap{margin:0;padding:0;max-width:100%}
  .form-grid{display:block}
  .results-panel{box-shadow:none}
  #print-header{display:flex !important}
  .rel-body{display:block !important}
  .tbl-wrap{overflow:visible}
  .pg{grid-template-columns:repeat(4,1fr)}
}

/* ===== PERIODI DINAMICI (classi generate via JS) ===== */
.field-row.tre{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:0}
@media(max-width:600px){.field-row.tre{grid-template-columns:1fr}}
.fg{display:flex;flex-direction:column;gap:3px}
.fg label{font-size:.78rem;font-weight:600;color:#475569;margin-bottom:3px}
.hint{font-size:.71rem;color:#94a3b8;margin-top:2px;line-height:1.3}

/* ===== HERO LOGO SVG ===== */
.hero-logo-svg{width:72px;height:72px;border-radius:12px;background:#fff;padding:8px;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center}