*{box-sizing:border-box;margin:0;padding:0;}


.wrap{max-width:680px;margin:0 auto;padding:12px 12px 48px;}
.page-title{font-size:20px;font-weight:500;color:#0f172a;margin-bottom:2px;}
.page-sub{font-size:12px;color:#64748b;margin-bottom:14px;}

.tab-nav{display:flex;background:#fff;border:2px solid #0369a1;border-radius:8px;overflow:hidden;margin-bottom:14px;}
.tb{flex:1;padding:10px 6px;border:none;cursor:pointer;font-size:12px;font-weight:500;text-align:center;line-height:1.3;transition:all .18s;background:#fff;color:#64748b;}
.tb:not(:last-child){border-right:2px solid #0369a1;}
.tb.active{background:#0369a1;color:#fff;}
.tb:not(.active):hover{background:#e0f2fe;color:#0369a1;}
.tp{display:none;}.tp.active{display:block;}

.card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:14px;margin-bottom:12px;}
.ct{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #f1f5f9;}

.f{margin-bottom:10px;}
.f label{display:block;font-size:12px;font-weight:500;color:#475569;margin-bottom:4px;}
.iw{position:relative;display:flex;align-items:center;}
.ip,.is{position:absolute;font-size:13px;font-weight:500;color:#94a3b8;pointer-events:none;z-index:1;}
.ip{left:10px;}.is{right:10px;}
.ci{width:100%;padding:10px 12px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f8fafc;font-family:inherit;font-size:14px;font-weight:500;color:#0f172a;-moz-appearance:textfield;appearance:textfield;transition:border-color .15s;}
.ci::-webkit-inner-spin-button,.ci::-webkit-outer-spin-button{-webkit-appearance:none;}
.ci:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.12);background:#fff;}
.has-p .ci{padding-left:24px;}.has-s .ci{padding-right:28px;}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:8px;}

.ol{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:#64748b;margin:12px 0 6px;}
.rg{display:flex;flex-direction:column;gap:4px;}
.ri{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:#475569;padding:4px 0;}
.ri input[type=radio]{accent-color:#0ea5e9;width:15px;height:15px;flex-shrink:0;cursor:pointer;}
.ri.sel{color:#0f172a;font-weight:500;}
.ef{margin:6px 0 4px 24px;display:flex;flex-direction:column;gap:6px;}
.efr{display:flex;align-items:center;gap:8px;}
.efr .iw{flex:1;}
.efr span{font-size:12px;color:#94a3b8;white-space:nowrap;}

.btn-row{display:flex;gap:8px;margin-top:14px;}
.btn-calc{flex:1;padding:12px;background:#0369a1;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s,transform .1s;}
.btn-calc:hover{background:#0284c7;}
.btn-calc:active{transform:scale(.98);}
.btn-clr{padding:12px 16px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s;}
.btn-clr:hover{border-color:#94a3b8;color:#0f172a;}

.rh{background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:12px 14px;margin-bottom:10px;}
.rh h3{font-size:15px;font-weight:500;color:#1d4ed8;margin-bottom:4px;}
.rh p{font-size:12px;color:#3b5bdb;line-height:1.5;}
.rh strong{color:#1e40af;}

.sg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
.sc{border-radius:10px;padding:12px;color:#fff;text-align:center;}
.sc.savings{background:#1d4ed8;}
.sc.time{background:#0f766e;}
.sl{font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;opacity:.85;margin-bottom:4px;}
.sv{font-size:18px;font-weight:500;line-height:1.1;margin-bottom:2px;}
.ss{font-size:10px;opacity:.75;}

.bar-cmp{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;margin-bottom:10px;}
.br2{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px;}
.br2:last-child{margin-bottom:0;}
.blw{width:72px;flex-shrink:0;color:#64748b;font-weight:500;}
.bt{flex:1;height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden;}
.bf{height:100%;border-radius:99px;transition:width .6s ease;}
.bf.orig{background:#94a3b8;}
.bf.nw{background:#0ea5e9;}
.ba{min-width:60px;text-align:right;font-weight:500;color:#0f172a;font-size:12px;}
.bpct{font-size:11px;color:#16a34a;font-weight:500;min-width:60px;text-align:right;}

.ctbl{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:10px;}
.ctbl th{background:#f1f5f9;font-weight:500;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#94a3b8;padding:6px 8px;text-align:right;border-bottom:1px solid #e2e8f0;}
.ctbl th:first-child{text-align:left;}
.ctbl td{padding:6px 8px;border-bottom:1px solid #f1f5f9;text-align:right;color:#475569;}
.ctbl td:first-child{text-align:left;font-weight:500;color:#0f172a;}
.ctbl .hl{color:#1d4ed8;font-weight:500;}
.ctbl tbody tr:last-child td{border-bottom:none;}

.cw{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;margin-bottom:10px; width:320px;}
.ctit{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;margin-bottom:8px;}
.cwrap{position:relative;height:130px;}

.atb{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#0369a1;cursor:pointer;border:none;background:none;padding:4px 0;margin-bottom:6px;}
.atb:hover{color:#0284c7;}
.arr{transition:transform .18s;display:inline-block;font-style:normal;}
.atb.open .arr{transform:rotate(90deg);}
.as{display:none;}.as.show{display:block;}

.atw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #e2e8f0;border-radius:10px;max-height:500px;overflow-y:auto; width: 320px;}
.at{width:100%;border-collapse:collapse;font-size:11px;table-layout:auto;}
.at thead th{position:sticky;top:0;background:#f1f5f9;font-weight:500;font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:#64748b;padding:6px 8px;text-align:right;border-bottom:1px solid #e2e8f0;white-space:nowrap;}
.at thead th:first-child{text-align:left;}
.at tbody td{padding:5px 8px;text-align:right;color:#475569;border-bottom:1px solid #f1f5f9;white-space:nowrap;}
.at tbody td:first-child{text-align:left;color:#0f172a;font-weight:500;}
.at tbody tr:hover{background:#f8fafc;}
.nv{color:#1d4ed8;font-weight:500;}

.hint{font-size:11px;color:#94a3b8;text-align:center;padding:4px 0 2px;}
@media (max-width: 480px) {
  .wrap {
    padding: 8px 10px 28px;
  }
  
  .page-title {
    font-size: 16px;
  }
  
  .page-sub {
    font-size: 11px;
    margin-bottom: 12px;
  }
  
  .tb {
    padding: 7px 3px;
    font-size: 10px;
  }
  
  .card {
    padding: 10px;
    border-radius: 10px;
  }
  
  .ct {
    font-size: 9px;
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  
  .f label {
    font-size: 11px;
  }
  
  .ci {
    padding: 8px 10px;
    font-size: 13px;
  }
  
  .has-p .ci {
    padding-left: 22px;
  }
  
  .has-s .ci {
    padding-right: 26px;
  }
  
  .ip, .is {
    font-size: 12px;
  }
  
  .ri {
    font-size: 12px;
    gap: 6px;
  }
  
  .ef {
    margin-left: 20px;
  }
  
  .efr span {
    font-size: 10px;
  }
  
  .btn-calc,
  .btn-clr {
    padding: 10px;
    font-size: 13px;
  }
  
  .rh h3 {
    font-size: 13px;
  }
  
  .sl {
    font-size: 9px;
  }
  
  .sv {
    font-size: 15px;
  }
  
  .ss {
    font-size: 9px;
  }
  
  .blw {
    width: 60px;
    font-size: 10px;
  }
  
  .bt {
    height: 6px;
  }
  
  .ba {
    min-width: 45px;
    font-size: 10px;
  }
  
  .bpct {
    min-width: 45px;
    font-size: 9px;
  }
  
  .ctbl {
    font-size: 10px;
  }
  
  .ctbl th,
  .ctbl td {
    padding: 4px 5px;
  }
  
  .cw {
    padding: 8px 10px;
  }
  
  .ctit {
    font-size: 9px;
  }
  
  .cwrap {
    height: 110px;
  }
  
  .atb {
    font-size: 11px;
  }
  
  .at thead th,
  .at tbody td {
    padding: 4px 5px;
    font-size: 9px;
  }
  
  .hint {
    font-size: 9px;
    padding: 3px 0 1px;
  }
.calc-widget-section {
    margin-bottom: var(--sp-8);

}
}