.metabolism-form {
    max-width: 420px;
    margin: 20px auto;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    font-family: 'Inter', system-ui, sans-serif;
}
.metabolism-form, .metabolism-form * { box-sizing: border-box; }
.metabolism-form .mf-field {
    margin-bottom: 15px;
}
.metabolism-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #18509C;
}
.metabolism-form input {
    width: 100%;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
}
.metabolism-form button {
    background: #18509C;
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: background .3s;
    min-height: 44px; /* mobile tap target */
}
.metabolism-form button:hover {
    background: #0d3a73;
}
.metabolism-svg {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* Custom date inputs (DD / MM / YYYY) */
.metabolism-form .custom-date{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.metabolism-form .custom-date input{width:auto;flex:0 0 auto;text-align:center;padding-inline:8px}
.metabolism-form .custom-date #birth-day,
.metabolism-form .custom-date #birth-month{width:clamp(44px,18vw,64px)}
.metabolism-form .custom-date #birth-year{width:clamp(68px,28vw,110px)}
@media (max-width: 360px){
  .metabolism-form .custom-date{gap:4px}
  .metabolism-form .custom-date #birth-day,
  .metabolism-form .custom-date #birth-month{width:clamp(42px,16vw,58px)}
  .metabolism-form .custom-date #birth-year{width:clamp(62px,26vw,92px)}
}

/* Mobile tweaks */
@media (max-width: 420px){
  .metabolism-form{padding:14px;margin:16px auto}
  .metabolism-form .mf-title{font-size:18px;line-height:1.25}
  .result-box{padding:12px}
}

/* Results layout */
.metabolism-result{display:flex;justify-content:center;margin:24px 0}
.metabolism-wrapper{position:relative;max-width:460px;width:100%}
.metabolism-bg{display:block;width:100%;height:auto}
.metabolism-wrapper .num{position:absolute;font-weight:800;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.15)}
.metabolism-wrapper .num.special{top:8%;left:50%;transform:translateX(-50%);color:#d32f2f;font-size:clamp(22px,9vw,44px)}
.metabolism-wrapper .num.date{top:54%;left:20%;transform:translate(-50%,-50%);color:#2e7d32;font-size:clamp(22px,9vw,44px)}
.metabolism-wrapper .num.general{top:54%;left:80%;transform:translate(-50%,-50%);color:#1976d2;font-size:clamp(22px,9vw,44px)}
.metabolism-wrapper .num.center{top:44%;left:50%;transform:translate(-50%,-50%);color:#000;font-size:clamp(26px,10vw,54px)}

/* Results box under the image */
.result-box{max-width:460px;margin:16px auto;padding:16px;background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.06);font-family:'Inter',system-ui,sans-serif}
.result-box h4{margin:0 0 10px;font-size:18px;color:#111827}
.result-values{display:grid;gap:8px}