/* Groomr: focused consumer UI, layered finder, original app behavior. */
:root{--background:240 2% 7%;--foreground:240 2% 95%;--card:240 2% 11%;--card-foreground:240 2% 95%;--popover:240 2% 13%;--popover-foreground:240 2% 95%;--primary:240 0% 67%;--primary-foreground:240 2% 9%;--secondary:240 2% 19%;--secondary-foreground:240 2% 85%;--muted:240 2% 17%;--muted-foreground:240 2% 67%;--accent:240 0% 67%;--accent-foreground:240 2% 9%;--border:240 2% 23%;--input:240 2% 23%;--ring:240 0% 67%;--radius:1rem;--glass-grain:none;--shadow-card:none;--shadow-elevated:none;--shadow-gold:none;--shadow-gold-lg:none;--shadow-glow:none}
html,body,#root{background:#0b0b0d;background-image:none;color:#f5f5f7}body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif}h1,h2,h3{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui,sans-serif;letter-spacing:-.035em}h1{font-size:28px!important}h2{line-height:1.2!important}button,a{touch-action:manipulation;transition:background-color .18s,color .18s,transform .18s,opacity .18s}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #ececef;outline-offset:4px}button:disabled{opacity:.45}
.phone-screen-surface{background:#0b0b0d!important;background-image:none!important}.demo-device-wrap{background:#121214;padding:20px}.demo-device{width:430px;border:1px solid #38383c;border-radius:28px;background:#0b0b0d;box-shadow:0 18px 50px #0004}.demo-device .phone-screen-surface{scrollbar-width:none}.demo-controls{background:#0b0b0d;height:72px;padding:10px 16px;font-size:12px;border-bottom:1px solid #29292d}.demo-control-row{max-width:430px;gap:10px}.demo-control-row button{min-height:32px;border:0;background:#232326;border-radius:8px}.demo-status{font-size:10px;letter-spacing:0;color:#ececef}.demo-controls p{font-size:11px;color:#a3a3ad;margin-top:5px}.demo-info{background:#232326;border-color:#48484d;color:#f5f5f7}.demo-device-wrap{height:calc(100dvh - 72px)}
[class*="glass-"],.ios-surface,.ios-control,.bg-card,.bg-popover{background:#1c1c1f!important;background-image:none!important;border-color:#343438!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
[class*="glass-"]:before,[class*="glass-"]:after{display:none!important}.glass-selection{background:#3a3a40!important;border:0!important;border-radius:9px!important}.glass-segmented{border:0!important;border-radius:12px!important;padding:4px!important;background:#202023!important}.glass-segmented button{min-height:48px;border-radius:9px!important;gap:5px}.glass-segmented button span{font-size:12px!important}.glass-segmented svg{width:17px;height:17px}.glass-segmented button.text-foreground{color:#f5f5f7}.glass-segmented button.text-foreground svg{color:#f1f1f4}.demo-device .sticky.top-0{padding-top:12px;background:#0b0b0d!important;padding-bottom:10px}
button[class*="bg-gradient-to"]{background-image:none!important;background-color:#ececef!important;color:#18181b!important;box-shadow:none!important}[class*="shadow-"]{box-shadow:none!important}[class*="backdrop-blur"]{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}[class*="text-[10px]"],[class*="text-[11px]"]{font-size:12px!important;line-height:1.45!important}.text-muted-foreground{color:#a8a8b1}.rounded-lg{border-radius:12px}.rounded-2xl{border-radius:16px}
.groomr-page-title{padding-top:12px!important;padding-bottom:20px!important}.groomr-page-title>div:first-child{display:none}.groomr-page-title p{font-size:13px!important;margin-top:5px}.groomr-tabs{margin-bottom:22px!important}.groomr-tabs .glass-segmented{background:#0b0b0d!important;padding:0!important;gap:4px;border-bottom:1px solid #343438!important;border-radius:0!important}.groomr-tabs button{min-height:54px}.groomr-tabs .glass-selection{background:#202b24!important;border-radius:8px 8px 0 0!important}
.groomr-finder{background:#222226!important;border:0!important;border-radius:20px!important;padding:26px 22px 22px!important;box-shadow:none!important;overflow:hidden}.groomr-finder>div{position:relative;z-index:1}.groomr-finder .groomr-finder-inner{align-items:flex-start!important;text-align:left!important}.groomr-finder h2{max-width:310px!important;font-size:26px!important;line-height:1.15!important;position:relative;z-index:2}.groomr-finder h2+p{max-width:285px!important;font-size:14px!important;line-height:1.55!important;margin-top:12px}.groomr-finder-label{border:0!important;padding:0!important;background:transparent!important;font-size:12px!important;margin-bottom:14px!important;color:#d9d9df!important}.groomr-finder-label svg{display:none}.groomr-scan{width:100%!important;height:190px!important;margin:18px 0 8px!important;overflow:hidden;border-radius:12px!important;background:#17171a!important}.groomr-scan>*{display:none!important}.groomr-scan:before{content:"";position:absolute;inset:0;background:url('./groomr-face.svg') center/contain no-repeat;transform:translateY(var(--groomr-depth,0px));transition:transform .12s linear}.groomr-scan:after{content:"Explore your proportions";position:absolute;bottom:12px;left:12px;color:#b2b2bc;font-size:11px;letter-spacing:0}.groomr-finder .grid-cols-3{margin-top:6px!important;gap:0!important;border-bottom:1px solid #4a4a50;padding-bottom:12px}.groomr-finder .glass-light{padding:6px 0!important;border:0!important;background:transparent!important;border-radius:0!important}.groomr-finder .glass-light p{font-size:11px!important;color:#c1c1ca!important}.groomr-finder button:not(.groomr-scan){min-height:48px;width:100%;border-radius:10px!important;background:#ececef!important;color:#18181b!important;margin-top:18px!important;font-size:14px!important;font-weight:700}.groomr-finder button+p{font-size:12px!important;color:#b2b2bc!important;align-self:center}.groomr-shop-section{margin-top:30px!important}.groomr-shop-section h2{font-size:19px!important}.groomr-shop-section h2+p{font-size:12px!important}.groomr-shop-section button:has(h3){border-radius:16px!important;background:#1c1c1f!important;box-shadow:none!important}.groomr-shop-section h3{font-size:15px!important;letter-spacing:-.02em}
nav.safe-bottom{background:#0b0b0d!important;padding-top:16px;padding-bottom:20px}nav.safe-bottom button{min-height:44px}input,select,textarea{background-color:#242428!important;border-color:#4a4a50!important;min-height:44px;font-size:14px!important}.groomr-enter{animation:groomr-arrive .35s ease-out both}@keyframes groomr-arrive{from{opacity:.6;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.demo-device-wrap{padding:0;background:#0b0b0d}.demo-device{width:100%;max-width:100%;border:0;border-radius:0;box-shadow:none}.demo-control-row{max-width:none}.groomr-finder{padding:24px 20px 20px!important}.groomr-finder h2{font-size:25px!important}.groomr-scan{height:164px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.groomr-scan:before{transform:none!important}}
.groomr-title-wrap{padding-top:10px!important;padding-bottom:0!important}.groomr-page-title{padding-top:8px!important;padding-bottom:14px!important}.groomr-tabs{margin-bottom:18px!important}.groomr-tabs>div{border:0!important;border-bottom:1px solid #343438!important;border-radius:0!important;padding:0!important;background:#0b0b0d!important}.groomr-tabs button{border-radius:8px 8px 0 0!important;min-height:50px}.groomr-tabs button span{font-size:12px!important}.groomr-tabs button[class~="bg-white/[0.105]"]{background:#35353b!important}.groomr-tabs{padding-top:2px!important;padding-bottom:8px!important}.text-gold-gradient{background:none!important;-webkit-text-fill-color:currentColor!important;color:inherit!important}.groomr-routine{text-align:left!important}.groomr-routine h3{font-size:25px!important;line-height:1.2!important;max-width:290px}.groomr-routine>p:first-child{font-size:12px!important;text-transform:none;letter-spacing:0!important;color:#d9d9df!important;margin-bottom:14px}.groomr-routine h3+p{margin-left:0!important;font-size:14px!important}.groomr-routine .groomr-scan-wrap{margin-top:18px!important;margin-bottom:0!important}.groomr-routine .groomr-scan{height:180px!important;margin-top:0!important}.groomr-routine>button:not(.groomr-scan){min-height:48px;width:100%;border-radius:10px!important;background:#ececef!important;color:#18181b!important;font-size:14px!important}.groomr-routine>p:last-child{text-align:center}.demo-status{white-space:nowrap}

/* iOS refinement: subdued materials only on navigation, tactile content. */
:root{--background:240 3% 4%;--foreground:240 9% 96%;--card:240 5% 12%;--card-foreground:240 9% 96%;--primary:240 8% 93%;--primary-foreground:240 6% 10%;--secondary:240 4% 19%;--secondary-foreground:240 7% 87%;--muted:240 4% 17%;--muted-foreground:240 6% 68%;--accent:240 8% 93%;--accent-foreground:240 6% 10%;--border:240 5% 24%;--input:240 5% 26%;--ring:240 8% 82%;--gold:240 8% 93%;--gold-muted:240 5% 64%;--brand-teal:240 4% 80%;--brand-blue:240 4% 80%;--brand-glow:240 4% 80%}
html{color-scheme:dark}.demo-device{isolation:isolate;transform:translateZ(0)}.phone-screen-surface{padding-bottom:88px;scroll-padding-bottom:100px}.demo-device .sticky.top-0{padding-top:16px;padding-bottom:8px}.demo-controls{height:78px;padding-top:8px}.demo-control-row button{min-height:40px;min-width:40px;padding:8px 10px}.demo-controls p{margin-top:3px}.demo-device-wrap{height:calc(100dvh - 78px)}.demo-status{font-size:10px;color:#b9b9c3}
.groomr-tabs{position:fixed;left:0;right:0;bottom:0;z-index:50;margin:0!important;padding:10px 18px max(12px,env(safe-area-inset-bottom))!important;background:#19191cee;border-top:1px solid #ffffff14;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.groomr-tabs>div{border:0!important;background:transparent!important;gap:4px}.groomr-tabs button{min-height:50px;gap:5px;border-radius:14px!important;background:transparent}.groomr-tabs button[class~="bg-white/[0.105]"]{background:#ffffff12!important}.groomr-tabs button svg{width:21px;height:21px;color:#a7a7b2}.groomr-tabs button[class~="bg-white/[0.105]"] svg{color:#f5f5f7;stroke-width:2.3}.groomr-tabs button span{font-size:11px!important}.groomr-title-wrap{padding-top:4px!important}.groomr-page-title{padding-bottom:22px!important}.groomr-page-title h1{font-size:32px!important;font-weight:700;letter-spacing:-.035em}.groomr-page-title p{font-size:14px!important;line-height:1.5}.groomr-finder{border-radius:24px!important;background:#202024!important;padding:24px!important}.groomr-finder h2{font-size:28px!important;line-height:1.12!important;letter-spacing:-.035em;max-width:310px!important}.groomr-finder h2+p{font-size:15px!important;line-height:1.5!important}.groomr-finder .groomr-finder-label{color:#c1c1cb!important;font-weight:500!important;font-size:13px!important}.groomr-scan{height:180px!important;border:1px solid #ffffff09!important;background:#17171a!important;border-radius:16px!important}.groomr-finder button:not(.groomr-scan){min-height:50px!important;font-size:15px!important;border-radius:14px!important;font-weight:600}.groomr-finder button+p{font-size:12px!important}.groomr-finder .glass-light p{font-size:12px!important;font-weight:500}.groomr-shop-section h2{font-size:21px!important}.groomr-shop-section button:has(h3){border:0!important;border-radius:20px!important}.groomr-shop-section img{outline:1px solid #ffffff1a;outline-offset:-1px}.demo-device img{filter:saturate(.75)}.demo-device [class*="text-primary"],.demo-device [class*="text-gold"]{color:#e2e2e8}.demo-device [class~="bg-primary"]{background-color:#e4e4e9;color:#18181b}.demo-device [class*="text-primary-foreground"]{color:#18181b}.demo-device [class*="border-primary"]{border-color:#d2d2dc}.demo-device [class*="text-[13px]"]{font-size:14px;line-height:1.5}.demo-device [class*="text-[12px]"]{font-size:13px;line-height:1.45}.demo-device button{transition-property:transform,opacity,background-color,color;transition-duration:150ms;transition-timing-function:cubic-bezier(.2,0,0,1)}.demo-device .transition-all{transition-property:transform,opacity,background-color,color!important}.demo-device nav.safe-bottom{padding-bottom:14px}.demo-device nav.safe-bottom button{border-radius:12px}.groomr-finder.groomr-routine h3{font-size:28px!important;font-weight:700}.groomr-routine>p:first-child{color:#b9b9c3!important}
@media(prefers-reduced-motion:no-preference){.demo-device button:not(:disabled):active{transform:scale(.96)!important;transition:transform 150ms ease-out}.groomr-scan:before{animation:groomr-study .7s cubic-bezier(.2,0,0,1) both}@keyframes groomr-study{from{clip-path:inset(0 0 100% 0);opacity:.5}to{clip-path:inset(0);opacity:1}}}
@media(hover:hover){.demo-device button:not(:disabled):hover{filter:brightness(1.08)}}
@media(prefers-reduced-transparency:reduce){.groomr-tabs{background:#19191c;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-contrast:more){.text-muted-foreground{color:#d4d4dc!important}.groomr-tabs{border-top-color:#666}.demo-device input{border-color:#888!important}}
@media(max-width:600px){.demo-device .sticky.top-0{padding-top:12px}.groomr-finder{padding:22px!important}.groomr-finder h2{font-size:28px!important}.groomr-scan{height:168px!important}.demo-controls{padding-left:12px;padding-right:12px}.demo-control-row{gap:7px}}

.demo-device :not(button)[class*="bg-gradient-to"]{background-image:none!important;background-color:#242428!important;color:#f5f5f7!important}.demo-device [class*="bg-primary/"]{background-color:#28282e!important}.demo-device [class*="bg-primary/"] .text-muted-foreground{color:#b8b8c2!important}.demo-device [class*="from-primary"]{background-image:none!important}.demo-device [class*="text-foreground/"]{color:#d8d8e0}.demo-device [class*="text-primary/"]{color:#d8d8e0}
.demo-device [class*="bg-primary/"]{color:#ededf3!important}.demo-device [class*="bg-primary/"] [class*="text-primary-foreground"]{color:#ededf3!important}.glass-medium button>.text-lg{display:none}.groomr-style-fallback{background:#202024 url('./groomr-face.svg') center/contain no-repeat!important}.groomr-style-fallback>img{visibility:hidden}.groomr-style-fallback:after{content:"Illustrative style preview";position:absolute;right:12px;top:12px;font-size:11px;color:#b5b5c0;background:#202024;padding:5px 8px;border-radius:6px}

/* UI UX Pro Max pass: target size, safe-area insets, focus and readable forms. */
.demo-device button{min-height:44px;min-width:44px}.demo-control-row button{min-height:44px;min-width:44px}.groomr-tabs>div{gap:8px}.phone-screen-surface{padding-bottom:calc(88px + env(safe-area-inset-bottom));scroll-padding-bottom:calc(104px + env(safe-area-inset-bottom))}.demo-device input,.demo-device textarea,.demo-device select{font-size:16px!important}.demo-device input::placeholder{color:#aaaab5}.demo-device :focus-visible{outline:2px solid #e4e4ed;outline-offset:3px}.groomr-finder h2,.groomr-routine h3{text-wrap:balance}.demo-device h1,.demo-device h2,.demo-device h3{overflow-wrap:break-word}