/* Elysium Genesis: Machine Reveal + Share panel. Page must define --bg --accent --accent-glow --muted --text --line-2 --mono --display. */
.dia{display:inline-block;width:.55em;height:.55em;background:currentColor;transform:rotate(45deg);margin-right:.6em;vertical-align:.05em}
.sr{--c:#52ffb8;--c2:#52ffb8;--g:rgba(82,255,184,.4);display:flex;flex-direction:column;gap:22px;margin-top:6px}
.sr-prism{--c:#b48cff;--c2:#6fe7ff;--g:rgba(180,140,255,.45)}
.sr-apex{--c:#ffd36b;--c2:#fff1b8;--g:rgba(255,211,107,.5)}

/* headline: access first */
.sr-hd{display:flex;flex-direction:column;gap:8px;text-align:center;align-items:center}
.sr-kick{font-size:12px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}
.sr-h{font-family:var(--display);font-weight:700;font-size:clamp(26px,6.2vw,54px);line-height:1.05;letter-spacing:.02em;color:var(--accent);text-shadow:0 0 28px var(--accent-glow);text-transform:uppercase;text-wrap:balance}
.sr-appr .sr-h{text-shadow:0 0 18px var(--accent-glow),0 0 60px var(--accent-glow)}
.sr-sub{font-size:clamp(12px,2.8vw,14px);letter-spacing:.1em;color:#b9c7c1;max-width:62ch;text-wrap:balance}
.sr-glitch{animation:srg .45s steps(2) 1}
@keyframes srg{0%{transform:translate(0)}20%{transform:translate(-5px,1px);filter:hue-rotate(40deg)}40%{transform:translate(5px,-2px)}60%{transform:translate(-2px,2px);filter:none}100%{transform:none}}

/* card */
.sr-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);border:2px solid transparent;
  background:linear-gradient(#030605,#030605) padding-box,linear-gradient(135deg,var(--c),var(--c2),var(--c)) border-box;
  box-shadow:0 0 42px var(--g),inset 0 0 40px rgba(0,0,0,.6);overflow:hidden}
.sr-card::after{content:"";position:absolute;inset:0;background:var(--c);opacity:0;pointer-events:none;mix-blend-mode:screen}
.sr-flash::after{animation:srflash .7s ease-out 1}
@keyframes srflash{0%{opacity:.5}100%{opacity:0}}
.sr-art{position:relative;aspect-ratio:1/1;width:100%;overflow:hidden;background:#020403}
.sr-art img{width:100%;height:100%;object-fit:cover;display:block;opacity:0}
.sr-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(3,6,5,.85));pointer-events:none}
.sr-tint{position:absolute;inset:0;mix-blend-mode:overlay;background:var(--c);opacity:0;pointer-events:none}
.sr-prism .sr-tint{opacity:.16}.sr-apex .sr-tint{opacity:.2}
.sr-scan{position:absolute;left:0;right:0;top:0;height:3px;background:var(--c);box-shadow:0 0 18px 6px var(--g);z-index:2;opacity:0}
.sr-ring{position:absolute;left:50%;top:46%;width:30%;aspect-ratio:1;border:2px solid var(--c);border-radius:50%;transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;z-index:2}
.sr-pulse .sr-ring{animation:srring 1.4s ease-out 1}
@keyframes srring{0%{opacity:.9;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.4)}}
.sr-sheen{position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.0) 44%,var(--c2) 50%,rgba(255,255,255,0) 56%,transparent 60%);opacity:0;mix-blend-mode:overlay;pointer-events:none}
.sr-prism .sr-card.sr-live .sr-sheen,.sr-apex .sr-card.sr-live .sr-sheen{opacity:.45;animation:srsheen 5s linear infinite}
@keyframes srsheen{0%{transform:translateX(-45%)}100%{transform:translateX(45%)}}
.sr-apex .sr-card.sr-live{animation:srapex 3.2s ease-in-out infinite}
@keyframes srapex{50%{box-shadow:0 0 70px var(--g),inset 0 0 40px rgba(0,0,0,.6)}}

.sr-info{padding:18px clamp(14px,3vw,24px) 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.sr-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.sr-id{font:700 clamp(28px,7vw,44px) var(--display);color:var(--c);text-shadow:0 0 20px var(--g);letter-spacing:.03em;font-variant-numeric:tabular-nums}
.sr-kv{display:flex;flex-direction:column;gap:3px;font-size:13px}
.sr-kv span{color:var(--muted);letter-spacing:.14em;font-size:11px}.sr-kv b{font:700 22px var(--mono);color:var(--text);font-variant-numeric:tabular-nums}
.sr-bar{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:4px}
.sr-bar i{height:8px;background:#0d1a14;border:1px solid #17291f}.sr-bar i.on{background:var(--c);border-color:var(--c);box-shadow:0 0 8px var(--g)}
.sr-fp{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.14em;color:var(--muted)}
.sr-wave{display:flex;align-items:center;gap:3px;height:34px}
.sr-wave i{flex:1;background:var(--c);opacity:.85;border-radius:1px;transform-origin:center}
/* class comes last and is the star of the card */
.sr-class{display:flex;flex-direction:column;gap:4px;padding:14px 14px 14px 16px;border-left:3px solid var(--c);background:linear-gradient(90deg,rgba(255,255,255,.04),transparent)}
.sr-class .lab{font-size:11px;letter-spacing:.2em;color:var(--muted)}
.sr-class .nm{font:700 clamp(26px,6.5vw,38px) var(--display);letter-spacing:.04em;color:var(--c);text-shadow:0 0 22px var(--g);line-height:1.05}
.sr-prism .sr-class .nm,.sr-apex .sr-class .nm{background:linear-gradient(90deg,var(--c),var(--c2),var(--c));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 14px var(--g))}
.sr-class .cw{font-size:11.5px;letter-spacing:.12em;color:#9fb3aa}
.sr-class .tag{font-size:13px;color:#b9c7c1;line-height:1.5}
.sr-status{align-self:flex-start;font:700 13px var(--mono);letter-spacing:.14em;padding:7px 12px;border:1px solid var(--accent);color:var(--accent);text-transform:uppercase}
.sr-status.pv{border-color:#33473e;color:#9fb3aa}
.sr-fine{font-size:11.5px;color:var(--muted);line-height:1.6;max-width:64ch}

.sr-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px}
.sr-strip .btn{min-height:52px;text-align:center}
.btn.solid2{border-width:2px;background:rgba(82,255,184,.1);box-shadow:0 0 22px var(--accent-glow)}
.btn.solid{background:var(--accent);color:var(--bg)}
.btn.solid:hover:not(:disabled),.btn.solid:focus-visible{background:#8dffd2;color:var(--bg)}
.btn.solid:disabled{opacity:.5}
.btn.alt{border-color:#33473e;color:#9fb3aa}.btn.alt:hover:not(:disabled),.btn.alt:focus-visible{background:#9fb3aa;color:var(--bg);box-shadow:none}

/* share */
.sr-primary{display:flex;flex-direction:column;gap:10px}
.sr-big{width:100%;min-height:68px;font-size:clamp(15px,3.9vw,19px);letter-spacing:.14em;box-shadow:0 0 30px var(--accent-glow);animation:srpulse 2.4s ease-in-out infinite}
.sr-big:disabled{animation:none;box-shadow:none}
@keyframes srpulse{50%{box-shadow:0 0 54px var(--accent-glow)}}
.sr-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px}
.sr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sr-grid .btn{min-height:56px;font-size:13px;padding-inline:10px;text-align:center}
.sr-minor{margin-top:-10px;text-align:center}
.sr-lnk{background:none;border:0;color:var(--muted);font:500 12px var(--mono);letter-spacing:.08em;text-decoration:underline;cursor:pointer;padding:10px}
.sr-lnk:hover{color:var(--accent)}
.sr-share{border:1px solid var(--line-2);padding:clamp(14px,3vw,22px);display:flex;flex-direction:column;gap:14px;background:rgba(2,4,3,.5)}
.sr-share h3{font:700 clamp(17px,3.6vw,22px) var(--display);letter-spacing:.04em;color:var(--accent);text-transform:uppercase}
.sr-sub2{color:#b9c7c1;font-size:14px}
.sr-steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:10px}
.sr-steps li{border:1px solid var(--line-2);padding:12px;display:flex;flex-direction:column;gap:4px;background:rgba(0,0,0,.3)}
.sr-steps b{color:var(--accent);font-size:12px;letter-spacing:.18em}.sr-steps span{font-size:12.5px;color:#a9b8b1}
.sr-native .sr-steps{display:none}
.sr-tabs{display:flex;flex-wrap:wrap;gap:8px}
.sr-tab{background:transparent;border:1px solid #33473e;color:#9fb3aa;font:700 12px var(--mono);letter-spacing:.1em;padding:12px;min-height:44px;cursor:pointer}
.sr-tab.on{border-color:var(--accent);color:var(--accent);box-shadow:0 0 18px var(--accent-glow)}
.sr-share textarea{width:100%;min-height:210px;background:#020403;border:1px solid var(--line-2);color:var(--text);font:500 13px/1.5 var(--mono);padding:12px;resize:vertical;outline:none}
.sr-share textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(82,255,184,.12)}
.sr-how{font-size:12px;color:var(--muted);letter-spacing:.04em}
.sr-fb{border:1px dashed var(--accent);padding:14px;display:flex;flex-direction:column;gap:10px;background:rgba(82,255,184,.04)}
.sr-fb[hidden]{display:none}
.sr-fbt{font:700 12px var(--mono);letter-spacing:.14em;color:var(--accent)}
.sr-fb ol{padding-left:20px;font-size:13px;color:#b9c7c1;display:flex;flex-direction:column;gap:4px}
.sr-quote-note{font-size:11px;letter-spacing:.06em;color:var(--muted);line-height:1.6}
.sr-msg{min-height:1.4em;font-size:12.5px;line-height:1.5;color:var(--accent)}

@media (min-width:760px){.sr-card{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}.sr-art{height:100%;aspect-ratio:auto;min-height:420px}.sr-info{justify-content:center}}
@media (max-width:759px){.sr-grid{grid-template-columns:1fr}.sr-grid .btn{min-height:60px;font-size:14px}.sr-tab{flex:1 1 45%}}
@media (prefers-reduced-motion:reduce){.sr-big,.sr-glitch,.sr-flash::after,.sr-pulse .sr-ring,.sr-sheen{animation:none!important}}