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

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

/* Card */
.hmd-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,.07)}

/* Header */
.hmd-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}
.hmd-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}
.hmd-ch-title{font-size:17px;font-weight:800;color:#1E2B22;margin-bottom:2px}
.hmd-ch-sub{font-size:13px;color:#4C7A5E;font-weight:500}

/* Mode toggle bar */
.hmd-mode-bar{display:grid;grid-template-columns:1fr 1fr;border-bottom:1.5px solid #C9E3CE}
.hmd-mode-btn{padding:12px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;border:none;background:#F5FAF6;color:#4C7A5E;cursor:pointer;transition:all .18s;letter-spacing:.2px}
.hmd-mode-btn:first-child{border-right:1px solid #C9E3CE}
.hmd-mode-btn:hover{background:#EFF8F1;color:#2E8B57}
.hmd-mode-on{background:#2E8B57!important;color:#fff!important}

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

/* HH:MM:SS trio input */
.hmd-label-row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:0;margin-bottom:6px}
.hmd-label-row .hmd-lbl{text-align:center}
.hmd-label-row .hmd-lbl:first-child{text-align:left}
.hmd-trio{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;background:#F5FAF6;border:2px solid #C9E3CE;border-radius:14px;overflow:hidden;margin-bottom:14px;transition:border-color .2s}
.hmd-trio:focus-within{border-color:#2E8B57}
.hmd-sep{font-size:24px;font-weight:700;color:#A9CCB4;padding:0 4px;font-family:'Fira Code',monospace;flex-shrink:0}
.hmd-ni{width:100%;background:transparent;border:none;outline:none;color:#1E2B22;font-family:'Fira Code',monospace;font-size:26px;font-weight:600;padding:13px 10px;text-align:center;min-width:0;-moz-appearance:textfield}
.hmd-ni::-webkit-outer-spin-button,.hmd-ni::-webkit-inner-spin-button{-webkit-appearance:none}
.hmd-ni::placeholder{color:#A9CCB4;font-size:18px}

/* Single decimal input */
.hmd-irow{display:flex;align-items:center;background:#F5FAF6;border:2px solid #C9E3CE;border-radius:14px;overflow:hidden;margin-bottom:14px;transition:border-color .2s}
.hmd-irow:focus-within{border-color:#2E8B57}
.hmd-irow.hmd-err{border-color:#E24B4A}
.hmd-ni-full{flex:1;text-align:left;font-size:30px;font-weight:800;padding:13px 16px}
.hmd-unit{padding:13px 16px 13px 0;font-size:15px;font-weight:700;color:#2E8B57;white-space:nowrap}

/* Controls */
.hmd-ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.hmd-pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hmd-plbl{font-size:11px;color:#4C7A5E;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-right:2px}
.hmd-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}
.hmd-pill:hover{border-color:#2E8B57;color:#2E8B57}
.hmd-pon{background:#2E8B57!important;border-color:#2E8B57!important;color:#fff!important}

/* Button */
.hmd-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:4px;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}
.hmd-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.hmd-btn:active{transform:none}

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

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

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

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

/* Quick pills */
.hmd-qw{border-top:1.5px solid #C9E3CE;padding:14px 26px 20px;background:#F5FAF6}
.hmd-ql{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#4C7A5E;margin-bottom:11px;font-weight:700}
.hmd-qg{display:flex;flex-wrap:wrap;gap:7px}
.hmd-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}
.hmd-qb:hover{border-color:#2E8B57;color:#2E8B57;background:#EFF8F1}
.hmd-qb.hmd-qactive{background:#2E8B57;border-color:#2E8B57;color:#fff}

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

/* Table */
.hmd-tw{overflow-x:auto}
.hmd-w table{width:100%;border-collapse:collapse;font-size:13px}
.hmd-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}
.hmd-w tbody tr{border-bottom:1px solid #DCEFE1;cursor:pointer;transition:background .15s}
.hmd-w tbody tr:last-child{border-bottom:none}
.hmd-w tbody tr:hover{background:#EFF8F1}
.hmd-w td{padding:9px 16px;vertical-align:middle;color:#1E2B22;font-size:13px}
.hmd-w td:first-child{font-family:'Fira Code',monospace;font-weight:600;color:#2E8B57;white-space:nowrap}
.hmd-w td:nth-child(2){font-family:'Fira Code',monospace;font-weight:600;color:#1E2B22}
.hmd-w td:nth-child(3){color:#4C7A5E}
.hmd-w td:last-child{color:#A9CCB4;font-size:12px}

/* FAQ */
.hmd-faq-wrap{padding:12px 18px 18px}
.hmd-fi{border:1.5px solid #C9E3CE;border-radius:12px;overflow:hidden;margin-bottom:8px;background:#F5FAF6}
.hmd-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}
.hmd-fq:hover{background:#EFF8F1}
.hmd-fico{color:#2E8B57;font-size:20px;font-weight:400;flex-shrink:0;transition:transform .2s;font-family:sans-serif}
.hmd-fi.hmd-open .hmd-fico{transform:rotate(45deg)}
.hmd-fa{display:none;padding:11px 16px 15px;font-size:13px;color:#2F4A3A;line-height:1.7;border-top:1px solid #C9E3CE;font-weight:500}
.hmd-fi.hmd-open .hmd-fa{display:block}

/* Footer strip */
.hmd-footer{text-align:center;font-size:12px;color:#A9CCB4;padding:14px 20px;border-top:1.5px solid #C9E3CE;background:#F5FAF6;border-radius:0 0 20px 20px;margin-top:-24px;margin-bottom:24px}
.hmd-flink{color:#2E8B57;text-decoration:none;font-weight:700}
.hmd-flink:hover{text-decoration:underline}

/* Responsive */
@media(max-width:480px){
  .hmd-ch{padding:18px 18px 14px}
  .hmd-cb{padding:18px 18px 16px}
  .hmd-res{padding:18px}
  .hmd-stats{grid-template-columns:repeat(2,1fr)}
  .hmd-ni{font-size:20px;padding:11px 6px}
  .hmd-sep{font-size:18px;padding:0 2px}
}

/* ── Trio: label above each input ── */
.hmd-trio-wrap{display:flex;align-items:flex-end;gap:0;margin-bottom:14px}
.hmd-trio-col{display:flex;flex-direction:column;flex:1;min-width:0}
.hmd-trio-col .hmd-lbl{margin-bottom:6px;text-align:center}
.hmd-trio-input{background:#F5FAF6;border:2px solid #C9E3CE;border-radius:14px;overflow:hidden;transition:border-color .2s}
.hmd-trio-input:focus-within{border-color:#2E8B57}
.hmd-trio-col .hmd-ni{width:100%;text-align:center;padding:13px 8px;font-size:26px}
.hmd-trio-wrap .hmd-sep{font-size:28px;font-weight:700;color:#A9CCB4;padding:0 6px;font-family:'Fira Code',monospace;flex-shrink:0;padding-bottom:14px;line-height:1}

/* override old .hmd-trio if any remnant */
.hmd-trio{display:none}
.hmd-label-row{display:none}