@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Fira+Code:wght@500;600&display=swap');

.hfn-w *{box-sizing:border-box;margin:0;padding:0}
.hfn-w{font-family:'Nunito',sans-serif;max-width:680px;margin:0 auto;padding:1.5rem 0 2.5rem;background:transparent}
.hfn-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ── Card ── */
.hfn-card{background:#fff;border:1.5px solid #C9E3CE;border-radius:20px;overflow:hidden;margin-bottom:24px;box-shadow:0 2px 14px rgba(34,112,74,.06)}

/* ── Header ── */
.hfn-ch{background:linear-gradient(135deg,#EFF8F1 0%,#F1F8F2 100%);padding:22px 26px 18px;border-bottom:1.5px solid #C9E3CE;display:flex;align-items:center;gap:14px}
.hfn-ch-icon{width:46px;height:46px;background:linear-gradient(135deg,#2E8B57,#22704A);border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hfn-ch-title{font-size:18px;font-weight:800;color:#1E2B22;margin-bottom:2px}
.hfn-ch-sub{font-size:13px;color:#4C7A5E;font-weight:500}

/* ── Body ── */
.hfn-cb{padding:24px 26px 20px}
.hfn-lbl{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:#4C7A5E;margin-bottom:7px}

/* ── Main input row ── */
.hfn-irow{display:flex;align-items:center;background:#F5FAF6;border:2px solid #C9E3CE;border-radius:14px;overflow:hidden;margin-bottom:14px;transition:border-color .2s}
.hfn-irow:focus-within{border-color:#2E8B57}
.hfn-irow.hfn-err{border-color:#E24B4A}
.hfn-ni{flex:1;background:transparent;border:none;outline:none;color:#1E2B22;font-family:'Nunito',sans-serif;font-size:30px;font-weight:800;padding:13px 16px;min-width:0;-moz-appearance:textfield}
.hfn-ni::-webkit-outer-spin-button,.hfn-ni::-webkit-inner-spin-button{-webkit-appearance:none}
.hfn-ni::placeholder{color:#A9CCB4;font-size:18px;font-weight:600}
.hfn-unit{padding:13px 16px 13px 0;font-size:15px;font-weight:700;color:#2E8B57;white-space:nowrap}

/* ── Minutes / seconds row ── */
.hfn-hmrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.hfn-nis{width:100%;background:#F5FAF6;border:2px solid #C9E3CE;border-radius:12px;color:#1E2B22;font-family:'Nunito',sans-serif;font-size:15px;font-weight:600;padding:9px 13px;outline:none;transition:border-color .2s;-moz-appearance:textfield}
.hfn-nis::-webkit-outer-spin-button,.hfn-nis::-webkit-inner-spin-button{-webkit-appearance:none}
.hfn-nis:focus{border-color:#2E8B57}
.hfn-nis::placeholder{color:#A9CCB4}

/* ── Controls row ── */
.hfn-ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.hfn-pills{display:flex;align-items:center;gap:6px}
.hfn-plbl{font-size:11px;color:#4C7A5E;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-right:2px}
.hfn-pill{padding:6px 14px;font-size:12px;font-weight:700;font-family:'Nunito',sans-serif;border-radius:100px;border:2px solid #C9E3CE;background:#fff;color:#4C7A5E;cursor:pointer;transition:all .18s}
.hfn-pill:hover{border-color:#2E8B57;color:#2E8B57}
.hfn-pon{background:#2E8B57!important;border-color:#2E8B57!important;color:#fff!important}

/* ── Toggle switch ── */
.hfn-trow{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;margin-left:auto}
.hfn-sw{width:40px;height:22px;background:#C9E3CE;border-radius:100px;position:relative;transition:background .2s;flex-shrink:0}
.hfn-sw::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:all .2s}
.hfn-sw.hfn-on{background:#2E8B57}
.hfn-sw.hfn-on::after{left:21px}
.hfn-tlbl{font-size:13px;color:#4C7A5E;font-weight:600}

/* ── Custom date input ── */
.hfn-cdw{display:none;margin-bottom:14px}
.hfn-cdw.hfn-open{display:block}
.hfn-df{width:100%;background:#F5FAF6;border:2px solid #C9E3CE;border-radius:12px;color:#1E2B22;font-family:'Nunito',sans-serif;font-size:14px;font-weight:600;padding:10px 13px;outline:none;transition:border-color .2s}
.hfn-df:focus{border-color:#2E8B57}

/* ── Calculate button ── */
.hfn-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:6px;padding:15px;background:linear-gradient(135deg,#2E8B57,#22704A);color:#fff;font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;border:none;border-radius:14px;cursor:pointer;transition:all .2s;letter-spacing:.2px}
.hfn-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.hfn-btn:active{transform:none}

/* ── Result panel ── */
.hfn-res{display:none;border-top:1.5px solid #C9E3CE;padding:22px 26px;animation:hfnsu .28s ease;background:#F5FAF6}
.hfn-res.hfn-open{display:block}
@keyframes hfnsu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.hfn-rsent{font-size:13px;color:#4C7A5E;margin-bottom:14px;font-weight:600}
.hfn-rsent strong{color:#2E8B57}

.hfn-disp{background:#EFF8F1;border:2px solid #C9E3CE;border-radius:16px;padding:22px 24px;margin-bottom:14px;position:relative;overflow:hidden;text-align:center}
.hfn-disp::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:#2E8B57;border-radius:2px 2px 0 0}
.hfn-dlbl{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#A9CCB4;margin-bottom:10px;font-weight:700}
.hfn-dtime{font-family:'Fira Code',monospace;font-size:34px;font-weight:600;color:#2E8B57;line-height:1;letter-spacing:1px;margin-bottom:6px}
.hfn-ddate{font-size:17px;color:#1E2B22;font-weight:700;margin-bottom:3px}
.hfn-dday{font-size:13px;color:#4C7A5E;font-weight:600;letter-spacing:.5px}

/* ── Stats grid ── */
.hfn-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hfn-stat{background:#fff;border:1.5px solid #C9E3CE;border-radius:12px;padding:12px 8px;text-align:center}
.hfn-sv{font-family:'Fira Code',monospace;font-size:15px;font-weight:600;color:#1E2B22;line-height:1.2}
.hfn-sk{font-size:10px;color:#4C7A5E;text-transform:uppercase;letter-spacing:.8px;margin-top:4px;font-weight:700}

/* ── Quick buttons ── */
.hfn-qw{border-top:1.5px solid #C9E3CE;padding:14px 26px 20px;background:#F5FAF6}
.hfn-ql{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#4C7A5E;margin-bottom:11px;font-weight:700}
.hfn-qg{display:flex;flex-wrap:wrap;gap:7px}
.hfn-qb{padding:6px 14px;font-size:12px;font-weight:700;font-family:'Nunito',sans-serif;border-radius:100px;border:2px solid #C9E3CE;background:#fff;color:#4C7A5E;cursor:pointer;transition:all .18s}
.hfn-qb:hover{border-color:#2E8B57;color:#2E8B57;background:#EFF8F1}

/* ── Section cards ── */
.hfn-sec{margin-bottom:28px;background:#fff;border:1.5px solid #C9E3CE;border-radius:20px;overflow:hidden}
.hfn-sh{padding:18px 22px 14px;border-bottom:1.5px solid #C9E3CE;background:#EFF8F1;display:flex;align-items:center;gap:10px}
.hfn-sh-dot{width:10px;height:10px;background:#2E8B57;border-radius:50%;flex-shrink:0}
.hfn-st{font-size:16px;font-weight:800;color:#1E2B22}
.hfn-ss{font-size:12px;color:#4C7A5E;font-weight:600;margin-top:1px}

/* ── Reference table ── */
.hfn-tw{overflow-x:auto}
.hfn-w table{width:100%;border-collapse:collapse;font-size:13px}
.hfn-w thead th{background:#F5FAF6;color:#4C7A5E;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:10px 16px;text-align:left;border-bottom:1.5px solid #C9E3CE;font-family:'Nunito',sans-serif}
.hfn-w tbody tr{border-bottom:1px solid #DCEFE1;cursor:pointer;transition:background .15s}
.hfn-w tbody tr:last-child{border-bottom:none}
.hfn-w tbody tr:hover{background:#EFF8F1}
.hfn-w td{padding:9px 16px;vertical-align:middle;color:#1E2B22;font-size:13px}
.hfn-w td:first-child{font-family:'Fira Code',monospace;font-weight:600;color:#2E8B57;white-space:nowrap}
.hfn-w td:nth-child(3){color:#4C7A5E}
.hfn-w td:last-child{color:#A9CCB4;font-family:'Fira Code',monospace;font-size:12px;text-align:right}

/* ── FAQ ── */
.hfn-faq-wrap{padding:12px 18px 18px}
.hfn-fi{border:1.5px solid #C9E3CE;border-radius:12px;overflow:hidden;margin-bottom:8px;background:#F5FAF6}
.hfn-fq{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;font-size:14px;font-weight:700;color:#1E2B22;cursor:pointer;user-select:none;transition:background .15s;border:none;background:transparent;width:100%;text-align:left;font-family:'Nunito',sans-serif}
.hfn-fq:hover{background:#EFF8F1}
.hfn-fico{color:#2E8B57;font-size:20px;font-weight:400;flex-shrink:0;transition:transform .2s;font-family:sans-serif}
.hfn-fi.hfn-open .hfn-fico{transform:rotate(45deg)}
.hfn-fa{display:none;padding:11px 16px 15px;font-size:13px;color:#2F4A3A;line-height:1.7;border-top:1px solid #C9E3CE;font-weight:500}
.hfn-fi.hfn-open .hfn-fa{display:block}

/* ── Responsive ── */
@media (max-width:480px){
  .hfn-ch{padding:18px 18px 14px}
  .hfn-cb{padding:18px 18px 16px}
  .hfn-res{padding:18px}
  .hfn-hmrow{grid-template-columns:1fr}
  .hfn-stats{grid-template-columns:repeat(2,1fr)}
}