/* ---- base ---- */
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 Arial,Helvetica,sans-serif;color:#222;background:#fff}
a{color:#0b4a75;text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:26px;margin:18px 0 10px;font-weight:bold}
h2{font-size:20px;margin:28px 0 8px}
h3{font-size:17px;margin:20px 0 6px}
p{margin:10px 0}
ul,ol{margin:10px 0;padding-left:26px}
li{margin:6px 0}

/* ---- header ---- */
.topbar{background:#fff;border-bottom:1px solid #dbe7f0}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.logo{display:flex;align-items:center;gap:10px;color:#0b4a75;font-size:22px;font-weight:bold;letter-spacing:-.3px}
.logo:hover{text-decoration:none}
.logomark{display:block;flex:none}
.logo b{color:#2b8fd6;font-weight:bold}
.topnav a{color:#5b7c99;margin-left:18px;font-size:14px}
.navbar{background:#eaf3fa}
.navbar .wrap{display:flex;justify-content:center;gap:38px;padding:0 16px;flex-wrap:wrap}
.navbar a{color:#3d6180;padding:16px 6px;font-size:18px;font-weight:bold;border-bottom:4px solid transparent}
.navbar a:hover{color:#0b4a75;border-bottom-color:#b3d0e6;text-decoration:none}
.navbar a.on{color:#0b4a75;border-bottom-color:#2b8fd6;text-decoration:none}
@media(max-width:640px){.navbar .wrap{gap:18px}.navbar a{font-size:16px;padding:13px 4px}}

/* ---- layout ---- */
.wrap{max-width:1100px;margin:0 auto}
.cols{display:flex;gap:28px;padding:0 16px 40px}
main{flex:1;min-width:0}
aside{width:260px;flex:none;padding-top:18px}
.crumb{font-size:13px;color:#666;padding:10px 16px 0}
.crumb a{color:#666}

/* ---- calculator panel ---- */
.calcbox{background:#eaf3fa;border:1px solid #cfe2f0;padding:16px 18px;margin:12px 0}
.calcbox .lead{margin:0 0 12px;font-size:14px;color:#334}
.unit-tabs{margin-bottom:12px}
.unit-tabs button{background:#fff;border:1px solid #cfe2f0;padding:5px 14px;font-size:14px;cursor:pointer;margin-right:-1px}
.unit-tabs button.on{background:#0b4a75;color:#fff;border-color:#0b4a75}
.row{display:flex;align-items:center;margin:7px 0;gap:8px}
.row label{width:190px;flex:none;font-size:15px;text-align:right}
.row .suffix{font-size:14px;color:#555}
input[type=text],input[type=number],select{border:1px solid #a9c8bb;padding:5px 7px;font-size:15px;font-family:inherit;width:130px}
input:focus,select:focus{outline:2px solid #0b4a75;outline-offset:-1px}
.btns{margin:14px 0 2px;padding-left:198px}
.btns button{font-size:15px;padding:6px 22px;cursor:pointer;border:1px solid #96b6a8;background:#fff}
.btns button.primary{background:#0b4a75;color:#fff;border-color:#0b4a75;font-weight:bold}
.hint{font-size:13px;color:#555;margin-top:10px}
.fieldset-title{font-weight:bold;font-size:15px;margin:14px 0 4px;padding-left:8px;border-left:4px solid #0b4a75}
.toggle-more{background:none;border:none;color:#0b4a75;cursor:pointer;font-size:14px;padding:6px 0 0 198px}

/* ---- results ---- */
.result{border:1px solid #cfe2f0;margin:16px 0}
.result h2{margin:0;background:#0b4a75;color:#fff;font-size:17px;padding:8px 14px}
.result .body{padding:14px}
.big{font-size:30px;font-weight:bold;color:#0b4a75;margin:4px 0 14px}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{border:1px solid #d6e6de;padding:5px 8px;text-align:right}
th{background:#eaf5f0;font-weight:bold}
td:first-child,th:first-child{text-align:left}
tr.total td{font-weight:bold;background:#f1f8f5}
.amort-tabs{margin:10px 0}
.amort-tabs button{background:#fff;border:1px solid #cfe2f0;padding:5px 14px;cursor:pointer;font-size:14px;margin-right:-1px}
.amort-tabs button.on{background:#0b4a75;color:#fff;border-color:#0b4a75}
.scroll{max-height:520px;overflow:auto;border:1px solid #d6e6de}
.scroll table{border:none}
.scroll th{position:sticky;top:0}
.legend{font-size:13px;margin-top:8px;display:flex;flex-wrap:wrap;gap:14px}
.legend i{display:inline-block;width:11px;height:11px;margin-right:5px}
.charts{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.charts>div{flex:1;min-width:260px}

/* ---- content ---- */
.content{font-size:16px}
.content table{margin:14px 0}
.err{color:#b00;font-size:14px;margin-top:8px}

/* ---- sidebar ---- */
aside .box{border:1px solid #dae9e2;margin-bottom:18px}
aside .box h3{margin:0;background:#eaf5f0;padding:7px 11px;font-size:15px;border-bottom:1px solid #dae9e2}
aside .box ul{list-style:none;margin:0;padding:8px 11px;font-size:14px}
aside .box li{margin:4px 0}
.searchbox{display:flex;padding:8px 11px}
.searchbox input{flex:1;width:auto}

/* ---- footer ---- */
footer{background:#f2f7f4;border-top:1px solid #dae9e2;padding:18px 16px;font-size:13px;color:#555;text-align:center}
footer a{color:#555;margin:0 6px}

/* ---- home ---- */
.homegrid{display:flex;flex-wrap:wrap;gap:18px;padding:0 16px 30px}
.homecat{flex:1 1 240px;border:1px solid #dae9e2}
.homecat h2{margin:0;background:#0b4a75;color:#fff;font-size:16px;padding:8px 12px}
.homecat ul{list-style:none;margin:0;padding:10px 12px;font-size:15px}
.homecat li{margin:5px 0}

@media(max-width:860px){
  .cols{flex-direction:column}
  aside{width:auto}
  .row{flex-wrap:wrap}
  .row label{width:100%;text-align:left}
  .btns,.toggle-more{padding-left:0}
}

/* ---- hero + search ---- */
.hero{padding:22px 16px 6px}
.hero h1{margin:0 0 8px;font-size:30px}
.hero p{max-width:760px;color:#334}
.hero-search{display:flex;margin:16px 0 10px;max-width:620px;position:relative}
.hero-search input{flex:1;width:auto;font-size:16px;padding:9px 12px;border:1px solid #a9c8bb}
.hero-search button{font-size:16px;padding:9px 22px;background:#0b4a75;color:#fff;border:1px solid #0b4a75;cursor:pointer}
.sugg{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #a9c8bb;border-top:none;z-index:50;max-height:340px;overflow:auto;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.sugg a{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid #eaf2ee;font-size:15px;color:#123}
.sugg a:hover{background:#eaf5f0;text-decoration:none}
.sugg a span{color:#778;font-size:13px;white-space:nowrap}
.homecat h2 a{color:#fff}

/* ---- multi-form pages ---- */
.inline-form{font-size:17px;line-height:2.4}
.inline-form input{width:90px;margin:0 4px}
.inline-form select{margin:0 4px}
.inline-result{margin-top:10px;font-size:17px;font-weight:bold;color:#083655}
.inline-result .note{display:block;font-size:14px;font-weight:normal;color:#445;margin-top:4px}
.calcbox h2{margin-top:0}

/* ---- scientific calculator pad ---- */
.calcdisp{background:#fff;border:1px solid #a9c8bb;padding:10px 12px;margin-bottom:10px}
.calcdisp .expr{font:19px ui-monospace,Menlo,Consolas,monospace;min-height:26px;word-break:break-all;color:#083655}
.calcdisp .ansline{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border-top:1px solid #dae9e2;margin-top:6px;padding-top:6px;font-size:13px;color:#667}
.calcdisp #dans{font-size:20px;font-weight:bold;color:#0b4a75;margin-left:auto;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.calcdisp #dmem{font-weight:bold;color:#c9542f;width:14px}
.keys{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;max-width:470px}
.keys .k{padding:11px 4px;font-size:15px;border:1px solid #a9c8bb;background:#fff;cursor:pointer;border-radius:3px}
.keys .k:hover{background:#eaf3fa}
.keys .k:active{background:#d9ede4}
.keys .k-n{background:#f7fbf9;font-weight:bold;font-size:17px}
.keys .k-op,.keys .k-p{background:#eaf5f0}
.keys .k-f,.keys .k-c,.keys .k-mode,.keys .k-mem{font-size:14px;color:#083655}
.keys .k-eq{background:#0b4a75;color:#fff;border-color:#0b4a75;font-weight:bold;font-size:18px}
.keys .k-clear,.keys .k-back{background:#f3e6e2;color:#8a3b22}
@media(max-width:520px){.keys .k{padding:9px 2px;font-size:13px}}