/* ============ Base ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%; width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  font-family: 'Roboto Condensed', sans-serif;
  background: #0a0508;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; cursor: pointer; }
input { font: inherit; color: inherit; }

.page {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #2a0e23 0%, #0a0508 100%);
  overflow: hidden;
}

/* ============ Device frame ============
   The device is sized at the Figma frame's natural pixels (444×956).
   It's then uniformly scaled to fit the viewport via --device-scale,
   set by JS on load/resize. Scaling preserves the exact Figma layout
   on any screen (phone, tablet, desktop) without rewriting the design.
*/
.device {
  position: relative;
  width: 444px;
  height: 956px;
  border-radius: 30px;
  overflow: hidden;
  border: 2px solid #979797;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  background: linear-gradient(180deg, #260b20 0%, #642b4b 17.66%, #642b4b 67.77%, #260b20 100%);
  /* Translate up by the on-screen keyboard height so focused inputs at
     the bottom of the device stay visible. --kb-offset is set by app.js. */
  transform:
    translateY(calc(-1 * var(--kb-offset, 0px)))
    scale(var(--device-scale, 1));
  transform-origin: center center;
  transition: transform 180ms ease;
  flex-shrink: 0;
}

/* On phone-sized viewports the device fills the whole screen (no frame
   decoration). The browser's address bar + home-indicator overlay clip
   the device bottom by a viewport-specific amount, so we don't hard-code
   the lift — `--phone-bottom-lift` is computed in app.js from the real
   overflow + a 40 px buffer, and every bottom-anchored element pulls in
   that value via calc(). 180 px is the fallback if JS hasn't run yet. */
@media (max-width: 500px) {
  .page { background: #000; }
  .device {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* !important is required because each of these elements has another
     rule LATER in this stylesheet that would otherwise win the cascade
     (same specificity, but later source order beats earlier). Without
     !important the lift values silently never apply. */
  .splash-tap     { top:    calc(891px - var(--phone-bottom-lift, 180px)) !important; }
  .bottom-nav     { bottom: var(--phone-bottom-lift, 180px)               !important; }
  .assistant-panel{ bottom: calc(8px   + var(--phone-bottom-lift, 180px)) !important; }
  .result-panel   { bottom: calc(120px + var(--phone-bottom-lift, 180px)) !important; }
  .library-list   { padding: 0 0 calc(121px + var(--phone-bottom-lift, 180px)) !important; }
  /* Result-panel top moves up with the lift, shrinking the calc-body area
     above it. Make it a scroll region so all three input cards stay
     reachable even when the lift is large. */
  .calc-body      { bottom: calc(320px + var(--phone-bottom-lift, 180px)) !important; overflow-y: auto; }
  /* 320 = result-panel height (200) + result-panel bottom inset (120); was 388 when the panel was 268 tall. */

  /* The side-tab spans the full device top-to-bottom, but on phones the
     device extends past the visible viewport on both edges, so the close
     button at the top and the user profile at the bottom get clipped.
     Push them inward with extra padding. */
  .side-tab {
    padding-top:    90px                                            !important;
    padding-bottom: calc(30px + var(--phone-bottom-lift, 180px))    !important;
  }
}

/* All screens fill device */
.screen {
  position: absolute; inset: 0;
  display: none;
  background: linear-gradient(180deg, #260b20 0%, #642b4b 17.66%, #642b4b 67.77%, #260b20 100%);
}
.screen.active { display: block; }

/* ============ Deploy version marker ============
   Tiny label in the top-right corner of the device, visible on every screen
   (sits above the highest z-indexed UI — modals, side-tab, scrim — so you
   can always read which build is live without inspecting the page). The
   number is bumped manually in index.html with each iteration. */
.version-badge {
  position: absolute;
  top: 58px;            /* aligned with the .assistant-header content row */
  right: 12px;
  z-index: 1000;        /* above modals (60), side-tab (70), everything */
  font-size: 20px;
  font-weight: 500;
  font-stretch: 75%;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  text-align: right;
}

/* ============ Splash ============ */
.splash {
  background: linear-gradient(180deg, #260b20 0%, #642b4b 21.28%, #642b4b 42.55%, #260b20 63.83%);
  cursor: pointer;
}
.splash-bg { position: absolute; inset: 0; }
.splash-candle {
  position: absolute; top: 50%; left: calc(50% + 0.5px);
  transform: translate(-50%, -50%);
  width: 539px; height: 962px; object-fit: cover;
}
.splash-logo-icon {
  position: absolute; top: 69px; left: 183px;
  width: 76px; height: 123px;
}
.splash-logo-type {
  position: absolute; top: 184px; left: 50%; transform: translateX(-50%);
  width: 190px; height: 57px;
  object-fit: contain;
}
.splash-tap {
  position: absolute; top: 891px; left: 50%; transform: translateX(-50%);
  font-size: 20px; font-stretch: 75%; line-height: 26px;
  white-space: nowrap;
}

/* ============ Top header (logo+hamburger or back+title+dots) ============ */
.assistant-header {
  position: absolute; top: 50px; left: 0; right: 0;
  height: 54px; padding: 0 22px;
  display: flex; align-items: center; gap: 15px;
  z-index: 25;
}
.hamburger {
  display: flex; flex-direction: column; gap: 5px; padding: 6px;
}
.hamburger span {
  display: block; width: 30px; height: 6px; background: #fff; border-radius: 5px;
}
.logo-type {
  width: 180px; height: 54px; object-fit: contain;
}
.assistant-header.header-chat {
  justify-content: space-between;
  padding: 0 24px;
}
.back-btn img { width: 18px; height: 27px; transform: rotate(180deg); display: block; }
.chat-title {
  font-weight: 500; font-size: 22px; color: #fff;
  text-transform: uppercase; font-stretch: 75%;
  flex: 1; text-align: left; padding-left: 16px;
}
.three-dots {
  display: flex; flex-direction: column; gap: 5px; padding: 8px 12px;
}
.three-dots span { display: block; width: 6px; height: 6px; background: #fff; border-radius: 5px; }

/* ============ Assistant — feature boxes ============ */
.assistant-body {
  position: absolute; top: 127px; left: 0; right: 0; bottom: 432px;
  overflow-y: auto;
  z-index: 5;
}
.feature-boxes {
  display: flex; gap: 10px; justify-content: center;
  padding: 27px 0;
}
.feature-box {
  width: 180px;
  background: rgba(38,11,32,0.4);
  border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 0 20px;
  cursor: pointer;
}
.feature-box img { width: 89px; height: 81px; object-fit: contain; margin-bottom: 4px; }

/* The calculator 3D icon in Figma is composed of a sprite image clipped
   by an SVG mask. We inline the mask as a data: URI so it never depends
   on a separate file (which Netlify was serving with the wrong MIME type
   when the file was named .png but contained SVG markup). */
.feature-box .ico-3d-calc {
  display: block;
  width: 63px;
  height: 78px;
  margin-bottom: 4px;
  background-image: url('assets/calc-source.png');
  background-size: 197.68px 107.84px;
  background-position: -66.84px -12.68px;
  background-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 78'><path d='M10.5189 1.41889L47.0242 0.0402993C55.0272 -0.612719 56.7121 6.86072 56.9227 8.67466C57.1333 10.4886 61.556 49.9599 62.9601 62.1496C63.6621 73.3961 54.8868 73.3235 53.6232 73.5412C52.3595 73.7588 28.1397 76.6611 17.469 77.8946C8.93235 78.8814 6.42378 72.6947 6.23658 69.4779C6.04937 66.2612 4.13051 50.2502 4.13051 50.2502C2.84347 38.6893 0.227264 15.0307 0.0587784 12.883C-0.151829 10.1984 0.199183 8.89233 1.18202 6.93327C2.16485 4.97422 4.76234 3.45051 6.79821 2.4347C8.4269 1.62206 9.95731 1.41889 10.5189 1.41889Z' fill='white'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 78'><path d='M10.5189 1.41889L47.0242 0.0402993C55.0272 -0.612719 56.7121 6.86072 56.9227 8.67466C57.1333 10.4886 61.556 49.9599 62.9601 62.1496C63.6621 73.3961 54.8868 73.3235 53.6232 73.5412C52.3595 73.7588 28.1397 76.6611 17.469 77.8946C8.93235 78.8814 6.42378 72.6947 6.23658 69.4779C6.04937 66.2612 4.13051 50.2502 4.13051 50.2502C2.84347 38.6893 0.227264 15.0307 0.0587784 12.883C-0.151829 10.1984 0.199183 8.89233 1.18202 6.93327C2.16485 4.97422 4.76234 3.45051 6.79821 2.4347C8.4269 1.62206 9.95731 1.41889 10.5189 1.41889Z' fill='white'/></svg>");
  -webkit-mask-size: 63px 78px;
          mask-size: 63px 78px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
}
.feature-title {
  font-size: 25px; font-weight: 500; opacity: 0.8; font-stretch: 75%;
  text-align: center;
}
.feature-desc {
  font-size: 16px; text-align: center; font-stretch: 75%; width: 160px;
  line-height: 1.2;
}

/* Answer text */
.answer-text {
  padding: 80px 40px 40px;
  font-size: 24px; line-height: 30px; opacity: 0.8;
  font-stretch: 75%; letter-spacing: -0.48px;
  white-space: pre-wrap;
}

/* Thinking */
.thinking-text {
  text-align: center; padding-top: 80px;
  font-size: 24px; opacity: 0.8; font-stretch: 75%;
}
.thinking-text .dots span {
  animation: blink 1.4s infinite both;
  display: inline-block;
}
.thinking-text .dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-text .dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%,80%,100% { opacity: 0.2 } 40% { opacity: 1 } }

/* ============ Bottom panels (assistant prompt panel / per-candle results / etc) ============ */
.assistant-panel,
.result-panel {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 440px;
  border: 3px solid #93416f;
  border-radius: 40px;
  box-shadow:
    0 -5px 20px rgba(0,0,0,0.5),
    inset 0 0 40px #93416f;
  background: linear-gradient(180deg, rgba(147,65,111,0.7) 5%, rgba(147,65,111,0.7) 50%, rgba(45,20,34,0.7) 100%);
  z-index: 10;
  overflow: hidden;
}
.assistant-panel { bottom: 8px; height: 331px; }

.panel-header {
  height: 50px;
  background: #260b20;
  border-radius: 37px 37px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 22px; text-transform: uppercase;
  font-stretch: 75%;
}
.panel-body {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 20px 10px;
}
.panel-prompt {
  font-size: 20px; line-height: 26px; text-align: center; font-stretch: 75%;
}
.panel-disclaimer { padding-top: 10px; }
.text-input-form {
  width: 390px;
  display: flex;
}
.text-input {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid #fff; border-radius: 50px;
  background: linear-gradient(180deg, #642b4b 23.7%, #260b20 72%);
  box-shadow:
    inset 0 0 25px #000,
    inset 0 -5px 40px rgba(0,0,0,0.4);
  font-size: 20px; color: #fff; font-stretch: 75%;
  /* iOS Safari ignores `color` on inputs and shows black text unless
     -webkit-text-fill-color is also set explicitly. */
  -webkit-text-fill-color: #fff;
  /* Remove the default iOS inset shadow / rounded-rect appearance so our
     own border-radius and box-shadow take full effect. */
  -webkit-appearance: none;
  line-height: 26px;
  text-align: center;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.text-input::placeholder { color: #fff; opacity: 0.7; }
.text-input:focus { border-color: #ffc300; }

/* Hide bottom nav when the native keyboard is open — the nav is unreachable
   anyway and hiding it gives the centered panel clean breathing room.
   Toggled via JS on body.keyboard-active. */
body.keyboard-active .bottom-nav { display: none !important; }

/* ============ Bottom nav ============ */
.bottom-nav {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 0;
  width: 444px; height: 101px;
  display: flex; gap: 15px; align-items: center; justify-content: center;
  border: 3px solid #93416f;
  border-radius: 30px;
  box-shadow: 0 -5px 20px rgba(0,0,0,0.5), inset 0 0 40px #93416f;
  z-index: 15;
}
.bottom-nav::before {
  content: ""; position: absolute; inset: 0; border-radius: 30px;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  background: linear-gradient(180deg, rgba(147,65,111,0.5) 5%, rgba(147,65,111,0.5) 50%, rgba(45,20,34,0.5) 100%);
  z-index: -1;
}
.nav-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 10px; width: 100px; height: 59px;
  opacity: 0.5;
  font-size: 14px; text-align: center; font-stretch: 75%;
}
.nav-btn.active { opacity: 1; }
.nav-btn .ico { width: 36px; height: 36px; object-fit: contain; }
.nav-btn:not(.active) .ico { width: 30px; height: 30px; }

/* Library hidden for prototype v1 — assistant + calculator only */
.nav-btn[data-goto="library"] { display: none; }
/* Feature boxes hidden — keep assistant screen focused on the input */
.feature-box[data-goto="library"],
.feature-box[data-goto="calculator"] { display: none; }

/* ============ Options menu ============ */
.options-menu {
  position: absolute;
  top: 118px; right: 20px;
  width: 200px;
  border: 3px solid #93416f; border-radius: 40px;
  background: linear-gradient(180deg, rgba(147,65,111,0.85) 5%, rgba(147,65,111,0.85) 50%, rgba(45,20,34,0.85) 100%);
  box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
  z-index: 40;
  padding: 12px 0;
}
.opt {
  display: block; width: 100%; padding: 10px 0;
  font-weight: 500; font-size: 25px; opacity: 0.8;
  font-stretch: 75%; text-align: center; text-transform: uppercase;
}
.opt-divider {
  height: 1px; margin: 4px 16px;
  background: linear-gradient(90deg, transparent 0%, #fff 50%, transparent 100%);
  opacity: 0.6;
}

/* ============ Modals (rename/delete) ============ */
.modal-overlay {
  position: absolute; inset: 0;
  z-index: 60;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.modal-card {
  position: absolute; top: 218px; left: 50%; transform: translateX(-50%);
  border: 3px solid #93416f;
  border-radius: 40px;
  background: linear-gradient(180deg, rgba(147,65,111,0.7) 5%, rgba(147,65,111,0.7) 50%, rgba(45,20,34,0.7) 100%);
  box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
  overflow: hidden;
}
.rename-card { width: 390px; }
.delete-card { width: 354px; }
.modal-header {
  height: 50px; background: #260b20;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 22px; text-transform: uppercase;
  font-stretch: 75%;
}
.modal-body { padding: 20px 10px 30px; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.modal-input-wrap {
  width: 300px;
}
.modal-input {
  width: 300px; height: 50px;
  border: 1px solid #93416f; border-radius: 50px;
  background: rgba(0,0,0,0.25);
  box-shadow: inset 0 0 25px #000, inset 0 -5px 40px rgba(0,0,0,0.4);
  text-align: center; font-size: 22px; font-weight: 500; font-stretch: 75%;
  color: #facab5; outline: none;
  padding: 0 16px;
  -webkit-tap-highlight-color: transparent;
}
.modal-input::placeholder { color: #facab5; opacity: 0.6; }
.modal-input:focus { border-color: #ffc300; }
.modal-warning {
  font-size: 20px; line-height: 26px; text-align: center; font-stretch: 75%;
}
.modal-divider {
  width: 304px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, #fff 50%, transparent 100%);
  opacity: 0.6;
}
.modal-actions {
  display: flex; gap: 20px; justify-content: center;
}
.modal-btn {
  width: 145px;
  font-weight: 500; font-size: 25px; opacity: 0.8;
  font-stretch: 75%; text-align: center; text-transform: uppercase;
}
.modal-btn-primary { color: #ffc300; }

/* ============ Side tab ============ */
.side-tab {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 280px;
  border: 3px solid #93416f;
  border-radius: 0 40px 40px 0;
  background: linear-gradient(180deg, rgba(147,65,111,0.5) 5%, rgba(147,65,111,0.5) 50%, rgba(45,20,34,0.5) 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -5px 20px rgba(0,0,0,0.5), inset 0 0 40px #93416f;
  z-index: 70;
  padding: 30px 15px 30px 18px;
  display: flex; flex-direction: column; gap: 50px;
  transform: translateX(-105%);
  transition: transform 220ms ease;
}
.side-tab[hidden] { display: flex; }
.side-tab.open { transform: translateX(0); }
.side-collapse { width: 30px; height: 30px; align-self: flex-start; padding: 4px; }
.side-collapse img { width: 18px; height: 27px; transform: rotate(180deg); }
.side-new-chat {
  display: flex; align-items: center; gap: 7px;
  font-weight: 500; font-size: 22px; text-transform: uppercase; font-stretch: 75%;
}
.side-new-chat .plus { width: 25px; height: 25px; }
.side-section-title {
  font-weight: 500; font-size: 22px; text-transform: uppercase; font-stretch: 75%;
  margin-top: -25px;
  margin-bottom: 5px;
}
.side-chats {
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto;
  flex: 1;
}
.side-chats li {
  font-size: 20px; line-height: 26px; color: #adadad; font-stretch: 75%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  max-width: 240px;
}
.side-chats li.active { color: #fff; }
.side-profile {
  display: flex; align-items: center; gap: 15px;
  margin-top: auto;
}
.side-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.side-username { font-size: 20px; font-stretch: 75%; }
.side-scrim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 65;
}

/* ============ Calculator ============ */
.calc-body {
  position: absolute; top: 127px; left: 30px; right: 30px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 5;
}
.calc-card {
  background: rgba(38,11,32,0.3);
  border-radius: 20px;
  padding-bottom: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  overflow: hidden;
}
.calc-card-header {
  width: 100%; height: 40px;
  background: rgba(0,0,0,0.4);
  border-radius: 20px 20px 0 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 5px;
  font-size: 20px; font-stretch: 75%;
}
.calc-stepper {
  display: flex; align-items: center; gap: 15px;
}
/* Pure-CSS stepper button (no images). The original Figma assets were
   SVGs misnamed as .png, which Netlify served with the wrong MIME type
   and Chrome refused to render. CSS draws the same gradient circle +
   shadow, and ::before/::after draw the +/− bars. */
.stepper-btn {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid #979797;
  background: linear-gradient(180deg, #fd9f65 0%, #765680 100%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.9);
  position: relative;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.stepper-btn::before {
  content: ""; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 22px; height: 6px;
  background: #fff; border-radius: 1px;
}
.stepper-btn[data-step="1"]::after {
  content: ""; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 6px; height: 22px;
  background: #fff; border-radius: 1px;
}
.stepper-input {
  width: 150px; height: 50px;
  border: 1px solid #93416f; border-radius: 50px;
  background: rgba(0,0,0,0.1);
  box-shadow: inset 0 0 25px #000, inset 0 -5px 40px rgba(0,0,0,0.4);
  text-align: center;
  font-weight: 500; font-size: 32px; font-stretch: 75%;
  color: #fff; outline: none;
}
.stepper-input.fill-weight { font-size: 22px; color: #fff; }
.stepper-input.fill-weight::placeholder { color: #93416f; opacity: 1; }
.fill-weight-link {
  font-style: italic; font-weight: 500; color: #ffc300; opacity: 0.7;
  font-size: 20px; font-stretch: 75%;
  text-decoration: underline; cursor: pointer;
}

/* Slider */
.slider-wrap {
  position: relative;
  width: 340px; height: 140px;     /* tall enough to keep the % value (top: 4px,
                                      ~30px tall) well clear of the 50px thumb
                                      (thumb top ≈ 53px at this height) */
  margin: 4px auto 0;
}
.slider-label {
  position: absolute; bottom: 10px;
  font-size: 20px; font-stretch: 75%; line-height: 26px;
}
.slider-label-left { left: 7px; }
.slider-label-right { right: 7px; }
.slider-value {
  position: absolute; top: 4px;
  /* `left` is set by JS to track the slider thumb position. transform
     centers the text on that left coordinate. The 50% fallback is just
     for the brief moment before JS runs. */
  left: 50%;
  transform: translateX(-50%);
  color: #ffc300; font-size: 26px; font-weight: 500;
  font-stretch: 75%; text-transform: uppercase;
  pointer-events: none;
}
.fragrance-slider {
  position: absolute; left: 0; right: 0; bottom: 36px;
  width: 100%; height: 20px;
  -webkit-appearance: none; appearance: none;
  background: transparent; outline: none;
}
.fragrance-slider::-webkit-slider-runnable-track {
  height: 20px; border: 1px solid #93416f; border-radius: 50px;
  background: rgba(0,0,0,0.5);
  box-shadow: inset 0 0 25px #000, inset 0 -5px 40px rgba(0,0,0,0.4);
}
.fragrance-slider::-moz-range-track {
  height: 20px; border: 1px solid #93416f; border-radius: 50px;
  background: rgba(0,0,0,0.5);
  box-shadow: inset 0 0 25px #000, inset 0 -5px 40px rgba(0,0,0,0.4);
}
.fragrance-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 50px; height: 50px;
  margin-top: -16px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fd9f65 0%, #765680 100%);
  border: 2px solid #979797;
  box-shadow: 0 4px 10px rgba(0,0,0,0.9);
  cursor: pointer;
}
.fragrance-slider::-moz-range-thumb {
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(180deg, #fd9f65 0%, #765680 100%);
  border: 2px solid #979797;
  box-shadow: 0 4px 10px rgba(0,0,0,0.9);
  cursor: pointer;
}

/* Result panel (calculator) */
.result-panel {
  bottom: 120px;
  height: 200px;     /* was 268 — content (header 50 + grid ~130) fits in
                        ~180, the extra 20 gives a small bottom margin */
  display: flex;
  flex-direction: column;   /* so .result-grid can flex:1 inside it */
}
.result-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  width: 100%;
  flex: 1;           /* fill remaining panel body so each cell takes
                        full height & content centers cleanly */
}
.result-cell {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;       /* center content vertically — removes the
                                    big empty bar that appeared below it when
                                    the grid had a fixed 174 px height */
  gap: 5px;
  padding: 20px 0;
}
.result-cell.alt { background: rgba(38,11,32,0.5); }
.rc-label {
  color: #ffc300; font-size: 20px; font-stretch: 75%;
  line-height: 26px; text-align: center;
  width: 100px;
}
.rc-value {
  font-weight: 500; font-size: 22px; font-stretch: 75%;
  text-transform: uppercase;
}

/* Calculator screen has no top panel above bottom nav, so panel sits above nav */

/* ============ Finding fill weight ============ */
.ffw-body {
  position: absolute; top: 113px; left: 0; right: 0; bottom: 20px;
  padding: 0 20px 20px;
  overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ffw-title {
  color: #ffc300; font-weight: 500; font-size: 22px;
  font-stretch: 75%; text-transform: uppercase;
  text-align: center;
}
.ffw-intro {
  font-size: 14px; font-stretch: 75%;
  width: 318px; text-align: left; line-height: 18px;
}
.ffw-cards {
  display: flex; gap: 10px; align-items: flex-start;
  width: 100%; justify-content: center;
}
.ffw-card {
  background: rgba(38,11,32,0.3);
  border-radius: 20px;
  padding: 10px 10px 20px;
  width: 200px;
  display: flex; flex-direction: column; gap: 10px;
}
.ffw-icon { width: 90px; height: 92px; object-fit: contain; mix-blend-mode: screen; }
.ffw-method-title { font-weight: 700; font-size: 20px; line-height: 26px; font-stretch: 75%; }
.ffw-method-sub { font-size: 16px; font-style: italic; font-weight: 500; line-height: 18px; font-stretch: 75%; }
.ffw-list { padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.ffw-list li { font-size: 14px; line-height: 18px; font-stretch: 75%; list-style: disc; }
.ffw-p { font-size: 14px; line-height: 18px; font-stretch: 75%; }
.ffw-yellow { color: #ffc300; }

/* ============ Library ============ */
.library-list {
  position: absolute; top: 119px; left: 0; right: 0; bottom: 0;
  padding: 0 0 121px;
  overflow-y: auto;
  display: flex; flex-direction: column; align-items: center;
  scrollbar-width: thin;
}
.lib-item {
  position: relative;
  width: 100%; height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}
.lib-item img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.lib-item-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%);
  pointer-events: none;
}
.lib-title-text {
  position: absolute; left: 22px; bottom: 30px;
  font-weight: 500; font-size: 22px; text-transform: uppercase;
  font-stretch: 75%;
}
.lib-open-btn {
  position: absolute; right: 22px; bottom: 30px;
  width: 100px; height: 40px;
  border: 2px solid #979797; border-radius: 50px;
  background: linear-gradient(180deg, #fd9f65 0%, #765680 104.55%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 18px; letter-spacing: -0.54px;
  text-transform: uppercase;
  font-family: 'Roboto Condensed', sans-serif;
  cursor: pointer;
}

/* Library issue */
.li-body {
  position: absolute; top: 0; left: 0; right: 0; bottom: 20px;
  overflow-y: auto;
}
.li-banner {
  position: relative;
  height: 240px;
  overflow: hidden;
  margin-top: 0;
}
.li-banner img {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  height: 100%; min-width: 100%; object-fit: cover;
}
.li-banner-fade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, #260b20 100%);
}
.li-title {
  font-weight: 500; font-size: 32px; text-transform: uppercase;
  font-stretch: 75%; text-align: center;
  margin: 18px 30px 12px;
}
.li-card {
  margin: 10px 30px 0;
  background: rgba(38,11,32,0.3);
  border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding-bottom: 18px;
  overflow: hidden;
}
.li-card-header {
  width: 100%; height: 40px;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 5px;
  color: #ffc300; font-size: 20px; font-stretch: 75%;
}
.li-card-text {
  font-size: 20px; line-height: 26px; font-stretch: 75%;
  width: 341px;
}
.li-card-list {
  width: 341px; padding-left: 30px; display: flex; flex-direction: column; gap: 4px;
}
.li-card-list li { font-size: 20px; line-height: 26px; font-stretch: 75%; list-style: disc; }

/* Hide content not relevant to current sub-state */
[hidden] { display: none !important; }