:root {
  --blue: #5297ff;
  --blue-alt: #5269ff;
  --blue-deep: #5999ff;
  --blue-muted: #5269ff;
  --cyan: #11c2f7;
  --pink: #ffc6c3;

  --bg: #F5F3F0;
  --bg-soft: rgb(253, 253, 253);
  --bg-panel: rgb(250, 250, 250);
  --bg-panel-alt: rgb(254, 254, 254);
  --bg-footer: rgb(40, 40, 40);

  --border-light: rgb(240, 240, 240);
  --border-dotted: rgb(200, 200, 200);

  --text: #5297ff;
  --text-muted: #5297ff;
  --text-placeholder: rgb(100, 100, 100);
  --text-on-accent: white;

  --shadow-blur: 100px;
}

[data-theme="dark"] {
  --blue: #6699ff;
  --blue-alt: #7a94ff;
  --blue-deep: #6f9fff;
  --blue-muted: #7a94ff;
  --cyan: #33cbff;
  --pink: #ff9a95;

  --bg: #121212;
  --bg-soft: #1b1b1b;
  --bg-panel: #1a1a1a;
  --bg-panel-alt: #171717;
  --bg-footer: #0a0a0a;

  --border-light: rgb(50, 50, 50);
  --border-dotted: rgb(90, 90, 90);

  --text: #5297ff;
  --text-muted: #5297ff;
  --text-placeholder: rgb(160, 160, 160);
  --text-on-accent: white;
}
input {
  background: var(--bg);
  color: var(--blue);
}
input::placeholder {
  color: var(--text-placeholder);
}
#mode {
  width: 80%;
  border: 1px solid var(--blue);
  height: 30px;
  display: flex;
  flex-direction: row;
  gap: 0;
  padding: 0;
}
.darkmode, .lightmode{
  flex: 1;
  border: none;
  background: var(--bg);
  color: var(--blue);
  height: 100%;
}
#title-bar .math-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-width: 34px;
  padding: 0 6px;
  background: transparent;
  border: none;
  border-radius: 6px;
  line-height: 1;
  transition: background 0.15s ease, transform 0.08s ease;
}
#title-bar .math-btn:hover {
  background: rgba(82, 151, 255, 0.14);
}
#title-bar .math-btn:active {
  transform: scale(0.94);
}
[data-theme="dark"] #title-bar .math-btn:hover {
  background: rgba(255, 255, 255, 0.10);
}
#title-bar .math-btn img.math-icon {
  display: block;
  height: 22px !important;
  width: auto !important;
  margin: 0 !important;
  opacity: 1 !important;
  z-index: auto !important;
  border: none !important;
  pointer-events: none;
  transition: filter 0.2s ease;
}
.darkmodeA, .lightmodeA {
  color: var(--text-on-accent) !important;
  background: var(--blue) !important;
} 
body {
  touch-action: manipulation;
  background: var(--bg);
  font-family: "Elms Sans", sans-serif !important;
  color: var(--blue);
  overflow-x: hidden !important;
}
img {
  -webkit-touch-callout: none; 
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none; 
}

input, textarea, select {
  font-size: 16px !important;
}
   .top-ad-wrapper {
  width: 100%;
  max-width: 468px; /* Limits width so it doesn't stretch awkwardly */
  height: 60px;     /* Reserves exact height so the page loads instantly without jumping */
  margin: 10px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  clear: both;      /* Prevents header navigation elements from overlapping */
}
#title-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  z-index: calc(99999999 * 99999999);
  background: var(--bg-title);
  border-bottom: 1px solid var(--border-light);
  padding: 0 10px;
  padding-right: 10px !important;
  gap: 5px;
  backdrop-filter: blur(var(--shadow-blur));
  overflow: hidden;
}
@scope (#title-bar) {
  > div:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90%;
    aspect-ratio: 1/1;
  }
  img {
    height: 55px;
    margin: auto 0;
    opacity: 0.8;
    z-index: -100;
  }
  p {
    flex: 0.7;
  }
  .logo {
    height: 40px;
    opacity: 0.8;
    border: none !important;
  }
  button {
    font-size: 8px;
    padding: 5px 7px;
    border-radius: 1px;
    border: 1px solid var(--cyan);
    font-family: "Elms Sans", sans-serif;
    font-weight: 800;
  }
}
/* ==========================================================================
   HEIGHT CALCULATOR BUTTON — icon only
   · heightCal.html: icon keeps its original blue (active).
   · heiConvert.html / quickRefer.html: JS adds .is-inactive and the icon
     is recoloured black (light) or white (dark).
   ========================================================================== */
#title-bar .heightcal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 4px;
    background: transparent;
    border: none;
    border-radius: 6px;
    line-height: 1;
    flex: 0 0 auto;
    transition: background 0.15s ease, transform 0.08s ease;
}
#title-bar .heightcal-btn:hover {
    background: rgba(82, 151, 255, 0.14);
}
#title-bar .heightcal-btn:active {
    transform: scale(0.94);
}
[data-theme="dark"] #title-bar .heightcal-btn:hover {
    background: rgba(255, 255, 255, 0.10);
}
#title-bar .heightcal-btn img.hcal-icon {
    display: block;
    height: 20px !important;
    width: auto !important;
    max-width: 140px;
    margin: 0 !important;
    opacity: 1 !important;
    z-index: auto !important;
    border: none !important;
    pointer-events: none;
    transition: filter 0.2s ease;
}
#title-bar .heightcal-btn.is-inactive img.hcal-icon {
    filter: brightness(0);
}
[data-theme="dark"] #title-bar .heightcal-btn.is-inactive img.hcal-icon {
    filter: brightness(0) invert(1);
}
.ham-menu {
  height: 50% !important;
  aspect-ratio: 1/1 !important;
  margin: auto;
  border: none;
  display: flex;
  position: relative;
  z-index: 10000000000;
}
/* ==========================================================================
   HAMBURGER MENU — three sticks, matching index.html / style.css
   ========================================================================== */
.active1 {
  animation: stick1 0.2s ease-in-out forwards;
  transform-origin: left;
}
.active2 {
  animation: stick2 0.2s ease-in-out forwards;
  transform-origin: left;
}
.active3 {
  animation: stick3 0.2s ease-in-out forwards;
}
@keyframes stick3 {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(0.3, 0.5); opacity: 0; }
}
@keyframes stick1 {
  from { transform: translateY(-15%) rotate(0deg); }
  to   { transform: translateY(-15%) rotate(38deg); }
}
@keyframes stick2 {
  from { transform: translateY(-85%) rotate(0deg); }
  to   { transform: translateY(-85%) rotate(-38deg); }
}
@scope (.ham-menu) {
  div { transition: 0.2s ease-in-out; border-radius: 5px; }
  > div:first-child {
    position: absolute; top: 15%; transform: translateY(-25%);
    height: 10%; width: 100%; background: var(--blue);
  }
  > div:nth-child(2) {
    position: absolute; top: 50%; transform: translateY(-50%);
    height: 10%; width: 100%; background: var(--blue);
  }
  > div:nth-child(3) {
    position: absolute; height: 10%; width: 100%;
    background: var(--blue); top: 85%; transform: translateY(-75%);
  }
}
/* Version pill — matches index.html / style.css */
#vers {
    display: flex;
    position: absolute;
    right: 30px;
    bottom: -2px;
    height: 10px;
    width: 70px;
}
#vers div {
    font-size: 6px;
    width: 100%;
    text-align: right;
    font-weight: 900;
    opacity: 0.5;
    color: var(--text);
}
/* ==========================================================================
   MENU PANEL
   ========================================================================== */
.menu-display {
  position: fixed;
  z-index: 1000000;
  top: 50px;
  right: -55vw;
  height: calc(100vh - 50px);
  width: 55%;
  backdrop-filter: blur(var(--shadow-blur));
  border-left: 1px solid var(--border-light);
  display: none;
  gap: 30px;
  flex-direction: column;
  background: var(--bg-soft);
  opacity: 0.8;
}
.activemenu {
  animation: swipeMenu 0.4s ease-in-out forwards;
}
version {
  position: absolute;
  bottom: 0;
  left: 0;
  color: var(--text);
  font-weight: bolder;
  width: 100%;
  text-align: center;
  border-top: 1px solid var(--border-dotted);
}
.unactivememu {
  animation: swipeMenu 0.4s ease-in-out reverse forwards;
}
@scope (.menu-display) {
  h4 {
    text-align: center;
    border-bottom: 3px solid var(--blue-muted);
    padding-bottom: 10px;
    margin-top: 0;
  }
  > div:nth-child(2) {
    display: flex;
    flex-direction: row;
    padding: 0 0 15px 8px;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--blue-muted);
    margin-left: 1%;
    height: 50px;
  }
  > div:nth-child(3) {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    justify-content: center !important;
    margin: 0 auto;
    border-bottom: 1px solid var(--blue-muted);
    padding: 0 0 20px 0;
    div {
      text-align: center;
      font-weight: 500;
    }
    button {
      width: 90%;
      height: 35px;
      border-radius: 2px;
      background: rgb(79, 158, 255);
      color: var(--bg);
      border: none;
      font-weight: 1000;
      margin: 0 auto;
    }
  }
}
@scope (.div1) {
  > div {
    display: flex;
    flex-direction: row;
    gap: 0;
    color: var(--text) !important;
    button {
      background: var(--bg);
      border: 1px solid var(--blue);
      color: var(--blue);
      border-radius: 5px;
      margin: 0 10px;
    }
    div {
      width: 10vw;
      background: var(--bg);
      color: var(--text);
      border: none;
      display: grid;
      text-align: center;
    }
  }
  p {
    color: var(--text) !important;
    font-weight: bolder !important;
  }
  .p {
    color: var(--text) !important;
    font-weight: bolder !important;
  }
}
@keyframes swipeMenu {
  from { right: -55vw; opacity: 0.5; }
  to   { right: 0vw;   opacity: 1;   }
}
.native-ad-container {
  max-width: 100%;
  max-height: 100px;
  overflow: hidden;
  margin: 10px auto;
  padding: 10px;
  box-sizing: border-box;
}

/* Force the ad grid elements into a small layout */
.native-ad-container > div {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 0px !important;
}

/* Force images inside the native ad to stay small */
.native-ad-container img {
  max-height: 80px !important;
  object-fit: cover !important;
  border-radius: 6px;
}

/* Make font sizes normal so text doesn't take over the screen */
.native-ad-container a, 
.native-ad-container span, 
.native-ad-container div {
  font-size: 12px !important;
  line-height: 1.2 !important;
}
.ad {
  margin: 0 auto;
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center !important;
  align-items: center;
}

    #body-hc {
      width: 95%;
      margin: 0 auto;
      margin-top: 100px;
    }
    .h2 {
      text-align: center;
      font-weight: bolder;
      color: var(--blue);
    }
    h2 {
       font-weight: bolder;
       color: var(--blue);
    }
    #hc-options {
      width: 89%;
      margin: 0 auto;
      height: 60px;
      display: flex;
      flex-direction: row;
      border: 3px solid var(--blue);
      border-radius: 25px;
      background: var(--bg);
      font-family: "Elms Sans", sans-serif;
    }
    @scope (#hc-options) {
      button {
        font-family: "Elms Sans", sans-serif;
        font-weight: bold;
      }
    }
    .metric-unit,.US-unit {
      border: none;
      background: var(--bg);
      color: var(--blue);
      border-radius: 22px;
      flex: 1;
      animation: unactiveOpt 0.6s ease-in-out;
    }
    .metric-unit-active,.US-unit-active {
      flex: 1.5;
      border: 3px solid var(--blue);
      border-radius: 22px;
      background: var(--blue);
      color: var(--text-on-accent);
      animation: activeOpt 0.6s ease-in-out;
    }
    @keyframes activeOpt{
      0% {
        background: var(--bg);
        color: var(--blue);
        transform: scale(0);
      }
      80% {
        border: 3px solid var(--blue);
      }
      40% {
        background: var(--blue);
        color: var(--text-on-accent);
      }
      60% {
        flex: 3;
        transform: scaleY(0.95);
      }
      100% {
        flex: 1.5;
      }
    }
    @keyframes unactiveOpt {
      0% {
        flex: 1.5;
        background: var(--blue);
        color: var(--text-on-accent);
      }
      40% {
        background: var(--bg);
        color: var(--blue);
      }
      100% {
        flex: 1;
      }
    }
    
#metric-box {
  width: 89%;
  margin: 0 auto;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--blue);
  padding: 10px 15px;
}
@scope (#metric-box) {
  div {
    display: flex;
    flex-direction: column;
    gap: 5px;

    input {
      font-size: 17px;
    }
    label {
      padding-left: 20px;
      color: var(--blue);
      font-weight: bold;
    }
  }

  #child-gender {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0px;
    height: 45px;
    border: 2px solid var(--blue);

    button {
      border-radius: 1px;
    }
    .male-option, .female-option {
      background: var(--bg);
      color: var(--blue);
    }
    .male-option-active, .female-option-active {
      color: var(--text-on-accent);
      background: var(--blue);
    }
  }
}

#US-unit-box {
  width: 89%;
  margin: 0 auto;
  margin-top: 40px;
  display: none;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--blue);
  padding: 10px 15px;
}

@scope (#US-unit-box) {
  div {
    display: flex;
    flex-direction: column;
    gap: 5px;

    input {
      font-size: 17px;
      width: 50%;
    }
    label {
      padding-left: 20px;
      color: var(--blue);
      font-weight: bold;
    }
  }

  .heihbx {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #child-gender {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0px;
    height: 45px;
    border: 2px solid var(--blue);

    button {
      border-radius: 1px;
    }
    .male-option-us, .female-option-us {
      background: var(--bg);
      color: var(--blue); 
    }
    .male-option-activeus, 
    .female-option-activeus {
      color: var(--text-on-accent);
      background: var(--blue);
    }
  }
}

.calHeight-btn {
  display: block;
  width: 50%;
  padding: 10px 15px;
  background: var(--bg);
  color: var(--blue);
  border: 1px solid var(--blue);
  margin: 0 auto;
  margin-top: 30px;
}
#height-result-display {
  display: flex;
  margin: 0 auto;
  width: 90%;
  height: 500px;
  color: var(--blue);
  font-weight: bolder;
  > div {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 300px;
    gap: 10px;
    > div:first-child {
      margin-top: 10px;
      font-weight: 800;
      border: 1px solid var(--blue-muted);
      padding: 15px;
      border-radius: 5px;
    }
    > div:nth-child(2),
    > div:nth-child(3) {
      font-weight: 760;
      border: 1px solid var(--blue-muted);
      padding: 15px;
      border-radius: 5px;
    }
    > div:nth-child(4) {
      border: 3px solid var(--blue-muted);
      border-radius: 20px;
      padding: 20px;
    }
  }
}
#footer-section {
  display: flex;
  width: 100vw;
  height: 80px;
  align-items: center;
  background: var(--bg-footer);
  margin-left: calc(-50vw + 50%) !important;
  margin-top: 400px;
}
@scope (#footer-section) {
  div {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-on-accent) !important;
    text-decoration: underline;
  }
  a {
    color: var(--text-on-accent);
  }
}
:root {
  --blue: #5297ff;
}
#height-convertion {
  width: 90%;
  height: 300px;
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  border: 2px solid var(--blue);
  border-radius: 20px;
  padding: 10px;
  gap: 10%;
  position: relative;
}
@scope (#height-convertion) {
  div {
    display: flex;
    flex-direction: row;
    border: none !important;
    height: 30px;
    align-items: stretch;
    div {
      background: var(--blue);
      color: var(--text-on-accent);
      border: 1px solid var(--blue);
      border-radius: 1px;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      width: 20%;
      padding: 0 0 0 10px !important;
      font-size: 1.2rem;
    }
    input {
      border: 1px solid var(--blue) !important;
      border-radius: 1px;
      width: 80%;
    }
    input::placeholder {
      font-size: 17px;
    }
  }
  button {
    height: 15%;
    width: 30%;
    display: block;
    margin: 0 auto;
    background: var(--blue);
    color: var(--text-on-accent);
    border: none;
    border-radius: 20px;
  }
}
.input-unit,.output-unit {
  height: 30%;
  width: 20%;
  display: none;
  flex-direction: column;
  padding: 0 !important;
  overflow-y: scroll;
  border: 1px solid var(--blue);
  border-radius: 10px;
  animation: openUnit 0.5s ease-in-out;
  button {
    background: var(--bg);
    flex: 1;
    width: 100%;
    color: var(--blue);
    height: 30px;
    border-radius: 0;
    border: 1px solid var(--blue);
  }
}
.input-unit {
  position: absolute;
top: 40px;
left: 3%;
}
.output-unit {
  position: absolute;
bottom: 5%;
left: 3%;
}
.ftnin-input,.ftnin-output {
  display: none;
}
@keyframes openUnit{
  0% {
    transform: scale(0);
    opacity: 0;
    border-radius: 50%;
  }
  70% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
h3 {
  margin-top: 200px;
}
.heightChart {
  position: relative;
  width: 90%;
  border: 4px solid var(--blue);
  border-radius: 30px;
  padding: 10px;
  > div:first-child {
    display: flex;
    flex-direction: row;
    border-bottom: 2.5px solid var(--blue);
    > div {
      text-align: center;
    }
    > div:nth-child(2), > div:nth-child(3) {
      flex: 1;
      border-left: 1.5px solid var(--blue);
    }
  }
  > div:nth-child(2) {
    display: grid;
    margin-top: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
    > div {
      text-align: center;
    }
  }
}
/* ==========================================================================
   HEIGHT COMPARISON PREVIEW
   --------------------------------------------------------------------------
   Mirrors the 2D canvas on index.html: horizontal dotted lines spanning
   the full width at every 10 cm, cm numbers on the left of each line, a
   green baseline at the bottom, figures standing on that baseline.
   ========================================================================== */

#height-comparison-section {
  display: none;
  width: 90%;
  margin: 30px auto 0 auto;
  flex-direction: row;
  gap: 15px;
}
#height-comparison-section.visible {
  display: flex;
}

.hc-comparison-block {
  flex: 1 1 0;
  min-width: 0;
}

.hc-display {
  position: relative;
  width: 100%;
  height: 480px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
}

/* NGFINITY watermark, centred at the top */
.hc-brand {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Elms Sans", sans-serif;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 1.5px;
  color: var(--blue);
  opacity: 0.4;
  pointer-events: none;
  z-index: 3;
}

/* ---- RULER ------------------------------------------------------------
   Each tick is a full-width div anchored to the bottom of the display,
   height = cm value × 2 px. The number sits at the left, and a ::after
   pseudo-element fills the rest of the row with a horizontal dotted
   line. Same pattern as #ruler on index.html.
   ---------------------------------------------------------------------- */
.hc-ruler {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.hc-cm {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding-left: 4px;
  padding-right: 4px;
  font-family: "Elms Sans", sans-serif;
  font-size: 8px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1;
}

.hc-cm::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-dotted);
  opacity: 0.8;
  margin-left: 4px;
  margin-top: 3px;
}

/* Green baseline at cm = 0 */
.hc-cm0 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: green;
  opacity: 0.9;
}

/* "cm" unit label at the top-left */
.hc-cm-unit {
  position: absolute;
  top: 6px;
  left: 4px;
  font-family: "Elms Sans", sans-serif;
  font-size: 10px;
  font-weight: 900;
  color: var(--blue);
  opacity: 0.85;
  z-index: 2;
}

/* ---- PERSONS ----------------------------------------------------------
   Full-width row anchored to the bottom, figures stand on the baseline.
   ---------------------------------------------------------------------- */
.hc-persons {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  padding: 0 12px 0 30px;
  gap: 10px;
  z-index: 2;
  pointer-events: none;
}

.hc-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
  /* Same override, one level up — the person's own min-height could
     also resolve to its content size (name + img) and refuse to fit
     inside the display if the name were long. Belt and braces. */
  min-height: 0;
}

.hc-person-name {
  font-family: "Elms Sans", sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: var(--blue);
  text-align: center;
  line-height: 1.25;
  margin-bottom: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.hc-person img {
  display: block;
  flex: 0 0 auto;
  min-height: 0;
  min-width: 0;
  pointer-events: none;
}
@media (max-width: 640px) {
  #height-comparison-section {
    flex-direction: column;
    gap: 15px;
  }
  .hc-comparison-block {
    width: 100%;
  }
}
/* Mobile: keep everything legible on narrow screens */
@media (max-width: 640px) {
  .hc-display { height: 420px; }
  .hc-person-name { font-size: 9px; }
  .hc-cm { font-size: 7px; }
  .hc-cm-unit { font-size: 9px; }
}

/* ==========================================================================
   HOME BUTTON — icon only (shared with style.css)
   The button renders only photos/home-icon.png (which ships blue).
   · Main page (index.html): the icon keeps its original blue.
   · Any other page: JS adds .is-inactive, and the icon is recoloured so it
     reads as an inactive control — black in the light theme, white in the
     dark theme.
   brightness(0) turns any artwork black; adding invert(1) turns it white,
   so a single PNG covers both themes without a second asset.
   ========================================================================== */
#title-bar .home-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    min-width: 34px;
    padding: 0 6px;
    background: transparent;
    border: none;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.15s ease, transform 0.08s ease;
}
#title-bar .home-btn:hover {
    background: rgba(82, 151, 255, 0.14);
}
#title-bar .home-btn:active {
    transform: scale(0.94);
}
[data-theme="dark"] #title-bar .home-btn:hover {
    background: rgba(255, 255, 255, 0.10);
}

/* The scoped `img { height: 55px; opacity: .8; z-index: -100 }` rule in
   #title-bar would otherwise stretch and hide the icon — override it. */
#title-bar .home-btn img.home-icon {
    display: block;
    height: 22px !important;
    width: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    z-index: auto !important;
    border: none !important;
    pointer-events: none;
    transition: filter 0.2s ease;
}

/* Inactive — light theme: black icon */
#title-bar .home-btn.is-inactive img.home-icon {
    filter:grayscale(100%);
}
/* Inactive — dark theme: white icon */
[data-theme="dark"] #title-bar .home-btn.is-inactive img.home-icon {
    filter: grayscale(100%);
}

/* ==========================================================================
   HEIGHT TRACKER BUTTON — icon only
   · heightTracker.html: icon keeps its original blue (active) — handled
     by style.css, not this file.
   · heightCal.html, heiConvert.html, quickRefer.html: JS adds
     .is-inactive, and the icon is recoloured black (light) or white
     (dark) via the filter chain below.
   ========================================================================== */
#title-bar .heighttracker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 4px;
    background: transparent;
    border: none;
    border-radius: 6px;
    line-height: 1;
    flex: 0 0 auto;
    transition: background 0.15s ease, transform 0.08s ease;
}
#title-bar .heighttracker-btn:hover {
    background: rgba(82, 151, 255, 0.14);
}
#title-bar .heighttracker-btn:active {
    transform: scale(0.94);
}
[data-theme="dark"] #title-bar .heighttracker-btn:hover {
    background: rgba(255, 255, 255, 0.10);
}

/* Override the scoped `#title-bar img { height: 55px; opacity: .8;
   z-index: -100 }` rule so the icon renders at its intended size. */
#title-bar .heighttracker-btn img.htracker-icon {
    display: block;
    height: 20px !important;
    width: auto !important;
    max-width: 140px;
    margin: 0 !important;
    opacity: 1 !important;
    z-index: auto !important;
    border: none !important;
    pointer-events: none;
    transition: filter 0.2s ease;
}

/* Inactive — light theme: black icon */
#title-bar .heighttracker-btn.is-inactive img.htracker-icon {
    filter: grayscale(100%);
}
/* Inactive — dark theme: white icon */
[data-theme="dark"] #title-bar .heighttracker-btn.is-inactive img.htracker-icon {
    filter: grayscale(100%);
}

.conv-wrap {
  width: 90%;
  max-width: 720px;
  margin: 40px auto;
  background: var(--bg-panel);
  border: 2px solid var(--blue-muted);
  border-radius: 16px;
  padding: 22px 18px;
  box-sizing: border-box;
  font-family: "Elms Sans", sans-serif;
  color: var(--blue);
  }
  
  /* ---- Category tabs ---- */
  .conv-tabs {
  display: flex;
  gap: 6px;
  margin: 0 auto 22px auto;
  width: 100%;
  max-width: 420px;
  border: 2px solid var(--blue);
  border-radius: 30px;
  overflow: hidden;
  padding: 3px;
  box-sizing: border-box;
  }
  .conv-tab {
  flex: 1;
  padding: 12px 6px;
  border: none;
  background: transparent;
  color: var(--blue);
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 24px;
  transition: background 0.15s ease, color 0.15s ease;
  }
  .conv-tab.active {
  background: var(--blue);
  color: var(--text-on-accent);
  }
  
  /* ---- Panels ---- */
  .conv-panel { display: none; }
  .conv-panel.active { display: block; }
  
  /* ---- Field groups ---- */
  .conv-field { margin-bottom: 22px; }
  .conv-label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
  padding-left: 4px;
  }
  .conv-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  }
  .conv-value {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 2px solid var(--blue-muted);
  border-radius: 10px;
  background: var(--bg);
  color: var(--blue);
  font-family: inherit;
  font-size: 17px !important;
  font-weight: 700;
  box-sizing: border-box;
  }
  .conv-value:focus {
  outline: none;
  border-color: var(--blue);
  }
  .conv-unit-btn {
  flex: 0 0 110px;
  padding: 12px 8px;
  border: 2px solid var(--blue);
  border-radius: 10px;
  background: var(--blue);
  color: var(--text-on-accent);
  font-family: inherit;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: filter 0.15s ease, transform 0.08s ease;
  }
  .conv-unit-btn:hover { filter: brightness(1.08); }
  .conv-unit-btn:active { transform: scale(0.97); }
  
  /* ---- Dual-input rows (ft & in / st & lb) ---- */
  .conv-dual {
  display: none;
  gap: 8px;
  margin-top: 8px;
  }
  .conv-dual.active { display: flex; }
  .conv-dual input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 2px solid var(--blue-muted);
  border-radius: 10px;
  background: var(--bg);
  color: var(--blue);
  font-family: inherit;
  font-size: 17px !important;
  font-weight: 700;
  box-sizing: border-box;
  }
  .conv-dual input:focus {
  outline: none;
  border-color: var(--blue);
  }
  
  /* ---- Unit picker grid ---- */
  .conv-unit-grid {
  display: none;
  margin-top: 10px;
  padding: 10px;
  border: 2px solid var(--blue-muted);
  border-radius: 12px;
  background: var(--bg);
  max-height: 240px;
  overflow-y: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  }
  .conv-unit-grid.active { display: grid; }
  .conv-unit-option {
  padding: 9px 4px;
  border: 1px solid var(--blue-muted);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--blue);
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s ease, color 0.12s ease;
  }
  .conv-unit-option:hover {
  background: var(--blue);
  color: var(--text-on-accent);
  }
  .conv-unit-option.selected {
  background: var(--blue);
  color: var(--text-on-accent);
  box-shadow: inset 0 0 0 2px var(--text-on-accent);
  }
  
  /* ---- Actions ---- */
  .conv-btn {
  display: block;
  width: 100%;
  padding: 15px;
  margin: 6px 0 22px 0;
  border: none;
  border-radius: 12px;
  background: var(--blue);
  color: var(--text-on-accent);
  font-family: inherit;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.08s ease;
  }
  .conv-btn:hover { filter: brightness(1.08); }
  .conv-btn:active { transform: scale(0.98); }
  
  .conv-swap {
  display: block;
  text-align: center;
  margin: -10px 0 20px 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  font-family: inherit;
  }
  .conv-swap:hover { opacity: 0.8; }
  
  @media (max-width: 480px) {
  .conv-unit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .conv-unit-btn  { flex: 0 0 88px; font-size: 13px; }
  }