:root{ --brand:#0487d9; --text:#111; --bg:#fff; --muted:#111; } *{box-sizing:border-box} html,body{ margin:0; padding:0; height:100%; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; } .wrap{ min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px; } .card{ width:100%; max-width:640px; border:1px solid #e5e7eb; border-radius:16px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.06); background:#fff; } .brand{ display:flex; align-items:center; gap:12px; margin-bottom:8px; } .brand img{ width:100px; height:100px; border-radius: 50%; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); } .brand h1{ font-size:28px; margin:0; text-align: center; } .muted{ color:var(--muted); font-size:14px; margin:30px 0 16px; } .cta{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:16px 0 6px; } button.install{ appearance:none; border:0; cursor:pointer; background:var(--brand); color:#fff; padding:12px 16px; border-radius:10px; font-size:16px; font-weight:600; display:block; margin:10px auto 0px; } button.install[disabled], #btnInstall.is-disabled, #btnInstall[disabled]{ opacity:.55; cursor:not-allowed; filter:saturate(.6); } .pwa_link{ display:inline-block; padding:12px 16px; border-radius:10px; border:1px solid #e5e7eb; background:#fafafa; text-decoration:none; color:#111; } details{ background:#fafafa; border:1px solid #eee; border-radius:10px; padding:12px 14px; margin-top:10px; } details summary{ cursor:pointer; font-weight:600; } .note{ font-size:13px; color:var(--muted); margin-top:8px; } .ok{ display:inline-block; background:#10b981; color:#fff; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; } .warn{ display:inline-block; background:#f59e0b; color:#111; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700; } .footer{ margin-top:18px; font-size:12px; color:#9ca3af; } ul li, ol li{ text-align:left; } dialog{ width:min(640px, 92vw); border:none; border-radius:12px; padding:16px; } dialog::backdrop{ background:var(--brand); } .hidden{ display:none; } @media (display-mode: standalone){ #installedFlag{display:block;} }