.sgqc-wrap{
width: 100%;
margin: 18px 0 28px;
} .sgqc-box{
width: 100%;
border-radius: 18px;
background: #ffffff;
box-shadow: 0 10px 30px rgba(0,0,0,.10);
border: 1px solid rgba(0,0,0,.10);
overflow: hidden;
} .sgqc-head{
padding: 18px 18px 14px;
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0));
border-bottom: 1px solid rgba(0,0,0,.08);
}
.sgqc-kicker{
display:inline-block;
font-size: 12px;
font-weight: 800;
letter-spacing: .02em;
color: var(--sgqc-accent, #005689);
text-transform: uppercase;
margin-bottom: 6px;
}
.sgqc-title{
margin: 0 0 6px;
font-size: 20px;
line-height: 1.25;
font-weight: 900;
}
.sgqc-subtitle{
margin: 0;
font-size: 14px;
line-height: 1.4;
opacity: .88;
} .sgqc-grid{
display: grid;
grid-template-columns: 1.2fr 1fr 1fr 0.95fr;
gap: 12px;
padding: 14px 18px 18px;
}
@media (max-width: 980px){
.sgqc-grid{ grid-template-columns: 1fr; }
} .sgqc-card{
background: #ffffff;
border: 1px solid rgba(0,0,0,.10);
border-radius: 16px;
padding: 14px;
}
.sgqc-label{
font-size: 13px;
font-weight: 900;
margin-bottom: 10px;
}
.sgqc-options{
display:flex;
flex-wrap: wrap;
gap: 10px;
}
.sgqc-opt{
appearance: none;
border: 1px solid rgba(0,0,0,.14);
background: #f7f9fb;
border-radius: 999px;
padding: 10px 12px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
transition: transform .06s ease, background .12s ease, border-color .12s ease;
}
.sgqc-opt:hover{ transform: translateY(-1px); }
.sgqc-opt.is-active{
background: rgba(0,86,137,.10);
border-color: var(--sgqc-accent, #005689);
box-shadow: 0 8px 18px rgba(0,0,0,.10);
} .sgqc-custom{ margin-top: 12px; display:none; }
.sgqc-custom.is-open{ display:block; }
.sgqc-input{
width: 100%;
border: 1px solid rgba(0,0,0,.14);
background: #ffffff;
border-radius: 14px;
padding: 12px 12px;
font-size: 14px;
font-weight: 700;
} .sgqc-hint{
margin-top: 10px;
font-size: 12px;
line-height: 1.35;
opacity: .78;
} .sgqc-cta{
background: #ffffff;
border: 1px solid rgba(0,0,0,.10);
border-radius: 16px;
padding: 14px;
display:flex;
flex-direction:column;
justify-content:center;
gap: 10px;
}
.sgqc-btn{
width: 100%;
border-radius: 16px;
padding: 13px 14px;
font-size: 14px;
font-weight: 900;
cursor: pointer;
border: 1px solid rgba(0,0,0,.14);
background: #ffffff;
}
.sgqc-btn-primary{
background: var(--sgqc-accent, #005689);
border-color: var(--sgqc-accent, #005689);
color: #ffffff;
box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.sgqc-btn-primary:hover{ background: var(--sgqc-accent-dark, #00456e); border-color: var(--sgqc-accent-dark, #00456e); }
.sgqc-btn-secondary{
background: #f7f9fb;
font-weight: 900;
}
.sgqc-microcopy{
margin-top: 2px;
font-size: 12px;
text-align:center;
opacity: .78;
} .sgqc-wrap .sgqc-box{
max-width: 100%;
} .sgqc-microcopy{
display:flex;
flex-direction:column;
gap:4px;
}
.sgqc-compare-hint{
display:none;
font-size:12px;
opacity:.74;
}
.sgqc-btn-secondary:hover ~ .sgqc-microcopy .sgqc-compare-hint,
.sgqc-btn-secondary:focus ~ .sgqc-microcopy .sgqc-compare-hint,
.sgqc-btn-secondary:focus-visible ~ .sgqc-microcopy .sgqc-compare-hint{
display:block;
}.ssmr-wrap{width:100%; margin:18px 0 28px;}
.ssmr-box{
width:100%;
background:#fff;
border:1px solid rgba(0,0,0,.10);
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.10);
overflow:hidden;
}
.ssmr-head{
padding:18px 18px 14px;
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0));
border-bottom:1px solid rgba(0,0,0,.08);
}
.ssmr-title{margin:0 0 6px; font-size:18px; line-height:1.25; font-weight:900;}
.ssmr-sub{margin:0; font-size:14px; line-height:1.4; opacity:.88;}
.ssmr-grid{
display:grid;
grid-template-columns: 1fr 1fr 0.9fr;
gap:12px;
padding:14px 18px 18px;
}
@media (max-width: 980px){
.ssmr-grid{grid-template-columns:1fr;}
}
.ssmr-card{
background:#fff;
border:1px solid rgba(0,0,0,.10);
border-radius:16px;
padding:14px;
}
.ssmr-label{font-size:13px; font-weight:900; margin-bottom:10px;}
.ssmr-opts{display:flex; flex-wrap:wrap; gap:10px;}
.ssmr-opt{
border:1px solid rgba(0,0,0,.14);
background:#f7f9fb;
border-radius:999px;
padding:10px 12px;
font-size:13px;
font-weight:900;
cursor:pointer;
transition: transform .06s ease, background .12s ease, border-color .12s ease;
}
.ssmr-opt:hover{transform:translateY(-1px);}
.ssmr-opt.is-active{
background: rgba(0,86,137,.10);
border-color: var(--ssmr-accent, #005689);
box-shadow:0 8px 18px rgba(0,0,0,.10);
}
.ssmr-row{display:grid; grid-template-columns: 0.55fr 1fr; gap:10px;}
@media (max-width: 980px){ .ssmr-row{grid-template-columns:1fr;} }
.ssmr-field span{display:block; font-size:12px; font-weight:800; opacity:.8; margin-bottom:6px;}
.ssmr-months, .ssmr-monthly{
width:100%;
border:1px solid rgba(0,0,0,.14);
background:#fff;
border-radius:14px;
padding:12px 12px;
font-size:14px;
font-weight:800;
}
.ssmr-mini{
margin-top:12px;
font-size:12px;
opacity:.85;
display:flex;
justify-content:space-between;
gap:10px;
}
.ssmr-mini strong{font-size:14px; opacity:1;}
.ssmr-result{
background: #fff;
border:1px solid rgba(0,0,0,.10);
border-radius:16px;
padding:14px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:12px;
}
.ssmr-result-top{display:flex; flex-direction:column; gap:8px;}
.ssmr-pill{
display:inline-block;
width:max-content;
padding:6px 10px;
border-radius:999px;
background: rgba(0,86,137,.10);
color: var(--ssmr-accent, #005689);
font-size:12px;
font-weight:900;
}
.ssmr-sum{
font-size:26px;
font-weight:1000;
letter-spacing:-0.02em;
}
.ssmr-note{font-size:12px; opacity:.78; line-height:1.35;}
.ssmr-btn{
width:100%;
border-radius:16px;
padding:13px 14px;
font-size:14px;
font-weight:900;
cursor:pointer;
border:1px solid var(--ssmr-accent, #005689);
background: var(--ssmr-accent, #005689);
color:#fff;
box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.ssmr-btn:hover{background:var(--ssmr-accent-dark, #00456e); border-color:var(--ssmr-accent-dark, #00456e);}
.ssmr-micro{font-size:12px; text-align:center; opacity:.78;}