/* Beattraax — style elementów aplikacji (instalacja, aktualizacje, status). Nie zmienia istniejących klas strony. */
.app-install{display:inline-flex;align-items:center;gap:8px}

.app-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--glow,linear-gradient(120deg,#ff3b6b,#7a5cff));color:#fff;font:inherit;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter .2s,transform .15s}
.app-btn:hover{filter:brightness(1.1)}
.app-btn:active{transform:scale(.98)}
.app-btn.ghost{background:transparent;color:var(--muted,#a09db0);box-shadow:inset 0 0 0 1px var(--line,#272733)}
.app-btn.ghost:hover{color:var(--ink,#f5f2ef);filter:none}

/* baner instalacji – nad playerem, jeśli jest otwarty */
.app-banner{position:fixed;left:50%;bottom:calc(var(--player,0px) + 14px + env(safe-area-inset-bottom,0px));z-index:65;width:min(560px,calc(100% - 24px));display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 14px;align-items:center;padding:14px;background:color-mix(in srgb,var(--panel,#14141c) 94%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line,#272733);border-radius:18px;box-shadow:0 20px 50px -14px rgba(0,0,0,.75);color:var(--ink,#f5f2ef);opacity:0;transform:translate(-50%,16px);pointer-events:none;transition:opacity .3s,transform .3s}
.app-banner.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.app-banner img{width:48px;height:48px;border-radius:12px;grid-row:1}
.app-banner-t{display:grid;gap:2px;min-width:0}
.app-banner-t strong{font-size:.98rem;line-height:1.25}
.app-banner-t span{font-size:.84rem;line-height:1.4;color:var(--muted,#a09db0)}
.app-banner-b{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
@media (max-width:420px){.app-banner-b .app-btn{flex:1}}

/* toast (aktualizacja, status sieci) */
.app-toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);z-index:90;max-width:min(520px,calc(100% - 24px));display:flex;align-items:center;gap:14px;padding:12px 14px 12px 18px;background:var(--panel2,#1b1b26);border:1px solid var(--line,#272733);border-radius:999px;box-shadow:0 14px 40px -12px rgba(0,0,0,.8);color:var(--ink,#f5f2ef);font-size:.9rem;opacity:0;transform:translate(-50%,-14px);pointer-events:none;transition:opacity .25s,transform .25s}
.app-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.app-toast-b{border:0;background:var(--glow,linear-gradient(120deg,#ff3b6b,#7a5cff));color:#fff;font:inherit;font-weight:700;font-size:.85rem;min-height:36px;padding:0 16px;border-radius:999px;cursor:pointer;flex:none}

/* instrukcja dla iOS */
.app-modal{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.65);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.app-modal-box{width:min(380px,100%);padding:26px 22px 22px;text-align:center;background:var(--panel,#14141c);border:1px solid var(--line,#272733);border-radius:20px;color:var(--ink,#f5f2ef)}
.app-modal-box h2{margin:0 0 8px;font-size:1.15rem}
.app-modal-box p{margin:0 0 14px;color:var(--muted,#a09db0);font-size:.94rem}
.app-modal-box svg{width:40px;height:40px;color:var(--accent,#ff3b6b);margin:0 auto 18px;display:block}

/* tryb aplikacji (standalone) */
.app-standalone body{overscroll-behavior-y:none}
.is-offline .app-install{display:none}
@media (prefers-reduced-motion:reduce){.app-banner,.app-toast{transition:none}}