/* SGL App */
:root { --sgl-app-primary: #2D0C69; --sgl-app-accent: #E2B739; }

/* Hide "get the app" links when already inside the app */
.sgl-app-standalone .sgl-app-hide-in-app { display: none !important; }

/* Footer bar + inline link */
.sgl-app-footer-bar { background: var(--sgl-app-primary); text-align: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.sgl-app-footer-bar a, .sgl-app-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; }
.sgl-app-footer-bar a { color: #fff; }
.sgl-app-footer-bar a svg { color: var(--sgl-app-accent); }
.sgl-app-footer-bar a:hover span { text-decoration: underline; }

/* Install banner */
.sgl-app-banner { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 99999;
  display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 6px 24px rgba(20, 10, 50, .22); font-size: 14px; line-height: 1.25; }
.sgl-app-banner img { border-radius: 10px; flex: none; }
.sgl-app-banner-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sgl-app-banner-txt strong { color: #1a1a2e; }
.sgl-app-banner-txt span { color: #666; font-size: 12px; }
.sgl-app-banner-go { background: var(--sgl-app-primary); color: #fff !important; text-decoration: none; font-weight: 700;
  border-radius: 999px; padding: 8px 18px; }
.sgl-app-banner-x { background: none; border: 0; font-size: 22px; line-height: 1; color: #888; padding: 0 4px; cursor: pointer; }

/* Install page */
.sgl-app-install { max-width: 560px; margin: 0 auto; color: #1a1a2e; }
.sgl-app-install h2, .sgl-app-install h3 { color: var(--sgl-app-primary); }
.sgl-app-hero { display: flex; gap: 18px; align-items: center; margin-bottom: 24px; }
.sgl-app-hero h2 { margin: 0 0 6px; font-size: 1.5rem; }
.sgl-app-hero p { margin: 0; color: #555; }
.sgl-app-hero-icon { width: 96px; height: 96px; border-radius: 22px; flex: none; box-shadow: 0 4px 16px rgba(45, 12, 105, .18); }

.sgl-app-panel { display: none; background: #f7f5fc; border: 1px solid #e6e0f5; border-radius: 16px; padding: 22px; margin-bottom: 16px; }
.sgl-app-panel h3 { margin: 0 0 14px; font-size: 1.15rem; }
.sgl-app-panel p:last-child { margin-bottom: 0; }
.sgl-app-install[data-state="installed"] [data-for="installed"],
.sgl-app-install[data-state="prompt"] [data-for="prompt"],
.sgl-app-install[data-state="android"] [data-for="android"],
.sgl-app-install[data-state="ios"] [data-for="ios"],
.sgl-app-install[data-state="inapp"] [data-for="inapp"],
.sgl-app-install[data-state="desktop"] [data-for="desktop"] { display: block; }
.sgl-app-install.sgl-is-android:not([data-state="installed"]) [data-for="android-apk"] { display: block; background: none; border: 0; padding: 0 4px; }
.sgl-app-install[data-state="loading"] .sgl-app-panel { display: none; }

.sgl-app-steps { list-style: none; margin: 0; padding: 0; }
.sgl-app-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-top: 1px solid #e6e0f5; }
.sgl-app-steps li:first-child { border-top: 0; padding-top: 0; }
.sgl-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sgl-app-primary); color: #fff;
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.sgl-ico { width: 22px; height: 22px; vertical-align: -5px; color: #007aff; margin: 0 2px; }
.sgl-is-android .sgl-ico { color: #444; }

.sgl-app-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  background: var(--sgl-app-primary); color: #fff; border: 0; border-radius: 999px; padding: 16px 24px;
  font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.sgl-app-btn:hover { filter: brightness(1.15); }
.sgl-app-btn svg { color: var(--sgl-app-accent); }
.sgl-app-btn-outline { background: transparent; color: var(--sgl-app-primary); border: 2px solid var(--sgl-app-primary); }
.sgl-app-small { font-size: .9em; color: #666; }
.sgl-app-panel[data-for="prompt"] .sgl-app-small { text-align: center; margin: 12px 0 0; }
.sgl-app-url { font-size: 1.25rem; font-weight: 700; color: var(--sgl-app-primary); word-break: break-all; }

.sgl-app-done { width: 52px; height: 52px; border-radius: 50%; background: #1f9d55; color: #fff; font-size: 28px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }

.sgl-app-benefits { list-style: none; margin: 8px 0 0; padding: 0; color: #555; }
.sgl-app-benefits li { padding: 6px 0 6px 28px; position: relative; }
.sgl-app-benefits li::before { content: "★"; position: absolute; left: 4px; color: var(--sgl-app-accent); }

/* Computer view: QR code */
.sgl-app-desktop { display: flex; gap: 28px; align-items: center; }
.sgl-app-qr { flex: none; width: 200px; height: 200px; background: #fff; border-radius: 14px; padding: 8px;
  box-shadow: 0 2px 12px rgba(45, 12, 105, .12); border: 3px solid var(--sgl-app-accent); box-sizing: content-box; }
.sgl-app-qr svg { width: 100%; height: 100%; display: block; }
.sgl-app-url-inline { color: var(--sgl-app-primary); word-break: break-all; }
.sgl-app-desktop-install { display: none; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e6e0f5; }
.sgl-can-install .sgl-app-desktop-install { display: block; }
.sgl-app-desktop-install p { margin: 0; }
.sgl-app-linkbtn { background: none; border: 0; padding: 0; color: var(--sgl-app-primary); font-weight: 700; text-decoration: underline; cursor: pointer; font-size: inherit; }
@media (max-width: 640px) { .sgl-app-desktop { flex-direction: column; text-align: left; } }

/* Bouncing hint pointing at Safari's toolbar (iPhone only) */
.sgl-app-ios-pointer { display: none; }
@media (max-width: 600px) {
  .sgl-app-install[data-state="ios"]:not(.sgl-is-ipad) .sgl-app-ios-pointer {
    display: flex; align-items: center; gap: 6px; position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 9999; background: var(--sgl-app-primary); color: #fff;
    padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25); pointer-events: none;
    animation: sgl-bounce 1.6s ease-in-out 5, sgl-fade .6s ease 8s forwards; }
  .sgl-app-install[data-state="ios"]:not(.sgl-is-ipad) { padding-bottom: 72px; }
  .sgl-app-ios-pointer .sgl-ico { color: var(--sgl-app-accent); }
  .sgl-app-ios-pointer::after { content: ""; position: absolute; bottom: -7px; left: 50%; margin-left: -7px;
    border: 7px solid transparent; border-bottom: 0; border-top-color: var(--sgl-app-primary); }
  .sgl-app-hero { flex-direction: column; text-align: center; }
}
@keyframes sgl-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -8px); } }
@keyframes sgl-fade { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .sgl-app-ios-pointer { animation: sgl-fade .3s ease 8s forwards !important; } }