/* =========================================================
   LUMÉ — Skin Intelligence
   Estetik: editorial premium, porselin hangat, serif elegan
   ========================================================= */

:root {
  /* Permukaan — krim & beige hangat (jenama Lovaa) */
  --bg: #f5ece0;
  --bg-deep: #e7d4bf;
  --surface: #fdf8f1;
  --surface-2: #f4e9da;

  /* Dakwat & teks (espresso hangat) */
  --ink: #3c2c20;
  --ink-soft: #8a6f57;
  --ink-faint: #b7a087;

  /* Garis & aksen */
  --line: #ecdcc8;
  --line-soft: #f4e9da;
  --accent: #6e4a30;      /* coklat kaya Lovaa */
  --accent-soft: #9a6b45; /* karamel */
  --gold: #b0895f;        /* emas hangat */

  /* Status */
  --good: #5f7d4f;
  --warn: #b5832f;
  --bad: #b0553e;         /* terracotta hangat */

  --radius: 22px;
  --radius-sm: 14px;
  --shadow-sm: 0 1px 2px rgba(33, 31, 27, 0.04);
  --shadow: 0 18px 50px -28px rgba(33, 31, 27, 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --lovaa-vh: 100dvh;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background:
    radial-gradient(120% 80% at 50% -20%, #fdf8f1 0%, var(--bg) 48%, var(--bg-deep) 100%);
  color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  padding: 26px 18px calc(40px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
}

.app { width: 100%; max-width: 430px; }

/* ===== Eyebrow / label kecil ===== */
.eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.eyebrow--sm {
  color: var(--ink-faint);
  font-size: 0.66rem;
  margin: 30px 2px 14px;
}

/* ===== Header ===== */
.header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 4px 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 30px;
}
.logo {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.logo-mark {
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ===== Screen system ===== */
.screen { display: none; }
.screen.is-active { display: block; animation: rise 0.6s var(--ease); }
.screen--intro.is-active { min-height: 105vh; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ===== Intro / Hero ===== */
.hero { padding: 6px 2px 4px; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.hero-sub {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.65;
  max-width: 38ch;
}

/* ===== HERO 3D — Scan Orb ===== */
.hero-stage {
  position: relative;
  height: 270px;
  margin: 4px 0 6px;
  perspective: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aurora {
  position: absolute;
  inset: -10% 0;
  background:
    radial-gradient(42% 38% at 30% 38%, rgba(196, 122, 68, 0.55), transparent 70%),
    radial-gradient(46% 42% at 72% 60%, rgba(228, 168, 92, 0.45), transparent 72%),
    radial-gradient(36% 36% at 58% 24%, rgba(255, 212, 150, 0.6), transparent 70%),
    radial-gradient(30% 30% at 20% 72%, rgba(222, 130, 116, 0.3), transparent 70%);
  filter: blur(26px);
  opacity: 0.95;
  animation: auroraDrift 7s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(-6%, -3%, 0) scale(1); }
  50%  { transform: translate3d(5%, 4%, 0) scale(1.08); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.03); }
}

.scan-orb-wrap {
  position: relative;
  width: 188px;
  height: 188px;
  transform-style: preserve-3d;
}
/* Bayang lembut di bawah orb */
.scan-orb-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -32px;
  width: 110px;
  height: 18px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(90, 62, 42, 0.28), transparent);
  border-radius: 50%;
  filter: blur(6px);
  pointer-events: none;
}
.scan-orb {
  position: relative;
  width: 188px;
  height: 188px;
  transform-style: preserve-3d;
  animation: orbTilt 7s ease-in-out infinite alternate;
}
@keyframes orbTilt {
  0%   { transform: rotateX(12deg) rotateY(-12deg); }
  100% { transform: rotateX(12deg) rotateY(12deg); }
}

.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(110, 74, 48, 0.28);
}
/* Ring 1: garis putus emas, pusingan JELAS kelihatan */
.ring-1 {
  inset: -18px;
  border: 1.5px dashed rgba(176, 137, 95, 0.8);
  box-shadow: 0 0 26px rgba(205, 170, 125, 0.35);
  animation: spin 16s linear infinite;
}
/* Ring 2: arc "radar" emas berpusing pantas, nyawa utama animasi */
.ring-2 {
  inset: 0;
  border: none;
  background: conic-gradient(from 0deg,
    transparent 0 76%, rgba(255, 202, 132, 0.85) 92%, rgba(255, 232, 196, 1) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 7px rgba(255, 198, 128, 0.85));
  animation: spin 3.4s linear infinite;
}
.ring-3 { inset: 24px; border: 1px dotted rgba(255, 255, 255, 0.85); animation: spin 20s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.orb-core {
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(140% 140% at 35% 18%, #fffdf8 0%, #f9ecd4 20%, #edca9c 46%, #c9996a 76%, #93653d 100%);
  box-shadow:
    inset -14px -18px 34px rgba(104, 68, 44, 0.58),
    inset 14px 14px 34px rgba(255, 252, 247, 0.95),
    inset 0 0 46px rgba(205, 170, 125, 0.4),
    0 22px 50px -16px rgba(90, 62, 42, 0.62);
  transform: translateZ(30px);
}
/* Grid halus "AI scanning" di belakang wajah */
.orb-core::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(110, 74, 48, 0.11) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(to right, rgba(110, 74, 48, 0.09) 0 1px, transparent 1px 13px);
  -webkit-mask: radial-gradient(circle at 50% 45%, #000 52%, transparent 80%);
          mask: radial-gradient(circle at 50% 45%, #000 52%, transparent 80%);
  opacity: 0.75;
  pointer-events: none;
}
/* Emoji perempuan (gantikan muka kartun) */
.orb-face-emoji {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
  line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(90, 62, 42, 0.35));
  transform: translateZ(6px);
  animation: faceBob 5s ease-in-out infinite;
  z-index: 1;
}
@keyframes faceBob {
  0%, 100% { transform: translateZ(6px) translateY(0) scale(1); }
  50%      { transform: translateZ(6px) translateY(-4px) scale(1.02); }
}

/* Bintik-bintik masalah kulit yang AI kesan pada wajah */
.orb-spots { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.spot {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
  animation: spotPing 4.2s ease-in-out infinite;
}
.spot::after {
  content: "";
  position: absolute;
  inset: -3.5px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.5;
}
.spot--acne { background: #c0563c; color: #c0563c; box-shadow: 0 0 5px rgba(192, 86, 60, 0.65); }
.spot--dark { background: #7c5a3a; color: #7c5a3a; box-shadow: 0 0 5px rgba(124, 90, 58, 0.55); }
/* kedudukan atas kawasan wajah emoji (dahi, pipi, hidung, dagu) */
.s1 { top: 30%; left: 40%; animation-delay: 0s; }
.s2 { top: 34%; left: 58%; animation-delay: 0.5s; }
.s3 { top: 46%; left: 34%; animation-delay: 1s; }
.s4 { top: 50%; left: 64%; animation-delay: 1.5s; }
.s5 { top: 44%; left: 50%; animation-delay: 2s; }
.s6 { top: 60%; left: 44%; animation-delay: 2.5s; }
.s7 { top: 58%; left: 58%; animation-delay: 3s; }
@keyframes spotPing {
  0%, 46%, 100% { opacity: 0; transform: scale(0.4); }
  10%, 34%      { opacity: 1; transform: scale(1); }
}

/* Cartoon face styling */
.cartoon-face .cf-head { fill: rgba(255, 248, 240, 0.55); stroke: rgba(90, 62, 42, 0.65); stroke-width: 2; }
.cartoon-face .cf-neck { fill: none; stroke: rgba(90, 62, 42, 0.55); stroke-width: 2; }
.cartoon-face .cf-blush { fill: rgba(220, 140, 140, 0.35); stroke: none; }
.cartoon-face .cf-brow { fill: none; stroke: rgba(90, 62, 42, 0.6); stroke-width: 1.6; stroke-linecap: round; }
.cartoon-face .cf-eye { fill: rgba(90, 62, 42, 0.85); stroke: none; transform-origin: center; animation: blink 4s ease-in-out infinite; }
.cartoon-face .cf-shine { fill: rgba(255, 255, 255, 0.95); stroke: none; animation: blink 4s ease-in-out infinite; }
.cartoon-face .cf-smile { fill: none; stroke: rgba(90, 62, 42, 0.7); stroke-width: 2.2; stroke-linecap: round; }
.cartoon-face .cf-sparkle { fill: rgba(255, 255, 255, 0.95); stroke: none; filter: drop-shadow(0 0 2px rgba(255,255,255,0.8)); animation: sparkle 2.5s ease-in-out infinite; }
@keyframes blink {
  0%, 45%, 55%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.15); }
}
@keyframes sparkle {
  0%, 100% { opacity: 0.6; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}
/* Titik landmark AI, ping bergilir-gilir (visual "AI baca 478 titik wajah") */
.cartoon-face .cf-dot {
  fill: #c08a4f;
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(255, 190, 110, 0.9));
  animation: dotPing 3.6s ease-in-out infinite;
}
.cartoon-face .cf-dot:nth-child(2) { animation-delay: 0.5s; }
.cartoon-face .cf-dot:nth-child(3) { animation-delay: 1s; }
.cartoon-face .cf-dot:nth-child(4) { animation-delay: 1.5s; }
.cartoon-face .cf-dot:nth-child(5) { animation-delay: 2s; }
.cartoon-face .cf-dot:nth-child(6) { animation-delay: 2.5s; }
@keyframes dotPing {
  0%, 40%, 100% { opacity: 0; }
  8%, 26%       { opacity: 1; }
}

.orb-gloss {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(70% 45% at 32% 18%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.35) 35%, transparent 60%),
    radial-gradient(40% 25% at 68% 75%, rgba(255, 255, 255, 0.25), transparent 60%);
  pointer-events: none;
  overflow: hidden;
}
/* Kilauan cahaya menyapu orb sekali-sekala, buat ia nampak "hidup" & berkilat */
.orb-gloss::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%);
  animation: orbSheen 4.5s ease-in-out infinite;
}
@keyframes orbSheen {
  0%, 55%  { transform: translateX(-75%); }
  90%, 100% { transform: translateX(75%); }
}
.scan-sweep {
  position: absolute;
  left: 0; right: 0; height: 38%;
  top: -38%;
  background: linear-gradient(to bottom,
    transparent, rgba(255, 205, 130, 0.35) 55%, rgba(255, 228, 178, 0.95));
  border-bottom: 2px solid rgba(255, 238, 205, 1);
  box-shadow: 0 0 18px rgba(255, 190, 110, 0.9), 0 3px 30px rgba(255, 190, 110, 0.5);
  animation: sweep 2.6s ease-in-out infinite;
}
@keyframes sweep {
  0%   { top: -38%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.orb-score {
  position: absolute;
  right: -6px; bottom: 6px;
  transform: translateZ(60px);
  background: linear-gradient(135deg, #7a5233, #a3714a);
  border: 1px solid rgba(255, 220, 170, 0.65);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  padding: 6px 12px;
  border-radius: 14px;
  box-shadow: 0 12px 26px -8px rgba(90, 62, 42, 0.8);
  animation: floatY 4s ease-in-out infinite, scoreGlow 2.8s ease-in-out infinite;
}
@keyframes scoreGlow {
  0%, 100% { box-shadow: 0 12px 26px -8px rgba(90, 62, 42, 0.8), 0 0 10px rgba(255, 200, 130, 0.25); }
  50%      { box-shadow: 0 12px 26px -8px rgba(90, 62, 42, 0.8), 0 0 24px rgba(255, 200, 130, 0.65); }
}
.orb-score small { font-size: 0.62rem; opacity: 0.85; font-weight: 500; }

.float-chip {
  position: absolute;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(176, 137, 95, 0.35);
  padding: 5px 11px 5px 9px;
  border-radius: 20px;
  box-shadow: 0 10px 24px -8px rgba(90, 62, 42, 0.55);
  white-space: nowrap;
}
/* Titik status berwarna, macam alat medis mengesan sesuatu */
.float-chip::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
  background: var(--chip-dot, var(--gold));
  box-shadow: 0 0 8px var(--chip-dot, var(--gold));
  animation: chipDot 2s ease-in-out infinite;
}
@keyframes chipDot {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.fc1 { --chip-dot: #c0563c; top: 2px; left: -26px; transform: translateZ(50px); animation: floatY 4.2s ease-in-out infinite; }
.fc2 { --chip-dot: #b0895f; top: 36px; right: -34px; transform: translateZ(70px); animation: floatY 5s ease-in-out infinite 0.4s; }
.fc3 { --chip-dot: #a58a4e; bottom: 30px; left: -34px; transform: translateZ(64px); animation: floatY 4.6s ease-in-out infinite 0.8s; }
.fc4 { --chip-dot: #d9825f; bottom: -14px; left: 30px; transform: translateZ(40px); animation: floatY 5.4s ease-in-out infinite 0.2s; }
@keyframes floatY {
  0%, 100% { translate: 0 0; rotate: -1.2deg; }
  50%      { translate: 0 -9px; rotate: 1.4deg; }
}

/* Trust pills bawah headline */
.trust-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.trust-pill {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 7px 12px;
  border-radius: 30px;
}

.social-proof {
  text-align: center;
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--gold);
  letter-spacing: 0.01em;
}

/* ===== 3D Parallax Scrolling Layer ===== */
.parallax-scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  overflow: hidden;
}
.parallax-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  will-change: transform;
  transform: translate3d(0, calc(var(--py, 0) * var(--speed, 0.2)), 0);
}
.blob-back {
  width: 320px; height: 320px;
  top: -60px; left: -90px;
  background: radial-gradient(circle at 30% 30%, rgba(205, 170, 125, 0.55), rgba(154, 107, 69, 0.18) 60%, transparent 70%);
  --speed: 0.12;
}
.blob-mid {
  width: 240px; height: 240px;
  top: 40px; right: -70px;
  background: radial-gradient(circle at 40% 40%, rgba(154, 107, 69, 0.45), rgba(110, 74, 48, 0.15) 62%, transparent 72%);
  --speed: 0.28;
}
.blob-front {
  width: 180px; height: 180px;
  bottom: -40px; left: 50%;
  margin-left: -90px;
  background: radial-gradient(circle at 35% 35%, rgba(205, 170, 125, 0.6), rgba(154, 107, 69, 0.22) 58%, transparent 70%);
  --speed: 0.48;
}

.parallax-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(224, 178, 118, 0.75);
  box-shadow: 0 0 14px rgba(224, 178, 118, 0.6);
  will-change: transform;
  transform: translate3d(0, calc(var(--py, 0) * var(--speed, 0.2)), 0);
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}
.p1 { top: 18%; left: 14%; width: 5px; height: 5px; --speed: 0.22; }
.p2 { top: 28%; right: 18%; width: 7px; height: 7px; --speed: 0.36; animation-delay: 0.6s; }
.p3 { top: 62%; left: 22%; width: 4px; height: 4px; --speed: 0.18; animation-delay: 1.2s; }
.p4 { top: 74%; right: 26%; width: 6px; height: 6px; --speed: 0.42; animation-delay: 1.8s; }
.p5 { top: 44%; left: 8%; width: 5px; height: 5px; --speed: 0.30; animation-delay: 2.4s; }

/* Mouse-aware 3D tilt on the orb wrapper */
.mouse-tilt {
  --rx: 0deg;
  --ry: 0deg;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.15s ease-out;
}

/* Scroll reveal for content blocks */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .aurora, .scan-orb, .ring, .scan-sweep, .orb-score, .float-chip,
  .float-chip::before, .orb-gloss::after, .parallax-particle,
  .orb-face-emoji, .spot { animation: none !important; }
  .spot { opacity: 0.85; transform: scale(1); } /* bintik kekal nampak tanpa animasi */
  .parallax-blob, .parallax-particle { transform: none !important; }
  .mouse-tilt { transform: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Tips */
.tips {
  margin: 30px 0 8px;
  padding: 22px 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.tips ul { list-style: none; display: grid; gap: 0; }
.tips li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.9rem;
  color: var(--ink);
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.tips li:last-child { border-bottom: none; padding-bottom: 0; }
.tips li:first-of-type { padding-top: 0; }
.tip-no {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--gold);
  font-weight: 500;
  min-width: 20px;
}

/* ===== Buttons ===== */
.cta-group { display: grid; gap: 11px; margin-top: 26px; }
.btn {
  font-family: var(--font-body);
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 17px 22px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.25s var(--ease),
    border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  color: var(--ink);
}
.btn:active { transform: scale(0.98); }
.btn--primary {
  background: var(--accent);
  color: #fdf8f1;
  box-shadow: 0 14px 30px -12px rgba(110, 74, 48, 0.5);
}
.btn--primary:hover { background: #583926; }

/* CTA berkilau — tarik perhatian untuk scan */
.btn--glow {
  position: relative;
  font-size: 1.04rem;
  font-weight: 600;
  padding-top: 17px;
  padding-bottom: 17px;
  background: linear-gradient(120deg, var(--accent), var(--accent-soft), var(--accent));
  background-size: 200% 100%;
  animation: glowShift 3.5s ease-in-out infinite, glowPulse 2.4s ease-in-out infinite;
}
@keyframes glowShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 14px 30px -12px rgba(110, 74, 48, 0.55); }
  50%      { box-shadow: 0 16px 40px -10px rgba(110, 74, 48, 0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--glow { animation: none; }
}
.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--ink); background: var(--surface); }

.btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.btn.is-disabled:active { transform: none; }

/* ===== Kad indikator penuaan kulit (keputusan) ===== */
.skin-age {
  text-align: center;
  background: linear-gradient(170deg, #fdf8f1, var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.skin-age .eyebrow--sm { margin: 0 0 6px; color: var(--accent); }
.skin-age-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
}
.skin-age-num span {
  font-family: var(--font-display);
  font-size: 4.2rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.skin-age-label span {
  font-size: 2.35rem;
  line-height: 1.08;
}
.skin-age-num small {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.skin-age-gap {
  margin-top: 12px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
}
.skin-age-gap strong { font-weight: 600; }
.skin-age.is-older .skin-age-num span { color: var(--bad); }
.skin-age.is-older strong { color: var(--bad); }
.skin-age.is-younger .skin-age-num span { color: var(--good); }
.skin-age.is-younger strong { color: var(--good); }
.skin-age.is-match strong { color: var(--accent); }

/* ===== Rutin harian (pagi/malam) ===== */
.routine-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.routine-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 15px 15px 16px;
  box-shadow: var(--shadow-sm);
}
.routine-col h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 10px;
}
.routine-col ol { list-style: none; counter-reset: step; display: grid; gap: 8px; }
.routine-col li {
  counter-increment: step;
  display: flex;
  gap: 9px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.routine-col li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 17px; height: 17px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.66rem;
  color: var(--gold);
}
@media (max-width: 360px) { .routine-grid { grid-template-columns: 1fr; } }

/* ===== Senarai tips / elak ===== */
.advice-list { list-style: none; display: grid; gap: 9px; }
.advice-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.advice-list li::before {
  content: "✓";
  flex-shrink: 0;
  color: var(--good);
  font-weight: 700;
}
.advice-avoid li::before { content: "✕"; color: var(--bad); }

/* ===== Ringkasan AI (keputusan AI DeepScan) ===== */
.ai-summary {
  background: linear-gradient(165deg, #fdf8f1, var(--surface-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  margin: 4px 0 18px;
  box-shadow: var(--shadow-sm);
}
.ai-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fdf8f1;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 11px;
}
.ai-badge.is-demo { background: var(--ink-soft); }
.ai-summary p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink);
}

/* umur kulit sebagai NOMBOR (mod AI) */
.skin-age.is-ai .skin-age-num span {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
}
.skin-age.is-ai .skin-age-num small {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-left: 4px;
}

/* ===== Disclaimer ===== */
.disclaimer {
  font-size: 0.74rem;
  color: var(--ink-faint);
  line-height: 1.6;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* ===== Camera ===== */
/* Bar langkah tangkap 3 sudut */
.capture-steps {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.capture-steps .step-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.capture-steps .step-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.capture-steps .step-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.capture-steps .step-instr {
  margin: 3px 0 10px;
  font-size: 14px;
  color: var(--ink-soft);
}
.capture-steps .step-dots {
  display: flex;
  gap: 6px;
}
.capture-steps .step-dot {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  transition: background 0.3s var(--ease);
}
.capture-steps .step-dot.is-active { background: var(--accent); }
.capture-steps .step-dot.is-done { background: var(--good); }

.camera-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #1a1916;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.camera-wrap::before,
.camera-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}
.camera-wrap::before {
  background:
    linear-gradient(180deg, transparent 0%, rgba(247, 243, 236, 0.18) 46%, rgba(247, 243, 236, 0.72) 50%, rgba(247, 243, 236, 0.18) 54%, transparent 100%),
    repeating-linear-gradient(180deg, rgba(247, 243, 236, 0.08) 0 1px, transparent 1px 12px);
  transform: translateY(-110%);
}
.camera-wrap::after {
  background: radial-gradient(ellipse at center, transparent 42%, rgba(120, 190, 150, 0.2) 72%, rgba(247, 243, 236, 0.22) 100%);
  box-shadow: inset 0 0 44px rgba(120, 190, 150, 0.36);
}
.camera-wrap.is-capturing::before {
  opacity: 1;
  animation: scanSweep 0.95s var(--ease) 1;
}
.camera-wrap.is-capturing::after {
  opacity: 1;
  animation: scanPulse 0.95s var(--ease) 1;
}
#video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

/* Overlay mesh wajah hidup — jejak 478 titik real-time */
.mesh-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(-1); /* selari dengan video bercermin */
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.mesh-overlay.is-live { opacity: 1; }
.face-guide {
  position: absolute;
  top: 48%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60%; height: 74%;
  border: 1.5px solid rgba(247, 243, 236, 0.55);
  border-radius: 50% / 42%;
  pointer-events: none;
  z-index: 2;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.face-guide::before,
.face-guide::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 1.5px solid rgba(247, 243, 236, 0.8);
}
.face-guide::before { top: -1px; left: -1px; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; }
.face-guide::after { bottom: -1px; right: -1px; border-left: none; border-top: none; border-radius: 0 0 8px 0; }
.face-guide.is-good { border-color: rgba(120, 190, 150, 0.9); box-shadow: 0 0 30px rgba(79, 125, 99, 0.4); }
.face-guide.is-bad { border-color: rgba(200, 130, 110, 0.85); }

.scan-line {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 16%;
  background:
    linear-gradient(180deg, transparent, rgba(247, 243, 236, 0.52), transparent),
    linear-gradient(90deg, transparent, rgba(120, 190, 150, 0.95), transparent);
  filter: drop-shadow(0 0 16px rgba(120, 190, 150, 0.9));
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}
.scan-line.is-scanning { opacity: 1; animation: scan 0.95s var(--ease) 1; }
@keyframes scan { 0% { top: -16%; } 100% { top: 100%; } }
@keyframes scanSweep { 0% { transform: translateY(-110%); } 100% { transform: translateY(110%); } }
@keyframes scanPulse {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

/* Pengesan kualiti masa nyata */
.cam-reminder {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 14px;
  margin: 12px 0 2px;
}

.quality-pill {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 88%;
  padding: 10px 17px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: rgba(26, 25, 22, 0.62);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(247, 243, 236, 0.16);
  color: #f7f3ec;
  white-space: nowrap;
  transition: all 0.3s var(--ease);
  z-index: 5;
}
.quality-pill.is-good { background: rgba(47, 93, 74, 0.78); border-color: rgba(120, 190, 150, 0.4); }
.quality-pill.is-warn { background: rgba(120, 90, 40, 0.7); }
.quality-pill.is-bad { background: rgba(120, 55, 42, 0.72); }
.quality-icon { font-size: 0.9rem; }

/* ===== Loading ===== */
.screen--loading { text-align: center; padding: 90px 0; }
.loader-ring {
  width: 54px; height: 54px;
  margin: 0 auto 26px;
  border: 1.5px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
  color: var(--ink-soft);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  font-family: var(--font-display);
  font-style: italic;
}

.loading-hint {
  margin: 22px auto 0;
  max-width: 320px;
  padding: 14px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.loading-eta {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
}
.loading-warn {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ===== Kad Progres Kulit (before/after) ===== */
.progress-card {
  margin: 16px 0 4px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.prog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.prog-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
}
.prog-delta {
  font-weight: 600;
  font-size: 0.9rem;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.prog-up { background: rgba(90, 154, 118, 0.16); color: var(--good); }
.prog-down { background: rgba(207, 90, 114, 0.14); color: var(--bad); }
.prog-flat { background: var(--surface-2); color: var(--ink-soft); }
.prog-sub {
  margin: 8px 0 12px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.prog-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prog-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.86rem;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--ink-soft);
}
.prog-row.is-cur {
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
}
.prog-score {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent);
}

/* ===== Skrin Laporan Saya (sejarah) ===== */
.hist-head { margin-bottom: 18px; }
.hist-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  margin: 6px 0 4px;
  color: var(--ink);
}
.hist-sub { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
.hist-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.hist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s var(--ease), transform 0.1s var(--ease);
}
.hist-item:hover { border-color: var(--accent-soft); }
.hist-item:active { transform: scale(0.99); }
.hist-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hist-item-date { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.hist-item-meta { font-size: 0.82rem; color: var(--ink-soft); }
.hist-item-score {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--accent);
  flex-shrink: 0;
}
.hist-empty { text-align: center; color: var(--ink-soft); padding: 40px 0; }

/* ===== Result ===== */
.result-head {
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.result-photo img {
  width: 88px; height: 110px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
}
/* selfie kamera di-mirror (sama macam preview) */
.result-photo img.is-mirrored { transform: scaleX(-1); }
.result-score { flex: 1; }
.score-ring {
  --val: 0;
  width: 96px; height: 96px;
  margin: 0 0 10px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(closest-side, var(--surface) 73%, transparent 74%),
    conic-gradient(var(--accent) calc(var(--val) * 1%), var(--line) 0);
}
.score-ring span {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}
.score-ring small {
  font-size: 0.56rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-top: 4px;
}
.skin-type {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.skin-type::first-line { color: var(--accent); }

/* Concern cards */
.concerns { display: grid; gap: 12px; }
.concern {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 17px 18px;
  box-shadow: var(--shadow-sm);
}
.concern-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 11px;
  gap: 12px;
}
.concern-name {
  font-size: 0.95rem;
  font-weight: 550;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
}
.concern-badge {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
}
.badge-good { color: var(--good); }
.badge-warn { color: var(--warn); }
.badge-bad { color: var(--bad); }

.concern-bar { height: 4px; background: var(--line-soft); border-radius: 100px; overflow: hidden; }
.concern-fill {
  height: 100%;
  border-radius: 100px;
  width: 0;
  transition: width 1.1s var(--ease);
}
.fill-good { background: var(--good); }
.fill-warn { background: var(--warn); }
.fill-bad { background: var(--bad); }
.concern-desc {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 12px;
  line-height: 1.6;
}

/* DeepScan unlock */
.deepscan-card {
  margin-top: 18px;
  background:
    linear-gradient(170deg, rgba(253, 248, 241, 0.98), rgba(244, 233, 218, 0.96)),
    radial-gradient(90% 70% at 12% 0%, rgba(110, 74, 48, 0.12), transparent 60%);
  border: 1px solid rgba(110, 74, 48, 0.2);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 18px 45px -30px rgba(110, 74, 48, 0.5);
}

/* Teaser detail terkunci (scan percuma) */
.locked-detail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 2px;
  padding: 13px 16px;
  background: var(--surface-2);
  border: 1px dashed var(--accent-soft);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.locked-detail strong { color: var(--ink); font-weight: 600; }
.ld-lock { font-size: 1.05rem; }

/* Banner promo + urgency */
.promo-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -22px -22px 18px;
  padding: 11px 18px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(100deg, var(--accent), var(--accent-soft));
  color: #fdf8f1;
}
.promo-flame { font-size: 1rem; }
.promo-text { font-size: 0.8rem; letter-spacing: 0.01em; }
.promo-text strong { font-weight: 700; letter-spacing: 0.04em; }
.promo-timer {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.86rem;
  background: rgba(0, 0, 0, 0.18);
  padding: 4px 10px;
  border-radius: 8px;
}
.deepscan-urgency {
  margin-top: 10px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--bad);
}
.deepscan-urgency s { opacity: 0.75; }
.deepscan-kicker {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.deepscan-card h3 {
  font-family: var(--font-display);
  font-size: 1.46rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  max-width: 20ch;
}
.deepscan-card p {
  margin-top: 10px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.deepscan-highlights {
  display: grid;
  gap: 10px;
  margin-top: 17px;
}
.deepscan-highlights div {
  padding: 12px 13px;
  background: rgba(255, 250, 251, 0.72);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
}
.deepscan-highlights strong {
  display: block;
  font-size: 0.82rem;
  color: var(--ink);
  margin-bottom: 3px;
}
.deepscan-highlights span {
  display: block;
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.deepscan-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(110, 74, 48, 0.14);
}
.deepscan-price {
  display: block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.deepscan-price-sub {
  display: block;
  margin-top: 3px;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.deepscan-method {
  flex-shrink: 0;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.deepscan-card .btn {
  width: 100%;
  margin-top: 16px;
}
.deepscan-note {
  text-align: center;
  font-size: 0.72rem !important;
  line-height: 1.45 !important;
  color: var(--ink-faint) !important;
  margin-top: 10px !important;
}

/* Anchor harga (coret) + social proof */
.deepscan-price-wrap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.deepscan-price-old {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: var(--bad);
}
.deepscan-price-wrap .deepscan-price-sub { flex-basis: 100%; }
.deepscan-social {
  margin-top: 14px;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.01em;
}
.deepscan-card .btn {
  width: 100%;
  margin-top: 16px;
  animation: pulseCta 2.4s var(--ease) infinite;
}
@keyframes pulseCta {
  0%, 100% { box-shadow: 0 14px 30px -12px rgba(110, 74, 48, 0.5); }
  50% { box-shadow: 0 14px 38px -10px rgba(110, 74, 48, 0.8); }
}

/* Baris concern TERKUNCI (teaser premium pada scan percuma) */
.locked-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 18px 0 6px;
  padding: 12px 15px;
  background: linear-gradient(135deg, rgba(110, 74, 48, 0.12), rgba(110, 74, 48, 0.04));
  border: 1px dashed rgba(110, 74, 48, 0.4);
  border-radius: 13px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), transform 0.12s var(--ease);
}
.locked-hint:hover { border-color: var(--accent); }
.locked-hint:active { transform: scale(0.99); }
.locked-hint span { font-size: 0.84rem; font-weight: 600; color: var(--ink); }
.locked-hint em { font-size: 0.74rem; font-style: normal; font-weight: 600; color: var(--accent); white-space: nowrap; }

.concern.is-locked {
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s var(--ease);
}
.concern.is-locked:hover { border-color: var(--accent); }
.concern.is-locked .concern-name { color: var(--ink-soft); }
.badge-locked {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.fill-locked {
  width: 64%;
  background: repeating-linear-gradient(
    45deg,
    var(--line) 0, var(--line) 5px,
    var(--line-soft) 5px, var(--line-soft) 10px
  );
}
.concern.is-locked .concern-desc { color: var(--accent); font-weight: 500; }

/* Recommendations */
.recommendations { display: grid; gap: 10px; }
.rec {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 16px 17px;
}
.rec-emoji {
  font-size: 1.05rem;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  flex-shrink: 0;
}
.rec-photo {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}
.rec-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rec-body h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink);
}
.rec-body p { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.6; }
.rec-body { flex: 1; min-width: 0; }

/* Kad cadangan boleh tekan → ke kedai */
.rec--link {
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.1s var(--ease);
}
.rec--link:hover { border-color: var(--accent-soft); background: var(--surface); }
.rec--link:active { transform: scale(0.99); }
.rec-cta {
  align-self: center;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fdf8f1;
  background: var(--accent);
  padding: 7px 13px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ===== Modal persediaan ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  background: rgba(42, 29, 34, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.3s var(--ease);
}
.modal-overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%;
  max-width: 430px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px 22px;
  box-shadow: var(--shadow);
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.4s var(--ease);
}
@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.modal .eyebrow--sm { margin: 0 0 8px; color: var(--accent); }
.modal h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.55rem;
  color: var(--ink);
  line-height: 1.1;
}
.modal-sub {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 8px 0 18px;
}
.prep-list { list-style: none; display: grid; gap: 4px; }
.prep-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.prep-list li:last-child { border-bottom: none; }
.prep-ic {
  font-size: 1.1rem;
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
}
.prep-list strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.prep-list div span {
  display: block;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
}
.consent-row input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.consent-row span {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.modal .cta-group { margin-top: 20px; }

/* Payment */
.payment-box {
  display: grid;
  gap: 5px;
  margin: 18px 0 14px;
  padding: 16px 17px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.payment-amount {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.payment-method {
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.payment-benefits {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0 0 14px;
}
.payment-benefits li {
  position: relative;
  padding-left: 18px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.payment-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.payment-status {
  min-height: 24px;
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.55;
  text-align: center;
  margin: 10px 0;
}
.payment-status.is-err { color: var(--bad); font-weight: 500; }
.payment-status.is-ok { color: var(--good); font-weight: 500; }

/* QR statik + resit */
.pay-qr-box {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 18px; margin: 16px 0;
}
.pay-qr-box img { width: 200px; max-width: 70%; border-radius: 10px; display: block; }
.pay-qr-box img:not([src]), .pay-qr-box img[src=""] { display: none; }
.pay-qr-none { font-size: 0.85rem; color: var(--ink-faint); padding: 30px 0; text-align: center; }
.pay-amount-big {
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--accent); margin-top: 6px;
}
.pay-recipient { font-size: 0.82rem; color: var(--ink-soft); }
.pay-steps { margin: 0 0 16px; padding-left: 20px; }
.pay-steps li { font-size: 0.86rem; color: var(--ink); line-height: 1.5; margin-bottom: 5px; }
#pay-receipt-label { width: 100%; justify-content: center; cursor: pointer; }

/* ===== Consent box ===== */
.consent-row {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 16px 0 2px;
  cursor: pointer;
}
.consent-row input[type="checkbox"] {
  width: 19px; height: 19px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent-row span {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.consent-row a { color: var(--accent); font-weight: 600; text-decoration: underline; }
.consent-row input.is-error { outline: 2px solid var(--bad); outline-offset: 2px; border-radius: 4px; }

/* ===== Dasar Privasi ===== */
.policy-body {
  max-height: 52vh;
  overflow-y: auto;
  margin: 14px 0 4px;
  padding-right: 6px;
}
.policy-body p {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 13px;
}
.policy-body strong { color: var(--ink); }
.policy-law {
  font-size: 0.76rem !important;
  color: var(--ink-faint) !important;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

/* ===== Borang lead (sebelum PDF) ===== */
.lead-fields { display: grid; gap: 13px; margin: 18px 0 4px; }
.lead-fields label {
  display: block;
  font-size: 0.78rem;
  font-weight: 550;
  color: var(--ink-soft);
}
.lead-fields input {
  width: 100%;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  -moz-appearance: textfield;
  appearance: textfield;
}
.lead-fields input::-webkit-outer-spin-button,
.lead-fields input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lead-fields input::placeholder { color: var(--ink-faint); }
.lead-fields input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(110, 74, 48, 0.12);
}
.lead-fields input.is-error {
  border-color: var(--bad);
  box-shadow: 0 0 0 3px rgba(207, 90, 114, 0.14);
}

/* ===== QR bayaran (modal) ===== */
.payment-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.payment-qr canvas {
  width: 190px;
  height: 190px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 10px;
  box-shadow: var(--shadow-sm);
}
.payment-qr span {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 500;
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(90px);
  background: var(--ink);
  color: #f7f3ec;
  padding: 14px 20px;
  border-radius: 100px;
  font-size: 0.84rem;
  box-shadow: var(--shadow);
  transition: transform 0.4s var(--ease);
  z-index: 99;
  max-width: 88%;
  text-align: center;
}
.toast.is-show { transform: translateX(-50%) translateY(0); }

@media (max-width: 600px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }

  body {
    display: block;
    padding: env(safe-area-inset-top) 0 calc(18px + env(safe-area-inset-bottom));
    background: var(--bg);
  }

  .app {
    max-width: none;
    min-height: var(--lovaa-vh);
    padding: 18px 16px calc(28px + env(safe-area-inset-bottom));
  }

  .header {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: -18px -16px 22px;
    padding: calc(14px + env(safe-area-inset-top)) 16px 16px;
    background: rgba(251, 243, 244, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .logo { font-size: 1.32rem; }
  .logo-mark { font-size: 0.56rem; letter-spacing: 0.18em; }

  .hero h1 {
    font-size: clamp(2.12rem, 11vw, 2.7rem);
    line-height: 1.02;
  }

  .hero-sub {
    max-width: none;
    font-size: 0.92rem;
    line-height: 1.58;
  }

  .tips {
    margin-top: 24px;
    padding: 18px 17px 19px;
    border-radius: 18px;
  }

  .screen--camera {
    height: calc(var(--lovaa-vh) - 112px);
    min-height: 0;
    display: none;
  }
  .screen--camera.is-active {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
  }

  .camera-wrap {
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
    margin: 0 -16px;
    border-left: none;
    border-right: none;
  }

  #video {
    display: block;
    position: absolute;
    inset: 0;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
  }

  .face-guide {
    width: min(68vw, 300px);
    height: min(56dvh, 430px);
  }

  .quality-pill {
    width: auto;
    max-width: calc(100% - 28px);
    white-space: normal;
    justify-content: center;
    text-align: center;
    border-radius: 18px;
  }

  .screen--camera .cta-group {
    position: relative;
    bottom: auto;
    z-index: 15;
    margin: 0 -16px;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
    background: rgba(251, 243, 244, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
  }

  .btn {
    min-height: 54px;
    padding: 16px 18px;
    font-size: 0.95rem;
  }

  .result-head {
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
  }

  .result-photo img {
    width: 82px;
    height: 104px;
  }

  .score-ring {
    width: 88px;
    height: 88px;
  }

  .concern-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .concern-name {
    align-items: flex-start;
  }

  .concern-badge {
    white-space: normal;
  }

  .modal-overlay {
    padding: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .modal {
    max-width: none;
    border-radius: 20px;
    padding: 22px 18px 18px;
    max-height: 86dvh;
  }
}