:root {
  --ink: #102f4f;
  --muted: #5c7486;
  --sky: #a4d9eb;
  --sky-light: #e8f6fb;
  --gold: #f2b63d;
  --paper: #fffdf8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #f7fbfc; font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif; }
a { color: inherit; }

.home-body { height: 100%; height: 100dvh; overflow: hidden; background: #dff2f8; }
.mobile-home { position: relative; z-index: 20; height: 100svh; height: 100dvh; padding: 0 max(19px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-bottom)); overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(195,230,242,.13)), url('/assets/pearlescent-gradient.webp') center/cover no-repeat; isolation: isolate; opacity: 1; transform: scale(1); transition: opacity .28s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.mobile-home.is-leaving { opacity: 0; transform: scale(1.035); pointer-events: none; }
.mobile-home::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 50% 25%, rgba(255,255,255,.7), transparent 30%), linear-gradient(180deg, rgba(255,255,255,.18), rgba(60,139,179,.07)); }
.mobile-home::after { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -70px; height: 190px; border-radius: 50%; background: rgba(39,139,183,.2); filter: blur(55px); }
.home-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(3px); pointer-events: none; }
.glow-a { top: 12%; right: -55px; width: 150px; height: 150px; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(130,208,235,.26) 45%, transparent 72%); }
.glow-b { left: -70px; bottom: 17%; width: 180px; height: 180px; background: radial-gradient(circle, rgba(255,255,255,.62), rgba(114,195,224,.17) 48%, transparent 72%); }
.brand-bar { position: relative; z-index: 3; padding: max(19px, env(safe-area-inset-top)) 0 11px; display: flex; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: #0b2b47; font-size: 16px; font-weight: 900; letter-spacing: .025em; }
.brand b, .mini-brand b { color: #258db8; }
.brand-icon-wrap { position: relative; display: grid; flex: 0 0 45px; place-items: center; width: 45px; height: 45px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.8); border-radius: 15px; background: linear-gradient(145deg, rgba(255,255,255,.8), rgba(180,225,240,.35)); box-shadow: 0 9px 18px rgba(24,79,111,.19), 0 3px 0 rgba(61,143,181,.34), inset 0 1px 0 white; overflow: hidden; }
.brand-icon-wrap img { display: block; width: 40px; height: 40px; aspect-ratio: 1; object-fit: contain; object-position: center; transform: none; }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy small { margin-top: 5px; color: #668598; font-size: 6px; font-weight: 800; letter-spacing: .18em; }

.mobile-hero { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: calc(100dvh - 70px); padding: 0 0 min(7vh, 58px); text-align: center; }
.hero-visual { position: relative; display: grid; place-items: center; width: clamp(160px, 44vw, 205px); aspect-ratio: 1; margin: 2px auto 14px; perspective: 900px; }
.hero-visual::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 5px; height: 22px; border-radius: 50%; background: rgba(11,52,78,.24); filter: blur(12px); }
.hero-visual img { position: relative; z-index: 2; width: 91%; height: 91%; object-fit: contain; filter: drop-shadow(0 20px 20px rgba(12,61,92,.24)); animation: hero-float 4.8s ease-in-out infinite; transform: translateZ(55px); }
.orbit { position: absolute; z-index: 1; border-radius: 50%; pointer-events: none; }
.orbit-one { inset: 7%; border: 1px solid rgba(255,255,255,.9); box-shadow: 0 12px 28px rgba(42,119,154,.15), inset 0 0 24px rgba(255,255,255,.5); transform: rotateX(67deg) rotateZ(-12deg); }
.orbit-two { inset: 0; border: 1px solid rgba(50,144,184,.18); border-left-color: rgba(255,255,255,.9); border-right-color: rgba(39,139,183,.42); animation: orbit-spin 12s linear infinite; }
.hero-shine { position: absolute; z-index: 3; border-radius: 50%; background: white; box-shadow: 0 0 13px white, 0 0 22px rgba(111,205,238,.8); }
.shine-one { top: 13%; right: 13%; width: 6px; height: 6px; }
.shine-two { left: 4%; bottom: 27%; width: 4px; height: 4px; }
.eyebrow { max-width: 350px; margin: 0 0 10px; color: #3f7896; font-size: 8px; font-weight: 900; letter-spacing: .11em; line-height: 1.5; text-transform: uppercase; }
.mobile-hero h1 { margin: 0; color: #0b2d4b; font-size: clamp(44px, 12.7vw, 63px); line-height: .98; letter-spacing: -.062em; text-shadow: 0 2px 0 rgba(255,255,255,.7), 0 12px 28px rgba(54,124,158,.13); }
.mobile-hero h1 span { color: #258fba; }
.primary-button { position: relative; display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; gap: 13px; width: min(100%, 360px); min-height: 68px; margin-top: 24px; padding: 11px 17px; border: 1px solid rgba(255,255,255,.25); border-radius: 21px; color: white; background: linear-gradient(145deg, #143f62, #082741 68%, #061c30); box-shadow: 0 19px 35px rgba(12,57,88,.27), 0 6px 0 #041727, 0 7px 0 rgba(74,167,205,.55), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -12px 25px rgba(0,0,0,.12); font: inherit; text-decoration: none; text-align: left; font-size: 16px; font-weight: 900; transform: translateZ(25px); transition: transform .18s ease, box-shadow .18s ease, opacity .2s ease; }
.primary-button:disabled { opacity: .64; }
.primary-button > span:nth-child(2) { display: flex; flex-direction: column; }
.primary-button small { margin-top: 3px; color: #a8cddd; font-size: 9px; font-weight: 600; }
.primary-button:active { transform: translateY(4px); box-shadow: 0 10px 22px rgba(12,57,88,.25), 0 2px 0 #041727, inset 0 1px 0 rgba(255,255,255,.2); }
.button-arrow { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #c9ebf7; font-size: 14px; }
.scan-mark { width: 22px; height: 22px; border: 2px solid white; border-radius: 7px; box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 7px white; }
.privacy { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 18px 0 0; color: #5e7f92; font-size: 9px; font-weight: 700; }
.privacy i { width: 3px; height: 3px; border-radius: 50%; background: #5b9dbb; }

@keyframes hero-float { 0%, 100% { transform: translateY(0) rotateY(-2deg) translateZ(55px); } 50% { transform: translateY(-8px) rotateY(3deg) translateZ(55px); } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

@media (min-width: 540px) {
  .mobile-home { width: 540px; margin: 0 auto; box-shadow: 0 0 70px rgba(25,87,120,.16); }
}

.scanner-root,
.scanner-body { width: 100%; height: 100%; height: 100dvh; overflow: hidden; }
.scanner-body { position: fixed; inset: 0; margin: 0; background: #071723; overscroll-behavior: none; }
#ar-scene { position: absolute !important; z-index: 0; inset: 0; display: block; width: 100% !important; height: 100% !important; visibility: hidden; }
.camera-active #ar-scene { visibility: visible; }
#ar-scene .a-canvas { width: 100% !important; height: 100% !important; }
.permission-screen { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); background: linear-gradient(145deg, rgba(3,19,32,.9), rgba(11,51,79,.82)), url('/assets/pearlescent-gradient.webp') center/cover no-repeat; }
.round-button { position: absolute; top: max(18px, env(safe-area-inset-top)); left: 18px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0 0 2px; border: 0; border-radius: 50%; color: var(--ink); background: white; text-decoration: none; font: inherit; font-size: 23px; }
.permission-screen > .round-button { color: white; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.09); box-shadow: 0 12px 35px rgba(0,0,0,.2); backdrop-filter: blur(12px); }
.permission-panel { position: relative; width: min(100%, 410px); padding: 30px 28px 30px; border: 1px solid rgba(167,220,239,.34); border-radius: 34px; color: white; background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.055)); box-shadow: 0 34px 80px rgba(0,0,0,.35), 0 7px 0 rgba(3,18,30,.65), 0 8px 0 rgba(119,199,229,.3), inset 0 1px 0 rgba(255,255,255,.26); text-align: center; backdrop-filter: blur(20px); transform: perspective(900px) rotateX(1.5deg); }
.permission-panel::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 24px; pointer-events: none; }
.permission-icon { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin: -4px auto 10px; }
.permission-icon::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(185,232,248,.27); border-radius: 50%; box-shadow: inset 0 0 28px rgba(117,206,239,.13), 0 14px 28px rgba(0,0,0,.18); }
.permission-icon img { position: relative; width: 108px; height: 108px; object-fit: contain; filter: drop-shadow(0 15px 13px rgba(0,0,0,.28)); animation: hero-float 5s ease-in-out infinite; }
.mini-brand { font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.permission-panel h1 { margin: 13px 0 8px; color: white; font-size: 39px; letter-spacing: -.05em; }
.permission-panel p { margin: 0 0 24px; color: #c9dce7; font-size: 14px; line-height: 1.75; }
#start-button { position: relative; width: 100%; min-height: 59px; border: 1px solid rgba(255,255,255,.48); border-radius: 18px; color: #08243d; background: linear-gradient(180deg, #e9faff, #9fd7eb); box-shadow: 0 14px 28px rgba(0,0,0,.24), 0 4px 0 #397f9e, inset 0 1px 0 white; font: inherit; font-size: 16px; font-weight: 900; }
#start-button:disabled { opacity: .5; }
.permission-panel small { display: block; margin-top: 14px; color: #94aebd; font-size: 10px; }
.scan-ui { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.scan-ui::before,
.scan-ui::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.scan-ui::before { top: 0; height: 150px; background: linear-gradient(180deg, rgba(3,17,28,.64), transparent); }
.scan-ui::after { bottom: 0; height: 220px; background: linear-gradient(0deg, rgba(3,17,28,.74), transparent); }
.scan-ui header { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: center; min-height: 76px; padding: max(14px, env(safe-area-inset-top)) 18px 16px; }
.scan-ui a,
.scan-ui button { pointer-events: auto; }
.round-button.dark { top: max(14px, env(safe-area-inset-top)); left: 18px; color: white; border: 1px solid rgba(255,255,255,.24); background: rgba(7,23,35,.46); box-shadow: 0 8px 24px rgba(0,0,0,.12); backdrop-filter: blur(12px); }
.scan-status { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 10px 17px; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; color: white; background: rgba(7,23,35,.62); box-shadow: 0 10px 30px rgba(0,0,0,.15); backdrop-filter: blur(12px); font-size: 12px; }
.scan-status > span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.scan-status.found > span { background: #48d49b; }
.clear-ar-small { display: flex; align-items: center; gap: 7px; color: white; font-size: 12px; font-weight: 900; letter-spacing: .09em; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.clear-ar-small img { width: 27px; height: 27px; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(0,0,0,.3)); }
.clear-ar-small b { color: #8ed8f2; }
.target-guide { position: absolute; z-index: 1; left: 50%; top: 48%; width: min(68vw, 340px); transform: translate(-50%,-50%); }
.target-guide p { margin: 17px 0 0; color: white; text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,.8); font-size: 12px; font-weight: 700; }
.target-frame { position: relative; width: 100%; aspect-ratio: 2/3; border: 1px solid rgba(255,255,255,.2); border-radius: 24px; box-shadow: inset 0 0 40px rgba(7,23,35,.08); }
.target-frame i { position: absolute; width: 34px; height: 34px; border-color: white; border-style: solid; }
.target-frame i:nth-child(1) { left: -2px; top: -2px; border-width: 3px 0 0 3px; border-radius: 18px 0 0; }
.target-frame i:nth-child(2) { right: -2px; top: -2px; border-width: 3px 3px 0 0; border-radius: 0 18px 0 0; }
.target-frame i:nth-child(3) { left: -2px; bottom: -2px; border-width: 0 0 3px 3px; border-radius: 0 0 0 18px; }
.target-frame i:nth-child(4) { right: -2px; bottom: -2px; border-width: 0 3px 3px 0; border-radius: 0 0 18px; }
.scan-footer { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: max(22px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 11px; }
.scan-tip { margin: 0; color: rgba(255,255,255,.9); text-align: center; text-shadow: 0 2px 7px black; font-size: 11px; font-weight: 600; }

.result-screen { position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto; color: white; background: linear-gradient(160deg, rgba(3,16,27,.92), rgba(10,47,74,.8) 52%, rgba(4,23,38,.92)), url('/assets/pearlescent-gradient.webp') center/cover fixed no-repeat; opacity: 0; transition: opacity .26s ease; pointer-events: auto; overscroll-behavior: contain; }
.result-screen.is-visible { opacity: 1; }
.result-screen::before { content: ""; position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 80%); pointer-events: none; }
.result-light { position: fixed; width: 230px; height: 230px; border-radius: 50%; filter: blur(10px); opacity: .55; pointer-events: none; }
.light-one { top: -125px; left: -95px; background: radial-gradient(circle, rgba(122,218,255,.5), transparent 68%); }
.light-two { right: -110px; bottom: -115px; background: radial-gradient(circle, rgba(255,197,74,.42), transparent 68%); }
.result-stage { position: relative; display: grid; place-items: center; width: 100%; min-height: 100%; min-height: 100dvh; padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); perspective: 1100px; }
.result-close { position: fixed; z-index: 3; top: max(16px, env(safe-area-inset-top)); right: 16px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0 0 3px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: white; background: rgba(4,19,31,.48); box-shadow: 0 12px 30px rgba(0,0,0,.2); backdrop-filter: blur(12px); font: 300 30px/1 Arial, sans-serif; }
.copy-button { position: fixed; z-index: 4; top: max(16px, env(safe-area-inset-top)); left: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 14px; border: 1px solid rgba(180,231,248,.38); border-radius: 999px; color: #eafaff; background: rgba(4,28,45,.72); box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.14); backdrop-filter: blur(14px); font: inherit; font-size: 11px; transition: color .2s ease, background .2s ease, transform .2s ease; }
.copy-button > span { font-size: 18px; line-height: 1; }
.copy-button.copied { color: #092b35; background: #a9efd9; transform: translateY(-1px); }
.result-card { position: relative; width: min(100%, 430px); margin: 34px 0 10px; padding: 25px 24px 24px; border: 1px solid rgba(174,225,243,.5); border-radius: 34px; background: radial-gradient(circle at 50% 0, rgba(185,231,247,.15), transparent 38%), linear-gradient(150deg, rgba(23,65,97,.97), rgba(7,29,48,.98) 58%, rgba(5,22,36,.99)); box-shadow: 0 42px 75px rgba(0,0,0,.48), 0 9px 0 #03111d, 0 10px 0 rgba(105,187,218,.5), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -30px 70px rgba(0,0,0,.16); text-align: center; transform: translateY(20px) rotateX(5deg) scale(.96); transform-origin: 50% 30%; transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.result-screen.is-visible .result-card { transform: translateY(0) rotateX(1.2deg) scale(1); }
.result-card::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(255,255,255,.075); border-radius: 26px; pointer-events: none; }
.result-card::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -22px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.44); filter: blur(13px); transform: translateZ(-30px); pointer-events: none; }
.result-card-edge { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.result-card-edge::before,
.result-card-edge::after { content: ""; position: absolute; width: 130px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,218,137,.8), transparent); }
.result-card-edge::before { top: 25px; left: -30px; transform: rotate(-42deg); }
.result-card-edge::after { right: -30px; bottom: 25px; transform: rotate(-42deg); }
.result-brand { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; color: #eaf8ff; font-size: 11px; font-weight: 900; letter-spacing: .11em; }
.result-brand b { color: #91daf3; }
.result-brand-mark { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(187,232,248,.5); border-radius: 9px; background: rgba(170,225,244,.1); box-shadow: 0 5px 0 rgba(70,150,184,.5); overflow: hidden; }
.result-brand-mark img { width: 35px; height: 35px; object-fit: contain; }
.result-emblem { position: relative; display: grid; place-items: center; width: 126px; height: 126px; margin: 22px auto 17px; transform: translateZ(35px); }
.result-emblem::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(182,230,247,.32); border-radius: 50%; box-shadow: 0 20px 38px rgba(0,0,0,.28), inset 0 0 30px rgba(108,204,237,.13); }
.result-emblem-ring { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.17); border-left-color: rgba(190,237,253,.85); border-right-color: rgba(68,157,194,.7); border-radius: 50%; animation: orbit-spin 10s linear infinite; }
.result-emblem img { position: relative; width: 118px; height: 118px; object-fit: contain; filter: drop-shadow(0 18px 16px rgba(0,0,0,.3)); }
.result-kicker { margin: 0 0 8px; color: #91cbe2; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.result-kicker strong { color: #ffd779; }
.result-card h1 { margin: 0 auto; max-width: 340px; color: white; font-size: clamp(29px, 8.4vw, 38px); line-height: 1.16; letter-spacing: -.045em; text-wrap: balance; text-shadow: 0 5px 22px rgba(0,0,0,.35); }
.result-rule { display: flex; align-items: center; gap: 10px; width: 72%; margin: 19px auto 18px; }
.result-rule::before,
.result-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,214,120,.65)); }
.result-rule::after { transform: scaleX(-1); }
.result-rule span { width: 7px; height: 7px; border: 1px solid #ffe39b; background: #d99a2c; transform: rotate(45deg); box-shadow: 0 0 12px rgba(255,204,91,.55); }
.result-fact { position: relative; margin: 0; padding: 0 2px; color: #e4eef3; text-align: left; white-space: pre-line; font-size: clamp(14px, 3.8vw, 16px); line-height: 1.8; }
.result-sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.result-sources a { padding: 7px 11px; border: 1px solid rgba(143,208,233,.28); border-radius: 999px; color: #a9dced; background: rgba(143,208,233,.07); text-decoration: none; font-size: 10px; font-weight: 700; }
.rescan-button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; width: 100%; min-height: 55px; margin-top: 21px; border: 1px solid rgba(255,255,255,.5); border-radius: 17px; color: #09223a; background: linear-gradient(180deg, #eefcff, #9fd9ee); box-shadow: 0 13px 28px rgba(0,0,0,.25), 0 4px 0 #347b9a, inset 0 1px 0 white; font: inherit; font-size: 14px; font-weight: 900; }
.rescan-button .scan-mark { border-color: #0a2943; box-shadow: inset 0 0 0 5px #b5e4f3, inset 0 0 0 7px #0a2943; }
.result-close:active,
.rescan-button:active { transform: translateY(2px); }

.prompt-result .result-stage { align-items: start; }
.prompt-result .result-card { margin-top: 70px; }
.prompt-result .result-emblem { width: 88px; height: 88px; margin: 16px auto 13px; }
.prompt-result .result-emblem img { width: 82px; height: 82px; }
.prompt-result .result-card h1 { max-width: 350px; font-size: clamp(25px, 7vw, 32px); }
.prompt-result .result-fact { font-size: 14px; line-height: 1.75; }

@media (max-height: 720px) {
  .result-stage { align-items: start; }
  .result-card { margin-top: 42px; padding-top: 20px; }
  .result-emblem { width: 96px; height: 96px; margin: 18px auto 15px; }
  .result-emblem img { width: 90px; height: 90px; }
  .result-card h1 { font-size: 28px; }
  .result-rule { margin-top: 14px; margin-bottom: 13px; }
  .result-fact { line-height: 1.65; }
}
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-visual img,
  .orbit-two,
  .permission-icon img,
  .result-emblem-ring { animation: none; }
}

/* Pastel mint theme */
:root {
  --ink: #173f37;
  --muted: #63847a;
  --sky: #8bd6c2;
  --sky-light: #e8faf3;
  --gold: #66c7ac;
  --paper: #fbfffd;
}

body { background: #f4fcf8; }
.home-body { background: #e7f8f1; }
.mobile-home {
  background:
    radial-gradient(circle at 15% 18%, rgba(255,255,255,.94), transparent 30%),
    radial-gradient(circle at 88% 76%, rgba(146,224,202,.34), transparent 35%),
    linear-gradient(145deg, #fafffd 0%, #e9faf3 44%, #d5f2e8 72%, #fbfffd 100%);
}
.mobile-home::before {
  background: conic-gradient(from 210deg at 50% 42%, transparent 0 24%, rgba(255,255,255,.78) 31%, transparent 39% 68%, rgba(166,232,214,.28) 74%, transparent 82%);
  transform: scale(1.45) rotate(-7deg);
  animation: mint-shimmer 12s ease-in-out infinite alternate;
}
.mobile-home::after { background: rgba(83,190,158,.22); }
.glow-a { background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.96), rgba(123,216,190,.32) 45%, transparent 72%); animation: glow-drift 8s ease-in-out infinite alternate; }
.glow-b { background: radial-gradient(circle, rgba(255,255,255,.82), rgba(99,199,171,.22) 48%, transparent 72%); animation: glow-drift 10s ease-in-out infinite alternate-reverse; }
.brand { color: #173f37; }
.brand b, .mini-brand b { color: #2d987c; }
.brand-icon-wrap { border-color: rgba(255,255,255,.94); background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(198,241,229,.62)); box-shadow: 0 10px 22px rgba(39,126,104,.18), 0 3px 0 rgba(85,181,154,.32), inset 0 1px 0 white; }
.brand-copy small { color: #668a80; }
.hero-visual::after { background: rgba(36,115,95,.2); }
.hero-visual img { filter: drop-shadow(0 22px 22px rgba(34,115,94,.22)); }
.orbit-one { box-shadow: 0 12px 28px rgba(49,145,119,.15), inset 0 0 24px rgba(255,255,255,.72); }
.orbit-two { border-color: rgba(54,158,130,.2); border-left-color: rgba(255,255,255,.95); border-right-color: rgba(41,146,118,.48); }
.hero-shine { box-shadow: 0 0 13px white, 0 0 24px rgba(101,216,184,.85); }
.eyebrow { color: #4d8777; }
.mobile-hero h1 { color: #173f37; text-shadow: 0 2px 0 rgba(255,255,255,.85), 0 12px 28px rgba(57,143,119,.13); }
.mobile-hero h1 span { color: #2e987d; }
.primary-button { border-color: rgba(255,255,255,.48); background: linear-gradient(145deg, #62c9ad, #329b7f 68%, #247b67); box-shadow: 0 19px 35px rgba(35,121,99,.24), 0 6px 0 #1f6757, 0 7px 0 rgba(171,235,217,.82), inset 0 1px 0 rgba(255,255,255,.48), inset 0 -12px 25px rgba(18,91,73,.12); }
.primary-button small { color: #dcf8f0; }
.primary-button:active { box-shadow: 0 10px 22px rgba(35,121,99,.22), 0 2px 0 #1f6757, inset 0 1px 0 rgba(255,255,255,.35); }
.button-arrow { color: #eafff9; }
.scan-mark { box-shadow: inset 0 0 0 5px #328e78, inset 0 0 0 7px white; }
.privacy { color: #65867d; }
.privacy i { background: #61b89f; }

.permission-screen {
  background:
    radial-gradient(circle at 12% 14%, rgba(255,255,255,.88), transparent 26%),
    radial-gradient(circle at 92% 82%, rgba(104,204,176,.3), transparent 35%),
    linear-gradient(145deg, #e9faf3, #ccefe4 55%, #f9fffc);
}
.permission-screen::before { content: ""; position: absolute; inset: -35%; pointer-events: none; background: conic-gradient(from 40deg, transparent 0 31%, rgba(255,255,255,.58) 37%, transparent 44% 78%, rgba(109,207,180,.18) 84%, transparent 91%); animation: mint-shimmer 13s ease-in-out infinite alternate; }
.permission-screen > .round-button { color: #245d50; border-color: rgba(64,148,124,.2); background: rgba(255,255,255,.68); box-shadow: 0 12px 35px rgba(42,119,98,.14); }
.permission-panel { border-color: rgba(99,190,165,.4); color: var(--ink); background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(230,249,242,.76)); box-shadow: 0 34px 80px rgba(45,126,104,.2), 0 7px 0 rgba(72,158,134,.32), 0 8px 0 rgba(218,248,239,.9), inset 0 1px 0 white; }
.permission-panel::before { border-color: rgba(76,167,142,.11); }
.permission-icon::before { border-color: rgba(71,169,142,.25); box-shadow: inset 0 0 28px rgba(80,193,162,.13), 0 14px 28px rgba(42,122,100,.13); }
.permission-panel h1 { color: #173f37; }
.permission-panel p { color: #5f8077; }
#start-button { color: #16463a; border-color: rgba(255,255,255,.82); background: linear-gradient(180deg, #f8fffc, #a8e6d4); box-shadow: 0 14px 28px rgba(44,125,104,.19), 0 4px 0 #4da88f, inset 0 1px 0 white; }
.permission-panel small { color: #719188; }

.scan-status > span { background: #9de6d2; }
.scan-status.found > span { background: #65e0b6; }
.clear-ar-small b { color: #9cebd4; }
.target-frame i { border-color: #c8ffef; }

.result-screen { color: var(--ink); background: radial-gradient(circle at 12% 12%, rgba(255,255,255,.92), transparent 30%), radial-gradient(circle at 88% 82%, rgba(111,207,180,.3), transparent 38%), linear-gradient(150deg, #f7fffc, #d8f5eb 52%, #fafffd); }
.result-screen::before { background-image: linear-gradient(rgba(48,139,114,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(48,139,114,.035) 1px, transparent 1px); }
.light-one { background: radial-gradient(circle, rgba(114,218,188,.5), transparent 68%); animation: glow-drift 8s ease-in-out infinite alternate; }
.light-two { background: radial-gradient(circle, rgba(255,255,255,.9), rgba(120,211,185,.32), transparent 68%); animation: glow-drift 10s ease-in-out infinite alternate-reverse; }
.result-close { color: #245d50; border-color: rgba(54,143,118,.22); background: rgba(255,255,255,.72); box-shadow: 0 12px 30px rgba(42,119,98,.15); }
.copy-button { color: #276a58; border-color: rgba(77,173,146,.3); background: rgba(255,255,255,.74); box-shadow: 0 12px 30px rgba(42,119,98,.14), inset 0 1px 0 white; }
.result-card { border-color: rgba(108,198,173,.48); background: radial-gradient(circle at 50% 0, rgba(255,255,255,.94), transparent 40%), linear-gradient(150deg, rgba(255,255,255,.96), rgba(231,249,243,.96) 58%, rgba(247,255,252,.98)); box-shadow: 0 42px 75px rgba(43,124,102,.2), 0 9px 0 #83cdb9, 0 10px 0 rgba(236,253,247,.95), inset 0 1px 0 white, inset 0 -30px 70px rgba(88,185,158,.08); }
.result-card::before { border-color: rgba(59,153,127,.1); }
.result-card::after { background: rgba(35,109,90,.22); }
.result-card-edge::before, .result-card-edge::after { background: linear-gradient(90deg, transparent, rgba(94,194,166,.82), transparent); animation: edge-sheen 4.8s ease-in-out infinite alternate; }
.result-brand { color: #315f54; }
.result-brand b { color: #2d987c; }
.result-brand-mark { border-color: rgba(81,175,149,.42); background: rgba(255,255,255,.75); box-shadow: 0 5px 0 rgba(87,176,152,.42); }
.result-emblem::before { border-color: rgba(75,169,143,.3); box-shadow: 0 20px 38px rgba(49,132,109,.18), inset 0 0 30px rgba(91,202,171,.13); }
.result-emblem-ring { border-color: rgba(66,159,134,.18); border-left-color: rgba(255,255,255,.95); border-right-color: rgba(53,155,128,.7); }
.result-emblem img { filter: drop-shadow(0 18px 16px rgba(44,128,105,.2)); }
.result-kicker { color: #5d8d80; }
.result-kicker strong { color: #26866f; }
.result-card h1 { color: #173f37; text-shadow: 0 5px 22px rgba(65,153,129,.13); }
.result-rule::before, .result-rule::after { background: linear-gradient(90deg, transparent, rgba(70,170,143,.58)); }
.result-rule span { border-color: #b8efdf; background: #58b99e; box-shadow: 0 0 12px rgba(84,193,163,.46); }
.result-fact { color: #365c52; }
.result-sources a { border-color: rgba(72,167,141,.26); color: #317864; background: rgba(106,207,179,.1); }
.rescan-button { color: #16463a; border-color: rgba(255,255,255,.85); background: linear-gradient(180deg, #f9fffd, #a9e6d5); box-shadow: 0 13px 28px rgba(45,126,104,.17), 0 4px 0 #4ca58d, inset 0 1px 0 white; }
.rescan-button .scan-mark { border-color: #246957; box-shadow: inset 0 0 0 5px #b7eedf, inset 0 0 0 7px #246957; }

@keyframes mint-shimmer { from { transform: scale(1.45) rotate(-9deg) translate3d(-2%, -1%, 0); opacity: .45; } to { transform: scale(1.45) rotate(4deg) translate3d(3%, 2%, 0); opacity: .9; } }
@keyframes glow-drift { from { transform: translate3d(-5px, -4px, 0) scale(.96); opacity: .55; } to { transform: translate3d(12px, 9px, 0) scale(1.08); opacity: .95; } }
@keyframes edge-sheen { from { opacity: .35; transform: rotate(-42deg) translateX(-10px); } to { opacity: 1; transform: rotate(-42deg) translateX(12px); } }

@media (prefers-reduced-motion: reduce) {
  .mobile-home::before,
  .permission-screen::before,
  .glow-a,
  .glow-b,
  .result-light,
  .result-card-edge::before,
  .result-card-edge::after { animation: none; }
}