#metabolic-calculator-app {
      --ink: #f7f7f2;
      --muted: #c5cec8;
      --paper: #050605;
      --panel: #101411;
      --panel-soft: #151b17;
      --field: #090c0a;
      --line: #344139;
      --green: #67c78e;
      --blue: #6bb8e8;
      --gold: #f0b85d;
      --red: #ef7d72;
      --shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
    }
#metabolic-calculator-app * { box-sizing: border-box; }
#metabolic-calculator-app {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background:
        linear-gradient(120deg, rgba(47, 125, 90, 0.12), transparent 34%),
        linear-gradient(290deg, rgba(40, 111, 159, 0.13), transparent 38%),
        var(--paper);
      line-height: 1.45;
    }
#metabolic-calculator-app #metabolic-calculator-app {
      width: min(100vw, 100%);
    }
#metabolic-calculator-app main {
      width: min(1320px, calc(100vw - 32px));
      margin: 0 auto;
      padding: 36px 0 52px;
    }
#metabolic-calculator-app .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
      gap: 24px;
      align-items: stretch;
      margin-bottom: 24px;
    }
#metabolic-calculator-app h1 {
      margin: 0 0 12px;
      max-width: 780px;
      font-size: clamp(2rem, 5vw, 4.9rem);
      line-height: 0.97;
      letter-spacing: 0;
    }
#metabolic-calculator-app h2 {
      margin: 0 0 14px;
      font-size: 1.1rem;
      letter-spacing: 0;
    }
#metabolic-calculator-app h3 {
      margin: 0 0 8px;
      font-size: 0.95rem;
      letter-spacing: 0;
    }
#metabolic-calculator-app p { margin: 0; }
#metabolic-calculator-app .lede {
      color: var(--muted);
      max-width: 720px;
      font-size: 1.06rem;
    }
#metabolic-calculator-app .panel {
      background: rgba(16, 20, 17, 0.94);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }
#metabolic-calculator-app .intro {
      padding: 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 320px;
    }
#metabolic-calculator-app .summary-card {
      padding: 24px;
      display: grid;
      gap: 18px;
      align-content: center;
      min-height: 320px;
    }
#metabolic-calculator-app .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
#metabolic-calculator-app button {
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--field);
      color: var(--ink);
      cursor: pointer;
      font: inherit;
      font-weight: 750;
      padding: 9px 13px;
    }
#metabolic-calculator-app button:hover {
      border-color: var(--green);
      background: var(--panel-soft);
    }
#metabolic-calculator-app .primary {
      border-color: var(--green);
      background: var(--green);
      color: #071008;
    }
#metabolic-calculator-app .primary:hover {
      border-color: #8ee0ad;
      background: #8ee0ad;
    }
#metabolic-calculator-app .score {
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr);
      gap: 18px;
      align-items: center;
    }
#metabolic-calculator-app .ring {
      width: 132px;
      aspect-ratio: 1;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: conic-gradient(var(--green) var(--score-angle), #28322d 0);
      position: relative;
      transition: background 180ms ease;
    }
#metabolic-calculator-app .ring::after {
      content: "";
      position: absolute;
      inset: 12px;
      border-radius: 50%;
      background: var(--panel);
    }
#metabolic-calculator-app .ring strong {
      position: relative;
      z-index: 1;
      font-size: 2.05rem;
    }
#metabolic-calculator-app .label {
      display: block;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 5px;
    }
#metabolic-calculator-app .status {
      font-size: 1.5rem;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 8px;
    }
#metabolic-calculator-app .grid {
      display: grid;
      grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
      gap: 24px;
      align-items: start;
    }
#metabolic-calculator-app form, #metabolic-calculator-app .results {
      padding: 22px;
    }
#metabolic-calculator-app .section {
      border-top: 1px solid var(--line);
      padding-top: 18px;
      margin-top: 18px;
    }
#metabolic-calculator-app .section:first-child {
      border-top: 0;
      padding-top: 0;
      margin-top: 0;
    }
#metabolic-calculator-app .fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
#metabolic-calculator-app .unit-toggle {
      display: inline-grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4px;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--field);
    }
#metabolic-calculator-app .unit-toggle input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
#metabolic-calculator-app .unit-toggle label {
      display: grid;
      place-items: center;
      min-height: 34px;
      min-width: 94px;
      margin: 0;
      border-radius: 6px;
      cursor: pointer;
      color: var(--muted);
      font-size: 0.86rem;
    }
#metabolic-calculator-app .unit-toggle input:checked + label {
      background: var(--panel-soft);
      color: var(--ink);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    }
#metabolic-calculator-app .field { min-width: 0; }
#metabolic-calculator-app label, #metabolic-calculator-app legend {
      display: block;
      color: var(--ink);
      font-size: 0.86rem;
      font-weight: 750;
      margin-bottom: 6px;
    }
#metabolic-calculator-app input, #metabolic-calculator-app select {
      width: 100%;
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--field);
      color: var(--ink);
      font: inherit;
      padding: 9px 10px;
    }
#metabolic-calculator-app input[type="range"] {
      min-height: 32px;
      padding: 0;
      accent-color: var(--green);
    }
#metabolic-calculator-app fieldset {
      border: 0;
      padding: 0;
      margin: 0;
    }
#metabolic-calculator-app .range-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 44px;
      gap: 10px;
      align-items: center;
    }
#metabolic-calculator-app .range-value {
      text-align: center;
      font-weight: 800;
      color: var(--green);
    }
#metabolic-calculator-app .checks {
      display: grid;
      gap: 8px;
    }
#metabolic-calculator-app .check {
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr);
      gap: 9px;
      align-items: start;
      color: var(--ink);
      font-size: 0.92rem;
    }
#metabolic-calculator-app .check input {
      width: 18px;
      min-height: 18px;
      margin: 2px 0 0;
      accent-color: var(--green);
    }
#metabolic-calculator-app .metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }
#metabolic-calculator-app .metric {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      background: var(--panel-soft);
      min-height: 104px;
    }
#metabolic-calculator-app .metric strong {
      display: block;
      font-size: 1.35rem;
      line-height: 1.1;
      margin-bottom: 5px;
    }
#metabolic-calculator-app .meter {
      height: 13px;
      border-radius: 999px;
      background: #28322d;
      overflow: hidden;
      margin: 12px 0 8px;
    }
#metabolic-calculator-app .meter span {
      display: block;
      height: 100%;
      width: var(--meter-width);
      background: linear-gradient(90deg, var(--blue), var(--green));
      border-radius: inherit;
      transition: width 180ms ease;
    }
#metabolic-calculator-app .cards {
      display: grid;
      gap: 12px;
    }
#metabolic-calculator-app .factor {
      display: grid;
      grid-template-columns: 10px minmax(0, 1fr);
      gap: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 13px;
      background: var(--panel-soft);
    }
#metabolic-calculator-app .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-top: 6px;
      background: var(--green);
    }
#metabolic-calculator-app .factor.warning .dot { background: var(--gold); }
#metabolic-calculator-app .factor.alert .dot { background: var(--red); }
#metabolic-calculator-app .factor p {
      color: var(--muted);
      font-size: 0.92rem;
    }
#metabolic-calculator-app .note {
      color: var(--muted);
      font-size: 0.86rem;
      margin-top: 14px;
    }
#metabolic-calculator-app .warning-note {
      border-left: 3px solid var(--gold);
      padding-left: 11px;
    }
#metabolic-calculator-app .sources {
      padding: 18px 22px;
      margin-top: 24px;
      color: var(--muted);
      font-size: 0.88rem;
    }
#metabolic-calculator-app .sources a { color: var(--blue); }
@media print {
#metabolic-calculator-app {
        background: #fff;
      }
#metabolic-calculator-app main {
        width: 100%;
        padding: 0;
      }
#metabolic-calculator-app .panel {
        box-shadow: none;
      }
#metabolic-calculator-app form, #metabolic-calculator-app .sources, #metabolic-calculator-app .actions {
        display: none;
      }
#metabolic-calculator-app .hero, #metabolic-calculator-app .grid {
        display: block;
      }
#metabolic-calculator-app .summary-card, #metabolic-calculator-app .results {
        break-inside: avoid;
        margin-bottom: 16px;
      }

    
}
@media (max-width: 860px) {
#metabolic-calculator-app .hero, #metabolic-calculator-app .grid {
        grid-template-columns: 1fr;
      }
#metabolic-calculator-app .intro, #metabolic-calculator-app .summary-card {
        min-height: auto;
      }
#metabolic-calculator-app .metrics {
        grid-template-columns: 1fr;
      }

    
}
@media (max-width: 560px) {
#metabolic-calculator-app main {
        width: min(100% - 20px, 1180px);
        padding-top: 18px;
      }
#metabolic-calculator-app .fields {
        grid-template-columns: 1fr;
      }
#metabolic-calculator-app .score {
        grid-template-columns: 1fr;
      }

    
}

  

.entry-content:has(#metabolic-calculator-app),
.wp-block-post-content:has(#metabolic-calculator-app),
.site-main:has(#metabolic-calculator-app) {
  max-width: none !important;
}

#metabolic-calculator-app {
  width: min(100vw, 100%) !important;
  max-width: none !important;
}

#metabolic-calculator-app main {
  width: min(1320px, calc(100vw - 32px)) !important;
  max-width: none !important;
}

@media (min-width: 900px) {
  .entry-content > #metabolic-calculator-app,
  .wp-block-post-content > #metabolic-calculator-app {
    position: relative;
    left: 50%;
    right: 50%;
    width: calc(100vw - 32px) !important;
    max-width: 1320px !important;
    margin-left: max(-50vw + 16px, -660px) !important;
    margin-right: max(-50vw + 16px, -660px) !important;
  }
}