:root{color-scheme:dark;--bg:#070504;--surface:#17100b;--gold:#f2cf73;--gold2:#a87324;--ivory:#fff5d8;--text:#fff9eb;--muted:#c9b994;--line:rgba(242,207,115,.22);font-family:Inter,"Noto Sans Thai","Noto Sans",system-ui,sans-serif}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--text);background:radial-gradient(circle at 50% -12%,#5b3714 0,#211309 23%,#0c0805 54%,#060403 100%);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.25;background-image:radial-gradient(circle at 20% 20%,rgba(255,218,126,.28) 0 1px,transparent 1.5px),radial-gradient(circle at 80% 35%,rgba(255,218,126,.2) 0 1px,transparent 1.5px);background-size:110px 110px,160px 160px}
.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 26%,rgba(239,184,72,.08),transparent 28%)}
.topbar{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px max(18px,env(safe-area-inset-left));border-bottom:1px solid var(--line);backdrop-filter:blur(20px);position:sticky;top:0;z-index:20;background:rgba(7,5,4,.78)}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(242,207,115,.68);border-radius:50%;color:var(--gold);font-size:1.25rem;font-weight:800;background:radial-gradient(circle,rgba(242,207,115,.16),rgba(30,18,8,.6));box-shadow:0 0 26px rgba(232,199,123,.18)}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}.brand-copy strong{font-size:1rem}.brand-copy small{margin-top:5px;color:var(--gold);font-size:.56rem;letter-spacing:.2em}.language-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.82rem}select{max-width:165px;background:#17100b;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:9px 12px}
.shell{position:relative;width:min(1080px,calc(100% - 28px));margin:auto;padding:48px 0 46px}.hero{text-align:center;max-width:780px;margin:0 auto 24px}.hero-emblem{width:132px;height:132px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,rgba(244,207,112,.24),rgba(115,70,19,.12) 45%,transparent 70%);filter:drop-shadow(0 0 28px rgba(242,207,115,.22))}
.hero-emblem:before,.hero-emblem:after{content:"";position:absolute;border:1px solid rgba(242,207,115,.38);border-radius:50%;inset:8px}.hero-emblem:after{inset:20px;border-style:dotted;animation:spin 24s linear infinite}.hero-emblem span{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(242,207,115,.65);font-size:2.6rem;font-weight:800;color:var(--gold);background:#100b07}
.eyebrow{color:var(--gold);letter-spacing:.24em;font-size:.68rem;font-weight:800}h1{font-size:clamp(2.3rem,8vw,4.8rem);margin:.28em 0 .18em;line-height:1.05;background:linear-gradient(180deg,#fff6c9 10%,#efc667 55%,#a66c20 100%);-webkit-background-clip:text;color:transparent}.subtitle{max-width:680px;margin:0 auto;color:var(--muted);font-size:clamp(.98rem,2.8vw,1.15rem);line-height:1.75}.runtime-state{display:inline-flex;margin-top:18px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--gold);background:rgba(242,207,115,.045);font-size:.76rem}
.feature-intro{display:flex;align-items:center;justify-content:center;gap:12px;max-width:320px;margin:30px auto 22px;color:var(--gold)}.feature-intro span{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--line))}.feature-intro span:last-child{background:linear-gradient(90deg,var(--line),transparent)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{min-height:300px;padding:28px 24px 24px;border:1px solid rgba(242,207,115,.23);border-radius:28px;background:radial-gradient(circle at 50% 0,rgba(242,207,115,.13),transparent 38%),linear-gradient(155deg,rgba(49,31,16,.92),rgba(14,9,6,.97));box-shadow:0 22px 60px rgba(0,0,0,.36);display:flex;flex-direction:column;align-items:center;text-align:center;transition:.22s}.feature-card:hover{transform:translateY(-4px);border-color:rgba(242,207,115,.48)}
.feature-icon{width:92px;height:92px;display:grid;place-items:center;border-radius:50%;font-size:2.55rem;color:var(--gold);margin:4px auto 18px;border:1px solid rgba(242,207,115,.32);background:radial-gradient(circle,rgba(242,207,115,.16),rgba(30,18,8,.34));box-shadow:0 0 30px rgba(242,207,115,.12)}.feature-card h2{margin:4px 0 10px;font-size:1.35rem;color:var(--ivory)}.feature-card p{color:var(--muted);line-height:1.65;margin:0;flex:1}
.feature-card button,.capture-actions button,.file-button,.analysis-actions button{margin-top:22px;border:1px solid rgba(242,207,115,.5);border-radius:999px;padding:12px 22px;background:linear-gradient(180deg,rgba(242,207,115,.16),rgba(158,100,27,.08));color:#ffe39a;font-weight:800;cursor:pointer;min-height:46px}.feature-card button{width:100%}
.disclaimer{max-width:820px;margin:34px auto 0;padding:16px 18px;text-align:center;color:#9e8f73;font-size:.82rem;line-height:1.65;border-top:1px solid rgba(242,207,115,.12)}
footer{border-top:1px solid var(--line);padding:24px max(20px,calc((100% - 1080px)/2));display:flex;align-items:center;justify-content:space-between;gap:18px;color:var(--muted);font-size:.82rem;background:rgba(6,4,3,.7)}.footer-brand{display:flex;align-items:center;gap:9px}.brand-mark.mini{width:30px;height:30px;font-size:.8rem}footer nav{display:flex;gap:18px}footer a{color:var(--muted);text-decoration:none}
.capture-panel,.analysis-panel{max-width:860px;margin:0 auto 28px}.capture-toolbar,.analysis-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:14px}.capture-toolbar h2,.analysis-toolbar h2{margin:4px 0 0;font-size:1.6rem}.ghost-button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(232,199,123,.06);color:var(--gold);font-size:1.25rem}.capture-help{color:var(--muted);line-height:1.65}
.camera-stage{position:relative;overflow:hidden;aspect-ratio:3/4;max-height:72vh;border:1px solid rgba(242,207,115,.3);border-radius:30px;background:radial-gradient(circle at center,#1c120b,#050403 70%);box-shadow:0 24px 70px rgba(0,0,0,.46)}.camera-stage:after{content:"";position:absolute;inset:18px;border:1px solid rgba(242,207,115,.22);border-radius:24px;pointer-events:none}.camera-stage video,.camera-stage img{width:100%;height:100%;object-fit:contain;background:#050403}.camera-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:var(--gold)}.camera-orbit{width:110px;height:110px;border:1px solid rgba(242,207,115,.3);border-radius:50%;display:grid;place-items:center;font-size:2rem}
.scan-line{position:absolute;z-index:3;left:7%;right:7%;top:14%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 18px rgba(232,199,123,.72);animation:scan 3.4s ease-in-out infinite}.camera-status{min-height:28px;text-align:center;color:var(--gold);padding:14px 4px 0}.capture-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px}.capture-actions button,.file-button{margin-top:0}.file-button input{position:absolute;width:1px;height:1px;opacity:0}
.analysis-visual{width:120px;height:120px;margin:12px auto 4px;position:relative;display:grid;place-items:center}.analysis-orbit{width:78px;height:78px;border:1px solid rgba(242,207,115,.45);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:2rem;background:rgba(242,207,115,.06);animation:float 2.8s ease-in-out infinite}.analysis-pulse{position:absolute;inset:0;border:1px solid rgba(242,207,115,.2);border-radius:50%;animation:pulse 2.4s ease-out infinite}.analysis-state{text-align:center;color:var(--gold);padding:18px 8px;font-weight:700}.analysis-content{display:grid;gap:14px}.analysis-summary{font-size:1.06rem;line-height:1.75;color:var(--ivory);padding:20px;border:1px solid var(--line);border-radius:20px;background:rgba(232,199,123,.055)}.analysis-card{padding:20px;border:1px solid var(--line);border-radius:22px;background:rgba(20,14,10,.86)}.analysis-card h3{margin:0 0 10px;color:var(--gold)}.analysis-card p,.analysis-card li{line-height:1.7;color:var(--muted)}.analysis-interpretation{color:var(--ivory)!important}.analysis-disclaimer{font-size:.9rem;line-height:1.65;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}.analysis-actions{display:flex;justify-content:center;margin-top:14px}
.legal-shell{max-width:980px}.legal-hero{margin-bottom:28px}.legal-document{display:grid;gap:16px}.legal-document section{padding:22px 24px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,rgba(35,23,13,.88),rgba(14,9,6,.92))}.legal-document h2{color:var(--gold)}.legal-document p,.legal-document li{color:var(--muted);line-height:1.75}.legal-document a,.legal-nav a{color:var(--gold)}
@keyframes scan{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(50vh);opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}@keyframes pulse{0%{transform:scale(.72);opacity:.7}100%{transform:scale(1.15);opacity:0}}
@media(max-width:760px){.topbar{min-height:68px}.brand-mark{width:40px;height:40px}.brand-copy strong{font-size:.92rem}.language-label>span{display:none}select{max-width:138px}.shell{width:min(100% - 24px,680px);padding-top:30px}.hero-emblem{width:112px;height:112px}.hero-emblem span{width:64px;height:64px;font-size:2.2rem}.feature-grid{grid-template-columns:1fr;gap:14px}.feature-card{min-height:230px;padding:22px 20px}.feature-icon{width:78px;height:78px;font-size:2.15rem}.camera-stage{border-radius:24px}footer{flex-direction:column;align-items:flex-start}footer nav{width:100%;justify-content:space-between}}
@media(min-width:761px){.camera-stage{aspect-ratio:4/3}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
/* ===== WEB V33B RESULT EXPERIENCE ===== */

.analysis-photo-wrap{
  width:min(100%,680px);
  margin:8px auto 20px;
  overflow:hidden;
  border:1px solid rgba(242,207,115,.34);
  border-radius:28px;
  background:#050403;
  box-shadow:0 28px 80px rgba(0,0,0,.46);
}

.analysis-photo-wrap img{
  display:block;
  width:100%;
  max-height:58vh;
  object-fit:contain;
  background:#050403;
}

.reading-progress{
  width:min(100%,680px);
  height:3px;
  margin:0 auto 18px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(242,207,115,.10);
}

.reading-progress span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#8f5c18,#f2cf73,#fff0ad);
  box-shadow:0 0 14px rgba(242,207,115,.55);
  transition:width .16s linear;
}

.analysis-invalid{
  padding:24px 22px;
  border:1px solid rgba(242,207,115,.28);
  border-radius:24px;
  text-align:center;
  background:rgba(20,14,10,.88);
}

.analysis-invalid h3{
  margin:0 0 10px;
  color:var(--gold);
}

.analysis-invalid p{
  margin:0;
  color:var(--muted);
  line-height:1.75;
}

.analysis-actions{
  position:sticky;
  bottom:max(10px,env(safe-area-inset-bottom));
  z-index:12;
  width:max-content;
  max-width:100%;
  margin:22px auto 0;
  padding:8px;
  gap:8px;
  border:1px solid rgba(242,207,115,.18);
  border-radius:999px;
  background:rgba(9,6,4,.88);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 14px 50px rgba(0,0,0,.38);
}

.analysis-actions button{
  margin:0;
  min-height:44px;
}

@media(max-width:760px){
  .analysis-photo-wrap,
  .analysis-photo-wrap img{
    max-height:54vh;
  }

  .analysis-photo-wrap{
    border-radius:22px;
  }

  .analysis-actions{
    width:calc(100% - 8px);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    border-radius:22px;
  }

  .analysis-actions button{
    width:100%;
    padding-inline:12px;
  }
}

/* ===== WEB V35 CAMERA GUIDES ===== */

.camera-guide{
  position:absolute;
  z-index:2;
  pointer-events:none;
  opacity:.78;
  transition:
    inset .25s ease,
    border-radius .25s ease,
    opacity .25s ease;
}

.camera-guide-face{
  inset:7% 14%;
  border:1px solid rgba(242,207,115,.52);
  border-radius:
    48% 48% 44% 44% /
    42% 42% 56% 56%;
  box-shadow:
    0 0 0 999px rgba(0,0,0,.07),
    inset 0 0 34px rgba(242,207,115,.06),
    0 0 28px rgba(242,207,115,.12);
}

.camera-guide-palm{
  inset:6% 10%;
  border:1px dashed rgba(242,207,115,.52);
  border-radius:29% 29% 23% 23%;
  box-shadow:
    inset 0 0 34px rgba(242,207,115,.05),
    0 0 28px rgba(242,207,115,.10);
}

.camera-guide-feng_shui{
  inset:6%;
  border:1px solid rgba(242,207,115,.38);
  border-radius:22px;
  background:
    linear-gradient(
      to right,
      transparent 33.2%,
      rgba(242,207,115,.16) 33.3%,
      rgba(242,207,115,.16) 33.5%,
      transparent 33.6%,
      transparent 66.3%,
      rgba(242,207,115,.16) 66.4%,
      rgba(242,207,115,.16) 66.6%,
      transparent 66.7%
    ),
    linear-gradient(
      to bottom,
      transparent 33.2%,
      rgba(242,207,115,.16) 33.3%,
      rgba(242,207,115,.16) 33.5%,
      transparent 33.6%,
      transparent 66.3%,
      rgba(242,207,115,.16) 66.4%,
      rgba(242,207,115,.16) 66.6%,
      transparent 66.7%
    );
}

@media(max-width:760px){
  .camera-guide-face{
    inset:6% 11%;
  }

  .camera-guide-palm{
    inset:5% 7%;
  }

  .camera-guide-feng_shui{
    inset:4%;
  }
}

/* ===== WEB V36 LOCAL ANALYSIS HISTORY ===== */

.history-panel{
  margin:34px auto 0;
  padding:24px;
  border:1px solid rgba(242,207,115,.16);
  border-radius:28px;
  background:
    linear-gradient(
      145deg,
      rgba(31,20,12,.82),
      rgba(11,8,6,.90)
    );
}

.history-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.history-heading h2{
  margin:4px 0 0;
  color:var(--ivory);
}

.history-clear{
  width:auto;
  padding-inline:18px;
  font-size:.78rem;
}

.history-local-note{
  margin:12px 0 18px;
  color:var(--muted);
  font-size:.82rem;
}

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

.history-card{
  padding:18px;
  border:1px solid rgba(242,207,115,.16);
  border-radius:20px;
  background:rgba(15,10,7,.72);
  cursor:pointer;
  transition:
    transform .18s ease,
    border-color .18s ease;
}

.history-card:hover{
  transform:translateY(-2px);
  border-color:rgba(242,207,115,.40);
}

.history-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.history-card strong{
  color:var(--gold);
}

.history-card time{
  color:#8e806a;
  font-size:.72rem;
  text-align:right;
}

.history-card p{
  margin:12px 0 0;
  color:var(--muted);
  line-height:1.6;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.history-empty{
  grid-column:1/-1;
  margin:0;
  padding:20px;
  text-align:center;
  color:var(--muted);
}

@media(max-width:760px){
  .history-panel{
    padding:18px;
    border-radius:22px;
  }

  .history-list{
    grid-template-columns:1fr;
  }
}

/* ===== WEB V37 5X VISIBLE EXPERIENCE ===== */

.web-utility-bar{
  position:fixed;
  z-index:50;
  right:16px;
  bottom:max(16px,env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px;
  border:1px solid rgba(242,207,115,.18);
  border-radius:999px;
  background:rgba(8,6,4,.84);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 45px rgba(0,0,0,.42);
}

.network-pill{
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 10px;
  min-height:38px;
  color:var(--muted);
  font-size:.76rem;
  font-weight:700;
}

#network-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#7ddc8a;
  box-shadow:0 0 10px rgba(125,220,138,.65);
}

#network-dot.offline{
  background:#c5846a;
  box-shadow:0 0 10px rgba(197,132,106,.5);
}

#install-web-app{
  min-height:38px;
  padding:8px 14px;
  border:1px solid rgba(242,207,115,.38);
  border-radius:999px;
  color:#ffe49c;
  background:rgba(242,207,115,.10);
  font-weight:800;
}

.home-trust-strip{
  width:min(100%,900px);
  margin:0 auto 22px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.home-trust-strip span{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8px 12px;
  border:1px solid rgba(242,207,115,.13);
  border-radius:999px;
  background:rgba(242,207,115,.035);
  color:#a99a7e;
  font-size:.74rem;
  letter-spacing:.02em;
}

.feature-card[data-feature="face"]{
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(240,187,110,.17),
      transparent 42%
    ),
    linear-gradient(
      155deg,
      rgba(53,31,18,.94),
      rgba(13,8,6,.98)
    );
}

.feature-card[data-feature="palm"]{
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(221,172,105,.14),
      transparent 42%
    ),
    linear-gradient(
      155deg,
      rgba(43,27,18,.94),
      rgba(12,8,6,.98)
    );
}

.feature-card[data-feature="feng_shui"]{
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(181,147,83,.16),
      transparent 42%
    ),
    linear-gradient(
      155deg,
      rgba(38,28,17,.94),
      rgba(11,8,5,.98)
    );
}

.feature-card[data-feature]::before{
  content:"";
  width:38%;
  height:1px;
  margin:-10px auto 16px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(242,207,115,.55),
    transparent
  );
}

.history-filters{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 0 14px;
  scrollbar-width:none;
}

.history-filters::-webkit-scrollbar{
  display:none;
}

.history-filters button{
  flex:0 0 auto;
  min-height:36px;
  padding:7px 14px;
  border:1px solid rgba(242,207,115,.16);
  border-radius:999px;
  color:var(--muted);
  background:rgba(242,207,115,.035);
  cursor:pointer;
}

.history-filters button.active{
  border-color:rgba(242,207,115,.46);
  color:var(--gold);
  background:rgba(242,207,115,.10);
}

.history-card{
  position:relative;
}

.history-delete{
  margin-top:12px;
  padding:6px 11px;
  min-height:32px;
  border:1px solid rgba(197,132,106,.22);
  border-radius:999px;
  color:#cfa58e;
  background:rgba(197,132,106,.05);
  font-size:.72rem;
  cursor:pointer;
}

.analysis-actions{
  flex-wrap:wrap;
}

#analysis-copy,
#analysis-share,
#analysis-download{
  border-color:rgba(242,207,115,.30);
  background:rgba(242,207,115,.06);
}

@media(max-width:760px){
  .home-trust-strip{
    grid-template-columns:1fr;
    gap:7px;
    margin-bottom:18px;
  }

  .home-trust-strip span{
    min-height:36px;
  }

  .web-utility-bar{
    left:12px;
    right:12px;
    bottom:max(10px,env(safe-area-inset-bottom));
    justify-content:center;
  }

  .network-pill{
    flex:1;
    justify-content:center;
  }

  #install-web-app{
    flex:1;
  }

  body{
    padding-bottom:78px;
  }
}

/* ===== WEB V38 FINAL PRODUCT POLISH ===== */

.result-section-label{
  margin:4px 0 12px;
  color:var(--gold);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.bottom-nav{
  position:fixed;
  z-index:60;
  left:50%;
  bottom:max(12px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:none;
  width:min(calc(100% - 24px),420px);
  padding:7px;
  border:1px solid rgba(242,207,115,.18);
  border-radius:24px;
  background:rgba(8,6,4,.90);
  box-shadow:0 18px 55px rgba(0,0,0,.48);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.bottom-nav button{
  flex:1;
  min-height:52px;
  border:0;
  border-radius:18px;
  background:transparent;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
}

.bottom-nav button span{
  color:var(--gold);
  font-size:1.15rem;
}

.bottom-nav button b{
  font-size:.76rem;
}

.analysis-panel{
  padding-bottom:80px;
}

.analysis-summary{
  position:relative;
  overflow:hidden;
}

.analysis-summary::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(
    to bottom,
    transparent,
    var(--gold),
    transparent
  );
}

.analysis-card{
  position:relative;
  overflow:hidden;
}

.analysis-card::before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:2px;
  background:rgba(242,207,115,.20);
}

.history-panel{
  scroll-margin-top:90px;
}

.feature-grid{
  position:relative;
}

.feature-card{
  isolation:isolate;
}

.feature-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  opacity:0;
  background:radial-gradient(
    circle at 50% 0,
    rgba(255,232,167,.11),
    transparent 50%
  );
  transition:opacity .25s ease;
}

.feature-card:hover::after{
  opacity:1;
}

@media(max-width:760px){
  .bottom-nav{
    display:flex;
  }

  .web-utility-bar{
    bottom:82px;
  }

  body{
    padding-bottom:150px;
  }

  .analysis-actions{
    bottom:82px;
  }

  .hero{
    padding-bottom:18px;
  }

  .feature-card{
    min-height:210px;
  }

  .analysis-toolbar,
  .capture-toolbar{
    position:sticky;
    top:70px;
    z-index:18;
    padding:8px 0;
    background:linear-gradient(
      to bottom,
      rgba(8,6,4,.95),
      rgba(8,6,4,.76),
      transparent
    );
  }
}

/* ===== WEB V39 SMART CAMERA + RESULT CARDS ===== */

.camera-readiness{
  width:min(100%,680px);
  margin:12px auto 2px;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:.78rem;
}

.camera-readiness[hidden]{
  display:none;
}

.camera-readiness-meter{
  flex:1;
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(242,207,115,.10);
}

.camera-readiness-meter span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(
    90deg,
    #9b5e25,
    #d9aa52,
    #f2cf73
  );
  transition:width .35s ease;
}

.camera-readiness[data-state="ready"]
.camera-readiness-meter span{
  background:linear-gradient(
    90deg,
    #b69042,
    #f2cf73,
    #fff0b0
  );
  box-shadow:
    0 0 12px rgba(242,207,115,.55);
}

.camera-auto.active{
  border-color:
    rgba(242,207,115,.50);
  color:var(--gold);
  background:
    rgba(242,207,115,.10);
}

.analysis-card-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.analysis-card-heading h3{
  margin:0;
}

.analysis-card-toggle{
  flex:0 0 auto;
  min-height:34px;
  padding:6px 11px;
  border:1px solid rgba(242,207,115,.20);
  border-radius:999px;
  background:rgba(242,207,115,.04);
  color:var(--gold);
  font-size:.72rem;
  cursor:pointer;
}

.analysis-card-details{
  margin-top:14px;
  padding-top:14px;
  border-top:
    1px solid rgba(242,207,115,.10);
}

.analysis-card-details[hidden]{
  display:none;
}

.history-export{
  width:auto;
  padding-inline:14px;
  font-size:.72rem;
}

.history-heading{
  flex-wrap:wrap;
}

.history-heading > div:first-child{
  flex:1 1 220px;
}

@media(max-width:760px){
  .camera-readiness{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  .camera-readiness-meter{
    width:100%;
    flex:none;
  }

  .analysis-card-heading{
    align-items:flex-start;
  }
}

/* ===== WEB V40 10X PRODUCT COMPLETION ===== */

.camera-countdown{
  position:absolute;
  z-index:8;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  padding:10px 16px;
  border:1px solid rgba(242,207,115,.45);
  border-radius:999px;
  color:#ffe8a8;
  background:rgba(7,5,3,.82);
  box-shadow:
    0 10px 35px rgba(0,0,0,.42),
    0 0 22px rgba(242,207,115,.12);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-weight:800;
}

.analysis-stage-progress{
  width:min(100%,680px);
  margin:12px auto 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.analysis-stage-progress[hidden]{
  display:none;
}

.analysis-stage-track{
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(242,207,115,.09);
}

.analysis-stage-track span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:
    linear-gradient(
      90deg,
      #98611e,
      #f2cf73,
      #fff1b2
    );
  box-shadow:
    0 0 15px rgba(242,207,115,.45);
  transition:width .45s ease;
}

#analysis-stage-text{
  color:var(--muted);
  font-size:.8rem;
  text-align:center;
}

.result-image-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.result-image-modal[hidden]{
  display:none;
}

.result-image-modal img{
  display:block;
  max-width:100%;
  max-height:92vh;
  object-fit:contain;
  border-radius:18px;
  box-shadow:0 30px 100px rgba(0,0,0,.65);
}

#result-image-close{
  position:absolute;
  z-index:2;
  top:max(18px,env(safe-area-inset-top));
  right:18px;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid rgba(242,207,115,.32);
  border-radius:50%;
  color:#ffe6a2;
  background:rgba(16,11,7,.80);
  font-size:1.6rem;
  cursor:pointer;
}

body.modal-open{
  overflow:hidden;
}

.history-tools{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  margin:4px 0 14px;
}

.history-search-wrap{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.history-search-wrap span{
  color:var(--muted);
  font-size:.72rem;
}

#history-search{
  width:100%;
  min-height:42px;
  padding:9px 14px;
  border:1px solid rgba(242,207,115,.18);
  border-radius:14px;
  outline:none;
  color:var(--ivory);
  background:rgba(8,6,4,.62);
}

#history-search:focus{
  border-color:rgba(242,207,115,.50);
  box-shadow:0 0 0 3px rgba(242,207,115,.07);
}

.history-import-button{
  align-self:end;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border:1px solid rgba(242,207,115,.20);
  border-radius:14px;
  color:var(--gold);
  background:rgba(242,207,115,.05);
  cursor:pointer;
  font-size:.76rem;
  font-weight:800;
}

.history-import-button input{
  display:none;
}

#result-expand-all,
#result-fullscreen-image{
  border-color:rgba(242,207,115,.28);
  background:rgba(242,207,115,.055);
}

@media(max-width:760px){
  .camera-stage{
    min-height:min(68vh,680px);
  }

  #camera-preview,
  #captured-preview{
    width:100%;
    height:100%;
    min-height:min(68vh,680px);
    object-fit:contain;
    background:#000;
  }

  .history-tools{
    grid-template-columns:1fr;
  }

  .history-import-button{
    width:100%;
  }

  .result-image-modal{
    padding:12px;
  }
}

/* ===== WEB V41 PRODUCTION HARDENING ===== */

.pwa-update-banner{
  position:fixed;
  z-index:120;
  top:max(14px,env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  width:min(calc(100% - 28px),520px);
  padding:10px 12px 10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(242,207,115,.35);
  border-radius:18px;
  background:rgba(10,7,4,.94);
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  color:var(--ivory);
}

.pwa-update-banner[hidden]{
  display:none;
}

.pwa-update-banner button{
  flex:0 0 auto;
  min-height:38px;
  padding:7px 13px;
  border:1px solid rgba(242,207,115,.38);
  border-radius:999px;
  color:var(--gold);
  background:rgba(242,207,115,.08);
  cursor:pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  .scan-line,
  .analysis-pulse{
    animation:none !important;
  }
}

@media(prefers-contrast:more){
  .feature-card,
  .analysis-card,
  .history-card,
  .history-panel{
    border-color:rgba(255,230,160,.58);
  }

  .muted,
  .history-card p,
  .history-local-note{
    color:#d4c7ae;
  }
}

/* ===== V44 voice / reading / mobile completion ===== */

.reading-cursor-segment {
  border-radius: 0.28rem;
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

.reading-cursor-segment.is-reading {
  background:
    linear-gradient(
      90deg,
      rgba(255, 221, 122, 0.18),
      rgba(255, 221, 122, 0.42),
      rgba(255, 221, 122, 0.18)
    );
  box-shadow:
    0 0 0 0.12rem
    rgba(255, 218, 108, 0.08);
}

#analysis-read,
#analysis-pause,
#analysis-stop {
  min-height: 44px;
  touch-action: manipulation;
}

body {
  padding-left:
    env(safe-area-inset-left);
  padding-right:
    env(safe-area-inset-right);
}

.bottom-nav {
  padding-bottom:
    max(
      0.5rem,
      env(safe-area-inset-bottom)
    );
}

.camera-panel,
.analysis-panel {
  padding-bottom:
    max(
      1rem,
      env(safe-area-inset-bottom)
    );
}

@media (prefers-reduced-motion: reduce) {
  .reading-cursor-segment,
  .reading-cursor-segment.is-reading {
    transition: none !important;
  }

  .reading-cursor-segment.is-reading {
    box-shadow: none;
  }
}

@media (max-width: 640px) {
  #analysis-read,
  #analysis-pause,
  #analysis-stop {
    min-height: 48px;
  }

  .analysis-actions {
    gap: 0.65rem;
  }
}

/* ===== WEB V46 — visible product polish ===== */

.v46-home-hero {
  position: relative;
  overflow: hidden;
  width: min(100%, 760px);
  margin: 18px auto 20px;
  padding: clamp(24px, 6vw, 42px) 22px 22px;
  border: 1px solid rgba(236, 196, 102, .18);
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(195, 139, 43, .17),
      transparent 48%
    ),
    linear-gradient(
      180deg,
      rgba(28, 19, 12, .92),
      rgba(10, 8, 8, .96)
    );
  box-shadow:
    0 24px 80px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 238, 178, .05);
  text-align: center;
  isolation: isolate;
}

.v46-hero-glow {
  position: absolute;
  z-index: -1;
  top: -140px;
  left: 50%;
  width: 360px;
  height: 360px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(235, 190, 87, .19),
      rgba(235, 190, 87, .03) 46%,
      transparent 72%
    );
  pointer-events: none;
}

.v46-hero-mark {
  width: 82px;
  height: 82px;
  margin: 0 auto 17px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239, 203, 118, .3);
  border-radius: 50%;
  color: #f5d786;
  background:
    radial-gradient(
      circle at 45% 35%,
      rgba(255, 232, 159, .17),
      rgba(125, 78, 21, .08)
    );
  box-shadow:
    0 0 40px rgba(204, 146, 48, .12),
    inset 0 0 25px rgba(240, 199, 101, .08);
  font-size: 2.15rem;
  line-height: 1;
}

.v46-home-eyebrow {
  margin-bottom: 8px;
  color: rgba(232, 203, 138, .76);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.v46-home-title {
  margin: 0;
  color: #f6e9c8;
  font-size: clamp(2rem, 9vw, 3.4rem);
  font-weight: 760;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.v46-home-description {
  width: min(100%, 580px);
  margin: 14px auto 0;
  color: rgba(239, 228, 205, .72);
  font-size: clamp(.93rem, 3.5vw, 1.04rem);
  line-height: 1.7;
}

.v46-home-proof {
  margin-top: 23px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.v46-home-proof span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border: 1px solid rgba(226, 187, 94, .13);
  border-radius: 999px;
  color: rgba(236, 218, 179, .74);
  background: rgba(255, 255, 255, .025);
  font-size: .68rem;
}

.camera-guide-title {
  position: relative;
  z-index: 5;
  margin: 7px auto 4px;
  color: #f4d47f;
  font-size: .83rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: .015em;
}

.feature-card {
  position: relative;
  overflow: hidden;
}

.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      rgba(255, 229, 151, .045),
      transparent 28%,
      transparent 72%,
      rgba(180, 121, 36, .035)
    );
}

.feature-card:active {
  transform: scale(.987);
}

.analysis-summary {
  position: relative;
  padding: 18px;
  border: 1px solid rgba(236, 199, 107, .16);
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      rgba(239, 202, 112, .055),
      rgba(255, 255, 255, .015)
    );
}

.analysis-card {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.analysis-card:hover {
  border-color: rgba(240, 202, 109, .24);
}

.analysis-photo-wrap {
  overflow: hidden;
  border-radius: 22px;
  background: #050505;
}

.analysis-photo-wrap img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

#analysis-new-reading,
#analysis-home {
  min-height: 44px;
}

.history-card {
  transition:
    transform 160ms ease,
    border-color 160ms ease;
}

.history-card:hover {
  border-color: rgba(236, 199, 107, .22);
}

@media (hover: hover) and (pointer: fine) {
  .feature-card:hover {
    transform: translateY(-2px);
    border-color: rgba(239, 201, 110, .26);
  }

  .history-card:hover {
    transform: translateY(-1px);
  }
}

@media (max-width: 640px) {
  .v46-home-hero {
    margin-top: 10px;
    border-radius: 26px;
  }

  .v46-home-proof {
    display: grid;
    grid-template-columns: 1fr;
  }

  .v46-home-proof span {
    justify-content: center;
  }

  .feature-card {
    min-height: 132px;
  }

  .analysis-summary {
    padding: 16px;
  }
}

/* ===== WEB V47B — navigation/camera/result polish ===== */

.v47-section-header {
  width: min(100%, 720px);
  margin: 30px auto 15px;
  padding-inline: 10px;
  text-align: center;
}

.v47-section-kicker {
  display: inline-block;
  margin-bottom: 7px;
  color: rgba(244, 209, 121, .76);
  font-size: .8rem;
}

.v47-section-header h2 {
  margin: 0;
  color: #f5e6c0;
  font-size: clamp(1.22rem, 5vw, 1.62rem);
  line-height: 1.2;
}

.v47-section-header p {
  width: min(100%, 590px);
  margin: 8px auto 0;
  color: rgba(232, 222, 200, .61);
  font-size: .82rem;
  line-height: 1.62;
}

.v47-feature-card {
  position: relative;
}

.v47-feature-meta {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  margin-top: 12px;
}

.v47-feature-icon {
  grid-row: 1 / 3;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239, 201, 109, .19);
  border-radius: 11px;
  color: #edc96c;
  background: rgba(235, 189, 78, .055);
}

.v47-feature-short {
  overflow: hidden;
  color: rgba(236, 227, 207, .62);
  font-size: .72rem;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.v47-feature-cta {
  color: rgba(247, 213, 126, .93);
  font-size: .71rem;
  font-weight: 800;
  line-height: 1.3;
}

.v47-camera-steps {
  position: relative;
  z-index: 8;
  width: min(96%, 540px);
  margin: 8px auto 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.v47-camera-steps span {
  min-height: 31px;
  display: grid;
  place-items: center;
  padding: 4px 3px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 9px;
  color: rgba(238, 231, 214, .43);
  background: rgba(0,0,0,.24);
  font-size: .61rem;
  text-align: center;
  transition:
    color .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

.v47-camera-steps span.is-ready {
  color: rgba(244, 218, 151, .83);
  border-color: rgba(228, 185, 82, .25);
  background: rgba(220, 171, 61, .07);
}

.v47-camera-steps span.is-current {
  color: #ffe5a0;
  border-color: rgba(245, 205, 110, .52);
  box-shadow:
    0 0 16px rgba(220, 167, 57, .1);
}

.v47-analysis-wait,
.v47-result-ready {
  width: min(100%, 640px);
  margin: 0 auto 14px;
  padding: 14px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(234, 195, 100, .16);
  border-radius: 18px;
  background:
    linear-gradient(
      105deg,
      rgba(223, 177, 69, .067),
      rgba(255, 255, 255, .016)
    );
}

.v47-analysis-wait[hidden],
.v47-result-ready[hidden] {
  display: none;
}

.v47-analysis-symbol,
.v47-result-check {
  flex: 0 0 auto;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239, 200, 102, .2);
  border-radius: 50%;
  color: #eed07d;
  background: rgba(230, 182, 70, .07);
}

.v47-analysis-wait strong,
.v47-result-ready strong {
  display: block;
  color: #efe0bc;
  font-size: .87rem;
}

.v47-analysis-wait p,
.v47-result-ready p {
  margin: 3px 0 0;
  color: rgba(234, 225, 204, .58);
  font-size: .71rem;
  line-height: 1.44;
}

.v47-history-description {
  margin: 5px 0 13px;
  color: rgba(231, 221, 199, .56);
  font-size: .73rem;
  line-height: 1.5;
}

@media (hover:hover) and (pointer:fine) {
  .v47-feature-card:hover .v47-feature-cta {
    color: #ffe19a;
  }
}

@media (max-width:640px) {
  .v47-section-header {
    margin-top: 24px;
  }

  .v47-camera-steps {
    width: 100%;
  }

  .v47-camera-steps span {
    min-height: 34px;
    padding-inline: 2px;
    font-size: .57rem;
  }

  .v47-analysis-wait,
  .v47-result-ready {
    border-radius: 16px;
  }
}

/* ===== WEB V48 — final mobile-first polish ===== */

.v48-camera-quality {
  position: relative;
  z-index: 9;
  width: fit-content;
  max-width: min(94%, 560px);
  margin: 7px auto 8px;
  padding: 7px 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(5,5,5,.52);
  backdrop-filter: blur(12px);
  color: rgba(239,231,213,.66);
  font-size: .68rem;
  line-height: 1.35;
  text-align: center;
}

.v48-camera-quality[hidden] {
  display: none;
}

#v48-camera-quality-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
}

.v48-camera-quality[data-level="excellent"] {
  border-color: rgba(226,193,105,.35);
  color: #f7df9f;
}

.v48-camera-quality[data-level="excellent"] #v48-camera-quality-dot {
  background: #f0ca70;
  box-shadow: 0 0 10px rgba(240,202,112,.36);
}

.v48-camera-quality[data-level="good"] {
  border-color: rgba(202,181,105,.25);
}

.v48-camera-quality[data-level="good"] #v48-camera-quality-dot {
  background: #d5bc78;
}

.v48-camera-quality[data-level="adjust"] #v48-camera-quality-dot {
  background: #c29d58;
}

.v48-camera-quality[data-level="low"] {
  color: rgba(235,219,187,.56);
}

.v48-result-meta {
  width: min(100%, 640px);
  margin: 0 auto 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.v48-result-meta[hidden] {
  display: none;
}

.v48-result-meta span {
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid rgba(234,196,104,.13);
  border-radius: 999px;
  color: rgba(238,221,180,.7);
  background: rgba(232,186,76,.035);
  font-size: .65rem;
}

.v48-history-empty {
  width: 100%;
  padding: 28px 18px;
  border: 1px dashed rgba(231,195,106,.14);
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      rgba(232,187,80,.035),
      rgba(255,255,255,.012)
    );
  text-align: center;
}

.v48-history-empty[hidden] {
  display: none;
}

.v48-history-empty-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(235,199,111,.17);
  border-radius: 50%;
  color: rgba(237,205,126,.74);
  background: rgba(232,184,69,.035);
}

.v48-history-empty strong {
  display: block;
  color: rgba(241,228,195,.86);
  font-size: .85rem;
}

.v48-history-empty p {
  width: min(100%, 420px);
  margin: 5px auto 0;
  color: rgba(231,221,198,.51);
  font-size: .7rem;
  line-height: 1.5;
}

.camera-panel {
  overscroll-behavior: contain;
}

.camera-stage video,
.camera-stage img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.analysis-panel {
  scroll-margin-top:
    calc(
      env(safe-area-inset-top) +
      10px
    );
}

.analysis-actions button,
.history-panel button,
.camera-panel button {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width:640px) {
  .v48-camera-quality {
    max-width: 100%;
    padding: 7px 9px;
    font-size: .63rem;
  }

  .v48-result-meta {
    gap: 5px;
  }

  .v48-result-meta span {
    min-height: 28px;
    font-size: .61rem;
  }

  .v48-history-empty {
    padding: 24px 15px;
  }

  .analysis-photo-wrap {
    max-height: min(
      58dvh,
      620px
    );
  }

  .analysis-photo-wrap img {
    max-height: min(
      58dvh,
      620px
    );
    object-fit: contain;
  }
}

/* ===== WEB V49 — release readiness ===== */

.v49-release-strip {
  width: min(100%, 760px);
  margin: 12px auto 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.v49-release-strip span {
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid rgba(233,196,106,.12);
  border-radius: 999px;
  color: rgba(235,221,185,.64);
  background:
    rgba(234,188,78,.028);
  font-size: .62rem;
  line-height: 1.25;
}

.v49-release-strip span:first-child {
  color: rgba(248,217,137,.9);
  border-color:
    rgba(237,197,99,.24);
}

img,
video {
  max-width: 100%;
}

button,
input,
select {
  font: inherit;
}

button {
  touch-action: manipulation;
}

@media (max-width:640px) {
  .v49-release-strip {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0,1fr));
    width: 100%;
  }

  .v49-release-strip span {
    min-height: 34px;
    padding-inline: 7px;
    border-radius: 12px;
    text-align: center;
  }
}

@media (max-width:380px) {
  .v49-release-strip {
    grid-template-columns: 1fr;
  }
}

/* ===== WEB V49B — release readiness ===== */

.v49-release-strip {
  width: min(100%, 760px);
  margin: 12px auto 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.v49-release-strip span {
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid rgba(233,196,106,.12);
  border-radius: 999px;
  color: rgba(235,221,185,.64);
  background: rgba(234,188,78,.028);
  font-size: .62rem;
  line-height: 1.25;
}

.v49-release-strip span:first-child {
  color: rgba(248,217,137,.9);
  border-color: rgba(237,197,99,.24);
}

img,
video {
  max-width: 100%;
}

button,
input,
select {
  font: inherit;
}

button {
  touch-action: manipulation;
}

@media (max-width:640px) {
  .v49-release-strip {
    display: grid;
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
    width: 100%;
  }

  .v49-release-strip span {
    min-height: 34px;
    padding-inline: 7px;
    border-radius: 12px;
    text-align: center;
  }
}

@media (max-width:380px) {
  .v49-release-strip {
    grid-template-columns: 1fr;
  }
}

/* ===== WEB V50 — accessibility/runtime state ===== */

.v50-sr-only {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html[data-runtime-state="analyzing"] button[data-feature],
html[data-runtime-state="analyzing"] .feature-card button {
  cursor: progress;
}

html[data-runtime-state="result"] .analysis-panel {
  scroll-margin-top:
    calc(
      env(safe-area-inset-top) +
      12px
    );
}

@media (prefers-reduced-motion: reduce) {
  html[data-runtime-state="analyzing"] *,
  html[data-runtime-state="result"] * {
    scroll-behavior: auto !important;
  }
}

/* ===== WEB V51B — real user journey ===== */

.v51-journey {
  width: min(100%, 620px);
  margin: 14px auto 10px;
  padding: 4px;
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0,1fr));
  gap: 5px;
}

.v51-journey[hidden] {
  display: none;
}

.v51-journey span {
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 5px 7px;
  border: 1px solid
    rgba(255,255,255,.07);
  border-radius: 11px;
  color:
    rgba(235,226,205,.43);
  background:
    rgba(255,255,255,.018);
  font-size: .64rem;
  font-weight: 650;
  text-align: center;
}

.v51-journey span.is-complete {
  color:
    rgba(231,204,135,.66);
  border-color:
    rgba(226,188,91,.14);
}

.v51-journey span.is-current {
  color: #f4db99;
  border-color:
    rgba(236,195,95,.35);
  background:
    linear-gradient(
      100deg,
      rgba(232,186,75,.08),
      rgba(255,255,255,.02)
    );
}

.v51-journey span.is-complete::before {
  content: "✓";
  margin-right: 4px;
}

.v51-analysis-elapsed {
  width: fit-content;
  max-width: 100%;
  margin: 8px auto;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid
    rgba(235,197,103,.11);
  color:
    rgba(232,221,199,.58);
  background:
    rgba(0,0,0,.2);
  font-size: .65rem;
}

.v51-analysis-elapsed[hidden] {
  display: none;
}

.v51-analysis-elapsed strong {
  min-width: 29px;
  color:
    rgba(247,216,136,.86);
  font-variant-numeric:
    tabular-nums;
}

.v51-analysis-elapsed strong::after {
  content: "s";
  margin-left: 2px;
  color:
    rgba(231,220,196,.38);
  font-size: .58rem;
}

.v51-history-local-note {
  margin: -5px 0 13px;
  color:
    rgba(232,220,194,.42);
  font-size: .66rem;
  line-height: 1.45;
}

.analysis-photo-wrap img {
  width: 100%;
  height: auto;
  object-fit: contain !important;
  object-position: center;
}

.result-image-modal img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height:
    calc(
      100dvh -
      env(safe-area-inset-top) -
      env(safe-area-inset-bottom) -
      60px
    );
  object-fit: contain !important;
}

@media (max-width:640px) {
  .v51-journey {
    width: 100%;
    margin-top: 10px;
    gap: 4px;
  }

  .v51-journey span {
    min-height: 35px;
    padding-inline: 4px;
    font-size: .59rem;
  }

  .analysis-photo-wrap img {
    max-height: 62dvh;
  }
}

/* ===== WEB V52 — preview + result reading completion ===== */

.v52-preview-info {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 8;
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  border: 1px solid
    rgba(235,198,105,.16);
  border-radius: 14px;
  background:
    rgba(8,7,6,.72);
  backdrop-filter:
    blur(14px);
  pointer-events: none;
}

.v52-preview-info[hidden] {
  display: none;
}

.v52-preview-info strong {
  color:
    rgba(247,222,160,.94);
  font-size: .76rem;
}

.v52-preview-info span {
  color:
    rgba(239,228,205,.66);
  font-size: .65rem;
  line-height: 1.45;
}

.v52-preview-info small {
  color:
    rgba(231,202,132,.54);
  font-size: .6rem;
}

#captured-preview {
  width: 100%;
  height: 100%;
  max-height: 68dvh;
  object-fit: contain !important;
  object-position: center;
  background: #050504;
}

.v52-result-reading-header {
  width: min(100%, 680px);
  margin: 0 auto 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content:
    space-between;
  gap: 12px;
  border: 1px solid
    rgba(236,198,103,.13);
  border-radius: 16px;
  background:
    linear-gradient(
      110deg,
      rgba(232,184,64,.055),
      rgba(255,255,255,.018)
    );
}

.v52-result-reading-header[hidden] {
  display: none;
}

.v52-result-reading-header > div {
  display: grid;
  gap: 2px;
}

#v52-result-kicker {
  color:
    rgba(225,193,116,.51);
  font-size: .59rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

#v52-result-heading {
  color:
    rgba(248,229,181,.94);
  font-size: .95rem;
}

#v52-result-status {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  color:
    rgba(238,213,150,.72);
  background:
    rgba(229,181,66,.06);
  border: 1px solid
    rgba(231,189,87,.13);
  font-size: .59rem;
}

.v52-voice-status {
  width: 100%;
  margin: 2px 0 6px;
  color:
    rgba(235,216,169,.62);
  font-size: .62rem;
  text-align: center;
}

.v52-voice-status[hidden] {
  display: none;
}

.analysis-content {
  overflow-wrap: anywhere;
}

.analysis-content p,
.analysis-content li {
  line-height: 1.68;
}

.analysis-content details {
  scroll-margin-top:
    calc(
      env(safe-area-inset-top) +
      16px
    );
}

@media (max-width:640px) {
  .v52-preview-info {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 9px 10px;
  }

  #captured-preview {
    max-height: 72dvh;
  }

  .v52-result-reading-header {
    padding: 10px 11px;
  }

  #v52-result-heading {
    font-size: .88rem;
  }
}

/* ===== WEB V53 — final mobile release polish ===== */

.v53-camera-badge {
  width: fit-content;
  max-width: calc(100% - 24px);
  min-height: 30px;
  margin: 7px auto;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid
    rgba(229,195,108,.12);
  border-radius: 999px;
  background:
    rgba(9,8,7,.58);
  color:
    rgba(235,221,185,.65);
  font-size: .62rem;
  backdrop-filter:
    blur(12px);
}

.v53-camera-badge[hidden] {
  display: none;
}

#v53-camera-badge-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background:
    rgba(218,179,82,.5);
  box-shadow:
    0 0 8px
    rgba(218,179,82,.18);
}

.v53-camera-badge.is-ready {
  color:
    rgba(247,224,163,.92);
  border-color:
    rgba(235,196,99,.28);
}

.v53-camera-badge.is-ready
#v53-camera-badge-dot {
  background: #e5c469;
  box-shadow:
    0 0 12px
    rgba(229,196,105,.3);
}

.v53-analysis-status {
  width: min(100%, 520px);
  margin: 8px auto;
  padding: 7px 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  border: 1px solid
    rgba(229,190,91,.12);
  background:
    rgba(7,6,5,.44);
  color:
    rgba(239,224,187,.62);
  font-size: .64rem;
}

.v53-analysis-status[hidden] {
  display: none;
}

#v53-analysis-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background:
    rgba(229,191,94,.72);
  box-shadow:
    0 0 10px
    rgba(229,191,94,.22);
  animation:
    v53AnalysisPulse
    1.6s ease-in-out infinite;
}

@keyframes v53AnalysisPulse {
  0%,
  100% {
    opacity: .35;
    transform: scale(.88);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.v53-result-quick-actions {
  width: min(100%, 640px);
  margin: 0 auto 12px;
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0,1fr));
  gap: 7px;
}

.v53-result-quick-actions[hidden] {
  display: none;
}

.v53-result-quick-actions button {
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid
    rgba(231,195,105,.14);
  border-radius: 13px;
  color:
    rgba(246,225,173,.88);
  background:
    linear-gradient(
      115deg,
      rgba(224,178,65,.06),
      rgba(255,255,255,.018)
    );
  font-size: .69rem;
  font-weight: 650;
}

.v53-result-quick-actions button:active {
  transform: scale(.985);
}

.capture-panel,
.analysis-panel,
.history-panel {
  contain:
    layout paint style;
}

#camera-preview,
#captured-preview,
#analysis-photo {
  image-rendering: auto;
}

#camera-preview,
#captured-preview {
  width: 100%;
  object-fit: contain;
}

.capture-actions button,
.capture-actions .file-button,
.analysis-actions button,
.v53-result-quick-actions button {
  min-height: 44px;
}

@media (max-width:640px) {
  .v53-camera-badge {
    max-width: calc(100% - 14px);
  }

  .v53-result-quick-actions {
    width: 100%;
    gap: 5px;
  }

  .v53-result-quick-actions button {
    min-height: 45px;
    padding-inline: 5px;
    font-size: .63rem;
  }

  .capture-actions {
    padding-bottom:
      calc(
        7px +
        env(safe-area-inset-bottom)
      );
  }

  #camera-preview,
  #captured-preview {
    max-height:
      calc(
        100dvh -
        env(safe-area-inset-top) -
        env(safe-area-inset-bottom) -
        180px
      );
  }
}

@media (prefers-reduced-motion: reduce) {
  #v53-analysis-status-dot {
    animation: none;
  }

  .v53-result-quick-actions button:active {
    transform: none;
  }
}

/* ===== WEB V54 — release candidate real-device readiness ===== */

.v54-rc-health {
  width: min(100%, 780px);
  margin: 10px auto 16px;
  padding: 11px 12px;
  border: 1px solid
    rgba(229,191,95,.12);
  border-radius: 17px;
  background:
    linear-gradient(
      115deg,
      rgba(226,179,61,.045),
      rgba(255,255,255,.014)
    );
}

.v54-rc-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 8px;
  color:
    rgba(244,220,158,.82);
  font-size: .69rem;
}

#v54-rc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background:
    rgba(221,182,81,.66);
}

.v54-rc-health.is-ready
#v54-rc-dot {
  background: #e8c96d;
  box-shadow:
    0 0 12px
    rgba(232,201,109,.24);
}

.v54-rc-grid {
  display: grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap: 5px;
}

.v54-rc-grid span {
  min-height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 7px;
  border-radius: 10px;
  border: 1px solid
    rgba(255,255,255,.05);
  color:
    rgba(230,218,193,.42);
  background:
    rgba(255,255,255,.014);
  font-size: .58rem;
  text-align: center;
}

.v54-rc-grid span.is-ready {
  color:
    rgba(237,215,162,.72);
  border-color:
    rgba(227,188,91,.11);
}

.v54-rc-grid span.is-warning {
  opacity: .52;
}

.v54-camera-permission {
  width: fit-content;
  max-width: calc(100% - 18px);
  margin: 4px auto 8px;
  padding: 5px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid
    rgba(255,255,255,.06);
  color:
    rgba(232,219,191,.48);
  background:
    rgba(8,7,6,.52);
  font-size: .59rem;
}

.v54-camera-permission[hidden] {
  display: none;
}

#v54-camera-permission-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background:
    rgba(220,181,80,.45);
}

.v54-camera-permission.is-ready {
  color:
    rgba(239,219,170,.78);
  border-color:
    rgba(230,192,98,.17);
}

.v54-camera-permission.is-ready
#v54-camera-permission-dot {
  background: #e3c36a;
}

.v54-camera-permission.is-blocked {
  border-color:
    rgba(218,128,103,.18);
  color:
    rgba(238,190,178,.74);
}

.v54-camera-permission.is-blocked
#v54-camera-permission-dot {
  background:
    rgba(222,129,105,.78);
}

.v54-result-device-status {
  width: min(100%, 640px);
  margin: 0 auto 9px;
  display: grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap: 6px;
}

.v54-result-device-status[hidden] {
  display: none;
}

.v54-result-device-status span {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 7px;
  border: 1px solid
    rgba(229,193,102,.1);
  border-radius: 11px;
  color:
    rgba(234,220,187,.54);
  background:
    rgba(255,255,255,.014);
  font-size: .59rem;
  text-align: center;
}

@media (max-width:640px) {
  .v54-rc-health {
    margin-top: 7px;
    padding: 9px;
  }

  .v54-rc-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .v54-result-device-status {
    grid-template-columns: 1fr;
  }
}

@media (max-width:380px) {
  .v54-rc-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== WEB V55 — security + runtime health ===== */

.v55-security-trust {
  width: min(100%, 780px);
  margin: 9px auto 12px;
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0,1fr));
  gap: 5px;
}

.v55-security-trust span {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border: 1px solid
    rgba(226,191,104,.09);
  border-radius: 11px;
  background:
    rgba(255,255,255,.012);
  color:
    rgba(234,218,181,.48);
  font-size: .57rem;
  line-height: 1.35;
  text-align: center;
}

.v55-runtime-check {
  width: min(100%, 780px);
  margin: 8px auto 14px;
  padding: 10px;
  border: 1px solid
    rgba(224,188,96,.1);
  border-radius: 15px;
  background:
    rgba(7,6,5,.28);
}

.v55-runtime-check[hidden] {
  display: none;
}

.v55-runtime-check-head {
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.v55-runtime-check-head strong {
  color:
    rgba(243,220,163,.72);
  font-size: .65rem;
}

.v55-runtime-check-head small {
  color:
    rgba(233,219,188,.36);
  font-size: .52rem;
}

.v55-runtime-check-grid {
  display: grid;
  grid-template-columns:
    repeat(5,minmax(0,1fr));
  gap: 5px;
}

.v55-runtime-check-grid span {
  min-height: 30px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid
    rgba(255,255,255,.045);
  color:
    rgba(233,219,188,.43);
  background:
    rgba(255,255,255,.01);
  font-size: .55rem;
  text-align: center;
}

.v55-runtime-check-grid span.is-ready {
  border-color:
    rgba(223,186,90,.12);
  color:
    rgba(239,217,162,.68);
}

.v55-runtime-check-grid span.is-warning {
  border-color:
    rgba(218,132,105,.1);
  color:
    rgba(236,181,165,.56);
}

@media (max-width:700px) {
  .v55-security-trust {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .v55-runtime-check-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

@media (max-width:380px) {
  .v55-security-trust,
  .v55-runtime-check-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== WEB V56 — real-device release validation ===== */

.v56-device-test {
  width: min(100%,780px);
  margin: 9px auto 15px;
  padding: 11px;
  border: 1px solid rgba(229,192,100,.1);
  border-radius: 16px;
  background:
    linear-gradient(
      120deg,
      rgba(222,177,66,.04),
      rgba(255,255,255,.012)
    );
}

.v56-device-test-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.v56-device-test-head strong {
  color: rgba(244,221,165,.78);
  font-size: .72rem;
}

.v56-device-test-head p {
  margin: 3px 0 0;
  color: rgba(232,219,190,.42);
  font-size: .57rem;
  line-height: 1.45;
}

#v56-device-test-run {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(232,194,101,.14);
  background: rgba(228,183,72,.04);
  color: rgba(241,220,167,.72);
  font-size: .59rem;
}

.v56-device-test-grid {
  display: grid;
  grid-template-columns:
    repeat(5,minmax(0,1fr));
  gap: 5px;
}

.v56-device-test-grid > div {
  min-height: 82px;
  padding: 8px 6px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.045);
  background: rgba(255,255,255,.01);
  display: grid;
  align-content: start;
  justify-items: center;
  text-align: center;
  gap: 5px;
}

.v56-device-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(216,140,115,.56);
}

.v56-device-test-grid > div.is-ready
.v56-device-dot {
  background: #e3c36b;
  box-shadow:
    0 0 9px rgba(227,195,107,.2);
}

.v56-device-test-grid strong {
  color: rgba(237,219,176,.61);
  font-size: .58rem;
}

.v56-device-test-grid small {
  color: rgba(232,219,192,.38);
  font-size: .51rem;
  line-height: 1.35;
}

.v56-device-test-grid > div.is-ready {
  border-color: rgba(230,193,100,.1);
}

.v56-device-test-grid > div.is-warning {
  border-color: rgba(216,133,108,.08);
}

@media (max-width:720px) {
  .v56-device-test-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

@media (max-width:420px) {
  .v56-device-test-head {
    align-items: flex-start;
  }

  .v56-device-test-grid {
    grid-template-columns: 1fr;
  }

  .v56-device-test-grid > div {
    min-height: 64px;
  }
}

/* ===== WEB V57 — visible consumer product polish ===== */

.v57-product-hero {
  width: min(100%,760px);
  margin: 4px auto 18px;
  padding: 24px 18px 20px;
  display: grid;
  justify-items: center;
  text-align: center;
  border: 1px solid rgba(233,196,104,.12);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(224,176,57,.12),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.026),
      rgba(255,255,255,.005)
    );
  box-shadow:
    0 24px 70px rgba(0,0,0,.24);
}

.v57-product-orb {
  width: 84px;
  height: 84px;
  margin-bottom: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(241,204,109,.32);
  color: #f1cf76;
  background:
    radial-gradient(
      circle,
      rgba(233,190,79,.18),
      rgba(27,19,6,.25) 62%,
      rgba(0,0,0,.2)
    );
  box-shadow:
    0 0 40px rgba(224,176,56,.16);
  font-size: 2.4rem;
  font-weight: 700;
}

.v57-hero-kicker {
  display: block;
  margin-bottom: 5px;
  color: rgba(241,207,120,.64);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

#v57-hero-title {
  margin: 0;
  color: rgba(255,240,202,.96);
  font-size: clamp(1.5rem,5vw,2.35rem);
  line-height: 1.15;
}

#v57-hero-description {
  width: min(100%,540px);
  margin: 10px auto 0;
  color: rgba(232,220,194,.62);
  font-size: .82rem;
  line-height: 1.65;
}

.feature-card {
  min-height: 180px;
  padding: 18px !important;
  border-radius: 22px !important;
  border-color: rgba(231,194,101,.13) !important;
  background:
    linear-gradient(
      145deg,
      rgba(228,182,69,.055),
      rgba(255,255,255,.014)
    ) !important;
  box-shadow:
    0 16px 36px rgba(0,0,0,.15);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
  border-color: rgba(235,199,108,.25) !important;
  box-shadow:
    0 21px 42px rgba(0,0,0,.22);
}

.feature-card button {
  min-height: 46px;
  border-radius: 14px !important;
  font-weight: 700;
}

.v57-camera-header,
.v57-analysis-header,
.v57-result-header {
  width: min(100%,640px);
  margin: 4px auto 12px;
  text-align: center;
}

.v57-camera-header[hidden],
.v57-analysis-header[hidden],
.v57-result-header[hidden] {
  display: none;
}

.v57-camera-header strong,
.v57-analysis-header strong,
.v57-result-header strong {
  display: block;
  color: rgba(248,228,179,.9);
  font-size: 1.02rem;
}

.v57-camera-header span,
.v57-analysis-header span,
#v57-result-kicker {
  display: block;
  margin-top: 4px;
  color: rgba(232,219,190,.5);
  font-size: .65rem;
}

#v57-result-kicker {
  color: rgba(231,195,106,.62);
  text-transform: uppercase;
  letter-spacing: .08em;
}

#v57-result-title {
  margin-top: 4px;
  font-size: 1.18rem;
}

.v57-device-tools {
  width: min(100%,780px);
  margin: 8px auto 10px;
}

#v57-device-tools-toggle {
  width: 100%;
  min-height: 48px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 14px;
  background: rgba(255,255,255,.012);
  color: rgba(232,218,187,.52);
  text-align: left;
}

#v57-device-tools-toggle strong {
  color: rgba(239,218,168,.62);
  font-size: .64rem;
}

#v57-device-tools-toggle span {
  font-size: .54rem;
  text-align: right;
}

#v56-device-test[hidden] {
  display: none !important;
}

#camera-preview,
#captured-preview,
#analysis-photo {
  border-radius: 18px;
}

.analysis-content {
  font-size: .91rem;
  line-height: 1.72;
}

.analysis-content article,
.analysis-content details {
  border-radius: 16px !important;
}

#analysis-read,
#v53-result-listen {
  border-color: rgba(237,198,99,.3) !important;
  color: rgba(255,232,172,.96) !important;
  background:
    linear-gradient(
      135deg,
      rgba(226,175,49,.18),
      rgba(153,104,18,.06)
    ) !important;
}

.bottom-nav {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

@media (max-width:640px) {
  .v57-product-hero {
    width: calc(100% - 12px);
    margin-bottom: 12px;
    padding: 20px 14px 17px;
    border-radius: 23px;
  }

  .v57-product-orb {
    width: 72px;
    height: 72px;
    margin-bottom: 12px;
    font-size: 2rem;
  }

  #v57-hero-title {
    font-size: 1.52rem;
  }

  #v57-hero-description {
    font-size: .75rem;
  }

  .feature-card {
    min-height: 150px;
    padding: 15px !important;
  }

  .v54-rc-health,
  .v55-runtime-check,
  .v56-device-test {
    border-radius: 14px;
  }

  .v57-camera-header,
  .v57-analysis-header,
  .v57-result-header {
    padding-inline: 8px;
  }

  .analysis-content {
    font-size: .87rem;
    line-height: 1.68;
  }

  .v53-result-quick-actions {
    position: sticky;
    bottom:
      calc(
        70px +
        env(safe-area-inset-bottom)
      );
    z-index: 15;
    padding: 6px;
    border-radius: 16px;
    background: rgba(7,6,5,.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
}

@media (max-width:420px) {
  .feature-card {
    min-height: 138px;
  }

  #v57-device-tools-toggle {
    align-items: flex-start;
    flex-direction: column;
  }

  #v57-device-tools-toggle span {
    text-align: left;
  }
}

/* ===== WEB V58 — cleaner customer-facing product ===== */

.v58-home-heading {
  width: min(100%,760px);
  margin: 0 auto 12px;
  text-align: center;
}

.v58-home-heading strong {
  display: block;
  color: rgba(249,231,186,.92);
  font-size: 1.04rem;
}

.v58-home-heading span {
  display: block;
  margin-top: 3px;
  color: rgba(231,219,193,.5);
  font-size: .65rem;
}

.v58-camera-state {
  width: fit-content;
  max-width: calc(100% - 20px);
  margin: 0 auto 9px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(6,5,4,.66);
  color: rgba(233,219,189,.56);
  font-size: .62rem;
}

.v58-camera-state[hidden] {
  display: none;
}

#v58-camera-state-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(218,139,112,.62);
}

.v58-camera-state.is-ready {
  color: rgba(247,225,170,.88);
  border-color: rgba(230,192,96,.2);
}

.v58-camera-state.is-ready
#v58-camera-state-dot {
  background: #e4c36b;
  box-shadow:
    0 0 10px rgba(228,195,107,.22);
}

.v58-result-labels {
  width: min(100%,640px);
  margin: 0 auto 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(233,217,180,.48);
  font-size: .58rem;
}

.v58-result-labels[hidden] {
  display: none;
}

#v58-result-summary-label {
  color: rgba(242,218,158,.7);
}

.v57-device-tools,
.v54-rc-health,
.v55-runtime-check,
.v56-device-test,
.v55-security-trust {
  opacity: .72;
}

.feature-card {
  min-height: 164px;
}

.feature-card h2,
.feature-card h3,
.feature-card strong {
  color: rgba(248,228,178,.94);
}

.feature-card p {
  color: rgba(231,218,189,.56);
  line-height: 1.5;
}

#capture-panel {
  max-width: 760px;
  margin-inline: auto;
}

.camera-frame,
.camera-preview-wrap {
  border-radius: 22px !important;
  overflow: hidden;
}

#camera-preview,
#captured-preview {
  width: 100%;
  max-height: 72vh;
  object-fit: contain !important;
  background: #050505;
}

.analysis-photo-wrap {
  max-width: 720px;
  margin-inline: auto;
}

.analysis-photo-wrap img {
  width: 100%;
  max-height: 68vh;
  object-fit: contain !important;
  background: #050505;
}

.analysis-content {
  max-width: 760px;
  margin-inline: auto;
}

.analysis-content article,
.analysis-content details {
  margin-bottom: 8px;
  border: 1px solid rgba(228,190,96,.08) !important;
  background: rgba(255,255,255,.012) !important;
}

.analysis-actions {
  max-width: 760px;
  margin-inline: auto;
}

@media (max-width:640px) {
  .v57-product-hero {
    padding-top: 17px;
  }

  .v57-product-orb {
    width: 64px;
    height: 64px;
    font-size: 1.8rem;
  }

  .feature-card {
    min-height: 142px;
    border-radius: 19px !important;
  }

  #camera-preview,
  #captured-preview {
    max-height: 66vh;
  }

  .analysis-photo-wrap img {
    max-height: 58vh;
  }

  .analysis-content {
    padding-inline: 3px;
  }

  .analysis-content article,
  .analysis-content details {
    border-radius: 14px !important;
  }

  .v54-rc-health,
  .v55-runtime-check,
  .v55-security-trust {
    display: none;
  }
}

/* ===== WEB V59 — release candidate customer journey ===== */

.v59-release-journey {
  width: min(100%,760px);
  margin: 0 auto 12px;
  padding: 11px 12px;
  border: 1px solid rgba(229,191,96,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.009);
}

.v59-release-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.v59-release-copy strong {
  color: rgba(241,220,169,.72);
  font-size: .67rem;
}

.v59-release-copy span {
  color: rgba(229,217,190,.38);
  font-size: .53rem;
  text-align: right;
}

.v59-journey-steps {
  display: grid;
  grid-template-columns:
    repeat(5,minmax(0,1fr));
  gap: 5px;
}

.v59-journey-steps > span {
  min-height: 42px;
  padding: 5px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.035);
  background: rgba(255,255,255,.006);
  color: rgba(231,217,188,.32);
  text-align: center;
}

.v59-journey-steps b {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.035);
  font-size: .48rem;
}

.v59-journey-steps small {
  font-size: .49rem;
}

.v59-journey-steps > span.is-complete {
  color: rgba(225,196,125,.58);
}

.v59-journey-steps > span.is-active {
  color: rgba(250,226,169,.88);
  border-color: rgba(230,192,96,.16);
  background: rgba(225,178,59,.035);
}

.v59-journey-steps > span.is-active b {
  background: rgba(227,184,74,.14);
  box-shadow:
    0 0 10px rgba(227,184,74,.09);
}

.v59-current-state {
  margin-top: 7px;
  display: flex;
  justify-content: center;
  gap: 5px;
  color: rgba(231,217,187,.38);
  font-size: .52rem;
}

#v59-current-state-value {
  color: rgba(241,217,159,.68);
}

.v59-result-saved {
  width: fit-content;
  margin: 7px auto;
  padding: 5px 9px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(226,190,97,.1);
  border-radius: 999px;
  color: rgba(239,218,167,.65);
  background: rgba(228,182,66,.025);
  font-size: .55rem;
}

.v59-result-saved[hidden] {
  display: none;
}

@media (max-width:640px) {
  .v59-release-copy {
    display: block;
    text-align: center;
  }

  .v59-release-copy span {
    display: block;
    margin-top: 3px;
    text-align: center;
  }

  .v59-journey-steps {
    gap: 3px;
  }

  .v59-journey-steps > span {
    padding: 4px 2px;
  }
}

@media (max-width:420px) {
  .v59-release-journey {
    width: calc(100% - 10px);
    padding: 9px 7px;
  }

  .v59-journey-steps small {
    font-size: .44rem;
  }
}

/* ===== WEB V60 — final release customer polish ===== */

.v60-release-badge {
  width: fit-content;
  margin: 2px auto 7px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  color: rgba(238,218,168,.5);
  font-size: .49rem;
  letter-spacing: .03em;
}

.v60-release-badge span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(225,190,103,.72);
  box-shadow:
    0 0 7px rgba(225,190,103,.18);
}

.v60-result-disclaimer {
  width: min(100%,700px);
  margin: 5px auto 11px;
  color: rgba(231,217,188,.4);
  font-size: .55rem;
  line-height: 1.45;
  text-align: center;
}

.v60-result-disclaimer[hidden] {
  display: none;
}

#v59-release-journey {
  opacity: .72;
}

#v59-release-journey .v59-release-copy {
  display: none;
}

#v57-product-hero {
  margin-top: 3px;
}

#v58-home-heading {
  margin-top: -3px;
}

#v55-security-trust,
#v55-runtime-check,
#v54-rc-health {
  display: none;
}

.v57-device-tools {
  margin-top: 14px;
}

#analysis-panel {
  padding-bottom:
    calc(
      92px +
      env(safe-area-inset-bottom)
    );
}

.analysis-content article,
.analysis-content details {
  box-shadow: none !important;
}

.analysis-content details summary {
  cursor: pointer;
}

#analysis-read,
#v53-result-listen {
  min-height: 46px;
}

@media (max-width:640px) {
  #v59-release-journey {
    margin-bottom: 9px;
    padding: 7px;
    border-color: rgba(255,255,255,.035);
    background: transparent;
  }

  .v59-current-state {
    margin-top: 4px;
  }

  #v57-product-hero {
    margin-bottom: 9px;
  }

  #v58-home-heading {
    margin-bottom: 9px;
  }

  .v57-device-tools {
    opacity: .48;
  }

  #analysis-panel {
    padding-inline: 8px;
  }
}

/* =========================================================
   V68 — HARD HIDDEN CONTRACT / TOUCH SAFETY
   ========================================================= */

[hidden] {
  display: none !important;
}

[aria-hidden="true"].v50-sr-only {
  pointer-events: none !important;
}

body::before,
.ambient,
.camera-stage::after,
.scan-line,
.analysis-pulse,
.feature-card::before,
.feature-card::after {
  pointer-events: none !important;
}

.feature-grid,
.feature-card,
.feature-card button,
.capture-actions,
.capture-actions button,
.file-button,
#camera-open,
#camera-shoot,
#camera-auto,
#camera-retake,
#capture-back,
#nav-home,
#nav-history,
#analysis-back,
#analysis-retry,
#analysis-read,
#analysis-pause,
#analysis-stop,
#analysis-copy,
#analysis-share,
#analysis-download,
#analysis-new-reading,
#analysis-home {
  pointer-events: auto !important;
  touch-action: manipulation;
}

.feature-card {
  position: relative;
  cursor: pointer;
}

.feature-card button {
  position: relative;
  z-index: 30;
}

#feature-grid {
  position: relative;
  z-index: 20;
}

#capture-panel:not([hidden]),
#analysis-panel:not([hidden]) {
  position: relative;
  z-index: 25;
}

/* =========================================================
   V74A — PWA UPDATE BANNER SAFE POSITION
   Never cover the language selector / top app controls.
   ========================================================= */

#pwa-update-banner {
  position: fixed !important;

  top: auto !important;
  left: 50% !important;
  right: auto !important;

  bottom:
    calc(
      18px +
      env(safe-area-inset-bottom)
    ) !important;

  transform:
    translateX(-50%) !important;

  z-index: 11000 !important;

  width:
    min(
      calc(100vw - 28px),
      520px
    ) !important;

  max-width:
    calc(100vw - 28px) !important;

  margin: 0 !important;

  padding:
    11px
    12px !important;

  border:
    1px solid
    rgba(232, 197, 106, .30) !important;

  border-radius:
    16px !important;

  background:
    rgba(8, 9, 13, .94) !important;

  box-shadow:
    0 18px 50px
    rgba(0, 0, 0, .48) !important;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

#pwa-update-banner[hidden] {
  display: none !important;
}

#pwa-update-banner:not([hidden]) {
  display: flex !important;

  align-items: center;
  justify-content: space-between;

  gap: 10px;
}

#pwa-update-text {
  min-width: 0;

  font-size: .84rem;
  line-height: 1.35;

  color:
    rgba(
      255,
      255,
      255,
      .82
    );
}

#pwa-update-button {
  flex: 0 0 auto;

  min-height: 38px;

  padding:
    8px
    13px;

  border-radius:
    12px;

  white-space: nowrap;
}

/*
 * While camera or analysis journey is active,
 * the update prompt must not cover critical UX.
 */
body.camera-view-active #pwa-update-banner,
body.v74-analysis-active #pwa-update-banner {
  display: none !important;
}

/*
 * Mobile bottom navigation may also occupy the bottom edge.
 * Raise the update notice above it.
 */
@media (max-width: 760px) {
  #pwa-update-banner {
    bottom:
      calc(
        82px +
        env(safe-area-inset-bottom)
      ) !important;

    width:
      calc(100vw - 24px)
      !important;

    padding:
      10px
      11px !important;
  }

  #pwa-update-text {
    font-size:
      .78rem;
  }

  #pwa-update-button {
    min-height: 36px;

    padding:
      7px
      11px;

    font-size:
      .78rem;
  }
}


/* V76A — dedicated native Face camera input */
#face-native-camera-input {
  position: fixed !important;
  left: -10000px !important;
  top: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/*
 * WEB_V51Y_V77_OVERLAY_DISABLED
 *
 * Legacy V77 native-file-input overlay removed.
 * Face entry is owned by V51I trusted Home routing to
 * /face-camera.html.
 *
 * Normal feature-card hit testing must remain intact.
 */

/* =========================================================
   V78_FACE_CAMERA_UI
   ========================================================= */

.v78-face-camera-screen {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #050608;
  color: #fff;
  overflow: hidden;
}

.v78-face-camera-screen[hidden] {
  display: none !important;
}

.v78-face-camera-topbar {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;
  gap: 14px;

  padding:
    calc(14px + env(safe-area-inset-top))
    16px
    14px;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.76),
      rgba(0,0,0,0)
    );
}

.v78-face-camera-close {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;

  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;

  background: rgba(0,0,0,.38);
  color: #fff;

  font-size: 30px;
  line-height: 38px;
}

.v78-face-camera-heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#v78-face-camera-title {
  font-size: 1rem;
}

#v78-face-camera-status {
  margin-top: 3px;
  font-size: .76rem;
  color: rgba(255,255,255,.74);
}

.v78-face-camera-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

.v78-face-camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.v78-face-camera-guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.v78-face-oval {
  position: absolute;
  left: 50%;
  top: 50%;

  width: min(72vw, 390px);
  height: min(57vh, 540px);

  transform: translate(-50%, -50%);

  border:
    2px solid
    rgba(231,199,112,.72);

  border-radius: 48%;

  box-shadow:
    0 0 0 9999px rgba(0,0,0,.16),
    0 0 35px rgba(231,199,112,.18);
}

.v78-face-scan-line {
  position: absolute;

  left: 18%;
  right: 18%;
  top: 38%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(244,213,128,.9),
      transparent
    );

  box-shadow:
    0 0 12px rgba(244,213,128,.55);

  animation:
    v78FaceScan 2.6s ease-in-out infinite;
}

@keyframes v78FaceScan {
  0% {
    transform: translateY(-90px);
    opacity: .2;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateY(180px);
    opacity: .2;
  }
}

.v78-face-camera-controls {
  position: absolute;
  z-index: 10;

  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;

  padding:
    24px
    20px
    calc(26px + env(safe-area-inset-bottom));

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.82),
      rgba(0,0,0,0)
    );
}

.v78-face-camera-shoot {
  width: 76px;
  height: 76px;

  border:
    3px solid
    rgba(255,255,255,.92);

  border-radius: 50%;

  background:
    rgba(255,255,255,.18);

  padding: 6px;
}

.v78-face-camera-shoot span {
  display: block;

  width: 100%;
  height: 100%;

  border-radius: 50%;

  background: #fff;
}

.v78-face-camera-shoot:disabled {
  opacity: .38;
}

.v78-face-camera-native {
  min-height: 48px;

  padding: 10px 18px;

  border:
    1px solid
    rgba(231,199,112,.48);

  border-radius: 14px;

  background:
    rgba(16,14,10,.88);

  color: #f1d78d;

  font-weight: 700;
}

.v78-face-camera-error {
  position: absolute;
  z-index: 12;

  left: 18px;
  right: 18px;
  top: 50%;

  transform: translateY(-50%);

  padding: 18px;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius: 16px;

  background:
    rgba(0,0,0,.78);

  text-align: center;
  line-height: 1.5;
}

/* V78_FACE_CAMERA_UI_END */


/* =========================================================
   V79_FACE_CAMERA_SCREEN
   ========================================================= */

html.v79-camera-active,
html.v79-camera-active body {
  overflow: hidden !important;
}

.v79-face-screen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483640 !important;

  display: block;

  background: #000;
  color: #fff;
}

.v79-face-screen[hidden] {
  display: none !important;
}

.v79-face-video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  background: #000;
}

.v79-face-top {
  position: absolute;
  z-index: 20;

  top: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;
  gap: 14px;

  padding:
    calc(
      14px +
      env(safe-area-inset-top)
    )
    16px
    24px;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.82),
      transparent
    );
}

.v79-face-close {
  width: 46px;
  height: 46px;

  border:
    1px solid
    rgba(255,255,255,.28);

  border-radius: 50%;

  background:
    rgba(0,0,0,.48);

  color: #fff;

  font-size: 30px;
}

.v79-face-copy {
  display: flex;
  flex-direction: column;
}

.v79-face-copy strong {
  font-size: 1rem;
}

.v79-face-copy span {
  margin-top: 3px;

  color:
    rgba(255,255,255,.72);

  font-size: .78rem;
}

.v79-face-guide {
  position: absolute;
  inset: 0;
  z-index: 5;

  pointer-events: none;
}

.v79-face-guide-oval {
  position: absolute;

  left: 50%;
  top: 50%;

  width:
    min(
      76vw,
      410px
    );

  height:
    min(
      59vh,
      550px
    );

  transform:
    translate(
      -50%,
      -50%
    );

  border:
    2px solid
    rgba(
      239,
      207,
      118,
      .82
    );

  border-radius: 48%;

  box-shadow:
    0 0 0 9999px
      rgba(0,0,0,.12),
    0 0 34px
      rgba(
        239,
        207,
        118,
        .22
      );
}

.v79-face-controls {
  position: absolute;

  z-index: 30;

  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 20px;

  min-height: 110px;

  padding:
    20px
    20px
    calc(
      24px +
      env(safe-area-inset-bottom)
    );

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.88),
      transparent
    );
}

.v79-face-shoot {
  width: 76px;
  height: 76px;

  padding: 6px;

  border:
    3px solid #fff;

  border-radius: 50%;

  background:
    rgba(255,255,255,.18);
}

.v79-face-shoot span {
  display: block;

  width: 100%;
  height: 100%;

  border-radius: 50%;

  background: #fff;
}

.v79-face-shoot:disabled {
  opacity: .35;
}

.v79-face-error {
  position: absolute;

  z-index: 25;

  left: 20px;
  right: 20px;
  top: 50%;

  transform:
    translateY(-50%);

  padding: 18px;

  border:
    1px solid
    rgba(255,255,255,.2);

  border-radius: 16px;

  background:
    rgba(0,0,0,.82);

  text-align: center;
  line-height: 1.55;
}

.v79-face-native-label {
  position: relative;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 52px;

  padding:
    12px
    20px;

  border:
    1px solid
    rgba(
      239,
      207,
      118,
      .72
    );

  border-radius: 15px;

  background:
    rgba(
      28,
      23,
      12,
      .96
    );

  color:
    #efd076;

  font-weight: 700;

  overflow: hidden;
}

.v79-face-native-label[hidden] {
  display: none !important;
}

/*
 * REAL native file input physically occupies the fallback button.
 * No JS-generated click is necessary.
 */
.v79-face-native-label
> input[type="file"] {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  opacity: 0.001;

  cursor: pointer;

  font-size: 100px;
}

/* V79_FACE_CAMERA_SCREEN_END */