/* =================================================================
   Install button + how-to sheet. Shared by the launcher and the
   admin panel, so it defines its own colours and depends on neither
   stylesheet.
   ================================================================= */

:root{
    --pwa-ease: cubic-bezier(.22,.68,.36,1);
}

/* --------------------------- The button -------------------------- */
.pwa-install{
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 16px;
    font:inherit; font-size:13px; font-weight:650; letter-spacing:.01em;
    color:#0a0e1c; cursor:pointer;
    background:linear-gradient(180deg,#eef1ff,#bcc6f7);
    border:0; border-radius:999px;
    box-shadow:0 10px 26px -14px rgba(148,163,255,.95),
               0 1px 0 rgba(255,255,255,.75) inset;
    transition:transform .18s var(--pwa-ease), box-shadow .18s, opacity .18s;
    -webkit-tap-highlight-color:transparent;
}
.pwa-install:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(148,163,255,1); }
.pwa-install:active{ transform:translateY(0) scale(.985); }
.pwa-install:focus-visible{ outline:2px solid #a5b4fc; outline-offset:3px; }
.pwa-install[hidden]{ display:none; }

.pwa-install__icon{
    width:15px; height:15px; flex:0 0 auto;
    fill:none; stroke:currentColor; stroke-width:2.1;
    stroke-linecap:round; stroke-linejoin:round;
}

/* Floating variant — the public launcher */
.pwa-install--floating{
    position:fixed; top:14px; right:14px; z-index:40;
    animation:pwaPop .5s var(--pwa-ease) both .4s;
}

/* Inline variant — admin top bar */
.pwa-install--inline{
    padding:7.5px 13px; font-size:12.5px;
}

@keyframes pwaPop{
    from{ opacity:0; transform:translateY(-8px) scale(.96); }
    to  { opacity:1; transform:none; }
}

/* ------------------------- The how-to sheet ---------------------- */
.pwa-sheet{
    position:fixed; inset:0; z-index:90;
    display:flex; align-items:center; justify-content:center;
    padding:20px;
}
.pwa-sheet[hidden]{ display:none; }

.pwa-sheet__scrim{
    position:absolute; inset:0;
    background:rgba(4,7,16,.72);
    backdrop-filter:blur(4px);
    animation:pwaFade .25s var(--pwa-ease) both;
}

.pwa-sheet__card{
    position:relative; z-index:1;
    width:100%; max-width:430px;
    max-height:calc(100vh - 40px); overflow-y:auto;
    padding:26px 26px 22px;
    color:#eaeefb;
    background:linear-gradient(180deg,#141d36,#0c1122);
    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;
    box-shadow:0 40px 90px -40px #000, 0 1px 0 rgba(255,255,255,.1) inset;
    animation:pwaRise .3s var(--pwa-ease) both;
    -webkit-overflow-scrolling:touch;
}

.pwa-sheet__x{
    position:absolute; top:12px; right:12px;
    width:32px; height:32px; display:grid; place-items:center;
    font-size:22px; line-height:1; color:#9aa6c7;
    background:rgba(255,255,255,.06); border:0; border-radius:50%;
    cursor:pointer; transition:background .18s, color .18s;
}
.pwa-sheet__x:hover{ background:rgba(255,255,255,.14); color:#fff; }

.pwa-sheet__head{ display:flex; align-items:center; gap:14px; margin-bottom:20px; padding-right:34px; }
.pwa-sheet__icon{
    width:52px; height:52px; flex:0 0 auto; border-radius:14px;
    box-shadow:0 10px 24px -12px rgba(99,102,241,.95);
}
.pwa-sheet__title{ margin:0; font-size:17px; font-weight:750; letter-spacing:-.015em; line-height:1.3; }
.pwa-sheet__sub{ margin:4px 0 0; font-size:13px; color:#9aa6c7; line-height:1.5; }

.pwa-steps{ counter-reset:pwa; list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.pwa-steps li{
    position:relative; padding-left:38px;
    font-size:13.8px; line-height:1.6; color:#c9d2ea;
}
.pwa-steps li::before{
    counter-increment:pwa; content:counter(pwa);
    position:absolute; left:0; top:1px;
    width:26px; height:26px; display:grid; place-items:center;
    border-radius:50%; font-size:12px; font-weight:750; color:#fff;
    background:linear-gradient(160deg,#818cf8,#4f46e5);
    box-shadow:0 6px 14px -8px rgba(99,102,241,1);
}
.pwa-steps strong{ color:#fff; font-weight:650; }
.pwa-glyph{
    display:inline-block; padding:1px 7px; margin:0 1px;
    font-size:12px; color:#fff;
    background:rgba(255,255,255,.12); border-radius:6px;
}

.pwa-sheet__note{
    margin:18px 0 0; padding-top:15px;
    font-size:12.2px; line-height:1.6; color:#6a7595;
    border-top:1px solid rgba(255,255,255,.09);
}
.pwa-sheet__note[hidden]{ display:none; }

body.pwa-locked{ overflow:hidden; }

@keyframes pwaFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pwaRise{
    from{ opacity:0; transform:translateY(14px) scale(.97); }
    to  { opacity:1; transform:none; }
}

/* ------------------- Installed (standalone) tweaks ---------------- */
/* Respect the notch / rounded corners once there is no browser UI. */
@media all and (display-mode: standalone){
    body{ padding-top:env(safe-area-inset-top); }
    .hero{ padding-top:calc(clamp(30px,6vw,60px) + env(safe-area-inset-top)); }
    .topbar{ padding-top:calc(16px + env(safe-area-inset-top)); }
    .wrap,.content{
        padding-left:max(16px, env(safe-area-inset-left));
        padding-right:max(16px, env(safe-area-inset-right));
        padding-bottom:calc(48px + env(safe-area-inset-bottom));
    }
    .foot,.appfoot{ padding-bottom:calc(28px + env(safe-area-inset-bottom)); }
    /* Nothing to install any more. */
    .pwa-install{ display:none !important; }
}

/* Tight top bars: keep the icon, drop the word. */
@media (max-width:640px){
    .pwa-install--inline .pwa-install__label{ display:none; }
    .pwa-install--inline{ padding:8px 10px; }
}

@media (max-width:560px){
    .pwa-install--floating{ top:10px; right:10px; padding:8px 13px; font-size:12.5px; }
    /* The pill sits over the page, so give the header room for it. */
    .has-install .hero{ padding-top:64px; }
    .pwa-sheet{ align-items:flex-end; padding:0; }
    .pwa-sheet__card{
        max-width:none; border-radius:22px 22px 0 0;
        padding-bottom:calc(24px + env(safe-area-inset-bottom));
        animation:pwaSlideUp .3s var(--pwa-ease) both;
    }
    @keyframes pwaSlideUp{
        from{ opacity:0; transform:translateY(40px); }
        to  { opacity:1; transform:none; }
    }
}

@media (prefers-reduced-motion:reduce){
    .pwa-install,.pwa-sheet__card,.pwa-sheet__scrim{ animation-duration:.01ms !important; }
}