.whr-page,
    .whr-page *,
    .whr-page *::before,
    .whr-page *::after {
      box-sizing: border-box
    }

    .whr-page {
      width: auto;
      max-width: calc(100vw - var(--sidebar-width));
      padding: 0;
      overflow-x: hidden;
      background: var(--bg-primary);
      min-height: 100vh
    }

    #wrapper {
      width: 100%
    }

    .whr-shell {
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 20px 110px
    }

    .whr-hero {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin: 0 0 24px;
      padding: 0 20px
    }

    .whr-hero-copy h2 {
      margin: 0;
      font-size: clamp(34px, 4.4vw, 56px);
      line-height: 1.02;
      letter-spacing: -.05em;
      color: #f5fbff
    }

    .whr-hero-copy p {
      margin: 10px 0 0;
      max-width: 760px;
      color: #90a5bb;
      font-size: 20px;
      line-height: 1.55
    }

    .whr-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 16px;
      border: 1px solid rgba(95, 176, 228, .16);
      background: rgba(95, 176, 228, .08);
      color: #9ad5ff;
      font-size: 14px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      white-space: nowrap
    }

    .whr-layout,
    .whr-sidebar-column,
    .whr-results-column,
    .result-grid,
    .result-meta,
    .progress-footer,
    .range-table {
      min-width: 0
    }

    .whr-layout {
      display: grid;
      grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
      gap: 28px;
      align-items: start
    }

    .whr-sidebar-column,
    .whr-results-column {
      display: grid;
      gap: 22px
    }

    .whr-card {
      background: linear-gradient(180deg, rgba(29, 41, 53, .98), rgba(24, 35, 45, .98));
      border: 1px solid rgba(90, 174, 224, .12);
      border-radius: 28px;
      box-shadow: 0 24px 54px rgba(0, 0, 0, .22);
      overflow: hidden
    }




    .input-card {
      padding: 30px
    }

    .card-title {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 24px;
      font-size: 17px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #eef8ff
    }

    .card-title i {
      color: var(--accent)
    }

    .field-stack {
      display: grid;
      gap: 20px
    }

    .field-stack.fit-form {
      gap: 10px
    }

    .field-row {
      display: grid;
      gap: 10px
    }

    .field-row.fit-field {
      gap: 5px;
      padding: 10px 0
    }

    .field-label {
      display: block;
      font-size: 14px;
      font-weight: 800;
      color: #a6b8cb;
      letter-spacing: .02em
    }

    .toggle-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      padding: 6px;
      background: rgba(18, 28, 38, .95);
      border: 1px solid rgba(255, 255, 255, .05);
      border-radius: 18px
    }

    .toggle-chip {
      min-width: 0;
      min-height: 58px;
      border: none;
      border-radius: 14px;
      background: transparent;
      color: #8ba0b6;
      font-size: 18px;
      font-weight: 900;
      cursor: pointer;
      transition: all .25s ease
    }

    .toggle-row.fit-segmented .toggle-chip:first-child.active {
      background: linear-gradient(135deg, #76bdeb, #9dd7f3);
      color: #07131d;
      box-shadow: 0 16px 30px rgba(118, 189, 235, .2)
    }

    .toggle-row.fit-segmented .toggle-chip:last-child.active {
      background: linear-gradient(135deg, #8d7cff, #5e8dff);
      color: #f7fbff;
      box-shadow: 0 16px 30px rgba(94, 141, 255, .22)
    }

    .toggle-row.fit-segmented.gender-toggle-row .toggle-chip:first-child.active {
      background: linear-gradient(135deg, #78c4ef, #5ca9e6);
      color: #07131d;
      box-shadow: 0 16px 30px rgba(92, 169, 230, .22)
    }

    .toggle-row.fit-segmented.gender-toggle-row .toggle-chip:last-child.active {
      background: linear-gradient(135deg, #ff98c0, #f46f9e);
      color: #fff8fc;
      box-shadow: 0 16px 30px rgba(244, 111, 158, .24)
    }

    .input-shell {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 68px;
      padding: 0 18px;
      background: rgba(21, 32, 43, .96);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 18px
    }

    .input-shell input {
      flex: 1 1 auto;
      min-width: 0;
      border: none;
      outline: none;
      background: transparent;
      color: #f5fbff;
      font-size: 32px;
      font-weight: 900;
      letter-spacing: -.03em
    }

    .input-shell input::placeholder {
      color: #607286
    }

    .field-row.has-error .input-shell {
      border-color: rgba(255, 107, 107, .9);
      box-shadow: 0 0 0 1px rgba(255, 107, 107, .18)
    }

    .input-unit {
      position: static !important;
      transform: none !important;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      flex: 0 0 auto;
      color: #8094aa;
      font-size: 14px;
      font-weight: 800;
      text-transform: uppercase
    }

    .field-feedback {
      min-height: 20px;
      padding-left: 4px;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
      color: #ff7c6b
    }

    .field-feedback:empty {
      min-height: 0
    }

    .field-feedback.field-error {
      display: flex;
      align-items: center;
      gap: 6px
    }

    .form-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px
    }

    .primary-action,
    .secondary-action {
      min-height: 58px;
      padding: 0 22px;
      border-radius: 18px;
      font-size: 17px;
      font-weight: 900;
      border: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease
    }

    .primary-action {
      background: linear-gradient(135deg, #61b6e7, #356ff1);
      color: #fff;
      box-shadow: 0 24px 46px rgba(53, 111, 241, .26)
    }

    .secondary-action {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      color: #dbe9f5
    }

    .primary-action:hover,
    .secondary-action:hover {
      transform: translateY(-1px)
    }

    .primary-action:disabled,
    .secondary-action:disabled {
      opacity: .55;
      cursor: not-allowed;
      box-shadow: none
    }

    .toggle-chip:focus-visible,
    .input-shell:focus-within,
    .primary-action:focus-visible,
    .secondary-action:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(103, 183, 233, .22)
    }

    .shape-banner {
      padding: 24px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: linear-gradient(90deg, rgba(38, 51, 64, .98), rgba(26, 39, 52, .98))
    }

    .shape-banner-copy {
      display: grid;
      gap: 6px;
      min-width: 0
    }

    .shape-banner-copy span {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: .12em;
      color: #7ea8cb;
      text-transform: uppercase
    }

    .shape-banner-copy strong {
      font-size: clamp(30px, 4vw, 56px);
      line-height: 1.04;
      letter-spacing: -.04em;
      color: #f5fbff
    }

    .shape-banner-emoji {
      font-size: 64px;
      line-height: 1
    }

    .result-card {
      padding: 28px
    }

    .result-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(250px, 360px);
      gap: 24px;
      align-items: center
    }

    .result-eyebrow {
      margin: 0 0 14px;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: #79beef
    }

    .result-number-row {
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 14px
    }

    #res-whr {
      font-size: clamp(74px, 9vw, 120px);
      line-height: .92;
      font-weight: 900;
      letter-spacing: -.07em;
      color: #f7fbff
    }

    #res-risk-chip {
      font-size: clamp(24px, 2.9vw, 40px);
      line-height: 1;
      font-weight: 900;
      letter-spacing: -.03em
    }

    #res-summary {
      margin: 0;
      max-width: 520px;
      color: #9db2c7;
      font-size: 18px;
      line-height: 1.65
    }

    .result-meta {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 24px
    }

    .meta-pill {
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(255, 255, 255, .035);
      border: 1px solid rgba(255, 255, 255, .05)
    }

    .meta-pill span {
      display: block;
      margin-bottom: 8px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #7d93a8
    }

    .meta-pill strong {
      display: block;
      font-size: 22px;
      font-weight: 900;
      color: #f6fbff;
      letter-spacing: -.03em
    }

    .visual-panel {
      display: grid;
      gap: 16px;
      justify-items: center
    }

    .body-stage {
      position: relative;
      width: min(100%, 290px);
      aspect-ratio: 1/1.08;
      border-radius: 34px;
      background: radial-gradient(circle at 50% 38%, rgba(79, 112, 149, .18), rgba(25, 38, 50, .9));
      border: 1px solid rgba(255, 255, 255, .05);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden
    }

    .body-stage::after {
      content: '';
      position: absolute;
      inset: auto 18px 18px;
      top: auto;
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(98, 184, 255, .12), transparent)
    }

    .body-stage.has-image::after {
      display: none
    }

    .body-stage.has-image .body-figure {
      display: none
    }

    .body-image {
      position: absolute;
      inset: 16px;
      width: calc(100% - 32px);
      height: calc(100% - 32px);
      object-fit: contain;
      object-position: center bottom;
      display: none;
      z-index: 1;
      filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .28))
    }

    .body-stage.has-image .body-image {
      display: block
    }

    .body-figure {
      position: relative;
      width: 136px;
      height: 240px
    }

    .body-head {
      position: absolute;
      top: 0;
      left: 50%;
      width: 48px;
      height: 52px;
      transform: translateX(-50%);
      border-radius: 50% 50% 46% 46%;
      background: #f6d29c
    }

    .body-core {
      position: absolute;
      top: 42px;
      left: 50%;
      transform: translateX(-50%);
      height: 138px;
      background: #f6d29c;
      border-radius: 42% 42% 36% 36% / 26% 26% 44% 44%;
      transition: width .25s ease
    }

    .body-highlight {
      position: absolute;
      top: 82px;
      left: 50%;
      transform: translateX(-50%);
      height: 108px;
      background: #e44141;
      border-radius: 24px 24px 36px 36px / 18px 18px 34px 34px;
      transition: width .25s ease
    }

    .body-leg {
      position: absolute;
      top: 166px;
      width: 32px;
      height: 88px;
      background: #f6d29c;
      border-radius: 20px 20px 14px 14px
    }

    .body-leg.left {
      left: 38px;
      transform: rotate(6deg)
    }

    .body-leg.right {
      right: 38px;
      transform: rotate(-6deg)
    }

    .body-arm {
      position: absolute;
      top: 74px;
      width: 20px;
      height: 112px;
      background: #f6d29c;
      border-radius: 18px
    }

    .body-arm.left {
      left: 18px;
      transform: rotate(8deg)
    }

    .body-arm.right {
      right: 18px;
      transform: rotate(-8deg)
    }

    .body-figure.pear .body-core {
      width: 110px
    }

    .body-figure.pear .body-highlight {
      width: 92px
    }

    .body-figure.apple .body-core {
      width: 128px
    }

    .body-figure.apple .body-highlight {
      width: 104px;
      border-radius: 26px 26px 24px 24px / 18px 18px 20px 20px
    }

    .visual-note {
      font-size: 15px;
      color: #9ab0c4;
      text-align: center;
      line-height: 1.6;
      max-width: 320px
    }

    .meter-wrap {
      margin-top: 20px;
      padding: 18px 6px 4px
    }

    .meter-head {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #7188a0
    }

    .meter-head {
      margin-bottom: 10px
    }

    .meter-head span {
      display: grid;
      gap: 4px
    }

    .meter-head strong {
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #7188a0
    }

    .meter-head em {
      font-style: normal;
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 0;
      color: #f3f9ff;
      text-transform: none
    }

    .meter-track {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      align-items: center
    }

    .meter-segment {
      height: 12px;
      border-radius: 999px;
      position: relative;
      overflow: hidden
    }

    .meter-segment.low {
      background: linear-gradient(90deg, #18cfa3, #0fc3b7)
    }

    .meter-segment.mid {
      background: linear-gradient(90deg, #9d8236, #7b6431)
    }

    .meter-segment.high {
      background: linear-gradient(90deg, #6a3148, #4c2235)
    }

    .meter-pointer {
      position: absolute;
      top: 20px;
      transform: translateX(-50%);
      display: grid;
      justify-items: center;
      gap: 6px;
      transition: left .25s ease
    }

    .meter-bubble {
      min-width: 58px;
      height: 34px;
      padding: 0 12px;
      border-radius: 12px;
      background: #63b8ea;
      color: #fff;
      font-size: 17px;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 16px 28px rgba(99, 184, 234, .3)
    }

    .meter-pointer i {
      font-size: 18px;
      color: #fff;
      text-shadow: 0 4px 12px rgba(0, 0, 0, .45)
    }

    .meter-pointer span {
      font-size: 13px;
      font-weight: 800;
      color: #f4fbff
    }

    .insight-card {
      padding: 28px;
      background: radial-gradient(circle at top left, rgba(85, 173, 232, .12), transparent 48%), linear-gradient(180deg, rgba(32, 47, 61, .98), rgba(24, 36, 47, .98))
    }

    .insight-copy {
      margin: 0 0 18px;
      color: #cfe0ee;
      font-size: 18px;
      line-height: 1.68
    }

    .insight-list {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none
    }

    .insight-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: #9bb0c4;
      font-size: 17px;
      line-height: 1.55
    }

    .insight-list i {
      color: #65beea;
      margin-top: 4px
    }

    .progress-card {
      padding: 26px 28px
    }

    .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px
    }

    .section-head h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 900;
      letter-spacing: -.02em;
      color: #f5fbff;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .section-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 0 12px;
      border-radius: 999px;
      background: rgba(98, 184, 255, .12);
      color: #72c9f5;
      font-size: 12px;
      font-weight: 800
    }

    .progress-chart-box {
      border-radius: 22px;
      background: rgba(17, 27, 37, .5);
      border: 1px solid rgba(255, 255, 255, .04);
      padding: 14px 14px 10px
    }

    .progress-chart-box svg {
      display: block;
      width: 100%;
      height: 220px
    }

    .chart-grid-line {
      stroke: rgba(255, 255, 255, .05);
      stroke-width: 1
    }

    .chart-line {
      fill: none;
      stroke: #63b8ea;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .chart-fill {
      fill: url(#chartFill);
      opacity: .28
    }

    .chart-dot {
      fill: #fff;
      stroke: #63b8ea;
      stroke-width: 4
    }

    .chart-labels {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
      margin-top: 10px;
      font-size: 12px;
      font-weight: 800;
      color: #74889f;
      text-transform: uppercase;
      letter-spacing: .08em;
      text-align: center
    }

    .progress-footer {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
      margin-top: 18px
    }

    .progress-summary {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px;
      border-radius: 20px;
      background: rgba(20, 31, 42, .96);
      border: 1px solid rgba(255, 255, 255, .05)
    }

    .progress-summary-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(19, 207, 163, .12);
      color: #1ad9ab;
      font-size: 22px
    }

    .progress-summary-copy strong {
      display: block;
      margin-bottom: 4px;
      font-size: 26px;
      font-weight: 900;
      color: #f5fbff;
      letter-spacing: -.03em
    }

    .progress-summary-copy span {
      display: block;
      color: #90a5bb;
      font-size: 15px;
      line-height: 1.55
    }

    .progress-side {
      font-size: 18px;
      font-weight: 900;
      color: #63b8ea;
      text-align: right
    }

    .table-card {
      padding: 24px 28px
    }

    .range-table {
      width: 100%;
      border-collapse: collapse
    }

    .range-table th,
    .range-table td {
      padding: 14px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .05);
      text-align: left
    }

    .range-table th {
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #7c91a8
    }

    .range-table td {
      font-size: 16px;
      color: #d6e5f1
    }

    .range-table tr:last-child td {
      border-bottom: none
    }

    .range-table .active-row td {
      color: #67c8f5;
      font-weight: 900
    }

    .status-low {
      color: #20d6a4
    }

    .status-mid {
      color: #f0c15c
    }

    .status-high {
      color: #ff7e7e
    }

    @media (max-width:1180px) {
      .whr-layout {
        grid-template-columns: minmax(0, 1fr)
      }

      .result-grid {
        grid-template-columns: 1fr
      }

      .result-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }
    }

    @media (max-width: 1023px) {
      .whr-page {
        width: 100%;
        max-width: 100%;
        margin-left: 0
      }




      .whr-shell {
        padding: 0 16px 96px
      }

      .whr-hero {
        padding: 0;
        margin-bottom: 18px
      }

      .whr-hero-copy h2 {
        font-size: 34px
      }

      .whr-hero-copy p {
        font-size: 16px
      }

      .whr-hero-badge {
        display: none
      }

      .shape-banner {
        padding: 22px
      }

      .shape-banner-copy strong {
        font-size: 34px
      }

      .shape-banner-emoji {
        font-size: 52px
      }

      .input-card,
      .result-card,
      .insight-card,
      .progress-card,
      .table-card {
        padding: 22px
      }

      .result-meta {
        grid-template-columns: 1fr
      }

      .progress-footer {
        grid-template-columns: 1fr
      }

      .progress-side {
        text-align: left
      }

      .meter-bubble {
        min-width: 52px;
        height: 30px;
        font-size: 15px
      }
    }

    @media (max-width:640px) {
      .form-actions {
        grid-template-columns: 1fr
      }
    }

    @media (max-width:420px) {
      .whr-shell {
        padding: 0 12px 92px
      }


      .toggle-chip {
        font-size: 16px
      }

      .input-shell input {
        font-size: 26px
      }

      .shape-banner-copy strong {
        font-size: 28px
      }

      .shape-banner-copy span {
        font-size: 13px
      }

      .result-card,
      #res-summary,
      .insight-copy,
      .insight-list li {
        font-size: 16px
      }

      .meter-head,
      .meter-footer,
      .chart-labels {
        font-size: 10px
      }

      .card-title {
        font-size: 15px;
        letter-spacing: .06em
      }
    }