:root{--color-sage:#6a7e59;--color-cocoa:#372a23;--color-mint:#bbc9ae;--color-beige:#d4c4b0;--color-navy:#1a292f;--color-milk:#f7f7f0;--color-light-grey:#f2f2f2;--bg-main:var(--color-milk);--bg-secondary:var(--color-light-grey);--bg-card:#ffffffd9;--bg-card-dark:#1a292feb;--text-dark:var(--color-navy);--text-muted:#5e6b73;--text-light:var(--color-milk);--border-glass:#6a7e5933;--border-focus:var(--color-sage);--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;--font-serif:"Playfair Display", Georgia, serif;--radius-sm:8px;--radius-md:14px;--radius-lg:24px;--radius-full:9999px;--shadow-subtle:0 10px 30px #1a292f0f;--shadow-glass:0 20px 48px #1a292f1f, 0 2px 8px #6a7e5914;--shadow-sage-glow:0 0 20px #6a7e594d;--transition-fast:.2s cubic-bezier(.16, 1, .3, 1);--transition-base:.35s cubic-bezier(.16, 1, .3, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--color-milk);width:100%;min-height:100vh;color:var(--color-navy);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#root{background:radial-gradient(circle at 10% 0%, #bbc9ae4d, transparent 40%), radial-gradient(circle at 90% 100%, #d4c4b059, transparent 50%), var(--color-milk);flex-direction:column;width:100%;min-height:100vh;display:flex}.apple-glass-card{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-glass);width:100%;max-width:760px;transition:transform var(--transition-base), box-shadow var(--transition-base);padding:40px}.apple-glass-card:hover{border-color:var(--color-sage);box-shadow:0 24px 60px #1a292f29}.apple-glass-card-dark{background:var(--bg-card-dark);-webkit-backdrop-filter:blur(24px);border-radius:var(--radius-lg);color:var(--color-milk);border:1px solid #bbc9ae40;width:100%;max-width:760px;padding:40px;box-shadow:0 24px 60px #00000040}.apple-input-group{flex-direction:column;margin-bottom:20px;display:flex;position:relative}.apple-input{border-radius:var(--radius-md);width:100%;height:54px;color:var(--color-navy);font-size:15px;font-family:var(--font-sans);transition:all var(--transition-fast);background:#f2f2f2cc;border:1px solid #6a7e5940;outline:none;padding:18px 16px 6px}.apple-input:focus{border-color:var(--color-sage);box-shadow:var(--shadow-sage-glow);background:#fff}.apple-label{color:var(--text-muted);pointer-events:none;transition:all var(--transition-fast);font-size:14px;position:absolute;top:17px;left:16px}.apple-input:focus~.apple-label,.apple-input:not(:placeholder-shown)~.apple-label{letter-spacing:.08em;text-transform:uppercase;color:var(--color-sage);font-size:10px;font-weight:700;top:8px}.apple-btn-primary{background:linear-gradient(135deg, var(--color-sage), #5a6e4a);width:100%;height:52px;color:var(--color-milk);font-family:var(--font-sans);letter-spacing:.04em;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;gap:8px;font-size:15px;font-weight:700;display:flex;box-shadow:0 4px 18px #6a7e5959}.apple-btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 8px 24px #6a7e5980}.apple-btn-primary:active{transform:translateY(0)}.apple-btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.social-btn{border-radius:var(--radius-md);width:100%;height:48px;color:var(--color-navy);cursor:pointer;transition:all var(--transition-fast);background:#fff;border:1px solid #6a7e5933;justify-content:center;align-items:center;gap:10px;font-size:14px;font-weight:600;display:flex;box-shadow:0 2px 8px #1a292f0a}.social-btn:hover{background:var(--color-light-grey);border-color:var(--color-sage);transform:translateY(-1px)}.apple-alert{border-radius:var(--radius-md);align-items:center;gap:10px;margin-bottom:20px;padding:12px 16px;font-size:13px;animation:.3s fadeIn;display:flex}.apple-alert-error{color:#dc2626;background:#ef44441a;border:1px solid #ef44444d}.apple-alert-success{border:1px solid var(--color-sage);color:var(--color-sage);background:#6a7e591f}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes liquidMetalSheen{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes liquidMetalGlow{0%,to{box-shadow:0 24px 60px #1a292f2e,0 0 30px #d8dfe259,inset 0 1px 3px #ffffffe6,inset 0 -2px 8px #0000004d}50%{box-shadow:0 28px 70px #1a292f47,0 0 45px #bbc9ae80,inset 0 2px 5px #fff,inset 0 -3px 12px #0006}}@keyframes liquidFluidShine{0%{left:-100%}30%,to{left:200%}}.liquid-metal-container{-webkit-backdrop-filter:blur(24px);background:linear-gradient(135deg,#fffffff2 0%,#d8e1e499 20%,#bbc9ae66 45%,#2a363bbf 75%,#ffffffe6 100%) 0 0/250% 250%;border:1px solid #dce4e6cc;border-radius:28px;padding:18px;transition:all .4s cubic-bezier(.16,1,.3,1);animation:8s infinite liquidMetalSheen,4s ease-in-out infinite liquidMetalGlow;position:relative;overflow:hidden}.liquid-metal-container:before{content:"";pointer-events:none;background:linear-gradient(90deg,#0000,#ffffff80,#d8e1e4bf,#ffffff80,#0000);width:60%;height:100%;animation:6s ease-in-out infinite liquidFluidShine;position:absolute;top:0;left:-100%;transform:skew(-25deg)}.liquid-metal-container:hover{border-color:#fffffff2;transform:translateY(-2px)scale(1.003);box-shadow:0 32px 80px #1a292f59,0 0 50px #bbc9ae99,inset 0 2px 6px #fff}@keyframes hairTestPulseHoriz{0%,to{transform:translateY(0)scale(1);box-shadow:0 10px 30px #1a292f66,0 0 20px #6a7e5966}50%{transform:translateY(-3px)scale(1.03);box-shadow:0 16px 40px #1a292f80,0 0 35px #bbc9ae99}}@keyframes hairTestPulseVert{0%,to{transform:translate(-50%)translateY(0)scale(1);box-shadow:0 10px 30px #1a292f66,0 0 20px #6a7e5966}50%{transform:translate(-50%)translateY(-3px)scale(1.03);box-shadow:0 16px 40px #1a292f80,0 0 35px #bbc9ae99}}@keyframes btnShimmerSweep{0%{left:-120%}40%,to{left:200%}}.animated-hair-test-btn{z-index:10;background:linear-gradient(135deg, var(--color-sage) 0%, #4a5d3c 100%);color:var(--color-milk);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;-webkit-backdrop-filter:blur(12px);white-space:nowrap;border:1px solid #fff6;border-radius:9999px;justify-content:center;align-items:center;gap:10px;padding:14px 20px;font-size:14px;font-weight:700;transition:all .3s cubic-bezier(.16,1,.3,1);display:inline-flex;position:absolute;overflow:hidden;box-shadow:0 10px 30px #1a292f66,0 0 20px #6a7e5966}.animated-hair-test-btn.btn-horizontal{width:25%;min-width:200px;animation:3.5s ease-in-out infinite hairTestPulseHoriz;bottom:15%;left:auto;right:25%;transform:none}.animated-hair-test-btn.btn-horizontal:hover{background:linear-gradient(135deg, #7b9168 0%, var(--color-sage) 100%);border-color:#ffffffe6;animation-play-state:paused;transform:translateY(-4px)scale(1.04);box-shadow:0 20px 50px #1a292f80,0 0 40px #bbc9aecc}.animated-hair-test-btn.btn-vertical{border-radius:12px;width:90%;max-width:90%;height:45px;padding:0 16px;animation:3.5s ease-in-out infinite hairTestPulseVert;bottom:3%;left:50%;right:auto;transform:translate(-50%)}.animated-hair-test-btn.btn-vertical:hover{background:linear-gradient(135deg, #7b9168 0%, var(--color-sage) 100%);border-color:#ffffffe6;animation-play-state:paused;transform:translate(-50%)translateY(-3px)scale(1.02);box-shadow:0 20px 50px #1a292f80,0 0 40px #bbc9aecc}.animated-hair-test-btn:before{content:"";pointer-events:none;background:linear-gradient(90deg,#0000,#fff9,#fffc,#fff9,#0000);width:70%;height:100%;animation:4.5s ease-in-out infinite btnShimmerSweep;position:absolute;top:0;left:-120%;transform:skew(-20deg)}.animated-hair-test-btn:hover .btn-icon-arrow{transform:translate(4px)}.header-desktop-nav{align-items:center;gap:16px;display:flex}.header-mobile-hamburger-btn{width:42px;height:42px;color:var(--color-navy);cursor:pointer;transition:all var(--transition-fast);background:#6a7e591f;border:1px solid #6a7e5940;border-radius:12px;justify-content:center;align-items:center;display:none}.header-mobile-hamburger-btn:hover{border-color:var(--color-sage);background:#6a7e5933}@media (width<=768px){.header-desktop-nav{display:none!important}.header-mobile-hamburger-btn{display:flex!important}}.mobile-menu-drawer{-webkit-backdrop-filter:blur(24px);z-index:999;padding:24px 20px;padding-bottom:calc(32px + env(safe-area-inset-bottom));background:#f7f7f0fa;border-top:1px solid #6a7e5926;flex-direction:column;animation:.25s cubic-bezier(.16,1,.3,1) mobileMenuFadeIn;display:flex;position:fixed;inset:70px 0 0;overflow-y:auto}@keyframes mobileMenuFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){body,html,#root{max-width:100vw;overflow-x:hidden}.apple-glass-card,.apple-glass-card-dark{border-radius:var(--radius-md)!important;max-width:100%!important;padding:24px 18px!important}.apple-input{height:48px!important;font-size:14px!important}.apple-btn-primary,.apple-btn-secondary{height:48px!important;padding:0 18px!important;font-size:14px!important}#hero-controls-bar{gap:10px!important;width:calc(100% - 32px)!important;max-width:340px!important;bottom:24px!important}#hero-replay-btn,#hero-scroll-down-trigger{padding:9px 14px!important;font-size:11px!important}#div2-editorial-banner-section,#div3-product-showcase-section{padding:36px 16px!important}#div3-video-display-frame,#div3-shampoo-video-display-frame{height:380px!important}#div3-floating-info-bar,#div3-shampoo-floating-info-bar{padding:10px 14px!important;bottom:12px!important;left:12px!important;right:12px!important}#admin-dashboard-page-container,#hair-test-page-container,#user-dashboard-container{padding:20px 12px 60px!important}h1{font-size:24px!important;line-height:1.25!important}h2{font-size:20px!important;line-height:1.3!important}}@media (width<=480px){.apple-glass-card,.apple-glass-card-dark{padding:20px 14px!important}#hero-controls-bar{flex-direction:row!important;justify-content:center!important;gap:8px!important;bottom:18px!important}#hero-replay-btn,#hero-scroll-down-trigger{padding:8px 12px!important;font-size:11px!important}}