.pwa-tutorial { min-height: 100vh; padding: 28px 16px 190px; background: #f7f6f2; color: #071426; }
.pwa-tutorial * { box-sizing: border-box; }
.pwa-tutorial__shell { width: min(100%, 620px); margin: auto; }
.pwa-tutorial__head small { color: #9b7226; font-weight: 800; letter-spacing: .08em; }
.pwa-tutorial__head h1 { margin: 8px 0 24px; color: #071f3d; font-size: clamp(28px, 7vw, 42px); line-height: 1; letter-spacing: -.045em; }
.sim-card { margin-top: 22px; padding: 18px; border: 1px solid #e2e8f0; border-radius: 28px; background: #fff; box-shadow: 0 18px 54px rgba(7, 20, 38, .08); }
.sim-card h2 { margin: 0 0 16px; color: #071f3d; font-size: 22px; }
.browser-frame, .menu-panel, .permission { padding: 12px; border: 1px solid #e2e8f0; border-radius: 20px; background: #f7f6f2; }
.safari-screen { height: 180px; display: flex; align-items: flex-end; padding: 16px; border-radius: 18px; background: linear-gradient(145deg, #071f3d, #0b2c52); }
.safari-bar, .chrome-bar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 16px; background: rgba(255, 255, 255, .94); color: #5a6578; }
.share-focus { display: grid; place-items: center; width: 70px; height: 70px; border: 2px solid #d7a84b; border-radius: 18px; background: #fff8e8; color: #9b7226; box-shadow: 0 0 30px rgba(215, 168, 75, .2); }
.menu-panel { margin-top: 14px; background: #fff; }
.menu-row { min-height: 48px; margin-top: 8px; padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #e2e8f0; border-radius: 13px; background: #fbfaf7; font-weight: 700; }
.menu-row.gold { border: 2px solid #d7a84b; background: #fff8e8; color: #8c651e; }
.chrome-bar .url { flex: 1; padding: 9px 13px; border-radius: 999px; background: #f7f6f2; color: #5a6578; font-size: 12px; }
.chrome-install { background: #d7a84b; color: #071426; }
.caption { text-align: center; color: #5a6578; font-size: 13px; font-weight: 650; }
.bell-wrap { position: relative; display: flex; justify-content: center; padding: 15px; }
.bell-wrap::before { content: ""; position: absolute; inset: 0; width: 170px; height: 170px; margin: auto; border-radius: 50%; background: rgba(215, 168, 75, .18); filter: blur(28px); }
.bell-wrap svg { position: relative; width: 140px; }
.note-card { padding: 16px; border: 1px solid #ecd8a8; border-radius: 20px; background: #fff8e8; }
.note-card h3 { margin: 0; color: #071f3d; }
.note-card p { margin: 8px 0 0; color: #5a6578; line-height: 1.6; }
.permission { margin-top: 16px; background: #fff; }
.permission-head { display: flex; gap: 12px; align-items: flex-start; }
.cs-logo { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #d7a84b; border-radius: 12px; background: #071f3d; color: #D7A84B; font-size: 11px; font-weight: 900; }
.permission-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.permission-actions button { min-height: 44px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; color: #071426; font-weight: 800; }
.permission-actions .allow { border-color: #d7a84b; background: #d7a84b; }
.notification-status { display: block; min-height: 20px; margin-top: 12px; color: #5a6578; font-size: 12px; line-height: 1.55; }
.pwa-finish-bar { position: fixed; z-index: 940; left: 0; right: 0; bottom: calc(88px + env(safe-area-inset-bottom, 0)); padding: 0 12px; }
.pwa-finish-bar[hidden] { display: none; }
.pwa-finish-bar__inner { width: min(100%, 620px); min-height: 58px; max-height: 70px; margin: auto; padding: 8px; display: flex; align-items: center; gap: 8px; border: 1px solid #e2e8f0; border-radius: 16px; background: rgba(255, 255, 255, .96); box-shadow: 0 16px 44px rgba(7, 20, 38, .14); backdrop-filter: blur(20px); }
.pwa-finish-bar__copy { min-width: 0; flex: 1; }
.pwa-finish-bar__copy strong, .pwa-finish-bar__copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwa-finish-bar__copy strong { color: #071426; font-size: 12px; }
.pwa-finish-bar__copy span { margin-top: 3px; color: #5a6578; font-size: 10px; }
.pwa-finish-bar__action { min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: #d7a84b; color: #071426; font-size: 10px; font-weight: 900; }
.pwa-finish-bar__dismiss { width: 30px; height: 30px; padding: 0; border: 1px solid #e2e8f0; border-radius: 9px; background: #f7f6f2; color: #5a6578; }
[data-floating-chat], .floating-chat, .chat-float, .pwa-tutorial ~ .csx-chat-widget, .bottom-navigation { display: none; }
@media (max-width: 520px) { .pwa-flow-dialog { padding: 14px; } .pwa-flow-dialog__panel { padding: 19px; border-radius: 21px; } }