/* Public website (Views/Shared/_SiteLayout.cshtml): sw- = site chrome and content, hm- = home page demo */
@font-face{font-family:'GZ Bangers';font-weight:400;font-display:swap;src:url(/gagzoo-core/fonts/bangers-latin.woff2) format('woff2')}
@font-face{font-family:'GZ Fredoka';font-weight:500 700;font-display:swap;src:url(/gagzoo-core/fonts/fredoka-latin.woff2) format('woff2')}
@font-face{font-family:'GZ Rubik';font-weight:700 900;font-display:swap;src:url(/gagzoo-core/fonts/rubik-latin.woff2) format('woff2')}

:root{--ink:#1d1340;--ink-2:#3d3366;--muted:#6b5f99;--pink:#ff4fa3;--yellow:#ffd93d;--green:#3ddc84;--blue:#3db8ff;--orange:#ff8a3d;--caution:#ffd400;--line:#e6e0f7;--soft:#f6f3ff}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{min-height:100%;background-color:#3b1d8f;background-image:radial-gradient(circle at 15% 0%,#5a2ad0 0,transparent 45%),radial-gradient(circle at 90% 100%,#c2338f 0,transparent 40%),linear-gradient(160deg,#3b1d8f,#7b2cbf)}
body{min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;color:#fff;background:transparent;font-family:'GZ Fredoka','GZ Rubik',system-ui,sans-serif;line-height:1.5}
img,svg{max-width:100%}
a{color:inherit}
/* Two-tone focus ring (BUG-030, WCAG 1.4.11 / C40): a dark band next to the control and the yellow ring outside it, so
   one of the two stands out on white cards as well as on the purple (ink vs yellow is 12:1) */
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 3px var(--ink)}

.sw-skip{position:absolute;left:8px;top:-999px;z-index:10;padding:8px 14px;border-radius:10px;background:#fff;color:var(--ink);font-weight:700}
.sw-skip:focus{top:8px}
.sw-main:focus{outline:none}

/* Header */
.sw-header{position:sticky;top:0;z-index:5;background:rgba(43,20,110,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.12)}
.sw-bar{max-width:1120px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px}
.sw-logo{font-family:'GZ Bangers',Impact,sans-serif;font-size:34px;line-height:1;letter-spacing:1px;text-decoration:none;color:var(--yellow);
  -webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink);margin-right:auto}
.sw-nav{display:flex;align-items:center;gap:6px}
.sw-nav a:not(.sw-btn),.sw-menu-panel a:not(.sw-btn){padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:600;color:#efe9ff}
.sw-nav a:not(.sw-btn):hover,.sw-menu-panel a:not(.sw-btn):hover{background:rgba(255,255,255,.12)}
.sw-nav a[aria-current=page],.sw-menu-panel a[aria-current=page]{background:rgba(255,255,255,.18);color:#fff}
.sw-nav .sw-btn{margin-left:8px;min-height:42px;font-size:15px}
.sw-menu{display:none;position:relative}
.sw-menu summary{list-style:none;cursor:pointer;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;background:rgba(255,255,255,.14)}
.sw-menu summary::-webkit-details-marker{display:none}
.sw-menu-panel{position:absolute;right:0;top:54px;width:min(280px,calc(100vw - 32px));padding:10px;border-radius:16px;background:#2b146e;box-shadow:0 14px 34px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:4px}
.sw-menu-panel .sw-btn{margin-top:6px}
@media (max-width:760px){.sw-nav{display:none}.sw-menu{display:block}.sw-logo{font-size:30px}}

/* Buttons */
.sw-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:14px;border:0;font:inherit;font-weight:700;font-size:17px;
  text-decoration:none;color:var(--ink);background:var(--yellow);box-shadow:0 5px 0 rgba(0,0,0,.18);cursor:pointer}
.sw-btn:hover{transform:translateY(-1px)}
.sw-btn:focus-visible,.gr-occasion:focus-visible{box-shadow:0 0 0 3px var(--ink)} /* their own shadow would win over the ring's dark band */
.sw-btn--green{background:var(--green)}
.sw-btn--white{background:#fff}
.sw-btn--soon{background:#eee;color:var(--muted);box-shadow:none;cursor:default}
.sw-btn--soon:hover{transform:none}
/* Chrome extensions cannot be installed on phones: the website editor is the phone path, so the store buttons are desktop-only */
@media (max-width:760px){.sw-desktop-only{display:none}}

/* Layout */
.sw-main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:28px 16px 48px}
.sw-hero{text-align:center;padding:12px 0 8px}
.sw-hero h1{margin:0;font-family:'GZ Bangers',Impact,sans-serif;font-weight:400;letter-spacing:1px;font-size:clamp(40px,8vw,76px);line-height:1.02;color:var(--yellow);
  -webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink)}
.sw-hero p{margin:14px auto 0;max-width:640px;font-size:clamp(17px,2.4vw,21px);color:#efe9ff}
.sw-cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.sw-section{margin-top:56px}
.sw-section > h2,.sw-h2{margin:0 0 18px;text-align:center;font-size:clamp(26px,4vw,36px);line-height:1.15}
.sw-lead{max-width:640px;margin:-6px auto 22px;text-align:center;color:#fff;font-size:18px}

/* Cards and grids */
.sw-card{background:#fff;color:var(--ink);border-radius:22px;padding:24px 22px;box-shadow:0 12px 34px rgba(0,0,0,.3)}
.sw-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.sw-feature{background:#fff;color:var(--ink);border-radius:20px;padding:20px 18px;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.sw-feature-ico{font-size:34px;line-height:1}
.sw-feature h3{margin:10px 0 6px;font-size:20px;line-height:1.2}
.sw-feature p{margin:0;color:var(--ink-2)}
.sw-steps{counter-reset:step;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));list-style:none;margin:0;padding:0}
.sw-steps > li{position:relative;background:#fff;color:var(--ink);border-radius:20px;padding:46px 18px 20px;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.sw-steps > li::before{counter-increment:step;content:counter(step);position:absolute;top:-16px;left:18px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'GZ Bangers',Impact,sans-serif;font-size:26px;color:var(--ink);background:var(--yellow);box-shadow:0 0 0 4px #fff}
.sw-steps h3{margin:0 0 6px;font-size:20px;line-height:1.2}
.sw-steps p{margin:0;color:var(--ink-2)}
.sw-band{display:grid;gap:22px;align-items:center;grid-template-columns:1fr 1fr}
@media (max-width:820px){.sw-band{grid-template-columns:1fr}}
.sw-band h2{margin:0 0 10px;font-size:clamp(24px,3.6vw,32px);line-height:1.15}
.sw-band p{margin:0 0 10px;color:#efe9ff;font-size:18px}
.sw-ticks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.sw-ticks li{padding-left:30px;position:relative;font-size:17px}
.sw-ticks li::before{content:"✔";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--green);color:var(--ink);font-size:13px;display:flex;align-items:center;justify-content:center}

/* Long-form text (legal, about, how-to) */
.sw-doc{max-width:820px;margin:0 auto;background:#fff;color:var(--ink);border-radius:22px;padding:clamp(22px,4vw,44px);box-shadow:0 12px 34px rgba(0,0,0,.3)}
.sw-doc h1{margin:0 0 6px;font-size:clamp(30px,5vw,42px);line-height:1.1}
.sw-doc .sw-meta{margin:0 0 22px;color:var(--muted);font-size:15px}
.sw-doc h2{margin:30px 0 8px;font-size:23px;line-height:1.2;scroll-margin-top:90px}
.sw-doc h3{margin:20px 0 6px;font-size:19px}
.sw-doc p,.sw-doc li{color:var(--ink-2);font-size:17px}
.sw-doc ul,.sw-doc ol{padding-left:22px}
.sw-doc li{margin:4px 0}
.sw-doc a{color:#5a2ad0;font-weight:600}
.sw-doc table{width:100%;border-collapse:collapse;margin:10px 0;font-size:16px}
.sw-doc th,.sw-doc td{text-align:left;vertical-align:top;padding:10px;border-bottom:1px solid var(--line)}
.sw-doc th{background:var(--soft)}
.sw-table-wrap{overflow-x:auto}
.sw-table-wrap:focus-visible{outline:3px solid #5a2ad0;outline-offset:2px}
.sw-note{padding:14px 16px;border-radius:14px;background:var(--soft);border-left:5px solid var(--pink);color:var(--ink-2)}
.sw-toc{margin:0 0 10px;padding:14px 18px;border-radius:14px;background:var(--soft)}
.sw-toc ol{margin:6px 0 0;columns:2;column-gap:28px}
@media (max-width:600px){.sw-toc ol{columns:1}}

/* FAQ */
.sw-faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.sw-faq details{background:#fff;color:var(--ink);border-radius:18px;padding:0 20px;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.sw-faq summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;font-weight:700;font-size:18px;position:relative}
.sw-faq summary::-webkit-details-marker{display:none}
.sw-faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:26px;color:var(--pink)}
.sw-faq details[open] summary::after{content:"–"}
.sw-faq details > div{padding:0 0 18px;color:var(--ink-2);font-size:17px}
.sw-faq details > div p{margin:0 0 8px}
.sw-faq a{color:#5a2ad0;font-weight:600}

/* Footer */
.sw-footer{border-top:1px solid rgba(255,255,255,.14);padding:22px 16px 30px;text-align:center;color:#fff;font-size:14px}
.sw-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-bottom:8px}
.sw-footer-links a{display:inline-block;min-height:24px;line-height:24px;color:#fff;text-decoration:none;font-weight:600;font-size:15px}
.sw-footer-links a:hover{text-decoration:underline}
.sw-footer p{margin:0}

/* Home demo: caution tape + mock video with live stickers */
.hm-tape{display:inline-block;margin:22px 0 0;padding:.25em 1em;font-family:'GZ Rubik',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(14px,2.4vw,19px);color:#111;background:var(--caution);border:.4em solid;border-image:repeating-linear-gradient(45deg,var(--caution) 0 .5em,#111 .5em 1em) 1;
  box-shadow:0 .25em .5em rgba(0,0,0,.35);transform:rotate(2deg);white-space:nowrap}
.hm-stage{position:relative;width:min(100%,760px);aspect-ratio:16/9;margin:30px auto 0;border-radius:22px;overflow:hidden;
  background:linear-gradient(135deg,#241556,#130b33);box-shadow:0 0 0 5px #fff,0 16px 40px rgba(0,0,0,.4)}
.hm-stage::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px)}
.hm-stage--video{background:#000}
.hm-stage--video::before{content:none}
.hm-stage--video video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.hm-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;padding-left:6px}
.hm-st{position:absolute;width:15%;max-width:110px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.25));animation:hm-float 3.2s ease-in-out infinite}
.hm-st img{display:block;width:100%;height:auto}
.hm-st--1{left:6%;top:10%;animation-delay:-.4s}
.hm-st--2{right:7%;top:8%;width:13%;animation-name:hm-wiggle;animation-duration:1.4s}
.hm-st--3{left:12%;bottom:9%;width:12%;animation-name:hm-bounce;animation-duration:1.1s}
.hm-st--4{right:10%;bottom:8%;animation-delay:-1.6s}
.hm-shades{position:absolute;left:50%;top:22%;width:26%;transform:translateX(-50%);animation:hm-drop 3.6s cubic-bezier(.3,1.6,.5,1) infinite}
.hm-shades svg{display:block;width:100%}
.hm-slam{position:absolute;left:50%;bottom:16%;transform:translateX(-50%) rotate(-4deg);font-family:'GZ Rubik',sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(20px,5vw,44px);color:#ff2d2d;-webkit-text-stroke:.08em #fff;paint-order:stroke fill;text-shadow:.06em .06em 0 #000;white-space:nowrap;animation:hm-slam 3.6s ease-out infinite}
.hm-boom{position:absolute;right:22%;top:44%;padding:.45em .7em;font-family:'GZ Bangers',Impact,sans-serif;font-size:clamp(14px,3vw,26px);color:#fff;
  -webkit-text-stroke:.07em var(--ink);paint-order:stroke fill;z-index:0;animation:hm-pop 3.6s ease-out infinite}
.hm-boom::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--orange);
  clip-path:polygon(50% 0,61% 22%,85% 8%,78% 33%,100% 40%,80% 56%,95% 82%,68% 74%,58% 100%,46% 78%,22% 95%,25% 68%,0 62%,18% 45%,4% 20%,30% 26%)}
@keyframes hm-float{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(4px,-10px) rotate(4deg)}}
@keyframes hm-wiggle{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@keyframes hm-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes hm-drop{0%{transform:translate(-50%,-260%)}22%,85%{transform:translate(-50%,0)}100%{transform:translate(-50%,0);opacity:0}}
@keyframes hm-slam{0%,30%{transform:translateX(-50%) rotate(-4deg) scale(3);opacity:0}40%,90%{transform:translateX(-50%) rotate(-4deg) scale(1);opacity:1}100%{opacity:0}}
@keyframes hm-pop{0%,45%{transform:scale(0) rotate(-20deg)}55%,92%{transform:scale(1) rotate(6deg)}100%{transform:scale(0)}}
@media (max-width:520px){.hm-play{width:56px;height:56px;margin:-28px 0 0 -28px;font-size:22px}}

@media (prefers-reduced-motion:reduce){
  .hm-st,.hm-shades,.hm-slam,.hm-boom{animation:none}
  .sw-btn:hover{transform:none}
}
@media (min-width:821px){.sw-grid--3{grid-template-columns:repeat(3,1fr)}}

/* Signed-in header */
.sw-linkbtn{background:none;border:0;font:inherit;font-weight:600;color:#efe9ff;padding:8px 12px;border-radius:10px;cursor:pointer}
.sw-linkbtn:hover{background:rgba(255,255,255,.12)}
.sw-me{display:inline-flex !important;align-items:center;gap:8px}
.sw-me img{border-radius:50%;width:26px;height:26px}
.gz-site-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;max-width:calc(100% - 32px);padding:12px 18px;border-radius:14px;background:#1d1340;color:#fff;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.4)}

/* Gagzoo cards */
.sw-cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.sw-gcard{background:#fff;color:var(--ink);border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.25);display:flex;flex-direction:column}
.sw-gcard-media{position:relative;display:block;aspect-ratio:1200/630;background:#130b33}
.sw-gcard-media img{display:block;width:100%;height:100%;object-fit:cover}
.sw-gcard-badge{position:absolute;left:8px;top:8px;padding:4px 10px;border-radius:999px;background:rgba(29,19,64,.85);color:#fff;font-size:12px;font-weight:700}
.sw-gcard-badge--remix{left:auto;right:8px}
.sw-gcard-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.sw-gcard-title{margin:0;font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.sw-gcard-title a{text-decoration:none}
.sw-gcard-title a:hover{text-decoration:underline}
.sw-gcard-author{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;font-weight:600;text-decoration:none}
.sw-gcard-author img{border-radius:50%}
.sw-gcard-stats{display:flex;gap:14px;font-size:14px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.sw-btn--small{min-height:40px;padding:0 16px;font-size:15px}
.sw-gcard-edit{align-self:flex-start;margin-top:4px}
.sw-gcard-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.sw-gcard-actions .sw-gcard-edit{margin-top:0}
.sw-gcard-actions form{margin:0}
.sw-gcard-delete{background:var(--soft);color:#a3123a}
.sw-gcard-held{margin:0;flex-basis:100%;color:var(--muted);font-size:13px;line-height:1.35}
.sw-field-error{color:#b00030;font-weight:700;font-size:15px}
.sw-stat{display:inline-flex;align-items:center;gap:5px}
.sw-stat .gz-ico{width:16px;height:16px;fill:#9d93c4}
.sw-stat--like .gz-ico{fill:#ff3d7f}
.gz-ico{display:block;flex:none;fill:currentColor}
.sw-tabs{display:flex;justify-content:center;gap:8px;margin:12px 0 22px}
.sw-tabs a{padding:10px 18px;border-radius:999px;text-decoration:none;font-weight:700;background:rgba(255,255,255,.14)}
.sw-tabs a[aria-current=page]{background:#fff;color:var(--ink)}
.sw-empty{text-align:center;max-width:560px;margin:0 auto}
.sw-empty p{color:var(--ink-2)}
.sw-pager{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:24px;color:#fff}
.sw-profile{display:flex;align-items:center;gap:18px;margin:6px 0 26px}
.sw-profile h1{margin:0;font-size:clamp(26px,5vw,38px)}
.sw-profile p{margin:4px 0 0;color:#e3dbff}
.sw-profile-avatar{width:88px;height:88px;border-radius:50%;box-shadow:0 0 0 4px #fff;flex:none;object-fit:cover}
.sw-profile-avatar--empty{display:flex;align-items:center;justify-content:center;background:var(--yellow);color:var(--ink);font-size:40px;font-weight:700}

/* Greetings (phase 4) */
.gr-crumbs{margin:0 0 8px;font-size:14px;color:#d9ccff}
.gr-crumbs a{color:#fff;font-weight:700;text-decoration:none}
.gr-crumbs a:hover{text-decoration:underline}
.gr-occasions{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
@media (max-width:520px){.gr-occasions{grid-template-columns:1fr 1fr;gap:10px}.gr-occasion{padding:16px 8px}.gr-occasion-emoji{font-size:36px}.gr-occasion-name{font-size:16px}}
.gr-occasion{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 14px;border-radius:20px;background:#fff;color:var(--ink);text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform .15s}
.gr-occasion:hover{transform:translateY(-3px)}
.gr-occasion-emoji{font-size:44px;line-height:1}
.gr-occasion-name{font-weight:700;font-size:18px;text-align:center}
.gr-occasion-count{font-size:13px;color:var(--muted)}
a.gr-occasion .gr-occasion-count{color:#0b6b3a;background:#dcfbe9;font-weight:700;padding:2px 10px;border-radius:999px}
/* No live template yet (UX-012): flat, greyed and not a link, so the live occasions stand out */
.gr-occasion--soon{background:rgba(255,255,255,.12);color:#e9e2ff;box-shadow:none;border:2px dashed rgba(255,255,255,.28)}
.gr-occasion--soon:hover{transform:none}
.gr-occasion--soon .gr-occasion-emoji{filter:grayscale(1);opacity:.6}
.gr-occasion--soon .gr-occasion-count{color:#fff;font-weight:600}
.gr-make-btn{min-height:42px;font-size:15px;margin-top:4px}
.gr-make{display:grid;gap:20px;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
@media (max-width:860px){.gr-make{grid-template-columns:1fr}}
/* Phones (UX-011): the preview stays at the top, under the site header, while the form scrolls beneath it, so the
   names land on the video in sight while they are typed */
@media (max-width:860px){
  .gr-player-col{position:sticky;top:66px;z-index:4;margin:0 -16px;padding:10px 16px 8px;
    background:rgba(43,20,110,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .gr-player-col .gr-hint{margin-top:6px;font-size:13px}
  /* Short screens / soft keyboard (UX-019): greeting-maker.js caps the preview height (--gr-stage-h) */
  .gr-player-col .gr-stage{max-width:calc(var(--gr-stage-h,9999px) * 16 / 9);margin:0 auto}
  .gr-player-col--compact{padding-top:6px;padding-bottom:6px}
  .gr-player-col--compact .gr-hint{display:none}
  .gr-player-col--compact .gr-stage{border-radius:12px;box-shadow:0 0 0 3px #fff,0 6px 18px rgba(0,0,0,.35)}
  .gr-player-col--compact .gr-play{width:52px;height:52px;margin:-26px 0 0 -26px;font-size:22px;padding-left:4px}
}
.gr-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 0 0 4px #fff,0 12px 34px rgba(0,0,0,.35)}
.gr-stage-inner{position:absolute;inset:0;transform-origin:50% 50%}
.gr-stage-inner iframe,#gr-youtube{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.gr-overlay{position:absolute;inset:0;overflow:hidden;cursor:pointer}
.gr-play{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink);
  font-size:30px;padding-left:6px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.gr-play[hidden]{display:none}
.gr-blocked{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(19,11,51,.92);color:#fff;text-align:center;font-weight:600}
.gr-blocked[hidden]{display:none}
.gr-hint{margin:10px 0 0;color:#d9ccff;font-size:14px;text-align:center}
.gr-form-card{padding:22px}
.gr-title{margin:0 0 14px;font-size:24px;line-height:1.2}
.gr-field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.gr-field label{font-weight:700;font-size:15px}
.gr-field input,.gr-field textarea{font:inherit;font-size:17px;padding:11px 12px;border:2px solid #8a7bb8;border-radius:12px;color:var(--ink);background:#fff;width:100%}
.gr-field textarea{resize:vertical}
.gr-field [aria-invalid=true]{border-color:#e0245e}
fieldset.gr-field{border:0;padding:0;margin:0 0 12px;min-width:0}
fieldset.gr-field legend{font-weight:700;font-size:15px;padding:0;margin-bottom:6px}
.gr-field .gr-check{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;padding:6px 0}
.gr-field .gr-check input{width:22px;height:22px;padding:0;flex:none;accent-color:#5b3fd0}
.gr-optional{font-weight:500;color:var(--muted)}
.gr-own-note{display:flex;align-items:center;gap:12px;padding:10px 14px;margin:0 0 18px;max-width:640px}.gr-own-note img{border-radius:8px;flex:none}.gr-own-top{padding:16px 18px;margin:0 0 20px;max-width:640px}.gr-own-title{margin:0 0 4px;font-size:18px}.gr-own-top .gr-field{margin:10px 0 0}.gr-own-row{display:flex;gap:8px;flex-wrap:wrap}.gr-own-row input{flex:1 1 240px;width:auto}.gr-own-btn{flex:none}.gr-own-ok{color:#146c3a;font-weight:700;font-size:14px}.gr-own-card{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:8px 10px;border:2px solid #d9d0f5;border-radius:12px}.gr-own-card img{border-radius:8px;flex:none}.gr-len{flex-wrap:wrap}.gr-len label{font-weight:700;font-size:14px;flex:1 0 100%}.gr-len input{width:110px;font:inherit;font-size:17px;padding:8px 10px;border:2px solid #8a7bb8;border-radius:10px}.gr-own-card .sw-linkbtn,.gr-own-card a{color:#5a2ad0;font-weight:700;text-decoration:underline}.gr-own-card .sw-linkbtn{padding:0}.gr-own-card-txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px}.gr-own summary{cursor:pointer;font-weight:700;font-size:15px;padding:6px 0}.gr-own .gr-field{margin-top:8px}
.gr-err{color:#c0103c;font-size:13px;font-weight:700;margin:0}
.gr-err:empty{display:none}
.gr-send{width:100%;margin-top:6px}
.gr-small{margin:10px 0 0;font-size:13px;color:var(--muted)}
.gr-small a{color:#5a2ad0;font-weight:700}
.gr-done h2{margin:0 0 6px;font-size:24px}
.gr-done p{margin:0 0 8px}
.gr-done[hidden],#gr-form[hidden]{display:none}
.gr-link{width:100%;font:inherit;font-size:15px;padding:10px 12px;border:2px solid #8a7bb8;border-radius:12px;background:var(--soft);color:var(--ink)}
.gr-share{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.gr-share-btn{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:12px;border:0;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;
  background:#eee;color:var(--ink)}
.gr-share-btn[hidden]{display:none}
.gr-share-btn--wa{background:#25d366;color:#fff}
.gr-share-btn--tg{background:#2aa5e0;color:#fff}
.gr-share-btn--x{background:#111;color:#fff}
.gr-again{display:block;margin:12px auto 0;color:#5a2ad0}
/* /create: paste a YouTube link */
.cr-form{max-width:720px;margin:0 auto}
.cr-label{display:block;font-weight:700;margin-bottom:8px}
.cr-row{display:flex;gap:10px;flex-wrap:wrap}
.cr-input{flex:1 1 260px;min-width:0;height:52px;padding:0 14px;border:3px solid #8a7bb8;border-radius:14px;font:inherit;font-size:17px;color:var(--ink)}
.cr-input[aria-invalid=true]{border-color:#ff4d4d}
.cr-err{display:block;min-height:1.3em;margin-top:6px;color:#d11a2a;font-weight:600;font-size:15px}
.cr-help{margin:4px 0 0;color:var(--muted);font-size:15px}
.cr-h2{text-align:center;margin:32px 0 14px}
.cr-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;max-width:960px;margin:0 auto}
.cr-video{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#130b33}
.cr-video img{width:100%;height:100%;object-fit:cover;display:block}
.cr-video span{position:absolute;left:8px;bottom:8px;padding:4px 10px;border-radius:999px;background:rgba(29,19,64,.85);color:#fff;font-size:13px;font-weight:700}
.cr-h3{max-width:960px;margin:22px auto 10px;font-size:18px}
.cr-more{max-width:960px;margin:12px auto 0}
.cr-more summary{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;background:#fff;color:var(--ink);font-weight:800;cursor:pointer;list-style:none;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.cr-more summary::-webkit-details-marker{display:none}
.cr-more summary:focus-visible{outline:3px solid #ffd93d;outline-offset:3px;box-shadow:0 0 0 3px var(--ink)}
.cr-more .cr-more-close,.cr-more[open] .cr-more-open{display:none}
.cr-more[open] .cr-more-close{display:inline}
.cr-more .cr-videos{margin-top:12px}
.cr-video span{max-width:calc(100% - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Seasonal campaign banner (_CampaignBanner, appsettings "Campaign") */
.cp-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:960px;margin:14px auto 0;padding:14px 18px;border-radius:18px;
  background:linear-gradient(120deg,#1d1340,#3b1d8f);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.cp-banner--halloween{background:linear-gradient(120deg,#1a0f2e 0%,#3b1d8f 55%,#ff7a18 140%)}
.cp-emoji{font-size:40px;line-height:1}
.cp-body{flex:1 1 240px;display:flex;flex-direction:column;gap:2px}
.cp-title{font-size:20px}
.cp-text{color:#e8e0ff;font-size:15px}
.cp-ctas{display:flex;gap:8px;flex-wrap:wrap}
.cp-cta{background:#ff7a18;color:#1d1340}
.sw-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.cr-lucky-hint{margin-top:8px;color:var(--ink);font-weight:600}
/* /create on small phones (UX-018): the campaign banner shrinks to emoji + title + button and the intro tightens, so
   the YouTube link field is on the first screen at 320x568; starter videos two to a row */
@media (max-width:480px){
  .cr-campaign .cp-banner{gap:6px 10px;margin-top:10px;padding:10px 12px;border-radius:14px}
  .cr-campaign .cp-emoji{font-size:26px}
  .cr-campaign .cp-body{flex:1 1 0}
  .cr-campaign .cp-title{font-size:16px;line-height:1.2}
  .cr-campaign .cp-text{display:none}
  .cr-campaign .cp-ctas{flex:1 1 100%}
  .cr-campaign .cp-ctas .sw-btn{min-height:40px;padding:0 14px;font-size:15px}
  .cr-hero h1{font-size:36px}
  .cr-hero p{margin-top:8px;font-size:16px}
  .cr-videos{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cr-video span{left:4px;bottom:4px;max-width:calc(100% - 8px);padding:2px 7px;font-size:11.5px}
}
/* Notice at sign-in (#80): site-auth.js's dialog before Google's window (same rules in site-web.css and web-share.css) */
.gz-signin-dlg{max-width:min(420px,calc(100% - 32px));border:0;border-radius:18px;padding:22px 20px;background:#fff;color:#1d1340;box-shadow:0 18px 50px rgba(0,0,0,.45);font:inherit}
.gz-signin-dlg::backdrop{background:rgba(10,4,30,.6)}
.gz-signin-dlg h2{margin:0 0 8px;font-size:21px}
.gz-signin-dlg p{margin:0 0 16px;font-size:16px;line-height:1.45;color:#3d3366}
.gz-signin-dlg a{color:#5b21b6;font-weight:700}
.gz-signin-btns{display:flex;flex-wrap:wrap;gap:10px}
.gz-signin-btns button{min-height:44px;padding:0 18px;border-radius:12px;border:0;font:inherit;font-weight:700;font-size:16px;cursor:pointer}
.gz-signin-go{background:#ffd93d;color:#1d1340}
.gz-signin-cancel{background:#f6f3ff;color:#1d1340}
.gz-signin-dlg :focus-visible{outline:3px solid #5b21b6;outline-offset:2px;box-shadow:none}
.sw-signin-note{margin:10px 0 0;font-size:14px;color:#3d3366}