/* SHARE CARD — the Classical family's one QR popup (APPS/TEMPLATES/share-card).
   Identical in every family app: copy this file unchanged. It carries its own
   colours and its own button styles so no app's global rules can reshape it.
   The card floats in the middle with a wide margin all round, so there is
   always plenty of backdrop to tap to close it. */

.share-dialog{
  --sc-card:#FFFFFF; --sc-ink:#2A2038; --sc-mute:#6B6478; --sc-tint:#FBF7F1; --sc-rule:#EADFC6;
  --sc-accent:#C6811A; --sc-accent-2:#E7A83C; --sc-ok:#2E9A73;
  --sc-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  border:0; padding:0; margin:auto; background:transparent; color:var(--sc-ink);
  width:min(380px, calc(100% - 64px));
  --sc-room:calc(100vh - 2 * max(64px, env(safe-area-inset-top, 0px) + 40px));
  --sc-room-d:calc(100dvh - 2 * max(64px, env(safe-area-inset-top, 0px) + 40px));
  max-height:var(--sc-room); max-height:var(--sc-room-d);
  overflow:visible;
}
[data-theme="dark"] .share-dialog{
  --sc-card:#221E2D; --sc-ink:#EFEAF7; --sc-mute:#A69BBA; --sc-tint:#2A2536; --sc-rule:#3A3346;
  --sc-accent:#F2C35E; --sc-accent-2:#F2C35E; --sc-ok:#5FDCB4;
}
.share-dialog::backdrop{ background:rgba(24,18,30,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.share-dialog[open]{ animation:sc-in .38s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes sc-in{ from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; transform:none; } }
.share-dialog [hidden]{ display:none !important; }
.share-dialog *, .share-dialog *::before, .share-dialog *::after{ box-sizing:border-box; }

.sc-card{ position:relative; max-height:var(--sc-room); max-height:var(--sc-room-d); overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; background:var(--sc-card); border-radius:24px;
  padding:22px 20px 18px; text-align:center; font-family:var(--sc-sans);
  box-shadow:0 2px 6px rgba(0,0,0,.08), 0 24px 64px rgba(0,0,0,.32); }
.sc-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none;
  background:linear-gradient(135deg,#F2C35E,#E07A4F 60%,#B05FD0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }

.sc-x{ all:unset; position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:var(--sc-mute); background:var(--sc-tint); }
.sc-x::before{ display:none; }
.sc-x svg{ width:16px; height:16px; }
.sc-x:focus-visible{ outline:2px solid var(--sc-accent); outline-offset:2px; }

.sc-h{ margin:4px 40px 6px; font:800 21px/1.15 var(--sc-sans); letter-spacing:-.02em; color:var(--sc-ink); }
.sc-sub{ margin:0 0 14px; font-size:14px; line-height:1.45; color:var(--sc-mute); }
.sc-done{ margin:0 0 4px; font:800 14.5px var(--sc-sans); color:var(--sc-ok); }

.sc-steps{ list-style:none; counter-reset:sc; margin:0; padding:0; text-align:left; display:flex; flex-direction:column; gap:10px; }
.sc-steps li{ counter-increment:sc; display:flex; align-items:center; gap:10px; font-size:14px; line-height:1.4; color:var(--sc-ink); }
.sc-steps li::before{ content:counter(sc); flex:0 0 auto; width:21px; height:21px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--sc-accent-2),var(--sc-accent)); color:#fff; font:800 11.5px var(--sc-sans); }
[data-theme="dark"] .sc-steps li::before{ color:#221E2D; }
.sc-ico{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  color:var(--sc-accent); background:var(--sc-tint); border:1.5px solid var(--sc-rule); font:800 15px var(--sc-sans); }
.sc-ico svg{ width:17px; height:17px; }
.sc-note{ display:block; font-style:normal; font-size:12.5px; color:var(--sc-mute); margin-top:2px; }

.sc-safari{ text-align:left; padding:12px 14px; border-radius:14px; background:var(--sc-tint); border:1.5px solid var(--sc-rule); }
.sc-safari-t{ margin:0 0 5px; font:800 14.5px var(--sc-sans); color:var(--sc-ink); }
.sc-safari-b{ margin:0; font-size:13.5px; line-height:1.5; color:var(--sc-mute); }

.sc-div{ display:flex; align-items:center; gap:10px; margin:18px 0 8px; font:800 11.5px/1 var(--sc-sans);
  letter-spacing:.12em; text-transform:uppercase; color:var(--sc-mute); }
.sc-div::before, .sc-div::after{ content:""; flex:1; height:1px; background:var(--sc-rule); }
.sc-div.sc-first{ margin:44px 0 8px; }
.sc-qsub{ margin:0 0 12px; font-size:13.5px; line-height:1.45; color:var(--sc-mute); }
.sc-qr{ width:184px; height:184px; margin:0 auto 10px; padding:10px; border-radius:16px; background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.10); display:grid; place-items:center; color:#777; font-size:13px; }
.sc-qr svg{ width:100%; height:100%; display:block; }
.sc-url{ font:700 14px var(--sc-sans); color:var(--sc-accent); word-break:break-all; margin-bottom:14px; }

.sc-btns{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.sc-btn{ all:unset; box-sizing:border-box; flex:1 1 auto; min-width:120px; text-align:center; cursor:pointer;
  padding:12px 18px; border-radius:999px; font:800 15px/1 var(--sc-sans); color:var(--sc-ink);
  background:var(--sc-card); border:1.5px solid var(--sc-rule); -webkit-tap-highlight-color:transparent;
  transition:transform .25s cubic-bezier(0.34,1.56,0.64,1); }
.sc-btn::before{ display:none; }
.sc-btn:active{ transform:scale(.94); }
.sc-btn:focus-visible{ outline:2px solid var(--sc-accent); outline-offset:2px; }
.sc-btn.sc-fill{ color:#fff; border-color:transparent; background:linear-gradient(140deg,var(--sc-accent-2),var(--sc-accent)); box-shadow:0 4px 14px rgba(198,129,26,.32); }
[data-theme="dark"] .sc-btn.sc-fill{ color:#221E2D; }
.sc-install{ width:100%; margin:0 0 4px; }