.safari-mini { position: fixed; z-index: 60; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); left: 10px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; width: min(calc(100% - 20px), 440px); margin: auto; padding: 14px 40px 14px 14px; border: 1px solid rgba(103,159,255,.26); border-radius: 20px; background: rgba(22,27,37,.95); box-shadow: 0 22px 70px rgba(0,0,0,.58); backdrop-filter: blur(22px); opacity: 0; transform: translateY(20px); transition: opacity .22s ease, transform .22s ease; }
.safari-mini.is-visible { opacity: 1; transform: translateY(0); }.safari-mini__close { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; font-size: 16px; }.safari-icon { display: grid; place-items: center; width: 41px; height: 41px; border: 1px solid rgba(71,144,255,.25); border-radius: 13px; color: #78b0ff; background: rgba(54,120,225,.12); font-size: 20px; }.safari-mini__copy { min-width: 0; }.safari-mini__copy strong { font-size: 11px; }.safari-mini__copy p { margin: 3px 0 0; color: #8c929e; font-size: 9px; line-height: 1.35; }.safari-mini__actions { display: flex; align-items: center; flex-direction: column; gap: 3px; }.safari-button, .text-button { border: 0; cursor: pointer; font-weight: 700; }.safari-button { min-height: 31px; padding: 7px 10px; border-radius: 9px; color: #fff; background: #3275dd; font-size: 9px; }.text-button { padding: 4px; color: #7b9fd6; background: transparent; font-size: 8px; }
.safari-full { position: fixed; z-index: 70; inset: 0; display: grid; place-items: end center; padding: 16px; opacity: 0; transition: opacity .22s ease; }.safari-full.is-visible { opacity: 1; }.safari-full__backdrop { position: absolute; inset: 0; background: rgba(3,5,9,.82); backdrop-filter: blur(14px); }.safari-full__panel { position: relative; width: min(100%, 410px); padding: 28px 22px calc(22px + env(safe-area-inset-bottom)); border: 1px solid rgba(114,163,240,.17); border-radius: 28px; outline: none; background: linear-gradient(155deg, #202631, #101319 66%); box-shadow: 0 30px 100px rgba(0,0,0,.72); text-align: center; transform: translateY(24px) scale(.98); transition: transform .24s ease; }.is-visible .safari-full__panel { transform: none; }.safari-full__close { position: absolute; top: 15px; right: 15px; }.safari-compass { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 15px; border: 1px solid rgba(100,159,255,.22); border-radius: 18px; color: #84b5ff; background: radial-gradient(circle, rgba(63,125,228,.2), rgba(63,125,228,.06)); box-shadow: 0 0 36px rgba(59,121,218,.12); font-size: 25px; }.safari-full__panel h2 { margin: 7px 0 8px; font-size: 27px; letter-spacing: -.035em; }.safari-full__panel > p:not(.section-kicker):not(.copy-feedback) { margin: 0 auto; color: #959ca8; font-size: 11px; line-height: 1.55; }
.guide-steps { display: grid; gap: 8px; margin: 22px 0; padding: 0; list-style: none; text-align: start; }.guide-steps li { display: flex; align-items: center; gap: 12px; min-height: 57px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.065); border-radius: 14px; background: rgba(5,7,11,.46); }.guide-steps li > span { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 9px; color: #7cadf6; background: rgba(68,127,219,.12); font-size: 10px; font-weight: 800; }.guide-steps strong { display: block; color: #d5d9e0; font-size: 10px; }.guide-steps p { margin: 3px 0 0; color: #717985; font-size: 9px; }.safari-full .primary-button { background: linear-gradient(135deg, #4287ed, #2453a9); box-shadow: 0 12px 28px rgba(35,87,169,.26); }.secondary-button { margin-top: 9px; border: 1px solid rgba(255,255,255,.09); color: #c7ced8; background: rgba(255,255,255,.055); }.copy-feedback { min-height: 14px; margin: 8px 0 0; color: #82b2f7; font-size: 9px; }
[dir="rtl"] .safari-mini__close, [dir="rtl"] .safari-full__close { right: auto; left: 7px; }[dir="rtl"] .safari-full__close { left: 15px; }
@media (min-width: 600px) { .safari-full { place-items: center; } }
@media (max-width: 370px) { .safari-mini { grid-template-columns: auto 1fr; }.safari-mini__actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }.safari-full__panel { padding-inline: 18px; } }
@media (prefers-reduced-motion: reduce) { .safari-mini, .safari-full, .safari-full__panel { transition-duration: .01ms !important; } }