:root{font-family:'Trebuchet MS',Arial,sans-serif!important;background:#f4f7f7;color:#172326}*{box-sizing:border-box}body{margin:0}main{max-width:760px;margin:auto;padding:18px}header{display:flex;justify-content:space-between;align-items:center;padding:18px 2px}.brand{font-weight:800;font-size:25px;letter-spacing:1px;color:#087f83}.brand span{color:#172326;font-weight:500}.tag{background:#087f83;color:#fff;padding:7px 13px;border-radius:20px}.card{background:#fff;border-radius:18px;padding:20px;margin-bottom:16px;box-shadow:0 4px 20px #0000000c}.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{font-size:13px;font-weight:700}input,select{width:100%;margin-top:6px;padding:13px;border:1px solid #ccd5d6;border-radius:10px;font-size:16px}button{width:100%;margin-top:15px;padding:14px;border:0;border-radius:11px;background:#087f83;color:#fff;font-size:16px;font-weight:700}.row{padding:12px 0;border-bottom:1px solid #e7eeee}.total{display:flex;justify-content:space-between;font-size:20px;margin-top:18px}.error{color:#a11}@media(max-width:540px){.grid{grid-template-columns:1fr}}.sig{width:100%;height:150px;border:1px solid #aebbbc;border-radius:10px;background:#fff;touch-action:none}.secondary{background:#5d6b6c;margin-top:7px}label input[type="checkbox"]{width:auto;margin-right:8px}textarea{width:100%;min-height:90px;margin-top:6px;padding:12px;border:1px solid #ccd5d6;border-radius:10px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}.small{width:auto;margin:0;padding:8px 12px} .glyde-logo{width:150px;max-width:42vw;height:auto;border-radius:12px;display:block} input[type=range]{width:100%;accent-color:#087f83;margin-top:10px}.photo-box img{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:14px;margin-top:10px}.window-preview{padding:16px 0}.window-shape{max-width:240px;min-height:120px;border:8px solid #e8ecec;background:linear-gradient(135deg,#d9f0f4,#f8fcfd);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:auto;box-shadow:inset 0 0 0 2px #789}.window-shape span{font-weight:800;text-align:center}.window-shape small{margin-top:8px} .camera-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.camera-button{display:flex;align-items:center;justify-content:center;gap:12px;background:#087f83;color:white;border-radius:14px;padding:18px;font-weight:800;font-size:1.05rem;cursor:pointer}.camera-icon{font-size:1.6rem}.window-preview img{display:block;max-width:100%;width:auto;max-height:320px;margin:10px auto;object-fit:contain}.window-preview #windowPreviewLabel{text-align:center;font-weight:800;margin-top:8px} .camera-button{flex-direction:column;min-height:190px;border:4px solid #087f83;background:#e8f8f8;color:#172126;font-size:1.35rem;text-align:center}.camera-icon{font-size:6rem;line-height:1;display:block} :root{--glass:rgba(255,255,255,.46);--glass2:rgba(255,255,255,.68);--edge:rgba(255,255,255,.72);--ink:#142327;--teal:#087f83} html{background:linear-gradient(145deg,#d8fbf7 0%,#edf8ff 42%,#dfe8ff 100%);background-attachment:fixed} body{color:var(--ink);background:radial-gradient(circle at 15% 8%,rgba(34,211,190,.28),transparent 34%),radial-gradient(circle at 90% 22%,rgba(78,128,255,.18),transparent 30%),transparent} header,.card{background:var(--glass)!important;border:1px solid var(--edge)!important;box-shadow:0 18px 50px rgba(31,65,80,.13),inset 0 1px 0 rgba(255,255,255,.82)!important;backdrop-filter:blur(24px) saturate(165%);-webkit-backdrop-filter:blur(24px) saturate(165%)} header{position:sticky;top:8px;z-index:20;border-radius:24px!important} .card{border-radius:28px!important} input,select,textarea{background:rgba(255,255,255,.55)!important;border:1px solid rgba(255,255,255,.82)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 8px 24px rgba(31,65,80,.07);backdrop-filter:blur(16px)} button,.camera-button{border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 10px 28px rgba(0,91,94,.20),inset 0 1px 0 rgba(255,255,255,.38)!important;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;backdrop-filter:blur(18px) saturate(150%)} button:active,.camera-button:active{transform:scale(.975);box-shadow:0 4px 14px rgba(0,91,94,.16)!important} button.secondary{background:rgba(255,255,255,.48)!important;color:var(--teal)!important} .camera-button{background:linear-gradient(145deg,rgba(255,255,255,.64),rgba(211,250,248,.55))!important;color:var(--ink)!important} .camera-icon{filter:drop-shadow(0 8px 16px rgba(0,80,90,.18))} input[type=range]{appearance:none;-webkit-appearance:none;height:18px;border-radius:999px;background:linear-gradient(90deg,rgba(8,127,131,.78),rgba(255,255,255,.62))!important;box-shadow:inset 0 2px 5px rgba(18,80,90,.16),0 5px 16px rgba(18,80,90,.08)} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.95);box-shadow:0 6px 18px rgba(0,80,90,.24),inset 0 0 0 7px rgba(8,127,131,.16)} .window-preview{background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.72);border-radius:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 12px 34px rgba(31,65,80,.09);backdrop-filter:blur(18px);padding:18px} .window-preview img{filter:drop-shadow(0 12px 18px rgba(28,54,65,.16))} .total{background:rgba(255,255,255,.45);border-radius:20px;padding:16px;backdrop-filter:blur(16px)} @media(prefers-reduced-motion:no-preference){.card{animation:glassIn .35s ease both}@keyframes glassIn{from{opacity:.5;transform:translateY(8px)}to{opacity:1;transform:none}}} /* GLYDE refractive glass refinement */ :root{--lg-edge:rgba(255,255,255,.86);--lg-shadow:rgba(32,45,58,.18);--lg-teal:rgba(0,145,150,.26)} header,.card,.window-preview,.total,.camera-button,button.secondary{ background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.24) 48%,rgba(210,232,255,.30))!important; border:1px solid var(--lg-edge)!important; box-shadow:inset 1px 1px 1px rgba(255,255,255,.95),inset -1px -1px 1px rgba(120,150,175,.16),0 14px 38px var(--lg-shadow)!important; backdrop-filter:blur(34px) saturate(190%) contrast(105%);-webkit-backdrop-filter:blur(34px) saturate(190%) contrast(105%); } header,.card,.window-preview,.camera-button{position:relative;overflow:hidden} header:before,.card:before,.window-preview:before,.camera-button:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.08) 30%,rgba(130,210,255,.10) 60%,rgba(255,180,235,.10) 100%);mix-blend-mode:screen} button:not(.secondary){background:linear-gradient(135deg,rgba(0,135,140,.82),rgba(0,135,140,.58))!important;border:1px solid rgba(255,255,255,.70)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.60),0 12px 28px rgba(0,86,91,.24)!important} .camera-button{background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(218,249,250,.25))!important;border-radius:38px!important} .camera-icon{font-size:6.5rem!important;filter:drop-shadow(0 10px 16px rgba(34,60,70,.20))} input,select,textarea{background:linear-gradient(135deg,rgba(255,255,255,.68),rgba(255,255,255,.34))!important;border:1px solid rgba(255,255,255,.88)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.95),0 8px 20px rgba(40,65,80,.10)!important} input[type=range]{height:22px!important;background:linear-gradient(90deg,rgba(55,160,255,.42),rgba(35,220,185,.34),rgba(255,255,255,.55))!important;border:1px solid rgba(255,255,255,.78)!important} input[type=range]::-webkit-slider-thumb{width:38px;height:38px;background:radial-gradient(circle at 35% 25%,#fff 0 18%,rgba(255,255,255,.92) 20% 48%,rgba(207,235,255,.88) 70%,rgba(255,255,255,.72));box-shadow:inset 0 1px 2px #fff,0 7px 20px rgba(40,80,100,.25)} /* Fluid transparent glass */ body{background:radial-gradient(ellipse at 18% 5%,rgba(255,255,255,.88),transparent 32%),radial-gradient(ellipse at 85% 22%,rgba(168,195,225,.32),transparent 42%),linear-gradient(145deg,#e9edf2,#cfd8e4)!important} .card,.window-preview,.camera-button,.total,header{background:linear-gradient(145deg,rgba(255,255,255,.34),rgba(230,238,248,.16) 52%,rgba(160,184,212,.12))!important;border:1px solid rgba(255,255,255,.58)!important;box-shadow:inset 2px 2px 2px rgba(255,255,255,.72),inset -2px -2px 3px rgba(83,107,135,.12),0 16px 40px rgba(48,65,84,.14)!important;backdrop-filter:blur(22px) saturate(155%);-webkit-backdrop-filter:blur(22px) saturate(155%)} .card{border-radius:42px 54px 46px 38px!important} .card:nth-of-type(2n){border-radius:52px 38px 58px 44px!important}.card:nth-of-type(3n){border-radius:38px 58px 42px 54px!important} .card:after,.window-preview:after,.camera-button:after{content:"";position:absolute;pointer-events:none;inset:2px;border-radius:inherit;border-top:2px solid rgba(255,255,255,.64);border-left:1px solid rgba(255,255,255,.30);border-bottom:1px solid rgba(100,130,160,.12);filter:blur(.2px)} .camera-button{border-radius:52px 44px 58px 46px!important;background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(194,238,240,.16))!important} .logo-liquid-wrap{position:relative;display:inline-flex;flex-direction:column;align-items:center;overflow:visible;padding-bottom:22px} .glyde-logo{position:relative;z-index:2;filter:drop-shadow(0 8px 12px rgba(40,60,72,.12))} .glyde-logo-reflection{position:absolute;z-index:1;left:0;top:72%;width:100%;transform:scaleY(-.34);transform-origin:top;opacity:.20;filter:blur(2.2px) saturate(.8);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 78%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 78%)} /* Clear liquid lens treatment based on approved reference */ body{background: radial-gradient(circle at 15% 12%,rgba(255,255,255,.82),transparent 26%), radial-gradient(circle at 72% 38%,rgba(49,105,255,.38),transparent 34%), linear-gradient(135deg,#d8e8ff 0%,#c8dbfa 42%,#a9c6ef 100%)!important;background-attachment:fixed} .card,.window-preview,.camera-button,.total,header{ background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.07) 55%,rgba(185,215,255,.12))!important; border:2px solid rgba(255,255,255,.66)!important; box-shadow: inset 3px 3px 5px rgba(255,255,255,.80), inset -3px -3px 6px rgba(89,125,170,.12), inset 0 0 22px rgba(255,255,255,.12), 0 18px 38px rgba(47,77,115,.14)!important; backdrop-filter:blur(13px) saturate(175%) brightness(1.06); -webkit-backdrop-filter:blur(13px) saturate(175%) brightness(1.06)} .card{border-radius:54px!important} .card:nth-of-type(2n),.card:nth-of-type(3n){border-radius:54px!important} .card:before,.window-preview:before,.camera-button:before,header:before{ background:linear-gradient(150deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.05) 28%,rgba(92,151,255,.08) 63%,rgba(255,255,255,.30) 100%)!important} .card:after,.window-preview:after,.camera-button:after{ inset:3px!important;border:1px solid rgba(255,255,255,.35)!important; border-top:3px solid rgba(255,255,255,.72)!important;border-radius:inherit!important; box-shadow:inset 0 0 12px rgba(255,255,255,.16)} header{transform:translateY(-3px);box-shadow:inset 3px 3px 5px rgba(255,255,255,.82),inset -3px -3px 6px rgba(89,125,170,.12),0 24px 44px rgba(47,77,115,.18)!important} .logo-liquid-wrap{padding:14px 22px 28px;border-radius:42px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.46);box-shadow:inset 2px 2px 4px rgba(255,255,255,.58),0 10px 28px rgba(50,80,115,.12);backdrop-filter:blur(10px)} .glyde-logo-reflection{top:76%;opacity:.26;filter:blur(1.5px) saturate(.9)} input,select,textarea{background:rgba(255,255,255,.18)!important;border:1.5px solid rgba(255,255,255,.58)!important;backdrop-filter:blur(11px) saturate(150%)} /* Dedicated floating brand lens + light teal optical field */ body{background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.92),transparent 25%),radial-gradient(ellipse at 12% 28%,rgba(150,255,245,.38),transparent 34%),radial-gradient(ellipse at 88% 55%,rgba(123,222,218,.28),transparent 35%),linear-gradient(160deg,#e9fffc 0%,#d8f8f5 42%,#c9efed 100%)!important} header{display:flex!important;justify-content:center!important;align-items:center!important;width:calc(100% - 26px)!important;margin:14px auto 34px!important;padding:12px!important;position:sticky!important;top:10px!important;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;overflow:visible!important} .logo-liquid-wrap{width:min(86vw,520px)!important;min-height:150px;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;padding:24px 30px 36px!important;border-radius:52px!important;background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.07) 52%,rgba(100,230,218,.10))!important;border:2px solid rgba(255,255,255,.78)!important;box-shadow:inset 4px 4px 7px rgba(255,255,255,.88),inset -4px -4px 8px rgba(63,143,143,.12),inset 0 0 28px rgba(255,255,255,.15),0 24px 44px rgba(38,116,116,.17)!important;backdrop-filter:blur(12px) saturate(185%) brightness(1.08)!important;-webkit-backdrop-filter:blur(12px) saturate(185%) brightness(1.08)!important;position:relative!important} .logo-liquid-wrap:before{content:"";position:absolute;inset:3px;border-radius:49px;border-top:3px solid rgba(255,255,255,.92);border-left:2px solid rgba(255,255,255,.55);border-bottom:1px solid rgba(31,145,145,.14);pointer-events:none;box-shadow:inset 0 0 18px rgba(255,255,255,.22)} .glyde-logo{display:block!important;margin:0 auto!important;max-width:min(68vw,330px)!important;height:auto!important} .brand-sales{position:relative;z-index:3;margin-top:8px;font-size:1.05rem;font-weight:800;letter-spacing:.38em;color:#087f83;text-align:center;text-indent:.38em;text-shadow:0 1px 0 rgba(255,255,255,.85),0 5px 12px rgba(0,100,100,.12)} .glyde-logo-reflection{left:50%!important;transform:translateX(-50%) scaleY(-.30)!important;top:57%!important;width:min(68vw,330px)!important;opacity:.22!important} .card,.window-preview,.camera-button,.total{background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.055) 54%,rgba(69,210,198,.09))!important;border:2px solid rgba(255,255,255,.70)!important;box-shadow:inset 4px 4px 7px rgba(255,255,255,.78),inset -4px -4px 8px rgba(54,135,135,.10),inset 0 0 22px rgba(255,255,255,.12),0 17px 38px rgba(34,116,116,.13)!important;backdrop-filter:blur(11px) saturate(175%) brightness(1.07)!important;-webkit-backdrop-filter:blur(11px) saturate(175%) brightness(1.07)!important} .card{margin-top:24px!important;border-radius:50px!important} /* Refractive sticky GLYDE brand lens */ header{position:sticky!important;top:10px!important;z-index:100!important} .logo-liquid-wrap{isolation:isolate;overflow:hidden!important;background: radial-gradient(circle at 22% 12%,rgba(255,255,255,.62),transparent 23%), radial-gradient(circle at 82% 78%,rgba(53,216,207,.18),transparent 30%), linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.055) 46%,rgba(63,204,195,.13))!important; backdrop-filter:blur(16px) saturate(205%) contrast(1.05)!important;-webkit-backdrop-filter:blur(16px) saturate(205%) contrast(1.05)!important} .logo-liquid-wrap:after{content:"";position:absolute;z-index:0;pointer-events:none;width:72%;height:46%;left:-16%;top:-10%;border-radius:50%;background:linear-gradient(115deg,rgba(255,255,255,.78),rgba(255,255,255,.05));transform:rotate(-8deg);filter:blur(7px);opacity:.68} .logo-liquid-wrap .glyde-logo,.logo-liquid-wrap .brand-sales{z-index:3} .logo-liquid-wrap .glyde-logo{filter:drop-shadow(0 7px 11px rgba(0,82,82,.12)) drop-shadow(0 1px 0 rgba(255,255,255,.8))} .logo-liquid-wrap .brand-sales{text-shadow:0 1px 0 rgba(255,255,255,.95),0 4px 10px rgba(0,103,103,.16)} /* Strong optical refraction for sticky brand lens */ .logo-liquid-wrap{ background: radial-gradient(ellipse at 20% 8%,rgba(255,255,255,.78),transparent 24%), radial-gradient(ellipse at 78% 88%,rgba(42,225,212,.24),transparent 32%), linear-gradient(132deg,rgba(255,255,255,.31),rgba(255,255,255,.045) 44%,rgba(62,220,207,.14))!important; backdrop-filter:blur(25px) saturate(230%) contrast(1.16) brightness(1.10)!important; -webkit-backdrop-filter:blur(25px) saturate(230%) contrast(1.16) brightness(1.10)!important; border:2px solid rgba(255,255,255,.92)!important; box-shadow:inset 5px 5px 9px rgba(255,255,255,.95),inset -5px -5px 10px rgba(18,138,135,.15),inset 0 0 32px rgba(255,255,255,.22),0 25px 48px rgba(19,113,112,.22)!important} .logo-liquid-wrap:before{border-top:4px solid rgba(255,255,255,.98)!important;border-left:2px solid rgba(255,255,255,.72)!important;box-shadow:inset 0 0 24px rgba(255,255,255,.28),0 0 14px rgba(255,255,255,.22)!important} .logo-liquid-wrap:after{width:92%!important;height:54%!important;left:-20%!important;top:-15%!important;background:linear-gradient(118deg,rgba(255,255,255,.92),rgba(255,255,255,.13) 45%,transparent 72%)!important;filter:blur(8px)!important;opacity:.76!important} header:after{content:"";position:absolute;pointer-events:none;width:min(76vw,440px);height:22px;left:50%;bottom:18px;transform:translateX(-50%);border-radius:50%;background:rgba(255,255,255,.35);filter:blur(10px);opacity:.55} /* High-refraction sticky brand lens: stronger chromatic bending */ .logo-liquid-wrap{ background: radial-gradient(circle at 16% 28%,rgba(80,230,255,.24),transparent 25%), radial-gradient(circle at 84% 24%,rgba(255,105,175,.18),transparent 27%), radial-gradient(circle at 52% 86%,rgba(255,235,170,.16),transparent 30%), linear-gradient(128deg,rgba(255,255,255,.28),rgba(255,255,255,.035) 45%,rgba(45,220,210,.14))!important; backdrop-filter:blur(31px) saturate(270%) contrast(1.28) brightness(1.12)!important; -webkit-backdrop-filter:blur(31px) saturate(270%) contrast(1.28) brightness(1.12)!important; border:2px solid rgba(255,255,255,.94)!important; box-shadow: inset 5px 5px 9px rgba(255,255,255,.96), inset -6px -5px 12px rgba(0,165,190,.18), inset 6px -2px 16px rgba(255,115,180,.10), inset 0 0 34px rgba(255,255,255,.20), 0 26px 52px rgba(15,105,112,.24)!important} .logo-liquid-wrap:before{ background:linear-gradient(112deg,rgba(80,225,255,.26),rgba(255,255,255,.04) 32%,rgba(255,110,185,.18) 68%,rgba(255,244,190,.20))!important; border-top:4px solid rgba(255,255,255,.98)!important; box-shadow:inset 0 0 28px rgba(255,255,255,.24),0 0 15px rgba(255,255,255,.30)!important} .logo-liquid-wrap:after{ width:110%!important;height:62%!important;left:-26%!important;top:-20%!important; background:linear-gradient(116deg,rgba(255,255,255,.96),rgba(125,235,255,.25) 34%,rgba(255,128,190,.17) 58%,transparent 76%)!important; filter:blur(10px)!important;opacity:.82!important} /* Requested final UI: preserve original TEST MODE app; Apple-like typography + 10x sticky lens */ body,button,input,select,textarea{font-family:'Trebuchet MS',Arial,sans-serif!important;letter-spacing:-.022em} h1,h2,h3,.toolbar{font-family:'Trebuchet MS',Arial,sans-serif!important;letter-spacing:-.03em} .logo-liquid-wrap{backdrop-filter:blur(5px) saturate(520%) contrast(1.9) brightness(1.28)!important;-webkit-backdrop-filter:blur(5px) saturate(520%) contrast(1.9) brightness(1.28)!important;box-shadow:inset 10px 12px 18px rgba(255,255,255,.98),inset -12px -14px 24px rgba(0,145,175,.28),inset 12px -8px 22px rgba(255,110,180,.18),0 30px 65px rgba(15,105,112,.30)!important} .logo-liquid-wrap:before{background:radial-gradient(ellipse at 18% 25%,rgba(110,240,255,.42),transparent 28%),radial-gradient(ellipse at 82% 70%,rgba(255,110,190,.28),transparent 31%),linear-gradient(110deg,rgba(255,255,255,.46),transparent 42%,rgba(255,240,170,.24))!important;filter:blur(4px) contrast(2.8)!important} .logo-liquid-wrap:after{width:145%!important;height:88%!important;left:-38%!important;top:-32%!important;background:linear-gradient(112deg,rgba(255,255,255,.98),rgba(105,235,255,.42) 31%,rgba(255,115,190,.30) 55%,rgba(255,235,155,.22) 68%,transparent 80%)!important;filter:blur(5px) contrast(2.4)!important;opacity:.88!important;transform:rotate(-11deg) scale(1.35)!important} /* EXTREME centered sticky GLYDE lens — magnifying-glass refraction emphasis */ header{position:sticky!important;top:10px!important;z-index:1000!important} .logo-liquid-wrap{ position:relative!important;overflow:hidden!important;isolation:isolate!important; -webkit-backdrop-filter:blur(3px) saturate(850%) contrast(2.8) brightness(1.42)!important; backdrop-filter:blur(3px) saturate(850%) contrast(2.8) brightness(1.42)!important; background:radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.03) 0 38%,rgba(90,240,235,.22) 56%,rgba(255,255,255,.55) 78%,rgba(255,255,255,.82) 100%)!important; border:3px solid rgba(255,255,255,.96)!important; box-shadow:inset 0 0 9px 3px rgba(255,255,255,.96),inset 28px 18px 42px rgba(255,255,255,.52),inset -32px -22px 48px rgba(0,125,155,.30),0 34px 76px rgba(20,105,112,.34)!important } .logo-liquid-wrap:before{content:''!important;position:absolute!important;inset:-75% -45%!important;z-index:0!important;pointer-events:none!important;background:radial-gradient(ellipse at center,transparent 0 25%,rgba(100,240,255,.28) 39%,rgba(255,120,190,.20) 52%,rgba(255,255,255,.68) 66%,transparent 78%)!important;filter:blur(4px) contrast(4.5) saturate(4)!important;transform:scale(2.2,1.75) rotate(-8deg)!important} .logo-liquid-wrap:after{content:''!important;position:absolute!important;inset:-55% -35%!important;width:auto!important;height:auto!important;left:auto!important;top:auto!important;z-index:1!important;pointer-events:none!important;background:linear-gradient(108deg,rgba(255,255,255,.92),transparent 18%,rgba(90,235,255,.34) 39%,rgba(255,105,185,.27) 61%,transparent 79%,rgba(255,245,180,.34))!important;filter:blur(3px) contrast(4)!important;opacity:.72!important;transform:skewX(-12deg) scale(1.8)!important} .logo-liquid-wrap .glyde-logo,.logo-liquid-wrap .brand-sales{position:relative!important;z-index:4!important} /* Reference-matched clear optical lens: stronger distortion/chromatic caustics, centered sticky */ .new-window-job-title{text-align:center!important} .logo-liquid-wrap{ -webkit-backdrop-filter:blur(2px) saturate(1100%) contrast(3.4) brightness(1.5)!important; backdrop-filter:blur(2px) saturate(1100%) contrast(3.4) brightness(1.5)!important; background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.015) 0 34%,rgba(255,255,255,.08) 44%,rgba(120,240,255,.24) 58%,rgba(255,105,195,.20) 68%,rgba(255,238,145,.20) 76%,rgba(255,255,255,.72) 91%,rgba(255,255,255,.92) 100%)!important; box-shadow:inset 0 0 5px 2px rgba(255,255,255,.98),inset 18px 22px 35px rgba(120,235,255,.30),inset -22px -20px 38px rgba(255,105,190,.20),0 30px 72px rgba(20,105,112,.30)!important } .logo-liquid-wrap:before{inset:-100% -65%!important;background:radial-gradient(ellipse at 42% 48%,transparent 0 22%,rgba(80,225,255,.32) 34%,rgba(255,90,190,.25) 46%,rgba(255,225,90,.22) 56%,rgba(255,255,255,.76) 66%,transparent 77%)!important;filter:blur(2px) contrast(6) saturate(6)!important;transform:scale(2.8,2.15) rotate(-10deg)!important} .logo-liquid-wrap:after{inset:-85% -55%!important;background:linear-gradient(108deg,rgba(255,255,255,.95),transparent 14%,rgba(70,220,255,.45) 31%,rgba(255,80,185,.36) 48%,rgba(255,225,70,.30) 62%,transparent 76%,rgba(255,255,255,.78))!important;filter:blur(2px) contrast(5) saturate(5)!important;transform:skewX(-18deg) scale(2.3)!important;opacity:.80!important} /* Fluid teal liquid-glass refinement */ .logo-liquid-wrap{ background: radial-gradient(ellipse at 18% 22%,rgba(75,238,224,.46),transparent 27%), radial-gradient(ellipse at 72% 18%,rgba(201,118,255,.25),transparent 29%), radial-gradient(ellipse at 84% 74%,rgba(255,224,100,.20),transparent 31%), radial-gradient(ellipse at 42% 72%,rgba(42,213,195,.38),transparent 34%), linear-gradient(132deg,rgba(221,255,252,.40),rgba(68,224,207,.16) 37%,rgba(255,255,255,.07) 58%,rgba(36,190,181,.24))!important; -webkit-backdrop-filter:blur(3px) saturate(900%) contrast(2.7) brightness(1.34)!important; backdrop-filter:blur(3px) saturate(900%) contrast(2.7) brightness(1.34)!important } .logo-liquid-wrap:before{ background: radial-gradient(ellipse at 25% 40%,rgba(48,231,211,.55),transparent 24%), radial-gradient(ellipse at 62% 34%,rgba(202,110,255,.28),transparent 27%), radial-gradient(ellipse at 78% 65%,rgba(255,222,96,.22),transparent 26%), radial-gradient(ellipse at 48% 72%,rgba(37,200,188,.48),transparent 30%)!important; filter:blur(7px) contrast(4.2) saturate(4.5)!important; transform:scale(2.5,2.0) rotate(-7deg) skewX(-9deg)!important } .logo-liquid-wrap:after{ background:linear-gradient(108deg,rgba(225,255,252,.92),rgba(46,230,210,.48) 24%,rgba(197,105,255,.25) 44%,rgba(255,222,92,.18) 58%,rgba(38,207,193,.42) 72%,rgba(255,255,255,.62))!important; filter:blur(6px) contrast(3.8) saturate(4.2)!important; transform:skewX(-20deg) rotate(-5deg) scale(2.15)!important; opacity:.78!important } /* FINAL teal-only extreme refractive sticky lens + title-case UI */ body,button,label,input,select,textarea,p,h1,h2,h3,.toolbar,.total,.brand-sales{text-transform:none} .logo-liquid-wrap{ background: radial-gradient(ellipse at 14% 18%,rgba(160,255,247,.58),transparent 24%), radial-gradient(ellipse at 82% 20%,rgba(47,239,219,.46),transparent 28%), radial-gradient(ellipse at 75% 80%,rgba(0,181,173,.40),transparent 31%), radial-gradient(ellipse at 30% 72%,rgba(75,235,221,.52),transparent 34%), linear-gradient(128deg,rgba(232,255,253,.50),rgba(69,230,214,.24) 34%,rgba(4,190,181,.18) 58%,rgba(177,255,248,.42))!important; -webkit-backdrop-filter:blur(1.5px) saturate(1250%) contrast(3.8) brightness(1.46)!important; backdrop-filter:blur(1.5px) saturate(1250%) contrast(3.8) brightness(1.46)!important; border:3px solid rgba(220,255,252,.96)!important; box-shadow:inset 0 0 5px 2px rgba(235,255,253,.98),inset 28px 22px 44px rgba(76,242,226,.42),inset -34px -26px 52px rgba(0,145,143,.34),0 36px 80px rgba(0,112,108,.32)!important } .logo-liquid-wrap:before{ background: radial-gradient(ellipse at 22% 38%,transparent 0 18%,rgba(88,248,232,.58) 31%,rgba(5,195,185,.48) 44%,rgba(191,255,249,.72) 58%,transparent 73%), radial-gradient(ellipse at 74% 58%,rgba(0,176,169,.46),transparent 31%)!important; filter:blur(1.5px) contrast(7) saturate(7)!important; transform:scale(3.2,2.45) rotate(-10deg) skewX(-16deg)!important; opacity:.88!important } .logo-liquid-wrap:after{ background:linear-gradient(104deg,rgba(230,255,253,.98),rgba(42,235,217,.62) 21%,transparent 35%,rgba(0,183,176,.58) 48%,rgba(111,250,236,.66) 62%,transparent 76%,rgba(212,255,251,.92))!important; filter:blur(1.5px) contrast(6.5) saturate(6)!important; transform:skewX(-24deg) rotate(-7deg) scale(2.75)!important; opacity:.86!important } /* Heavy thick optical-glass depth */ .logo-liquid-wrap{ border-width:5px!important; border-color:rgba(220,255,252,.98)!important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.68), inset 0 8px 14px rgba(245,255,254,.92), inset 0 -12px 20px rgba(0,125,122,.30), inset 18px 0 30px rgba(72,235,220,.28), inset -20px 0 34px rgba(0,142,138,.28), inset 0 0 48px rgba(34,216,203,.24), 0 5px 0 rgba(0,115,112,.16), 0 14px 24px rgba(0,100,98,.22), 0 38px 86px rgba(0,91,89,.34)!important; transform:perspective(900px) translateZ(12px)!important } .logo-liquid-wrap:before{ inset:5px!important; border-radius:46px!important; border:2px solid rgba(238,255,253,.72)!important; box-shadow:inset 0 10px 16px rgba(255,255,255,.52),inset 0 -13px 22px rgba(0,137,132,.24)!important; transform:none!important; filter:none!important; opacity:1!important } .logo-liquid-wrap:after{ inset:10px!important; border-radius:42px!important; background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(50,225,210,.08) 42%,rgba(0,150,145,.16) 100%)!important; box-shadow:inset 0 5px 9px rgba(255,255,255,.44),inset 0 -8px 13px rgba(0,120,117,.22)!important; transform:none!important; filter:none!important; opacity:.72!important } /* Borderless extra-thick teal optical glass */ .logo-liquid-wrap{ border:0!important; outline:0!important; background: radial-gradient(ellipse at 18% 15%,rgba(207,255,251,.55),transparent 26%), radial-gradient(ellipse at 82% 24%,rgba(55,238,220,.48),transparent 30%), radial-gradient(ellipse at 76% 82%,rgba(0,164,159,.40),transparent 34%), linear-gradient(135deg,rgba(180,255,247,.38),rgba(42,218,205,.20) 42%,rgba(0,157,153,.24) 100%)!important; box-shadow: inset 0 15px 24px rgba(225,255,252,.52), inset 0 -20px 30px rgba(0,113,111,.34), inset 24px 0 38px rgba(70,231,216,.30), inset -28px 0 42px rgba(0,135,132,.32), inset 0 0 62px rgba(31,210,197,.30), 0 8px 0 rgba(0,112,109,.12), 0 20px 34px rgba(0,101,98,.24), 0 46px 92px rgba(0,82,80,.34)!important; transform:perspective(850px) translateZ(20px)!important } .logo-liquid-wrap:before{ inset:0!important;border:0!important;outline:0!important; border-radius:52px!important; background:linear-gradient(180deg,rgba(220,255,251,.20),rgba(52,225,210,.08) 42%,rgba(0,135,132,.20))!important; box-shadow:inset 0 12px 20px rgba(236,255,253,.38),inset 0 -18px 28px rgba(0,118,115,.28)!important } .logo-liquid-wrap:after{ inset:7px!important;border:0!important;outline:0!important; border-radius:46px!important; background:radial-gradient(ellipse at 50% 35%,rgba(116,247,234,.18),transparent 52%),linear-gradient(180deg,rgba(210,255,250,.13),rgba(0,147,143,.15))!important; box-shadow:inset 0 9px 14px rgba(230,255,252,.24),inset 0 -13px 20px rgba(0,108,105,.24)!important } .signature-consent{display:flex!important;align-items:flex-start!important;gap:16px!important}.signature-consent input[type="checkbox"]{flex:0 0 auto!important;margin-top:7px!important}.signature-consent span{display:block!important;min-width:0!important} /* Mobile cleanup: signatures, preview, pricing */ .signature-consent{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;column-gap:18px!important;align-items:start!important;margin:18px 0!important;line-height:1.35!important} .signature-consent input[type="checkbox"]{width:30px!important;height:30px!important;margin:4px 0 0!important} .signature-consent span{padding:0!important;margin:0!important;overflow-wrap:anywhere!important} .window-preview{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:12px!important;min-height:180px!important;padding:22px!important;overflow:hidden!important} .window-preview img{display:block!important;max-width:82%!important;max-height:150px!important;width:auto!important;height:auto!important;object-fit:contain!important} .preview-image-error{display:none!important} #windowPreviewLabel{text-align:center!important;font-weight:700!important} .price-summary{display:grid!important;grid-template-columns:1fr!important;gap:0!important;padding:14px 20px!important;overflow:hidden!important} .price-line{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:18px!important;width:100%!important;padding:13px 0!important;border-bottom:1px solid rgba(0,120,118,.14)!important;min-width:0!important} .price-line span{min-width:0!important;line-height:1.25!important} .price-line strong{flex:0 0 auto!important;white-space:nowrap!important} .price-line.final-price{border-bottom:0!important;padding-top:17px!important;font-size:1.12em!important} .window-drawing{display:flex;align-items:center;justify-content:center;width:100%;min-height:150px}.window-drawing[hidden]{display:none!important}.window-drawing svg{display:block;width:min(100%,320px);height:auto;max-height:180px} .selected-window-asset{display:block!important;width:auto!important;max-width:100%!important;height:auto!important;max-height:240px!important;object-fit:contain!important;margin:0 auto!important;border-radius:12px} /* Use the Promotional Discount typography throughout the app */ html,body,main,section,.card,.toolbar,h1,h2,h3,p,label,span,strong,small,button,input,select,textarea,.row,.total,.price-summary,.price-line,.camera-button,#windowPreviewLabel{font-family:'Trebuchet MS',Arial,sans-serif!important} /* Search-bar optical lens behavior: keep current pane thickness, increase live refraction */ .logo-liquid-wrap{ background:rgba(166,244,237,.20)!important; -webkit-backdrop-filter:blur(2px) saturate(230%) contrast(1.65) brightness(1.10)!important; backdrop-filter:blur(2px) saturate(230%) contrast(1.65) brightness(1.10)!important; overflow:hidden!important; isolation:isolate!important } .logo-liquid-wrap:before{ content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important; border-radius:inherit!important; background: radial-gradient(ellipse at 20% 45%,rgba(210,255,251,.26),transparent 36%), radial-gradient(ellipse at 78% 55%,rgba(0,167,160,.20),transparent 40%)!important; -webkit-backdrop-filter:blur(5px) saturate(280%) contrast(1.9) brightness(1.12)!important; backdrop-filter:blur(5px) saturate(280%) contrast(1.9) brightness(1.12)!important; transform:scale(1.075,1.14) translateY(1px)!important; transform-origin:center!important; opacity:.92!important; z-index:-1!important } .logo-liquid-wrap:after{ content:""!important;position:absolute!important;inset:9px!important;pointer-events:none!important; border-radius:inherit!important; background:linear-gradient(105deg,rgba(255,255,255,.13),rgba(20,214,199,.08) 36%,rgba(255,255,255,.05) 62%,rgba(0,137,133,.10))!important; -webkit-backdrop-filter:blur(1px) saturate(350%) contrast(2.15)!important; backdrop-filter:blur(1px) saturate(350%) contrast(2.15)!important; transform:scale(1.045,1.09) skewX(-1.2deg)!important; transform-origin:center!important; opacity:.88!important; z-index:-1!important } .logo-liquid-wrap .glyde-logo,.logo-liquid-wrap .brand-sales{position:relative!important;z-index:2!important} /* Wet pebble lens: deeper, calmer teal, glistening water surface */ header{display:flex!important;justify-content:center!important;align-items:center!important} .logo-liquid-wrap{ margin-left:auto!important;margin-right:auto!important; background: radial-gradient(ellipse at 22% 16%,rgba(235,255,253,.34),transparent 19%), radial-gradient(ellipse at 72% 24%,rgba(93,207,198,.18),transparent 34%), radial-gradient(ellipse at 48% 78%,rgba(18,121,118,.20),transparent 44%), linear-gradient(145deg,rgba(103,202,194,.24),rgba(23,147,143,.20) 50%,rgba(9,105,103,.24))!important; -webkit-backdrop-filter:blur(1px) saturate(175%) contrast(1.85) brightness(.96)!important; backdrop-filter:blur(1px) saturate(175%) contrast(1.85) brightness(.96)!important; box-shadow: inset 0 18px 30px rgba(236,255,253,.42), inset 0 -28px 44px rgba(0,76,76,.32), inset 28px 0 44px rgba(78,199,190,.20), inset -32px 0 48px rgba(0,93,91,.25), inset 0 0 78px rgba(29,151,145,.22), 0 14px 18px rgba(0,74,72,.16), 0 34px 62px rgba(0,62,61,.27), 0 58px 110px rgba(0,55,54,.24)!important; transform:perspective(760px) translateZ(34px) scale(1.015)!important } .logo-liquid-wrap:before{ background: radial-gradient(ellipse at 26% 18%,rgba(255,255,255,.56),transparent 10%), radial-gradient(ellipse at 40% 23%,rgba(224,255,252,.28),transparent 17%), radial-gradient(ellipse at 76% 72%,rgba(0,104,101,.17),transparent 35%)!important; -webkit-backdrop-filter:blur(3px) saturate(220%) contrast(2.15)!important; backdrop-filter:blur(3px) saturate(220%) contrast(2.15)!important; transform:scale(1.12,1.18) translateY(2px)!important; opacity:.94!important } .logo-liquid-wrap:after{ inset:12px!important; background: linear-gradient(112deg,rgba(255,255,255,.36) 0 7%,transparent 17% 48%,rgba(202,255,250,.17) 55%,transparent 68%), radial-gradient(ellipse at 54% 42%,rgba(61,190,181,.12),transparent 55%)!important; -webkit-backdrop-filter:blur(.5px) saturate(245%) contrast(2.35)!important; backdrop-filter:blur(.5px) saturate(245%) contrast(2.35)!important; transform:scale(1.08,1.13) skewX(-1.6deg)!important; opacity:.93!important } /* Borderless light teal-gray polished wet glass */ .logo-liquid-wrap{ border:0!important;outline:0!important; background: radial-gradient(ellipse at 25% 13%,rgba(255,255,255,.56),transparent 20%), radial-gradient(ellipse at 76% 20%,rgba(214,244,242,.34),transparent 31%), radial-gradient(ellipse at 48% 80%,rgba(125,174,173,.18),transparent 45%), linear-gradient(145deg,rgba(219,242,240,.38),rgba(159,205,202,.27) 52%,rgba(116,165,164,.25))!important; box-shadow: inset 0 20px 32px rgba(255,255,255,.54), inset 0 -25px 42px rgba(73,121,121,.20), inset 24px 0 42px rgba(218,246,243,.25), inset -28px 0 46px rgba(93,145,144,.18), inset 0 0 82px rgba(161,211,207,.24), 0 18px 28px rgba(64,104,103,.15), 0 46px 90px rgba(54,92,91,.20)!important } .logo-liquid-wrap:before{ border:0!important;outline:0!important; background: radial-gradient(ellipse at 24% 14%,rgba(255,255,255,.76),transparent 8%), radial-gradient(ellipse at 42% 18%,rgba(247,255,254,.46),transparent 14%), radial-gradient(ellipse at 78% 74%,rgba(95,155,153,.12),transparent 38%)!important; box-shadow:none!important } .logo-liquid-wrap:after{ border:0!important;outline:0!important; background: linear-gradient(108deg,rgba(255,255,255,.58) 0 5%,rgba(255,255,255,.16) 10%,transparent 24% 52%,rgba(239,255,253,.24) 59%,transparent 72%), radial-gradient(ellipse at 58% 32%,rgba(255,255,255,.22),transparent 34%)!important; box-shadow:none!important; opacity:.98!important } /* Double optical thickness; preserve current light teal-gray color; no rim */ .logo-liquid-wrap{ border:0!important;outline:0!important; transform:perspective(680px) translateZ(68px) scale(1.025)!important; box-shadow: inset 0 38px 54px rgba(255,255,255,.58), inset 0 -52px 72px rgba(73,121,121,.24), inset 46px 0 68px rgba(218,246,243,.28), inset -52px 0 74px rgba(93,145,144,.22), inset 0 0 128px rgba(161,211,207,.28), 0 22px 34px rgba(64,104,103,.17), 0 58px 112px rgba(54,92,91,.23)!important } .logo-liquid-wrap:before{ border:0!important;outline:0!important; transform:scale(1.18,1.28) translateY(3px)!important; box-shadow:none!important } .logo-liquid-wrap:after{ border:0!important;outline:0!important; transform:scale(1.14,1.23) skewX(-1.6deg)!important; box-shadow:none!important } /* Lock approved pane color: light teal-gray, borderless; retain 2x depth */ .logo-liquid-wrap{ border:none!important;outline:none!important; background: radial-gradient(ellipse at 25% 13%,rgba(255,255,255,.56),transparent 20%), radial-gradient(ellipse at 76% 20%,rgba(214,244,242,.34),transparent 31%), radial-gradient(ellipse at 48% 80%,rgba(125,174,173,.18),transparent 45%), linear-gradient(145deg,rgba(219,242,240,.38),rgba(159,205,202,.27) 52%,rgba(116,165,164,.25))!important } .logo-liquid-wrap:before,.logo-liquid-wrap:after{border:none!important;outline:none!important} /* Approved color retained exactly; 5x optical thickness, borderless */ .logo-liquid-wrap{ border:none!important;outline:none!important; transform:perspective(560px) translateZ(170px) scale(1.035)!important; box-shadow: inset 0 72px 92px rgba(255,255,255,.60), inset 0 -104px 132px rgba(73,121,121,.27), inset 88px 0 116px rgba(218,246,243,.30), inset -96px 0 124px rgba(93,145,144,.24), inset 0 0 210px rgba(161,211,207,.31), 0 30px 46px rgba(64,104,103,.18), 0 82px 154px rgba(54,92,91,.25)!important } .logo-liquid-wrap:before{ border:none!important;outline:none!important; transform:scale(1.28,1.48) translateY(5px)!important; box-shadow:none!important } .logo-liquid-wrap:after{ border:none!important;outline:none!important; transform:scale(1.22,1.40) skewX(-1.6deg)!important; box-shadow:none!important } /* Recreate approved reference pane exactly: soft teal pebble, moderate depth, borderless */ .logo-liquid-wrap{ border:none!important;outline:none!important; background: radial-gradient(ellipse at 25% 13%,rgba(255,255,255,.56),transparent 20%), radial-gradient(ellipse at 76% 20%,rgba(214,244,242,.34),transparent 31%), radial-gradient(ellipse at 48% 80%,rgba(125,174,173,.18),transparent 45%), linear-gradient(145deg,rgba(219,242,240,.38),rgba(159,205,202,.27) 52%,rgba(116,165,164,.25))!important; transform:perspective(850px) translateZ(20px)!important; box-shadow: inset 0 20px 32px rgba(255,255,255,.54), inset 0 -25px 42px rgba(73,121,121,.20), inset 24px 0 42px rgba(218,246,243,.25), inset -28px 0 46px rgba(93,145,144,.18), inset 0 0 82px rgba(161,211,207,.24), 0 18px 28px rgba(64,104,103,.15), 0 46px 90px rgba(54,92,91,.20)!important } .logo-liquid-wrap:before{ border:none!important;outline:none!important; transform:scale(1.075,1.14) translateY(1px)!important; box-shadow:none!important } .logo-liquid-wrap:after{ border:none!important;outline:none!important; transform:scale(1.045,1.09) skewX(-1.2deg)!important; box-shadow:none!important } /* Refine approved pane: thicker optical body, slightly darker teal, borderless */ .logo-liquid-wrap{ border:none!important;outline:none!important; background: radial-gradient(ellipse at 25% 13%,rgba(245,255,253,.50),transparent 20%), radial-gradient(ellipse at 76% 20%,rgba(176,225,220,.34),transparent 31%), radial-gradient(ellipse at 48% 80%,rgba(73,145,142,.22),transparent 45%), linear-gradient(145deg,rgba(177,224,220,.40),rgba(105,180,175,.31) 52%,rgba(58,137,134,.29))!important; transform:perspective(760px) translateZ(34px)!important; box-shadow: inset 0 30px 44px rgba(250,255,254,.50), inset 0 -40px 60px rgba(40,105,103,.25), inset 36px 0 56px rgba(178,229,224,.27), inset -40px 0 62px rgba(52,125,122,.22), inset 0 0 110px rgba(103,183,177,.27), 0 22px 34px rgba(47,104,101,.17), 0 56px 108px rgba(37,88,86,.22)!important } .logo-liquid-wrap:before{ border:none!important;outline:none!important; transform:scale(1.11,1.20) translateY(2px)!important } .logo-liquid-wrap:after{ border:none!important;outline:none!important; transform:scale(1.08,1.15) skewX(-1.2deg)!important } /* Deep teal thick-lens reference: stronger jar-like optical bending */ .logo-liquid-wrap{ border:none!important;outline:none!important; background: radial-gradient(ellipse at 24% 12%,rgba(226,246,244,.30),transparent 18%), radial-gradient(ellipse at 76% 20%,rgba(76,139,139,.24),transparent 32%), radial-gradient(ellipse at 50% 82%,rgba(22,78,80,.26),transparent 46%), linear-gradient(145deg,rgba(61,127,128,.46),rgba(42,105,107,.48) 50%,rgba(29,83,86,.50))!important; -webkit-backdrop-filter:blur(.5px) saturate(155%) contrast(2.05) brightness(.90)!important; backdrop-filter:blur(.5px) saturate(155%) contrast(2.05) brightness(.90)!important; transform:perspective(620px) translateZ(58px)!important; box-shadow: inset 0 40px 58px rgba(232,251,249,.34), inset 0 -58px 82px rgba(13,57,60,.34), inset 48px 0 72px rgba(101,169,166,.20), inset -54px 0 78px rgba(18,68,70,.30), inset 0 0 142px rgba(37,106,106,.32), 0 28px 44px rgba(23,67,68,.20), 0 66px 126px rgba(17,52,54,.25)!important } .logo-liquid-wrap:before{ border:none!important;outline:none!important; -webkit-backdrop-filter:blur(2px) saturate(190%) contrast(2.45)!important; backdrop-filter:blur(2px) saturate(190%) contrast(2.45)!important; transform:scale(1.16,1.30) translateY(3px)!important; transform-origin:center!important } .logo-liquid-wrap:after{ border:none!important;outline:none!important; -webkit-backdrop-filter:blur(0) saturate(210%) contrast(2.75)!important; backdrop-filter:blur(0) saturate(210%) contrast(2.75)!important; transform:scale(1.13,1.24) skewX(-2.2deg)!important; transform-origin:center!important } /* Single-tone transparent teal lens: deeper glass, lighter and clearer */ .logo-liquid-wrap{ border:none!important;outline:none!important; background:rgba(76,166,163,.20)!important; -webkit-backdrop-filter:blur(.35px) saturate(145%) contrast(1.95) brightness(1.06)!important; backdrop-filter:blur(.35px) saturate(145%) contrast(1.95) brightness(1.06)!important; transform:perspective(600px) translateZ(72px)!important; box-shadow: inset 0 34px 52px rgba(255,255,255,.20), inset 0 -54px 78px rgba(76,166,163,.18), inset 42px 0 68px rgba(76,166,163,.13), inset -48px 0 72px rgba(76,166,163,.16), inset 0 0 150px rgba(76,166,163,.20), 0 30px 48px rgba(46,108,106,.14), 0 72px 132px rgba(46,108,106,.16)!important } .logo-liquid-wrap:before{ border:none!important;outline:none!important; background:rgba(76,166,163,.08)!important; -webkit-backdrop-filter:blur(1.5px) saturate(175%) contrast(2.35)!important; backdrop-filter:blur(1.5px) saturate(175%) contrast(2.35)!important; transform:scale(1.18,1.34) translateY(3px)!important } .logo-liquid-wrap:after{ border:none!important;outline:none!important; background:rgba(76,166,163,.055)!important; -webkit-backdrop-filter:blur(0) saturate(185%) contrast(2.55)!important; backdrop-filter:blur(0) saturate(185%) contrast(2.55)!important; transform:scale(1.15,1.28) skewX(-1.8deg)!important } /* Exact approved reference effect from attached screenshot */ .logo-liquid-wrap{ border:none!important;outline:none!important; background: radial-gradient(ellipse at 25% 13%,rgba(255,255,255,.56),transparent 20%), radial-gradient(ellipse at 76% 20%,rgba(214,244,242,.34),transparent 31%), radial-gradient(ellipse at 48% 80%,rgba(125,174,173,.18),transparent 45%), linear-gradient(145deg,rgba(219,242,240,.38),rgba(159,205,202,.27) 52%,rgba(116,165,164,.25))!important; -webkit-backdrop-filter:blur(2px) saturate(230%) contrast(1.65) brightness(1.10)!important; backdrop-filter:blur(2px) saturate(230%) contrast(1.65) brightness(1.10)!important; transform:perspective(850px) translateZ(20px)!important; box-shadow: inset 0 20px 32px rgba(255,255,255,.54), inset 0 -25px 42px rgba(73,121,121,.20), inset 24px 0 42px rgba(218,246,243,.25), inset -28px 0 46px rgba(93,145,144,.18), inset 0 0 82px rgba(161,211,207,.24), 0 18px 28px rgba(64,104,103,.15), 0 46px 90px rgba(54,92,91,.20)!important } .logo-liquid-wrap:before{ border:none!important;outline:none!important; background: radial-gradient(ellipse at 24% 14%,rgba(255,255,255,.76),transparent 8%), radial-gradient(ellipse at 42% 18%,rgba(247,255,254,.46),transparent 14%), radial-gradient(ellipse at 78% 74%,rgba(95,155,153,.12),transparent 38%)!important; -webkit-backdrop-filter:blur(5px) saturate(280%) contrast(1.9) brightness(1.12)!important; backdrop-filter:blur(5px) saturate(280%) contrast(1.9) brightness(1.12)!important; transform:scale(1.075,1.14) translateY(1px)!important; box-shadow:none!important;opacity:.94!important } .logo-liquid-wrap:after{ border:none!important;outline:none!important; background: linear-gradient(108deg,rgba(255,255,255,.58) 0 5%,rgba(255,255,255,.16) 10%,transparent 24% 52%,rgba(239,255,253,.24) 59%,transparent 72%), radial-gradient(ellipse at 58% 32%,rgba(255,255,255,.22),transparent 34%)!important; -webkit-backdrop-filter:blur(1px) saturate(350%) contrast(2.15)!important; backdrop-filter:blur(1px) saturate(350%) contrast(2.15)!important; transform:scale(1.045,1.09) skewX(-1.2deg)!important; box-shadow:none!important;opacity:.98!important } /* LOCKED REFERENCE: exact approved forever-centered pane treatment */ .logo-liquid-wrap{ border:0!important;outline:0!important; background: radial-gradient(ellipse at 25% 13%,rgba(255,255,255,.56),transparent 20%), radial-gradient(ellipse at 76% 20%,rgba(214,244,242,.34),transparent 31%), radial-gradient(ellipse at 48% 80%,rgba(125,174,173,.18),transparent 45%), linear-gradient(145deg,rgba(219,242,240,.38),rgba(159,205,202,.27) 52%,rgba(116,165,164,.25))!important; -webkit-backdrop-filter:blur(2px) saturate(230%) contrast(1.65) brightness(1.10)!important; backdrop-filter:blur(2px) saturate(230%) contrast(1.65) brightness(1.10)!important; transform:perspective(850px) translateZ(20px)!important; box-shadow:inset 0 20px 32px rgba(255,255,255,.54),inset 0 -25px 42px rgba(73,121,121,.20),inset 24px 0 42px rgba(218,246,243,.25),inset -28px 0 46px rgba(93,145,144,.18),inset 0 0 82px rgba(161,211,207,.24),0 18px 28px rgba(64,104,103,.15),0 46px 90px rgba(54,92,91,.20)!important } .logo-liquid-wrap:before{border:0!important;outline:0!important;background:radial-gradient(ellipse at 24% 14%,rgba(255,255,255,.76),transparent 8%),radial-gradient(ellipse at 42% 18%,rgba(247,255,254,.46),transparent 14%),radial-gradient(ellipse at 78% 74%,rgba(95,155,153,.12),transparent 38%)!important;-webkit-backdrop-filter:blur(5px) saturate(280%) contrast(1.9) brightness(1.12)!important;backdrop-filter:blur(5px) saturate(280%) contrast(1.9) brightness(1.12)!important;transform:scale(1.075,1.14) translateY(1px)!important;box-shadow:none!important;opacity:.94!important} .logo-liquid-wrap:after{border:0!important;outline:0!important;background:linear-gradient(108deg,rgba(255,255,255,.58) 0 5%,rgba(255,255,255,.16) 10%,transparent 24% 52%,rgba(239,255,253,.24) 59%,transparent 72%),radial-gradient(ellipse at 58% 32%,rgba(255,255,255,.22),transparent 34%)!important;-webkit-backdrop-filter:blur(1px) saturate(350%) contrast(2.15)!important;backdrop-filter:blur(1px) saturate(350%) contrast(2.15)!important;transform:scale(1.045,1.09) skewX(-1.2deg)!important;box-shadow:none!important;opacity:.98!important} /* CANONICAL APPROVED GLASS PATCH — consolidated from the approved reference state */ .logo-liquid-wrap{ position:relative!important;isolation:isolate!important;overflow:hidden!important; width:min(86vw,520px)!important;min-height:150px!important; display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important; padding:24px 30px 36px!important;border-radius:52px!important; border:0!important;outline:0!important; background:radial-gradient(ellipse at 25% 13%,rgba(255,255,255,.56),transparent 20%),radial-gradient(ellipse at 76% 20%,rgba(214,244,242,.34),transparent 31%),radial-gradient(ellipse at 48% 80%,rgba(125,174,173,.18),transparent 45%),linear-gradient(145deg,rgba(219,242,240,.38),rgba(159,205,202,.27) 52%,rgba(116,165,164,.25))!important; -webkit-backdrop-filter:blur(2px) saturate(230%) contrast(1.65) brightness(1.10)!important; backdrop-filter:blur(2px) saturate(230%) contrast(1.65) brightness(1.10)!important; transform:perspective(850px) translateZ(20px)!important; box-shadow:inset 0 20px 32px rgba(255,255,255,.54),inset 0 -25px 42px rgba(73,121,121,.20),inset 24px 0 42px rgba(218,246,243,.25),inset -28px 0 46px rgba(93,145,144,.18),inset 0 0 82px rgba(161,211,207,.24),0 18px 28px rgba(64,104,103,.15),0 46px 90px rgba(54,92,91,.20)!important } .logo-liquid-wrap:before{ content:""!important;position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none!important;border-radius:52px!important;border:0!important;outline:0!important; background:radial-gradient(ellipse at 24% 14%,rgba(255,255,255,.76),transparent 8%),radial-gradient(ellipse at 42% 18%,rgba(247,255,254,.46),transparent 14%),radial-gradient(ellipse at 78% 74%,rgba(95,155,153,.12),transparent 38%)!important; -webkit-backdrop-filter:blur(5px) saturate(280%) contrast(1.9) brightness(1.12)!important;backdrop-filter:blur(5px) saturate(280%) contrast(1.9) brightness(1.12)!important; transform:scale(1.075,1.14) translateY(1px)!important;box-shadow:none!important;opacity:.94!important } .logo-liquid-wrap:after{ content:""!important;position:absolute!important;inset:7px!important;z-index:0!important;pointer-events:none!important;border-radius:46px!important;border:0!important;outline:0!important; background:linear-gradient(108deg,rgba(255,255,255,.58) 0 5%,rgba(255,255,255,.16) 10%,transparent 24% 52%,rgba(239,255,253,.24) 59%,transparent 72%),radial-gradient(ellipse at 58% 32%,rgba(255,255,255,.22),transparent 34%)!important; -webkit-backdrop-filter:blur(1px) saturate(350%) contrast(2.15)!important;backdrop-filter:blur(1px) saturate(350%) contrast(2.15)!important; transform:scale(1.045,1.09) skewX(-1.2deg)!important;box-shadow:none!important;opacity:.98!important } .logo-liquid-wrap .glyde-logo,.logo-liquid-wrap .brand-sales{position:relative!important;z-index:2!important} /* Apple-style liquid glass optics: actual displacement refraction in Chromium */ .logo-liquid-wrap{ border:0!important;outline:0!important; background:rgba(184,229,225,.16)!important; -webkit-backdrop-filter:blur(2px) saturate(180%) brightness(1.07)!important; backdrop-filter:url(#glydeLiquidRefraction) blur(2px) saturate(180%) brightness(1.07)!important; box-shadow:inset 2px 2px 2px rgba(255,255,255,.58),inset -2px -2px 3px rgba(103,160,157,.20),inset 0 0 30px rgba(255,255,255,.10),0 22px 52px rgba(55,105,103,.18)!important; transform:none!important } .logo-liquid-wrap:before{ inset:0!important;border-radius:inherit!important;border:0!important; background:linear-gradient(120deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.10) 17%,transparent 38%,rgba(255,255,255,.08) 72%,rgba(255,255,255,.28) 100%)!important; -webkit-backdrop-filter:none!important;backdrop-filter:none!important; transform:none!important;opacity:.72!important } .logo-liquid-wrap:after{ inset:2px!important;border-radius:inherit!important;border:0!important; background:transparent!important; -webkit-backdrop-filter:none!important;backdrop-filter:none!important; transform:none!important;opacity:1!important; box-shadow:inset 1px 1px 1px rgba(255,255,255,.72),inset -1px -1px 1px rgba(255,255,255,.26)!important } @supports not (backdrop-filter:url(#glydeLiquidRefraction)){ .logo-liquid-wrap{-webkit-backdrop-filter:blur(7px) saturate(180%) brightness(1.07)!important;backdrop-filter:blur(7px) saturate(180%) brightness(1.07)!important} } /* User-supplied Apple Liquid Glass recipe mapped to the forever-centered Glyde pane */ .logo-liquid-wrap{ position:relative!important; border-radius:28px!important; text-align:center!important; filter:url(#liquid-refraction)!important; backdrop-filter:blur(25px) saturate(160%)!important; -webkit-backdrop-filter:blur(25px) saturate(160%)!important; background:rgba(255,255,255,.06)!important; box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -1px 2px rgba(0,0,0,.25),inset 0 10px 20px rgba(255,255,255,.1),0 15px 35px rgba(0,0,0,.35)!important; border:1px solid rgba(255,255,255,.15)!important; transform:none!important; transition:transform .3s ease,box-shadow .3s ease!important } .logo-liquid-wrap:before,.logo-liquid-wrap:after{content:none!important;display:none!important} .logo-liquid-wrap .glyde-logo,.logo-liquid-wrap .brand-sales{position:relative!important;z-index:2!important} @media (hover:hover) and (pointer:fine){ .logo-liquid-wrap:hover{ transform:translateY(-5px)!important; box-shadow:inset 0 1px 2px rgba(255,255,255,.5),inset 0 -1px 2px rgba(0,0,0,.25),inset 0 15px 25px rgba(255,255,255,.15),0 20px 45px rgba(0,0,0,.45)!important } } /* Correct refraction target: keep pane/logo geometry sharp; distort only backdrop */ .logo-liquid-wrap{ filter:none!important; background:rgba(255,255,255,.06)!important; backdrop-filter:url(#liquid-refraction) blur(25px) saturate(160%)!important; -webkit-backdrop-filter:blur(25px) saturate(160%)!important; transform:none!important; border-radius:28px!important; box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -1px 2px rgba(0,0,0,.25),inset 0 10px 20px rgba(255,255,255,.1),0 15px 35px rgba(0,0,0,.35)!important } .logo-liquid-wrap .glyde-logo,.logo-liquid-wrap .brand-sales{ filter:none!important;transform:none!important;position:relative!important;z-index:2!important } /* Increase physical glass depth only; keep backdrop refraction target and sharp logo */ .logo-liquid-wrap{ filter:none!important; backdrop-filter:url(#liquid-refraction) blur(25px) saturate(160%)!important; -webkit-backdrop-filter:blur(25px) saturate(160%)!important; box-shadow: inset 0 2px 2px rgba(255,255,255,.52), inset 0 -4px 7px rgba(0,0,0,.24), inset 0 18px 34px rgba(255,255,255,.14), inset 16px 0 28px rgba(255,255,255,.08), inset -16px 0 30px rgba(0,0,0,.08), 0 8px 0 rgba(255,255,255,.06), 0 22px 42px rgba(0,0,0,.28), 0 46px 78px rgba(0,0,0,.18)!important; border:1px solid rgba(255,255,255,.18)!important } .logo-liquid-wrap .glyde-logo,.logo-liquid-wrap .brand-sales{filter:none!important;transform:none!important} /* 4x physical depth upgrade — preserve corrected backdrop-only refraction */ .logo-liquid-wrap{ filter:none!important; backdrop-filter:url(#liquid-refraction) blur(25px) saturate(160%)!important; -webkit-backdrop-filter:blur(25px) saturate(160%)!important; box-shadow: inset 0 5px 5px rgba(255,255,255,.58), inset 0 -14px 22px rgba(0,0,0,.27), inset 0 42px 68px rgba(255,255,255,.16), inset 38px 0 62px rgba(255,255,255,.10), inset -38px 0 66px rgba(0,0,0,.10), inset 0 0 96px rgba(255,255,255,.08), 0 14px 0 rgba(255,255,255,.07), 0 42px 72px rgba(0,0,0,.30), 0 88px 148px rgba(0,0,0,.20)!important; border:1px solid rgba(255,255,255,.18)!important } .logo-liquid-wrap .glyde-logo,.logo-liquid-wrap .brand-sales{filter:none!important;transform:none!important} /* Additional 2x depth from approved 4x state; optics/refraction unchanged */ .logo-liquid-wrap{ filter:none!important; backdrop-filter:url(#liquid-refraction) blur(25px) saturate(160%)!important; -webkit-backdrop-filter:blur(25px) saturate(160%)!important; box-shadow: inset 0 8px 8px rgba(255,255,255,.62), inset 0 -24px 36px rgba(0,0,0,.29), inset 0 64px 96px rgba(255,255,255,.18), inset 58px 0 92px rgba(255,255,255,.11), inset -58px 0 96px rgba(0,0,0,.11), inset 0 0 148px rgba(255,255,255,.09), 0 22px 0 rgba(255,255,255,.075), 0 64px 104px rgba(0,0,0,.31), 0 126px 202px rgba(0,0,0,.21)!important; border:1px solid rgba(255,255,255,.18)!important } .logo-liquid-wrap .glyde-logo,.logo-liquid-wrap .brand-sales{filter:none!important;transform:none!important} /* Fluidity/refraction refinement — preserve sharp pane/logo and backdrop-only distortion */ .logo-liquid-wrap{ filter:none!important; background:rgba(255,255,255,.055)!important; backdrop-filter:url(#liquid-refraction) blur(22px) saturate(175%) contrast(1.08)!important; -webkit-backdrop-filter:blur(22px) saturate(175%) contrast(1.08)!important; box-shadow: inset 0 10px 12px rgba(255,255,255,.66), inset 0 -30px 46px rgba(0,0,0,.28), inset 0 76px 112px rgba(255,255,255,.19), inset 68px 0 106px rgba(255,255,255,.12), inset -68px 0 110px rgba(0,0,0,.115), inset 0 0 170px rgba(255,255,255,.10), 0 26px 0 rgba(255,255,255,.08), 0 76px 122px rgba(0,0,0,.31), 0 142px 224px rgba(0,0,0,.21)!important } .logo-liquid-wrap .glyde-logo,.logo-liquid-wrap .brand-sales{filter:none!important;transform:none!important} /* Stronger cast shadow only — preserve current liquid optics and depth */ .logo-liquid-wrap{ box-shadow: inset 0 10px 12px rgba(255,255,255,.66), inset 0 -30px 46px rgba(0,0,0,.28), inset 0 76px 112px rgba(255,255,255,.19), inset 68px 0 106px rgba(255,255,255,.12), inset -68px 0 110px rgba(0,0,0,.115), inset 0 0 170px rgba(255,255,255,.10), 0 28px 0 rgba(0,0,0,.055), 0 48px 38px rgba(0,0,0,.20), 0 92px 118px rgba(0,0,0,.30), 0 168px 250px rgba(0,0,0,.23)!important } /* Single central liquid-glass pane only: remove secondary surrounding glass layer */ .logo-liquid-wrap:before,.logo-liquid-wrap:after{content:none!important;display:none!important;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;background:none!important} .logo-liquid-wrap{ box-shadow: inset 0 10px 12px rgba(255,255,255,.66), inset 0 -30px 46px rgba(0,0,0,.28), inset 0 76px 112px rgba(255,255,255,.19), inset 68px 0 106px rgba(255,255,255,.12), inset -68px 0 110px rgba(0,0,0,.115), inset 0 0 170px rgba(255,255,255,.10), 0 34px 0 rgba(0,0,0,.07), 0 58px 48px rgba(0,0,0,.24), 0 108px 138px rgba(0,0,0,.34), 0 190px 280px rgba(0,0,0,.25)!important } /* Very soft cast-shadow edges only — preserve single-pane liquid glass */ .logo-liquid-wrap{ box-shadow: inset 0 10px 12px rgba(255,255,255,.66), inset 0 -30px 46px rgba(0,0,0,.28), inset 0 76px 112px rgba(255,255,255,.19), inset 68px 0 106px rgba(255,255,255,.12), inset -68px 0 110px rgba(0,0,0,.115), inset 0 0 170px rgba(255,255,255,.10), 0 34px 34px rgba(0,0,0,.055), 0 64px 96px rgba(0,0,0,.18), 0 118px 190px rgba(0,0,0,.25), 0 205px 340px rgba(0,0,0,.18)!important } /* Glyde Windows sign-in landing page */ .login-landing{min-height:calc(100vh - 220px);display:flex;align-items:center;justify-content:center;padding:34px 18px} .login-glass{width:min(92vw,460px);padding:38px 30px 34px;border-radius:34px;text-align:center;background:rgba(255,255,255,.055);backdrop-filter:url(#liquid-refraction) blur(22px) saturate(175%) contrast(1.08);-webkit-backdrop-filter:blur(22px) saturate(175%) contrast(1.08);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 10px 12px rgba(255,255,255,.38),inset 0 -22px 36px rgba(0,0,0,.12),0 34px 68px rgba(0,0,0,.18),0 96px 180px rgba(0,0,0,.12)} .login-logo{display:block;width:min(78%,300px);height:auto;margin:0 auto 8px} .login-glass h1{margin:4px 0 4px}.login-glass p{margin:0 0 24px}.login-glass label{display:block;text-align:left;margin:14px 0}.login-glass input{width:100%;margin-top:7px}.login-glass button{width:100%;margin-top:10px} #login:not([hidden])~#app{display:none!important} /* Secondary sign-in pane: smooth reflective glass, no branding */ .login-glass{position:relative!important;overflow:hidden!important;background:rgba(255,255,255,.045)!important;box-shadow:inset 0 1px 2px rgba(255,255,255,.42),inset 0 -1px 2px rgba(0,0,0,.10),0 30px 70px rgba(0,0,0,.15)!important} .login-glass:before{content:""!important;display:block!important;position:absolute!important;left:5%!important;right:5%!important;top:4px!important;height:34%!important;border-radius:50%!important;background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.06) 45%,transparent)!important;filter:blur(10px)!important;pointer-events:none!important;opacity:.72!important} .login-glass:after{content:""!important;display:block!important;position:absolute!important;inset:0!important;border-radius:inherit!important;background:linear-gradient(112deg,rgba(255,255,255,.18),transparent 26% 72%,rgba(255,255,255,.08))!important;pointer-events:none!important;opacity:.65!important} .login-glass>*{position:relative!important;z-index:2!important} /* Teal liquid-glass sign-in button */ .login-glass button{ position:relative!important;overflow:hidden!important; color:#063f40!important;font-weight:700!important; background:rgba(66,196,188,.30)!important; border:1px solid rgba(224,255,252,.42)!important; border-radius:22px!important; -webkit-backdrop-filter:blur(14px) saturate(190%) brightness(1.08)!important; backdrop-filter:blur(14px) saturate(190%) brightness(1.08)!important; box-shadow:inset 0 2px 3px rgba(255,255,255,.58),inset 0 -5px 10px rgba(16,111,108,.18),inset 0 12px 20px rgba(255,255,255,.10),0 10px 24px rgba(20,104,101,.22)!important; text-shadow:0 1px 1px rgba(255,255,255,.35)!important; transition:transform .14s ease,box-shadow .2s ease,background .2s ease!important } .login-glass button:hover{background:rgba(66,196,188,.40)!important;box-shadow:inset 0 2px 4px rgba(255,255,255,.66),inset 0 -6px 12px rgba(16,111,108,.20),0 14px 30px rgba(20,104,101,.26)!important} .login-glass button:active{transform:scale(.98)!important} /* Force login credentials to never visually auto-capitalize */ #email,#password{ text-transform:none!important; -webkit-text-transform:none!important; font-variant:normal!important; } /* Login-only keyboard/case exception; normal app fields retain standard capitalization behavior */ #login #email,#login #password{ text-transform:none!important; -webkit-text-transform:none!important; } /* Authentication views are mutually exclusive; smooth handoff into Sales */ #login,#app{transition:opacity .42s ease,transform .42s ease!important} #login[hidden],#app[hidden]{display:none!important} #login.login-exit{opacity:0!important;transform:translateY(-14px) scale(.985)!important;pointer-events:none!important} #app.app-enter{display:block!important;opacity:0!important;transform:translateY(18px)!important} #app.app-ready{opacity:1!important;transform:none!important} body.sales-authenticated #login{display:none!important} /* Aesthetic refinement: blurred secondary pane shadows */ .login-glass,.card{ box-shadow:inset 0 1px 2px rgba(255,255,255,.40),inset 0 -1px 2px rgba(0,0,0,.08),0 24px 52px rgba(27,73,72,.12),0 64px 118px rgba(27,73,72,.10)!important } /* Sales controls use the approved teal liquid-glass button language */ #app button{ position:relative!important;overflow:hidden!important;color:#063f40!important;font-weight:700!important; background:rgba(66,196,188,.30)!important;border:1px solid rgba(224,255,252,.42)!important;border-radius:22px!important; -webkit-backdrop-filter:blur(14px) saturate(190%) brightness(1.08)!important;backdrop-filter:blur(14px) saturate(190%) brightness(1.08)!important; box-shadow:inset 0 2px 3px rgba(255,255,255,.58),inset 0 -5px 10px rgba(16,111,108,.18),inset 0 12px 20px rgba(255,255,255,.10),0 10px 24px rgba(20,104,101,.22)!important; text-shadow:0 1px 1px rgba(255,255,255,.35)!important;transition:transform .14s ease,box-shadow .2s ease,background .2s ease!important } #app button:hover{background:rgba(66,196,188,.40)!important;box-shadow:inset 0 2px 4px rgba(255,255,255,.66),inset 0 -6px 12px rgba(16,111,108,.20),0 14px 30px rgba(20,104,101,.26)!important} #app button:active{transform:scale(.98)!important} .glyde-footer{padding:28px 18px 34px;text-align:center;font-size:12px;line-height:1.4;color:rgba(16,65,65,.62);letter-spacing:.01em} /* Frosted hero glass — shared by sign-in landing and authenticated Sales page */ .logo-liquid-wrap{ background:linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(231,255,253,.16) 52%,rgba(170,232,228,.11) 100%)!important; border:2px solid rgba(255,255,255,.68)!important; -webkit-backdrop-filter:blur(30px) saturate(165%) contrast(1.04)!important; backdrop-filter:blur(30px) saturate(165%) contrast(1.04)!important; box-shadow: inset 0 3px 5px rgba(255,255,255,.88), inset 0 -4px 12px rgba(21,103,99,.08), inset 0 42px 72px rgba(255,255,255,.14), 0 28px 38px rgba(11,82,79,.10), 0 62px 92px rgba(8,74,71,.16), 0 122px 190px rgba(7,69,66,.14), 0 210px 320px rgba(7,69,66,.09)!important; } .logo-liquid-wrap:before{ content:""!important;display:block!important;position:absolute!important; left:4%!important;right:4%!important;top:3%!important;height:47%!important; border-radius:inherit!important; background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.09) 55%,transparent)!important; filter:blur(9px)!important;opacity:.78!important;pointer-events:none!important; } .logo-liquid-wrap:after{ content:""!important;display:block!important;position:absolute!important; width:106%!important;height:48%!important;left:-3%!important;bottom:-25%!important; border-radius:50%!important;background:rgba(24,132,125,.13)!important; filter:blur(48px)!important;pointer-events:none!important; } .logo-liquid-wrap .glyde-logo,.logo-liquid-wrap .brand-sales{position:relative!important;z-index:2!important} /* Approved website-style frost on the shared forever-centered pane */ .logo-liquid-wrap{ background:linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(238,255,253,.25) 46%,rgba(194,240,236,.18) 100%)!important; border:2px solid rgba(255,255,255,.74)!important; -webkit-backdrop-filter:blur(34px) saturate(155%) brightness(1.05)!important; backdrop-filter:blur(34px) saturate(155%) brightness(1.05)!important; box-shadow: inset 0 3px 6px rgba(255,255,255,.94), inset 0 -3px 10px rgba(39,118,113,.08), inset 0 58px 86px rgba(255,255,255,.15), 0 26px 38px rgba(15,89,85,.09), 0 64px 94px rgba(10,78,74,.15), 0 128px 205px rgba(8,71,68,.13), 0 215px 345px rgba(8,71,68,.08)!important; } .logo-liquid-wrap:before{ content:""!important;display:block!important;position:absolute!important; left:3%!important;right:3%!important;top:2%!important;height:49%!important; border-radius:inherit!important; background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,.12) 58%,transparent)!important; filter:blur(10px)!important;opacity:.82!important;pointer-events:none!important;z-index:1!important; } .logo-liquid-wrap:after{ content:""!important;display:block!important;position:absolute!important; width:108%!important;height:52%!important;left:-4%!important;bottom:-28%!important; border-radius:50%!important;background:rgba(24,139,131,.13)!important; filter:blur(52px)!important;pointer-events:none!important;z-index:-1!important; } .logo-liquid-wrap .glyde-logo,.logo-liquid-wrap .brand-sales{position:relative!important;z-index:3!important} /* 2026-09-25 Sales typography, centered section headings, and price-row correction */ html,body,main,section,.card,.toolbar,h1,h2,h3,p,label,span,strong,small,button,input,select,textarea,.row,.total,.price-summary,.price-line,.camera-button,#windowPreviewLabel{ font-family:'Trebuchet MS',Arial,sans-serif!important; } #app>.card>.toolbar, #app>.card>.toolbar h2, #app>.card>h1, #app>.card>h2{ text-align:center!important; } #app>.card>.toolbar{display:block!important;width:100%!important} #app>.card>.toolbar h2,#app>.card>h1,#app>.card>h2{width:100%!important;margin-left:auto!important;margin-right:auto!important} .price-summary{display:block!important;width:100%!important;padding:14px 18px!important} .price-summary .price-line{ display:grid!important; grid-template-columns:minmax(0,1fr) max-content!important; align-items:center!important; column-gap:20px!important; width:100%!important; padding:13px 0!important; } .price-summary .price-line span{ display:block!important; min-width:0!important; max-width:100%!important; line-height:1.3!important; text-align:left!important; overflow-wrap:break-word!important; word-break:normal!important; } .price-summary .price-line strong{ display:block!important; min-width:88px!important; white-space:nowrap!important; text-align:right!important; justify-self:end!important; } @media(max-width:420px){ .price-summary{padding:12px 14px!important} .price-summary .price-line{grid-template-columns:minmax(0,1fr) max-content!important;column-gap:12px!important} .price-summary .price-line span{font-size:14px!important} .price-summary .price-line strong{min-width:76px!important;font-size:15px!important} .price-summary .price-line.final-price span,.price-summary .price-line.final-price strong{font-size:17px!important} } /* 2026-09-26 stronger website-matched frost — shared landing + Sales forever pane */ .logo-liquid-wrap{ background: radial-gradient(ellipse at 50% 8%,rgba(255,255,255,.72),rgba(255,255,255,.38) 34%,transparent 62%), linear-gradient(180deg,rgba(250,255,255,.58) 0%,rgba(236,252,250,.43) 48%,rgba(188,232,228,.30) 100%)!important; border:1px solid rgba(255,255,255,.82)!important; -webkit-backdrop-filter:blur(42px) saturate(145%) brightness(1.07)!important; backdrop-filter:blur(42px) saturate(145%) brightness(1.07)!important; box-shadow: inset 0 3px 5px rgba(255,255,255,.98), inset 0 -5px 14px rgba(38,111,107,.09), inset 0 62px 100px rgba(255,255,255,.22), inset 0 0 58px rgba(235,255,253,.24), 0 30px 46px rgba(14,87,83,.10), 0 72px 112px rgba(10,78,74,.16), 0 142px 230px rgba(8,70,67,.13)!important; } .logo-liquid-wrap:before{ content:""!important;display:block!important;position:absolute!important; left:4%!important;right:4%!important;top:3%!important;height:50%!important; border-radius:inherit!important; background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.18) 58%,transparent)!important; filter:blur(12px)!important;opacity:.88!important;pointer-events:none!important;z-index:1!important; } .logo-liquid-wrap:after{ content:""!important;display:block!important;position:absolute!important; width:110%!important;height:54%!important;left:-5%!important;bottom:-30%!important; border-radius:50%!important;background:rgba(28,133,127,.14)!important; filter:blur(58px)!important;opacity:.82!important;pointer-events:none!important;z-index:-1!important; } .logo-liquid-wrap .glyde-logo,.logo-liquid-wrap .brand-sales{ position:relative!important;z-index:3!important;filter:none!important; } /* 2026-09-26 exact website forever-glass optics mapped to app landing + Sales */ .logo-liquid-wrap{ border-radius:64px!important; border:.65px solid rgba(255,255,255,.92)!important; background:linear-gradient(150deg,rgba(255,255,255,.54),rgba(238,255,253,.30) 24%,rgba(185,242,237,.18) 62%,rgba(113,202,195,.16))!important; -webkit-backdrop-filter:blur(30px) saturate(190%) contrast(105%)!important; backdrop-filter:blur(30px) saturate(190%) contrast(105%)!important; box-shadow: inset 0 5px 9px rgba(255,255,255,.98), inset 0 -8px 15px rgba(22,116,110,.14), inset 6px 0 12px rgba(255,255,255,.34), inset -6px 0 12px rgba(21,112,106,.08), 0 30px 52px rgba(8,78,74,.18), 0 78px 130px rgba(8,72,69,.17), 0 145px 220px rgba(7,67,64,.10)!important; isolation:isolate!important; overflow:visible!important; } .logo-liquid-wrap:before{ content:""!important;display:block!important;position:absolute!important; inset:8px 14px auto!important;height:52%!important; border-radius:52px 52px 58% 58%!important; background:linear-gradient(118deg,rgba(255,255,255,.94),rgba(255,255,255,.30) 18%,rgba(255,255,255,.03) 42%,rgba(255,255,255,.58) 66%,rgba(255,255,255,.06))!important; filter:blur(.35px)!important;opacity:1!important;pointer-events:none!important;z-index:1!important; } .logo-liquid-wrap:after{ content:""!important;display:block!important;position:absolute!important; width:110%!important;height:48%!important;left:-5%!important;bottom:-19%!important; border-radius:50%!important; background:radial-gradient(ellipse,rgba(21,157,147,.29),rgba(9,92,87,.14) 44%,transparent 73%)!important; filter:blur(44px)!important;opacity:1!important;pointer-events:none!important;z-index:-2!important; } .logo-liquid-wrap .glyde-logo,.logo-liquid-wrap .brand-sales{ position:relative!important;z-index:3!important;filter:drop-shadow(0 18px 26px rgba(7,83,79,.14))!important; } /* 2026-09-27 streamlined Generate Contract action */ .contract-action{ width:100%!important; margin:34px auto 64px!important; padding:0 18px!important; background:transparent!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; overflow:visible!important; } #app .generate-contract-pill{ display:block!important; width:min(520px,88vw)!important; min-height:72px!important; margin:0 auto!important; padding:18px 34px!important; border-radius:999px!important; border:1px solid rgba(255,255,255,.90)!important; background: linear-gradient(145deg,rgba(255,255,255,.62),rgba(140,239,231,.38) 48%,rgba(38,187,178,.30))!important; -webkit-backdrop-filter:blur(22px) saturate(210%) brightness(1.08)!important; backdrop-filter:blur(22px) saturate(210%) brightness(1.08)!important; box-shadow: inset 0 5px 8px rgba(255,255,255,.96), inset 0 -7px 13px rgba(13,105,101,.16), 0 18px 30px rgba(7,77,73,.22), 0 46px 74px rgba(7,72,69,.20), 0 92px 138px rgba(7,67,64,.13)!important; color:#063f40!important; font-size:clamp(20px,4vw,28px)!important; font-weight:800!important; letter-spacing:-.02em!important; text-align:center!important; } #app .generate-contract-pill:hover{ box-shadow: inset 0 6px 9px rgba(255,255,255,.98), inset 0 -8px 15px rgba(13,105,101,.18), 0 22px 36px rgba(7,77,73,.24), 0 54px 84px rgba(7,72,69,.21), 0 102px 150px rgba(7,67,64,.14)!important; } /* 2026-09-27 My Sales contract history + persistent contract action */ .my-sales-card .new-sale-pill{ display:block!important;width:min(500px,88vw)!important;margin:20px auto 30px!important;padding:17px 28px!important; border-radius:999px!important;border:1px solid rgba(255,255,255,.92)!important; background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(121,233,224,.40) 52%,rgba(40,186,177,.28))!important; -webkit-backdrop-filter:blur(22px) saturate(210%)!important;backdrop-filter:blur(22px) saturate(210%)!important; box-shadow:inset 0 5px 8px rgba(255,255,255,.98),inset 0 -7px 13px rgba(14,105,101,.16),0 20px 34px rgba(7,77,73,.20),0 52px 82px rgba(7,72,69,.17)!important; font-size:22px!important;font-weight:800!important;color:#063f40!important } .my-sales-subhead{margin:24px 0 12px;font-size:16px;font-weight:800;letter-spacing:.02em;color:#164f50} .contract-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(12,94,91,.10)} .contract-row:last-child{border-bottom:0} .contract-row strong{font-size:17px}.contract-row small,.muted-sales{color:#4d7473} #app .view-contract-pill{width:auto!important;min-width:132px!important;margin:0!important;padding:11px 16px!important;border-radius:999px!important;font-size:14px!important;white-space:nowrap!important} #customerEmail{text-transform:lowercase!important} .contract-action{display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;margin:38px auto 72px!important;padding:0 16px!important} #app .generate-contract-pill{width:min(560px,90vw)!important;margin:0 auto!important;white-space:nowrap!important;font-size:clamp(19px,4vw,26px)!important} #app .generate-contract-pill.contract-generated,#app .generate-contract-pill:disabled{opacity:1!important;cursor:default!important;color:#064b4b!important;filter:none!important} @media(max-width:420px){#app .generate-contract-pill{font-size:20px!important;padding-left:18px!important;padding-right:18px!important}.contract-row{grid-template-columns:1fr}.contract-row .view-contract-pill{justify-self:start!important}} /* 2026-09-27 exact centering for New Sale + Generate Contract */ .my-sales-card{ text-align:center!important; } .my-sales-card .new-sale-pill{ display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; width:min(440px,calc(100% - 28px))!important; min-height:70px!important; margin:20px auto 34px!important; padding:16px 24px!important; line-height:1!important; white-space:nowrap!important; position:relative!important; left:auto!important; right:auto!important; transform:none!important; box-shadow: inset 0 5px 9px rgba(255,255,255,.98), inset 0 -7px 14px rgba(14,105,101,.17), 0 18px 30px rgba(7,77,73,.22), 0 46px 76px rgba(7,72,69,.20), 0 92px 138px rgba(7,67,64,.13)!important; } .contract-action{ display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; width:100%!important; margin:42px auto 78px!important; padding:0!important; } #app .generate-contract-pill{ display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; width:min(500px,calc(100% - 28px))!important; min-height:74px!important; margin:0 auto!important; padding:17px 24px!important; line-height:1.05!important; white-space:nowrap!important; position:relative!important; left:auto!important; right:auto!important; transform:none!important; font-size:clamp(18px,4vw,24px)!important; } @media(max-width:420px){ .my-sales-card .new-sale-pill{ width:calc(100% - 24px)!important; font-size:20px!important; } #app .generate-contract-pill{ width:calc(100% - 24px)!important; font-size:19px!important; } } /* 2026-09-27 centered View Contract + in-app contract preview */ .contract-row{grid-template-columns:1fr!important;justify-items:center!important;text-align:center!important} #app .view-contract-pill{ display:flex!important;align-items:center!important;justify-content:center!important;width:min(270px,82%)!important; margin:14px auto 4px!important;padding:13px 22px!important;border-radius:999px!important; box-shadow:inset 0 4px 7px rgba(255,255,255,.96),inset 0 -6px 12px rgba(14,105,101,.16),0 18px 30px rgba(7,77,73,.22),0 44px 72px rgba(7,72,69,.18)!important } .contract-preview-overlay{position:fixed!important;inset:0!important;z-index:5000!important;overflow:auto!important;background:linear-gradient(180deg,rgba(222,252,249,.98),rgba(190,239,235,.98))!important;padding:18px 12px 40px!important} .contract-preview-shell{max-width:760px;margin:0 auto;padding:10px} .contract-preview-top{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:sticky;top:8px;z-index:5;padding:8px} .preview-close-pill,.preview-pdf-pill{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid rgba(255,255,255,.9);border-radius:999px;padding:12px 20px;background:rgba(111,225,216,.42);color:#063f40;font-weight:800;backdrop-filter:blur(18px) saturate(190%);-webkit-backdrop-filter:blur(18px) saturate(190%);box-shadow:inset 0 3px 6px rgba(255,255,255,.95),inset 0 -5px 10px rgba(12,105,101,.15),0 16px 30px rgba(8,77,73,.18)} .preview-title,.contract-preview-shell section{background:rgba(255,255,255,.44);border:1px solid rgba(255,255,255,.86);border-radius:28px;padding:22px;margin:18px 0;box-shadow:inset 0 2px 4px rgba(255,255,255,.95),0 22px 50px rgba(8,77,73,.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)} .preview-title{text-align:center}.preview-title img{width:min(240px,72%);border-radius:24px}.preview-title h1{margin:12px 0 6px} .contract-preview-shell h2{text-align:center;margin:4px 0 20px} .preview-opening{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(7,84,80,.12)} .preview-opening:last-child{border-bottom:0}.preview-opening h3{margin:0 0 8px}.preview-opening p{margin:0 0 10px;line-height:1.45} .preview-window-image{width:100%;max-height:150px;object-fit:contain;border-radius:16px;background:rgba(255,255,255,.5)} .preview-photo-link{font-weight:800;color:#086d6b} .preview-location-photo{margin:0 0 24px}.preview-location-photo figcaption{font-weight:800;margin:0 0 10px;text-align:center} .preview-location-photo img{display:block;width:100%;max-height:520px;object-fit:contain;border-radius:22px;background:#fff} .preview-photo-missing{padding:16px;border-radius:18px;background:rgba(255,255,255,.45);margin:0 0 12px;text-align:center} .preview-signatures{text-align:center}.preview-bottom-close{display:flex;margin:24px auto 50px} @media(max-width:560px){.preview-opening{grid-template-columns:1fr;text-align:center}.preview-window-image{max-width:230px;margin:0 auto}.contract-preview-overlay{padding-left:8px;padding-right:8px}#app .view-contract-pill{justify-self:center!important;margin-left:auto!important;margin-right:auto!important}} /* Match CRM typography and prevent contract actions from shrinking side by side. */ #app .contract-action{ display:flex!important;flex-direction:column!important;align-items:center!important; gap:18px!important;width:100%!important;max-width:520px!important; margin:32px auto 64px!important;padding:0 16px!important; } #app .contract-action #reviewContractButton, #app .contract-action #generateContractButton{ display:flex!important;align-items:center!important;justify-content:center!important; flex:0 0 auto!important;width:100%!important;max-width:100%!important;min-width:0!important; height:auto!important;min-height:56px!important;margin:0!important;padding:16px 22px!important; box-sizing:border-box!important;white-space:normal!important;overflow-wrap:anywhere!important; line-height:1.35!important;letter-spacing:normal!important;text-transform:none!important; font-family:'Trebuchet MS',Arial,sans-serif!important;font-size:20px!important; text-align:center!important;position:relative!important;left:auto!important;right:auto!important; transform:none!important; } #app .contract-action #reviewContractButton{font-size:16px!important;min-height:48px!important;padding:13px 20px!important} #app .contract-action #generateContractButton{min-height:64px!important} /* Preserve the existing typography inside the centered brand glass pane. */ .logo-liquid-wrap,.logo-liquid-wrap .brand-sales{font-family:'Trebuchet MS',Trebuchet,Arial,sans-serif!important} /* Keep complete words and readable amounts when a price row is narrow. */ .price-summary .price-line{display:flex!important;flex-wrap:wrap!important;gap:8px 20px!important} .price-summary .price-line span{flex:1 1 12ch!important;min-width:min-content!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important} .price-summary .price-line strong{flex:0 0 auto!important;margin-left:auto!important} @media(max-width:600px){.price-summary .price-line span{flex-basis:100%!important}.price-summary .price-line strong{max-width:100%!important}} /* Sold jobs and in-contract addenda: matching liquid glass and soft shadow. */ .sold-jobs-pill,.addendum-pill{display:block;width:max-content;max-width:100%;margin:22px auto;padding:16px 32px;border:1px solid rgba(255,255,255,.94);border-radius:999px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(216,255,251,.65) 35%,rgba(97,219,207,.36) 70%,rgba(255,255,255,.72));color:#075b5a;font-family:"Trebuchet MS",sans-serif;font-size:19px;font-weight:800;line-height:1.3;backdrop-filter:blur(24px) saturate(190%);box-shadow:inset 0 4px 7px #fff,inset 0 -5px 10px rgba(10,105,100,.14),0 18px 30px rgba(7,76,73,.22),0 35px 60px rgba(7,76,73,.19);cursor:pointer} .sold-jobs-pill:focus-visible,.addendum-pill:focus-visible{outline:3px solid #075b5a;outline-offset:5px} #soldJobsPanel[hidden]{display:none!important} #soldJobsPanel h3{text-align:center;color:#075b5a} .review-toolbar .addendum-pill{margin:6px 0;font-size:17px;padding:12px 25px;flex-shrink:0} .sales-addendum-overlay{z-index:10000;position:fixed;inset:0;overflow:auto;background:rgba(5,47,47,.4);padding:24px 12px;backdrop-filter:blur(12px)} .sales-addendum-overlay .contract-preview-shell{max-width:900px;margin:auto;padding:28px;border-radius:34px;background:linear-gradient(145deg,#edfffc,#bcece6);box-shadow:0 30px 80px rgba(0,49,46,.3)} .sales-addendum-overlay fieldset{min-width:0;border:0;padding:12px 0;margin:10px 0 25px} .sales-addendum-overlay legend{font-weight:800} .sales-addendum-overlay label{display:block;margin:14px 0} .sales-addendum-overlay .signature-consent{display:flex} .sales-addendum-overlay textarea{width:100%;resize:vertical} .sales-addendum-overlay .sig{width:100%;touch-action:none;background:rgba(255,255,255,.8)} .sales-addendum-overlay .contract-row{flex-wrap:wrap;gap:10px} @media(max-width:600px){.sales-addendum-overlay .contract-preview-shell{padding:22px 16px}.review-toolbar{flex-wrap:wrap}.sold-jobs-pill,.addendum-pill{font-size:17px;padding:14px 26px}} #opening{scroll-margin-top:24px}.price-summary label{display:block;font-size:1rem;margin:16px 0}.price-summary select,.price-summary input{width:100%;box-sizing:border-box}.row p{line-height:1.65;overflow-wrap:anywhere}#openingSaveStatus{font-size:1rem;color:#075c60}