.elementor-5922 .elementor-element.elementor-element-4fc7e61{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-5922 .elementor-element.elementor-element-e1bb47e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;}.elementor-5922 .elementor-element.elementor-element-418de73.elementor-element{--align-self:stretch;}.elementor-5922 .elementor-element.elementor-element-3c35552{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:stretch;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-5922 .elementor-element.elementor-element-3c35552.e-con{--align-self:flex-start;}.elementor-5922 .elementor-element.elementor-element-1496c99{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;}.elementor-5922 .elementor-element.elementor-element-e5b9d3d{--display:flex;}.elementor-5922 .elementor-element.elementor-element-fc68b05{--spacer-size:50px;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(min-width:768px){.elementor-5922 .elementor-element.elementor-element-e1bb47e{--width:25%;}.elementor-5922 .elementor-element.elementor-element-3c35552{--width:50%;}.elementor-5922 .elementor-element.elementor-element-1496c99{--width:25%;}}/* Start custom CSS for html, class: .elementor-element-af91bf0 */* {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      padding: 20px;
      color: #1f2937;
    }

    /* Card */
    .container {
      max-width: 98%;
      margin: 0 auto;
      border-radius: 12px;
      padding: 20px;
    }
    h1 {
      margin: 0 0 16px;
      text-align: center;
      font-size: 2.7rem;
      color: #111827;
    }
    p.subtitle {
      margin: 0 0 20px;
      text-align: center;
      color: #6b7280;
      font-size: 1.5rem;
    }

    /* Form */
    form {
      display: grid;
      gap: 14px;
    }
    .form-group {
      display: grid;
      gap: 6px;
    }
    label {
      font-weight: 600;
      color: #374151;
    }

    .input-wrap {
      position: relative;
    }
    .input-wrap input,
    .input-wrap select {
      width: 100%;
      padding: 12px 12px;
      font-size: 1rem;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      background: #fff;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
      appearance: none;
    }
    .input-wrap input:focus,
    .input-wrap select:focus {
      outline: none;
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
    }
    .suffix {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: #6b7280;
      font-size: 0.9rem;
      pointer-events: none;
    }

    .actions {
      margin-top: 6px;
    }
    button {
      width: 100%;
      padding: 12px 14px;
      font-size: 1.8rem;
      font-weight: 700;
      color: #ffffff;
      background: #3b82f6;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    button:hover {
      background: #2563eb;
    }

    /* Alerts */
    .alert {
      margin-top: 14px;
      padding: 12px;
      border-radius: 8px;
      font-size: 0.95rem;
      text-align: center;
    }
    .alert.error {
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #b91c1c;
    }
    .alert.success {
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      color: #065f46;
    }

    /* Result panel */
    .result {
      margin-top: 16px;
      padding: 16px;
      border-radius: 10px;
      background: #f9fafb;
      border: 1px solid #e5e7eb;
    }
    .result .bmi {
      font-size: 2rem;
      font-weight: 800;
      color: #111827;
      text-align: center;
      margin: 0 0 8px;
    }
    .result .category {
      text-align: center;
      font-weight: 700;
      margin: 0 0 14px;
    }

    /* Gauge bar */
    .gauge {
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(
        90deg,
        #60a5fa 0 25%,   /* Underweight */
        #34d399 25% 50%, /* Normal */
        #f59e0b 50% 75%, /* Overweight */
        #ef4444 75% 100% /* Obesity */
      );
      position: relative;
      margin-top: 10px;
    }
    .needle {
      position: absolute;
      top: -4px;
      width: 2px;
      height: 18px;
      background: #111827;
      border-radius: 1px;
      transform: translateX(-1px);
    }
    .gauge-labels {
      display: flex;
      justify-content: space-between;
      font-size: 0.75rem;
      color: #6b7280;
      margin-top: 6px;
    }

    /* Table */
    .table {
      width: 100%;
      margin-top: 14px;
      border-collapse: collapse;
      font-size: 0.9rem;
    }
    .table th,
    .table td {
      border: 1px solid #e5e7eb;
      padding: 8px;
      text-align: left;
    }
    .table th {
      background: #f3f4f6;
      font-weight: 700;
    }/* End custom CSS */