/* ShareCardLink · card cover photo (behind the logo) + owner editor */
html body .card#home.scl-cv{position:relative;padding-top:0 !important}
html body .card#home.scl-cv > .scl-cover{position:absolute;left:0;right:0;top:0;height:150px;z-index:0;overflow:hidden;border-radius:0 0 28px 28px;pointer-events:none;
  background:var(--t-accent-grad, linear-gradient(120deg,#ff7a45,#ff4d6d 50%,#a855f7));background-size:200% 200%;animation:scl-cv-bg 14s ease-in-out infinite}
html body .card#home.scl-cv > .scl-cover::before{content:"";position:absolute;inset:-20px;background-image:radial-gradient(rgba(255,255,255,.28) 2px,transparent 2.6px);background-size:26px 26px;animation:scl-cv-dots 22s linear infinite}
html body .card#home.scl-cv > .scl-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.28))}
html body .card#home.scl-cv > .scl-cover .scl-cover-fx{position:absolute;inset:0;background:radial-gradient(160px 90px at 20% 30%,rgba(255,255,255,.35),transparent 70%),radial-gradient(180px 100px at 85% 70%,rgba(255,255,255,.18),transparent 70%);animation:scl-cv-glow 9s ease-in-out infinite alternate}
/* ===== with a photo: styles the owner swipes through (fx-pink default … fx-none) =====
   photo (vivid, slow Ken-Burns) -> colour blend (overlay) -> moving aurora -> dots + shine -> twinkling stars -> dark base for the logo.
   The same layers are used in the "Adjust your cover" preview (.scv-fxp) so the owner sees the real result. */
.scl-cover,.scv-frame,.scv-chip{--g:linear-gradient(120deg,#ff6a2b,#ff2d75 42%,#c026ff 72%,#5b4bff);--a1:rgba(255,106,43,.85);--a2:rgba(255,45,117,.8);--a3:rgba(168,38,255,.85);--gl1:rgba(255,45,117,.55);--gl2:rgba(124,58,255,.7);--st:#ff7ad9;--pf:saturate(1.45) contrast(1.12) brightness(1.04)}
.fx-ocean{--g:linear-gradient(120deg,#00e0ff,#0a84ff 42%,#3a3aff 72%,#8a2cff) !important;--a1:rgba(0,220,255,.85) !important;--a2:rgba(10,132,255,.8) !important;--a3:rgba(100,60,255,.85) !important;--gl1:rgba(0,170,255,.55) !important;--gl2:rgba(70,60,255,.7) !important;--st:#7fe3ff !important}
.fx-gold{--g:linear-gradient(120deg,#fff1a8,#ffc400 38%,#ff9500 68%,#d9480f) !important;--a1:rgba(255,236,140,.8) !important;--a2:rgba(255,190,0,.8) !important;--a3:rgba(255,120,0,.8) !important;--gl1:rgba(255,180,0,.55) !important;--gl2:rgba(255,110,0,.6) !important;--st:#ffe08a !important}
.fx-fire{--g:linear-gradient(120deg,#ffd000,#ff6a00 38%,#ff1e3c 68%,#b3005a) !important;--a1:rgba(255,208,0,.8) !important;--a2:rgba(255,90,0,.85) !important;--a3:rgba(230,0,60,.85) !important;--gl1:rgba(255,70,0,.6) !important;--gl2:rgba(200,0,60,.6) !important;--st:#ffb37a !important}
.fx-royal{--g:linear-gradient(120deg,#4a00e0,#8e2de2 35%,#c026ff 62%,#ff2dbe) !important;--a1:rgba(74,0,224,.85) !important;--a2:rgba(142,45,226,.85) !important;--a3:rgba(255,45,190,.75) !important;--gl1:rgba(142,45,226,.6) !important;--gl2:rgba(255,45,190,.5) !important;--st:#e7a6ff !important}
.fx-mint{--g:linear-gradient(120deg,#00f5a0,#00d9f5 42%,#2f80ed 75%,#6a3cff) !important;--a1:rgba(0,245,160,.8) !important;--a2:rgba(0,217,245,.8) !important;--a3:rgba(47,128,237,.8) !important;--gl1:rgba(0,220,170,.5) !important;--gl2:rgba(47,128,237,.6) !important;--st:#9fffe0 !important}
.fx-mono{--g:linear-gradient(120deg,#ffffff,#9aa0a6 45%,#2b2b2b) !important;--a1:rgba(255,255,255,.45) !important;--a2:rgba(200,200,200,.35) !important;--a3:rgba(255,255,255,.4) !important;--gl1:rgba(255,255,255,.18) !important;--gl2:rgba(0,0,0,.6) !important;--st:#ffffff !important;--pf:grayscale(1) contrast(1.3) brightness(1.05) !important}
.fx-none{--pf:none !important}

html body .card#home.scl-cv > .scl-cover.photo{background-color:#1a0b2e;background-size:cover;background-position:center;animation:none;box-shadow:0 14px 34px -10px var(--gl1),0 6px 28px -14px var(--gl2)}
html body .card#home.scl-cv > .scl-cover.photo::before{inset:-4%;background-image:inherit;background-size:cover;background-position:center;filter:var(--pf);animation:scl-cv-kb 26s ease-in-out infinite alternate;will-change:transform}
.scv-frame canvas{filter:var(--pf)}
html body .card#home.scl-cv > .scl-cover.photo::after,.scv-fxp > .b{z-index:1;background:var(--g);background-size:220% 220%;mix-blend-mode:overlay;opacity:.95;animation:scl-cv-bg 12s ease-in-out infinite}
html body .card#home.scl-cv > .scl-cover.photo .scl-cv-aur,.scv-fxp > .au{position:absolute;inset:-40%;z-index:2;mix-blend-mode:screen;opacity:.75;filter:blur(26px);
  background:radial-gradient(28% 34% at 22% 38%,var(--a1),transparent 70%),radial-gradient(30% 36% at 62% 30%,var(--a2),transparent 70%),radial-gradient(32% 38% at 82% 62%,var(--a3),transparent 70%);
  animation:scl-cv-aur 16s ease-in-out infinite alternate}
html body .card#home.scl-cv > .scl-cover.photo .scl-cover-fx,.scv-fxp > .fx{position:absolute;inset:0;z-index:3;
  background:radial-gradient(rgba(255,255,255,.38) 1.6px,transparent 2.2px),linear-gradient(110deg,transparent 35%,rgba(255,255,255,.42) 48%,rgba(255,255,255,.08) 53%,transparent 62%),linear-gradient(180deg,rgba(20,6,40,0) 38%,rgba(20,6,40,.55) 100%);
  background-size:24px 24px,320% 100%,100% 100%;animation:scl-cv-shine 6s ease-in-out infinite}
html body .card#home.scl-cv > .scl-cover.photo .scl-cv-star,.scv-fxp > .st{position:absolute;inset:0;z-index:4;
  background:radial-gradient(2px 2px at 12% 22%,#fff,transparent),radial-gradient(1.6px 1.6px at 31% 64%,#fff,transparent),radial-gradient(2.4px 2.4px at 47% 18%,#fff,transparent),radial-gradient(1.6px 1.6px at 66% 48%,#fff,transparent),radial-gradient(2.2px 2.2px at 78% 16%,#fff,transparent),radial-gradient(1.8px 1.8px at 91% 40%,#fff,transparent),radial-gradient(1.6px 1.6px at 8% 70%,#fff,transparent),radial-gradient(2px 2px at 58% 80%,#fff,transparent);
  filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px var(--st));animation:scl-cv-tw 3.2s ease-in-out infinite alternate}
.scv-fxp{position:absolute !important;top:0;left:0;width:100%;height:100%;z-index:auto;pointer-events:none}
.scv-fxp > i{position:absolute !important;top:0 !important;left:0 !important;right:auto !important;bottom:auto !important;width:100% !important;height:100% !important;margin:0 !important;padding:0 !important;display:block}
.scv-fxp > i.au{top:-40% !important;left:-40% !important;width:180% !important;height:180% !important}
html body .card#home.scl-cv > .scl-cover:not(.photo) .scl-cv-aur,html body .card#home.scl-cv > .scl-cover:not(.photo) .scl-cv-star{display:none}
/* iPhone style, no colour: Blur = whole photo frosted (like the iOS lock-screen / Control Center),
   Glass = photo sharp on top, melting into frosted glass at the bottom. Only a soft white shine on top. */
.fx-blur{--pf:blur(14px) saturate(1.7) brightness(1.06) !important;--gl1:rgba(0,0,0,.35) !important;--gl2:rgba(0,0,0,.45) !important}
.fx-glass{--pf:saturate(1.15) !important;--gl1:rgba(0,0,0,.35) !important;--gl2:rgba(0,0,0,.45) !important}
html body .card#home.scl-cv > .scl-cover.photo.fx-blur::before{inset:-14%}
.scv-frame.fx-blur canvas{transform:scale(1.14)}
html body .card#home.scl-cv > .scl-cover.photo.fx-blur::after,html body .card#home.scl-cv > .scl-cover.photo.fx-glass::after,.scv-frame.fx-blur .scv-fxp > .b,.scv-frame.fx-glass .scv-fxp > .b,
html body .card#home.scl-cv > .scl-cover.photo.fx-blur .scl-cv-star,html body .card#home.scl-cv > .scl-cover.photo.fx-glass .scl-cv-star,.scv-frame.fx-blur .scv-fxp > .st,.scv-frame.fx-glass .scv-fxp > .st,
html body .card#home.scl-cv > .scl-cover.photo.fx-blur .scl-cv-aur,.scv-frame.fx-blur .scv-fxp > .au{display:none}
html body .card#home.scl-cv > .scl-cover.photo.fx-blur .scl-cover-fx,html body .card#home.scl-cv > .scl-cover.photo.fx-glass .scl-cover-fx,.scv-frame.fx-blur .scv-fxp > .fx,.scv-frame.fx-glass .scv-fxp > .fx{
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.32) 48%,rgba(255,255,255,.06) 53%,transparent 62%),linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 38%);
  background-size:320% 100%,100% 100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);animation:scl-cv-shine2 7s ease-in-out infinite}
html body .card#home.scl-cv > .scl-cover.photo.fx-glass .scl-cv-aur{inset:-8%;z-index:2;opacity:1;mix-blend-mode:normal;background:none;background-image:inherit;background-size:cover;background-position:center;
  filter:blur(18px) saturate(1.7) brightness(1.06);animation:scl-cv-kb 26s ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(180deg,transparent 18%,rgba(0,0,0,.65) 48%,#000 78%);mask-image:linear-gradient(180deg,transparent 18%,rgba(0,0,0,.65) 48%,#000 78%)}
.scv-frame.fx-glass .scv-fxp > .au{display:none}
.scv-frame canvas.glc{display:none;position:absolute;filter:blur(18px) saturate(1.7) brightness(1.06);
  -webkit-mask-image:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.65) 54%,#000 72%);mask-image:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.65) 54%,#000 72%)}
.scv-frame.fx-glass canvas.glc{display:block}
.scv-chip.fx-blur i{background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,0) 45%),linear-gradient(135deg,#c7d2fe,#f5d0fe 50%,#bae6fd);filter:blur(.3px);color:#334155}
.scv-chip.fx-glass i{background:linear-gradient(180deg,#7dd3fc 0%,#a5b4fc 45%,rgba(255,255,255,.85) 46%,#e2e8f0);color:#334155}
/* None = the plain photo, nothing on top */
html body .card#home.scl-cv > .scl-cover.photo.fx-none{box-shadow:0 10px 26px -14px rgba(0,0,0,.6)}
html body .card#home.scl-cv > .scl-cover.photo.fx-none::before{inset:0;animation:none}
html body .card#home.scl-cv > .scl-cover.photo.fx-none::after,html body .card#home.scl-cv > .scl-cover.photo.fx-none .scl-cv-aur,html body .card#home.scl-cv > .scl-cover.photo.fx-none .scl-cover-fx,html body .card#home.scl-cv > .scl-cover.photo.fx-none .scl-cv-star,.scv-frame.fx-none .scv-fxp{display:none}
html body .card#home.scl-cv > .scl-cover.saving::after{background:rgba(0,0,0,.45);mix-blend-mode:normal;opacity:1;animation:none}
html body .card#home.scl-cv #print{position:relative;z-index:1;padding-top:88px !important}
html body .card#home.scl-cv #print > .card_content:first-of-type{margin-top:0 !important}
html body .card#home.scl-cv .view_counter{z-index:3}
html body .card#home.scl-cv .scl-kebab{z-index:6}
/* owner button: sits above everything so a tap always reaches it */
html body .card#home.scl-cv > .scl-cover-btn{position:absolute;right:12px;top:106px;z-index:7;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;margin:0;border:0;border-radius:20px;cursor:pointer;
  background:rgba(0,0,0,.5);color:#fff;font:600 12px/1 system-ui,-apple-system,sans-serif;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(0,0,0,.25);-webkit-tap-highlight-color:transparent}
html body .card#home.scl-cv > .scl-cover-btn svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
html body .card#home.scl-cv > .scl-cover-btn:active{transform:scale(.94)}
.scv-bar{position:absolute;left:16px;right:16px;bottom:14px;height:26px;border-radius:13px;background:rgba(0,0,0,.55);overflow:hidden;z-index:3}
.scv-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#2ea8ff,#7b5cff);transition:width .2s}
.scv-bar b{position:relative;display:block;text-align:center;line-height:26px;font:700 12px system-ui,sans-serif;color:#fff}
@keyframes scl-cv-bg{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes scl-cv-dots{from{transform:translate(0,0)}to{transform:translate(26px,26px)}}
@keyframes scl-cv-glow{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
@keyframes scl-cv-zoom{from{transform:scale(1)}to{transform:scale(1.1)}}
@keyframes scl-cv-shine{0%,55%{background-position:0 0,110% 0,0 0}100%{background-position:0 0,-110% 0,0 0}}
@keyframes scl-cv-shine2{0%,55%{background-position:110% 0,0 0}100%{background-position:-110% 0,0 0}}
@keyframes scl-cv-kb{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.12) translate(-2.5%,-1.5%)}}
@keyframes scl-cv-aur{0%{transform:translate(-6%,2%) rotate(0deg)}50%{transform:translate(4%,-4%) rotate(8deg)}100%{transform:translate(8%,3%) rotate(-6deg)}}
@keyframes scl-cv-tw{0%{opacity:.25}50%{opacity:1}100%{opacity:.45}}
@media (prefers-reduced-motion:reduce){html body .card#home.scl-cv > .scl-cover,html body .card#home.scl-cv > .scl-cover::before,html body .card#home.scl-cv > .scl-cover .scl-cover-fx,html body .card#home.scl-cv > .scl-cover.photo::before,html body .card#home.scl-cv > .scl-cover.photo::after,html body .card#home.scl-cv > .scl-cover .scl-cv-aur,html body .card#home.scl-cv > .scl-cover .scl-cv-star{animation:none}}
@media print{html body .card#home.scl-cv > .scl-cover,html body .card#home.scl-cv > .scl-cover-btn{display:none}html body .card#home.scl-cv #print{padding-top:0 !important}}

/* editor sheet */
.scv-sheet{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,0);transition:background .2s;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.scv-sheet.on{background:rgba(0,0,0,.6)}
.scv-box{width:100%;max-width:520px;box-sizing:border-box;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0;background:#141826;color:#fff;transform:translateY(100%);transition:transform .25s cubic-bezier(.2,.9,.3,1)}
.scv-sheet.on .scv-box{transform:none}
.scv-hd b{display:block;font-size:18px}.scv-hd small{color:#9aa3b8;font-size:13px}
.scv-frame{position:relative;margin:14px 0 10px;border-radius:0 0 22px 22px;overflow:hidden;background:#000;touch-action:none;cursor:grab;user-select:none}
.scv-frame:active{cursor:grabbing}.scv-frame canvas{display:block}
.scv-logo{position:absolute;left:50%;bottom:-34px;width:68px;height:68px;margin-left:-34px;border-radius:18px;border:2px dashed rgba(255,255,255,.7);pointer-events:none}
.scv-zoom{display:flex;align-items:center;gap:10px;color:#cbd5e1;font-size:18px}.scv-zoom input{flex:1;accent-color:#7b5cff}
.scv-acts{display:flex;gap:8px;margin-top:12px}
.scv-btn{flex:1;padding:12px 8px;border:0;border-radius:14px;cursor:pointer;font:700 14px system-ui,sans-serif;background:rgba(255,255,255,.1);color:#fff}
.scv-btn.ghost{background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.scv-btn.pri{flex:1.4;background:linear-gradient(120deg,#2ea8ff,#7b5cff)}
.scv-menu{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));background:rgba(0,0,0,0);transition:background .2s}
.scv-menu.on{background:rgba(0,0,0,.55)}
.scv-menu button{max-width:520px;width:100%;margin:0 auto;padding:15px;border:0;border-radius:16px;background:#1c2236;color:#fff;font:700 15px system-ui,sans-serif;cursor:pointer;transform:translateY(30px);opacity:0;transition:.2s}
.scv-menu.on button{transform:none;opacity:1}.scv-menu button[data-a=remove]{color:#fca5a5}.scv-menu button[data-a=x]{background:#2a3148}
.scv-toast{position:fixed;left:50%;bottom:90px;z-index:2147483001;transform:translate(-50%,20px);opacity:0;transition:.25s;background:#1c2236;color:#fff;padding:11px 16px;border-radius:12px;font:600 14px system-ui,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.4);pointer-events:none;max-width:90vw;text-align:center}
.scv-toast.on{opacity:1;transform:translate(-50%,0)}

/* style strip in the editor: swipe left / right */
.scv-styl{display:flex;gap:10px;padding-inline:calc(50% - 31px) !important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 2px 10px;margin:2px -4px 4px;scrollbar-width:none}
.scv-styl::-webkit-scrollbar{display:none}
.scv-chip{flex:0 0 auto;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;width:62px;padding:0;border:0;background:none;color:#cbd5e1;font:600 11px system-ui,sans-serif;cursor:pointer}
.scv-chip i{width:46px;height:46px;border-radius:50%;background:var(--g);box-shadow:0 0 0 2px rgba(255,255,255,.12);transition:transform .15s,box-shadow .15s;display:grid;place-items:center;font-style:normal;font-size:18px;color:#fff}
.scv-chip.fx-none i{background:#2a3148}
.scv-chip.on{color:#fff}
.scv-chip.on i{transform:scale(1.08);box-shadow:0 0 0 2px #141826,0 0 0 4px #fff,0 6px 18px var(--gl1)}
.scv-stname{display:flex;align-items:center;justify-content:space-between;color:#9aa3b8;font-size:12px;margin-top:4px}
.scv-stname b{color:#fff;font-size:13px}
