/* Stili pubblici - home */

/* Base pagina */
*{
box-sizing:border-box;
}

body{
margin:0;
background:#f4f7fa;
color:#1c252e;
font-family:Arial,sans-serif;
line-height:1.4;
}

/* Navbar */
.navbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:16px 22px;
border-bottom:1px solid #dde4eb;
background:#ffffff;
}

.navbar-brand{
font-size:16px;
font-weight:600;
letter-spacing:.01em;
color:#161b20;
text-decoration:none;
}

.navbar-brand-group{
display:flex;
align-items:center;
gap:8px;
}

.navbar-section{
font-size:15px;
font-weight:500;
letter-spacing:.01em;
color:#52606d;
}

.navbar nav{
display:flex;
gap:16px;
}

.navbar nav a{
color:#1f3c88;
text-decoration:none;
}

.navbar nav a:hover,
.navbar nav a:focus-visible{
text-decoration:underline;
}

.navbar-user{
display:inline-flex;
align-items:center;
gap:6px;
color:#161b20;
}

.navbar nav .navbar-user,
.navbar nav .navbar-user:hover{
color:#161b20;
}

.navbar-user img{
width:18px;
height:18px;
}

.navbar-logout{
display:inline-flex;
align-items:center;
justify-content:center;
}

.navbar-logout img{
width:18px;
height:18px;
}

/* Contenuto introduttivo */
.home{
max-width:1180px;
margin:0 auto;
padding:48px 18px 60px;
}

.home-intro{
text-align:center;
}

.home-intro h1{
margin:0;
font-size:32px;
}

.home-intro p{
margin:10px 0 0;
font-size:17px;
}

.home-tagline{
display:inline-block;
width:auto;
max-width:100%;
overflow:hidden;
white-space:nowrap;
margin:10px 0 0;
animation:taglineReveal 2.4s steps(42,end) both;
}

@keyframes taglineReveal{
from{
opacity:0;
clip-path:inset(0 100% 0 0);
}
to{
opacity:1;
clip-path:inset(0 0 0 0);
}
}

@media(prefers-reduced-motion:reduce){
.home-tagline{
animation:none;
}

}

/* Search page */
.search-page{
max-width:760px;
margin:0 auto;
padding:48px 18px 60px;
}

.search-panel{
padding:28px;
border:1px solid #dde4eb;
background:#ffffff;
}

.search-panel h1{
margin:0;
font-size:28px;
}

.search-panel p{
margin:10px 0 0;
}

/* Module pages */
.module-page{
max-width:1180px;
margin:0 auto;
padding:48px 18px 60px;
}

.module-panel{
padding:28px;
border:1px solid #dde4eb;
background:#ffffff;
}

.module-panel h1{
margin:0;
font-size:28px;
}

.module-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
margin-top:28px;
}

.module-card{
display:block;
padding:18px;
border:1px solid #dde4eb;
background:#ffffff;
color:#1c252e;
text-decoration:none;
}

.module-card h2{
margin:0;
font-size:20px;
}

.module-card p{
margin:10px 0 0;
}

.module-button{
display:inline-block;
margin-top:14px;
padding:10px 14px;
background:#1f3c88;
color:#ffffff;
text-decoration:none;
}

.module-filters{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:24px 0;
}

.module-filters button{
padding:8px 12px;
border:1px solid #cfd7df;
background:#ffffff;
color:#1c252e;
cursor:pointer;
}

.bank-periods{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:18px 0;
}

.bank-periods button{
padding:8px 12px;
border:1px solid #cfd7df;
background:#ffffff;
cursor:pointer;
}

.bank-chart{
position:relative;
height:180px;
border:1px solid #dde4eb;
background:repeating-linear-gradient(to bottom,#ffffff 0,#ffffff 44px,#edf1f5 45px);
}

.bank-chart svg{
width:100%;
height:100%;
}

.bank-chart polyline{
fill:none;
stroke:#1f3c88;
stroke-width:2;
vector-effect:non-scaling-stroke;
}

.bank-chart span{
position:absolute;
right:10px;
bottom:8px;
font-size:13px;
}

.public-lab-badge,.public-card-status{
display:inline-block;
margin-bottom:10px;
color:#34506a;
font-size:12px;
font-weight:bold;
letter-spacing:.05em
}

.module-section-spaced{margin-top:28px}
.module-actions{display:flex;gap:8px;flex-wrap:wrap}
.module-button-secondary{background:#536574}
.module-note{margin:18px 0 0;color:#536574;font-size:13px}

.bank-lab-hero p,.listings-hero p,.games-hero p{
max-width:760px;
margin-bottom:0
}

.bank-account-grid .module-card small,
.bank-account-grid .module-card strong{
display:block
}

.bank-account-grid .module-card strong{
margin-top:8px;
font-size:26px
}

.bank-calculator{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr)) auto;
gap:10px;
align-items:end;
margin:20px 0
}

.bank-calculator label{display:grid;gap:6px;font-size:13px;font-weight:bold}
.bank-calculator input{
min-width:0;
padding:9px;
border:1px solid #cfd7df;
background:#ffffff;
color:#1c252e;
font:14px Arial,sans-serif
}
.bank-calculator .module-button{margin:0;border:0;cursor:pointer}

.bank-results{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin-bottom:12px
}

.bank-results div{
padding:12px;
border-left:3px solid #1f3c88;
background:#f3f6f8
}

.bank-results small,.bank-results strong{display:block}
.bank-results strong{margin-top:5px;font-size:18px}
.bank-simulator-chart{height:230px}
.bank-line-simple{stroke:#697e8e!important}
.bank-line-compound{stroke:#1f7a53!important}
.bank-legend{display:flex;gap:18px;margin-top:8px;font-size:13px}
.bank-legend i{
display:inline-block;
width:18px;
height:3px;
margin-right:5px;
vertical-align:middle
}
.bank-legend .is-simple{background:#697e8e}
.bank-legend .is-compound{background:#1f7a53}

.commerce-checklist{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px
}

.commerce-checklist span{
padding:9px 10px;
border-left:3px solid #1f3c88;
background:#f3f6f8
}

/* Ricerca */
.home-search{
max-width:560px;
margin:22px auto 0;
text-align:left;
}

.home-search label{
display:block;
margin-bottom:6px;
font-size:14px;
}

.home-search div{
display:flex;
gap:0;
}

.home-search input,
.home-search button{
font:inherit;
font-size:15px;
}

.home-search input{
flex:1;
min-width:0;
padding:12px 14px;
border:1px solid #cfd7df;
border-radius:3px 0 0 3px;
background:#ffffff;
color:#1c252e;
}

.home-search button{
padding:11.5px 18px;
border:1px solid #1f3c88;
border-radius:0 3px 3px 0;
background:#1f3c88;
color:#ffffff;
cursor:pointer;
}

/* Collegamenti principali */
.home-links{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
margin-top:32px;
}

.home-links a{
display:block;
min-height:150px;
padding:18px;
border:1px solid #dde4eb;
border-radius:4px;
background:#ffffff;
color:#1c252e;
text-decoration:none;
}

.home-links h2{
margin:0;
font-size:20px;
}

.home-links a:hover,
.home-links a:focus-visible{
border-color:#1f3c88;
box-shadow:0 2px 10px rgba(31,60,136,.12);
outline:none;
}

/* Footer */
.site-footer{
border-top:1px solid #dde4eb;
background:#ffffff;
color:#52606d;
}

.site-footer-inner{
max-width:1180px;
margin:0 auto;
padding:28px 18px 20px;
}

.site-footer-links{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:14px;
}

.site-footer a{
color:#1f3c88;
text-decoration:none;
}

.site-footer a:hover,
.site-footer a:focus-visible{
text-decoration:underline;
}

.site-footer-line{
margin:8px 0 12px;
border:0;
border-top:1px solid #dde4eb;
}

.site-footer-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
margin-top:16px;
font-size:13px;
}

.site-locale{
display:flex;
align-items:center;
gap:6px;
}

.site-locale img{
width:16px;
height:16px;
}

.site-locale select{
border:0;
background:transparent;
color:inherit;
font:inherit;
cursor:pointer;
}

.site-locale option{
color:#111;
}

.site-footer-legal{
display:flex;
gap:8px;
font-size:13px;
}

.site-footer-meta{
display:flex;
justify-content:center;
text-align:center;
font-size:13px;
}

/* Tema scuro pubblico e condiviso */
html.site-dark-root{
color-scheme:dark;
background:#0a1118;
}

html.site-dark-root body{
background:#0a1118;
color:#e7edf3;
}

html.site-dark-root .navbar,
html.site-dark-root .site-footer{
border-color:#293742;
background:#0d161e;
color:#aebdca;
}

html.site-dark-root .navbar-brand,
html.site-dark-root .navbar-section,
html.site-dark-root .navbar nav a,
html.site-dark-root .navbar nav .navbar-user{
color:#dce8f0;
}

html.site-dark-root .navbar-user img,
html.site-dark-root .navbar-logout img,
html.site-dark-root .site-locale img{
filter:invert(90%);
}

html.site-dark-root .search-panel,
html.site-dark-root .module-panel,
html.site-dark-root .module-card,
html.site-dark-root .home-links a{
border-color:#34434f;
background:#111c25;
color:#e7edf3;
}

html.site-dark-root .home-links a:hover,
html.site-dark-root .home-links a:focus-visible,
html.site-dark-root .module-card:hover,
html.site-dark-root .module-card:focus-visible{
border-color:#498bbd;
box-shadow:0 5px 18px rgba(0,0,0,.25);
}

html.site-dark-root .home-search input,
html.site-dark-root .module-filters button,
html.site-dark-root .bank-periods button,
html.site-dark-root .bank-calculator input,
html.site-dark-root .site-locale select{
border-color:#40515e;
background:#0c151d;
color:#eef5fa;
}

html.site-dark-root .bank-chart{
border-color:#34434f;
background:repeating-linear-gradient(
to bottom,
#111c25 0,
#111c25 44px,
#263642 45px
);
}

html.site-dark-root .bank-chart polyline{
stroke:#77c2ff;
}

html.site-dark-root .bank-results div,
html.site-dark-root .commerce-checklist span{
background:#0c151d
}

html.site-dark-root .public-lab-badge,
html.site-dark-root .public-card-status,
html.site-dark-root .module-note{
color:#aebdca
}

html.site-dark-root .site-footer-line{
border-color:#293742;
}

html.site-dark-root .site-footer a,
html.site-dark-root .navbar nav a,
html.site-dark-root .module-panel a{
color:#77c2ff;
}

/* Layout mobile */
@media(max-width:700px){
.navbar{
flex-wrap:nowrap;
padding:14px 16px;
}

.navbar-brand-group{
min-width:0;
white-space:nowrap;
overflow:hidden;
}

.navbar-brand,
.navbar-section{
font-size:14px;
white-space:nowrap;
}

.bank-calculator{grid-template-columns:1fr}
.bank-results,.commerce-checklist{grid-template-columns:1fr}

.navbar nav{
flex-shrink:0;
gap:10px;
}

.home{
padding-top:36px;
}

.home-links{
grid-template-columns:1fr;
}

.module-grid{
grid-template-columns:1fr;
}

.home-search div{
flex-direction:row;
}

.home-search button{
flex:0 0 auto;
padding:9.8px 12px;
font-size:14px;
}

.site-footer-top{
align-items:center;
gap:2px;
font-size:12px;
white-space:nowrap;
}

.site-footer-inner{padding-right:10px;padding-left:10px}
.site-footer-links{column-gap:9px;row-gap:6px;font-size:11px}
.site-footer-links a{white-space:nowrap}
.site-footer-legal{gap:3px;font-size:11px;white-space:nowrap}
.site-footer-legal span{margin:0}
.site-locale{
margin-left:auto;
gap:2px;
font-size:11px;
}
.site-locale img{width:14px;height:14px}
.site-locale select{max-width:72px;padding:0}

.site-footer-meta{
font-size:11px;
line-height:1.3;
}

}