.install-backdrop { position:fixed; inset:0; z-index:80; display:grid; justify-items:center; align-items:center; background:linear-gradient(145deg,#363630,#111110 65%); overflow:auto; padding:max(8px,env(safe-area-inset-top,0px)) 0 0; overscroll-behavior:contain; }
.install-backdrop[hidden] { display:none; }
.install-shell { width:100%; max-width:500px; display:flex; flex-direction:column; max-height:100%; }
.install-brand { display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; padding:8px 24px 16px; flex:0 0 auto; }
.install-brand img { border-radius:10px; }
.install-brand strong { font-size:20px; letter-spacing:-.04em; }
.install-close { margin-left:auto; width:44px; height:44px; flex:0 0 auto; border:1px solid #66665d; border-radius:50%; background:#33332e; color:#fff; font-size:26px; }
.install-sheet { background:#fff; color:#111; border-radius:32px 32px 0 0; width:100%; padding:10px 20px max(12px,env(safe-area-inset-bottom,0px)); overflow:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:16px; min-height:0; }
.install-handle { align-self:center; width:40px; min-height:4px; border-radius:4px; background:#e8e8e8; flex:0 0 auto; }
.install-dots { display:flex; gap:6px; padding:4px 22px; }
.install-dots span { height:4px; flex:1; background:#ededed; border-radius:4px; }
.install-dots span.active { background:#141414; }
.install-content { display:grid; justify-items:center; text-align:center; gap:12px; }
.install-content h2 { font-size:clamp(23px,6.5vw,31px); line-height:1.13; letter-spacing:-.045em; max-width:25ch; margin:0; text-wrap:balance; }
.install-content p { font-size:14px; line-height:1.5; color:#666; max-width:42ch; margin:0; }
.install-intro .install-content h2 { font-size:clamp(24px,7vw,33px); padding-top:6px; }
.install-hero { width:100%; max-width:380px; height:clamp(280px,40dvh,380px); overflow:hidden; mask-image:linear-gradient(#000 85%,transparent); }
.install-hero > img { display:block; width:100%; height:auto; }
.install-photo-preview { mask-image:linear-gradient(#000 70%,transparent 100%); }
.install-shortcut-preview { display:grid; justify-items:center; width:100%; max-width:340px; height:clamp(280px,40dvh,350px); padding:8px 0 12px; background:radial-gradient(ellipse at 50% 65%,#c7efdb80,transparent 67%); mask-image:none; }
.install-shortcut-phone { height:100%; aspect-ratio:190/350; padding:5px; border:1px solid #979d98; border-radius:34px; background:linear-gradient(115deg,#c2c7c4,#191e1b 9%,#0c100d 83%,#808b84 96%,#d1d8d3); box-shadow:0 10px 20px #102d2425,inset 0 0 0 1px #303c34; }
.install-shortcut-screen { height:100%; display:grid; grid-template-rows:auto 1fr auto auto; gap:10px; padding:12px 10px 7px; overflow:hidden; border:2px solid #0b110e; border-radius:28px; color:#fff; background:radial-gradient(ellipse at 100% 0%,#26d08e80,transparent 58%),radial-gradient(ellipse at 0% 100%,#2a795f,transparent 65%),linear-gradient(145deg,#062f29,#152922 65%,#101c1a); }
.install-shortcut-status { display:grid; grid-template-columns:1fr 52px 1fr; gap:5px; align-items:center; }
.install-shortcut-status b { font-size:9px; font-weight:650; text-align:center; }
.install-shortcut-status > i { height:14px; border-radius:12px; background:#070c09; }
.install-shortcut-status svg { width:30px; height:12px; justify-self:center; }
.install-shortcut-platform { font-size:9px; color:#d1e8db; }
.install-shortcut-app { display:grid; justify-items:center; align-content:center; gap:7px; padding-top:12px; }
.install-shortcut-icon { display:grid; place-items:center; width:68px; height:68px; border:1px solid #547967; border-radius:17px; background:#101b15; box-shadow:0 8px 18px #041a1750; }
.install-shortcut-icon img { display:block; width:54px; height:54px; object-fit:contain; }
.install-shortcut-app strong { color:#fff; font-size:11px; letter-spacing:-.02em; font-weight:650; }
.install-shortcut-dock { display:flex; justify-content:space-between; gap:8px; padding:9px; border:1px solid #ffffff26; border-radius:17px; background:#ffffff1a; }
.install-shortcut-dock i { flex:1; aspect-ratio:1; max-width:28px; border:1px solid #ffffff30; border-radius:8px; background:#ffffff20; }
.install-shortcut-home { justify-self:center; width:54px; height:3px; margin-top:1px; border-radius:4px; background:#ffffffd0; }
.install-demo-crop { width:100%; max-width:375px; height:clamp(280px,41dvh,380px); position:relative; overflow:hidden; mask-image:linear-gradient(transparent,#000 14%); }
.install-demo-phone { width:100%; aspect-ratio:375/812; position:absolute; bottom:8px; left:0; padding:7px; border-radius:48px; background:linear-gradient(110deg,#858588,#e4e5e9 9%,#222 12%,#0b0b0b 85%,#b7b8bf 92%,#555); box-shadow:0 7px 15px #0002,inset 0 0 0 1px #b1b1b6; }
.install-demo-screen { position:relative; height:100%; overflow:hidden; border-radius:41px; background:#111; border:4px solid #111; }
.install-cabinet-shot { width:100%; height:100%; object-fit:cover; object-position:bottom; display:block; }
.install-demo-dim { position:absolute; inset:0; background:linear-gradient(#fff 0%,#fffa 20%,#0007 85%); }
.install-phone-sensor { position:absolute; top:8px; left:32%; width:36%; height:13px; background:#111; border-radius:0 0 12px 12px; }
.install-safari-bar { position:absolute; bottom:18px; left:10px; right:10px; display:flex; align-items:center; gap:8px; height:48px; color:#2d2d2d; font-size:17px; }
.install-safari-bar > span { display:grid; place-items:center; flex:0 0 44px; height:44px; background:#efefefe8; border-radius:50%; font-size:30px; }
.install-safari-bar > div { flex:1; display:flex; align-items:center; justify-content:space-between; gap:5px; min-width:0; background:#e7e7e7ed; border-radius:24px; height:44px; padding:0 10px; font-size:16px; }
.install-safari-bar > div > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.install-safari-bar .install-ellipsis { font-size:17px; letter-spacing:1px; }
.install-safari-bar .install-highlight { background:white; box-shadow:0 0 0 8px #ffffff48,0 0 25px 14px #fff9; position:relative; }
.install-safari-menu { position:absolute; right:10px; bottom:78px; width:82%; padding:10px; background:#f7f7fa; border-radius:24px; box-shadow:0 12px 35px #0005; color:#252525; font-size:14px; }
.install-safari-menu > div { display:flex; align-items:center; gap:12px; min-height:47px; padding:8px; border-bottom:1px solid #e2e2e5; }
.install-safari-menu > div:last-child { border-bottom:0; }
.install-safari-menu svg,.install-share-sheet svg { width:21px; height:21px; flex:0 0 auto; }
.install-highlight-row { background:#e3efff; outline:2px solid #5288dd; border-radius:8px; color:#1555ad; }
.install-share-sheet { position:absolute; inset:auto 0 0; background:#f3f3f6; border-radius:26px 26px 0 0; padding:18px 12px 24px; display:grid; gap:12px; color:#222; }
.install-share-brand { display:flex; gap:8px; align-items:center; }
.install-share-brand img { border-radius:9px; width:32px; height:32px; }
.install-share-brand span { display:grid; gap:3px; font-size:15px; }
.install-share-brand small { color:#777; font-size:11px; }
.install-share-circles { display:flex; justify-content:space-around; padding:7px 0; }
.install-share-circles i { width:36px; height:36px; border-radius:10px; background:linear-gradient(140deg,#b3d6fa,#8cbda1); }
.install-share-circles i:nth-child(2) { background:#b4dba9; }
.install-share-circles i:nth-child(3) { background:#c1c6ed; }
.install-share-circles i:nth-child(4) { background:#e8d3ae; }
.install-share-sheet > div:not(.install-share-brand):not(.install-share-circles) { display:flex; justify-content:space-between; align-items:center; gap:6px; padding:13px 10px; background:#fff; border-radius:10px; font-size:14px; }
.install-share-sheet > .install-highlight-row { outline:2px solid #5288dd; color:#1555ad; }
.install-confirm-screen { position:absolute; inset:auto 0 0; min-height:320px; padding:20px 14px 40px; color:#fff; background:#202022; display:flex; flex-direction:column; gap:22px; border-radius:26px 26px 0 0; }
.install-confirm-toolbar { display:flex; gap:8px; align-items:center; justify-content:space-between; font-size:12px; }
.install-confirm-toolbar > span { font-size:20px; color:#ccc; }
.install-confirm-toolbar b { background:#0679e6; color:#fff; border-radius:18px; padding:10px; font-size:12px; box-shadow:0 0 18px #399dff80; }
.install-confirm-brand { display:flex; gap:10px; align-items:center; padding-bottom:12px; border-bottom:1px solid #3b3b3e; }
.install-confirm-brand img { border-radius:12px; width:52px; height:52px; }
.install-confirm-brand > span { display:grid; gap:8px; font-size:16px; }
.install-confirm-brand small { font-size:12px; color:#aaa; }
.install-confirm-setting { display:flex; justify-content:space-between; gap:6px; align-items:center; font-size:13px; }
.install-confirm-setting i { background:#32c759; width:28px; height:16px; border-radius:12px; padding:2px; flex:0 0 auto; }
.install-confirm-setting i:after { content:''; display:block; background:white; width:12px; height:12px; border-radius:50%; margin-left:auto; }
.install-confirm-screen > small { color:#aaa; font-size:12px; line-height:1.5; }
.install-browser-note { padding:10px 12px; background:#f5f5f3; border-radius:12px; }
.install-actions { display:grid; gap:8px; background:white; }
.install-actions .button { min-height:48px; white-space:normal; line-height:1.3; padding:12px 14px; width:100%; border:0; border-radius:14px; font-size:15px; font-weight:650; }
.install-primary { background:linear-gradient(105deg,#3d3d36,#171715); color:#fff; }
.install-primary:disabled { background:#777; color:#fff; cursor:wait; }
.install-secondary { display:flex; gap:8px; }
.install-secondary > .button { flex:1; }
.install-subtle { background:#efefef; color:#555; }
.install-never { background:transparent; color:#707070; min-height:44px; font-size:12px; border:0; border-radius:10px; text-decoration:underline; text-underline-offset:3px; }
.install-backdrop button:focus-visible { outline:3px solid #3d86dc; outline-offset:2px; }
#install-feedback { margin:0; padding:12px; border:1px solid #c44343; border-radius:12px; color:#a62323; font-size:13px; }
#install-feedback[data-tone='info'] { border-color:#e8e8e8; background:#f5f5f3; color:#555; }
@media(min-width:640px) { .install-backdrop { padding:20px; } .install-shell { max-height:calc(100dvh - 40px); } .install-sheet { border-radius:32px; padding:12px 24px 16px; } }
@media(max-height:700px) { .install-sheet { gap:10px; } .install-brand { padding:4px 20px 8px; } .install-hero,.install-demo-crop { height:280px; } .install-content { gap:10px; } .install-content h2 { font-size:23px; } }
@media(prefers-reduced-motion:no-preference) { .install-sheet { animation:install-appear .2s ease-out; } @keyframes install-appear { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } }