.hsback { position:fixed; inset:0; z-index:64; display:flex; justify-content:center;
  overflow:auto; overscroll-behavior:contain;
  padding:16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  padding-top:max(16px, env(safe-area-inset-top));
  background:rgba(8,12,18,.48); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  animation:hsfade .16s ease-out; }
@keyframes hsfade { from { opacity:0; } }

.hscard { --hs1:#5aa9ff; --hs2:#a06bff;
  position:relative; margin:auto; width:min(500px, 100%);
  max-height:min(760px, calc(100vh - 32px));
  max-height:min(760px, calc(100dvh - 32px));
  display:flex; flex-direction:column; overflow:hidden; color:var(--fg);
  border-radius:20px; border:1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background:radial-gradient(620px 260px at 0% -10%, color-mix(in srgb, var(--hs1) 18%, transparent), transparent 66%),
             radial-gradient(560px 280px at 100% 6%, color-mix(in srgb, var(--hs2) 16%, transparent), transparent 64%),
             color-mix(in srgb, var(--bg2) 95%, transparent);
  -webkit-backdrop-filter:blur(26px) saturate(165%); backdrop-filter:blur(26px) saturate(165%);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.09);
  animation:hsin .3s cubic-bezier(.2,.9,.3,1.08); }
@keyframes hsin { from { opacity:0; transform:translateY(16px) scale(.97); } }
.hscard:focus { outline:none; }
.hscard::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:2;
  background:linear-gradient(90deg, transparent, var(--hs1) 24%, var(--hs2) 66%, transparent); opacity:.9; }

@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hscard { --hs1:#1266c9; --hs2:#7a3fe0; } }
:root[data-theme="light"] .hscard { --hs1:#1266c9; --hs2:#7a3fe0; }

.hshead { flex:none; display:flex; align-items:center; gap:13px; padding:17px 16px 14px 18px;
  border-bottom:1px solid color-mix(in srgb, var(--fg) 9%, transparent); }



.hsico { flex:none; position:relative; width:58px; height:82px; }
.hsphone { position:absolute; inset:0; display:grid; place-items:center; border-radius:11px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--fg) 16%, transparent),
                                     color-mix(in srgb, var(--fg) 7%, transparent));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 26%, transparent),
             0 12px 26px -12px rgba(0,0,0,.7); }

.hsphone::before { content:""; position:absolute; inset:5px 3.5px 7px; border-radius:7px;
  background:color-mix(in srgb, #05070b 72%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent); }

.hsphone::after { content:""; position:absolute; left:50%; top:2px; width:14px; height:2px;
  margin-left:-7px; border-radius:2px; background:color-mix(in srgb, var(--fg) 30%, transparent); }
.hsphone img { position:relative; width:34px; height:34px; display:block; border-radius:9px;
  box-shadow:0 6px 16px -6px color-mix(in srgb, var(--hs1) 90%, transparent),
             inset 0 0 0 1px rgba(255,255,255,.12); }
.hsht { flex:1; min-width:0; }
.hsht h3 { margin:0; font:650 17px/1.28 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:-.2px; color:var(--fg); text-wrap:balance; }
.hssub { margin:4px 0 0; font-size:12.5px; line-height:1.45; color:var(--fg3); }

.hsbody { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:14px 18px 4px; }
.hspoints { list-style:none; margin:0; padding:0; }
.hspoints li { display:flex; gap:10px; align-items:flex-start; margin:0 0 10px;
  font-size:13px; line-height:1.5; color:var(--fg2); }
.hspi { flex:none; width:24px; height:24px; display:grid; place-items:center; border-radius:8px;
  font-style:normal; font-size:13px; color:var(--hs1);
  background:color-mix(in srgb, var(--hs1) 13%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hs1) 26%, transparent); }
.hsway { margin:14px 0 8px; font:700 10px/1 system-ui,sans-serif; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--fg3); }
.hsteps { margin:0; padding-left:20px; font-size:13px; line-height:1.55; color:var(--fg2); }
.hsteps li { margin:0 0 7px; }
.hsteps li::marker { color:var(--hs1); font-weight:700; }
.hsteps b { color:var(--fg); }
.hsnote { margin:12px 0 0; padding:9px 12px; border-radius:10px; font-size:12.5px; line-height:1.5;
  color:var(--fg2); background:color-mix(in srgb, var(--hs2) 9%, transparent);
  border-left:2px solid color-mix(in srgb, var(--hs2) 55%, transparent); }



.hsfoot { flex:none; display:flex; gap:10px; align-items:center; justify-content:space-between;
  padding:14px 18px max(16px, env(safe-area-inset-bottom)); }
.hsfl, .hsfr { display:flex; gap:8px; align-items:center; min-width:0; }
.hsfoot button { border:0; border-radius:10px; cursor:pointer; font:600 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif; }
.hsgo { min-height:42px; padding:0 18px; color:#fff;
  background:linear-gradient(180deg, color-mix(in srgb, var(--hs1) 92%, #fff), var(--hs1)) !important;
  box-shadow:0 8px 22px -10px var(--hs1), inset 0 1px 0 rgba(255,255,255,.35); }
.hsgo:hover { filter:brightness(1.06); }
.hsgo:disabled { opacity:.6; cursor:default; }
.hslater { min-height:42px; padding:0 13px; color:var(--fg2); white-space:nowrap;
  background:color-mix(in srgb, var(--fg) 6%, transparent) !important; }
.hslater:hover { color:var(--fg); background:color-mix(in srgb, var(--fg) 11%, transparent) !important; }

.hsnever { min-height:42px; padding:0 4px; color:var(--fg3); font-weight:500 !important;
  background:none !important; text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:3px; transition:color .14s, text-decoration-color .14s; }
.hsnever:hover { color:var(--fg2); text-decoration-color:currentColor; }
.hsfoot button:focus-visible { outline:2px solid var(--hs1); outline-offset:2px; }

@media (max-width:560px) {

  .hsback { align-items:flex-end; padding:0; }
  .hscard { margin:0 0 0; width:100%; border-radius:20px 20px 0 0; max-height:92vh; max-height:92dvh;
    animation:hsup .3s cubic-bezier(.2,.9,.3,1.04); }
  @keyframes hsup { from { transform:translateY(100%); } }
  .hshead { padding:16px 12px 13px 14px; }
  .hsico { width:52px; height:74px; }
  .hsphone img { width:30px; height:30px; }
  .hsht h3 { font-size:16.5px; }
  .hsbody { padding:13px 14px 4px; }


  .hsfoot { flex-direction:column-reverse; align-items:stretch; gap:6px;
            padding:12px 14px max(14px, env(safe-area-inset-bottom)); }
  .hsfr { flex-direction:column-reverse; }
  .hsfl { justify-content:center; }
  .hsgo, .hslater { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hsback, .hscard { animation:none !important; }
}