/* =========================================================
   Hireme AI - animated product demo ("video-like" walkthrough)
   Pure CSS/JS, no real video file. Drives 4 scenes via .show.
   ========================================================= */
.demo-sec{ background:linear-gradient(180deg,#f7f5fc,#fff); }
.demo-stage{ max-width:760px; margin:0 auto; }

/* browser frame */
.demo-frame{
  background:#fff; border:1px solid #ece8fa; border-radius:18px; overflow:hidden;
  box-shadow:0 30px 70px rgba(46,16,101,.18);
}
.demo-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:#1e1340; }
.demo-bar .d{ width:11px; height:11px; border-radius:50%; }
.demo-bar .r{ background:#ff5f57 } .demo-bar .y{ background:#febc2e } .demo-bar .g{ background:#28c840 }
.demo-url{ margin-left:12px; font-size:.78rem; color:#b9b2da; background:rgba(255,255,255,.08); padding:4px 12px; border-radius:999px; }

.demo-screen{ position:relative; height:340px; background:radial-gradient(600px 300px at 70% -10%,rgba(124,58,237,.10),transparent 70%),#faf8ff; overflow:hidden; }
.demo-scene{
  position:absolute; inset:0; padding:26px 28px; opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease; pointer-events:none;
}
.demo-scene.show{ opacity:1; transform:none; }

/* scene heading */
.ds-head{ display:flex; align-items:center; gap:13px; margin-bottom:20px; }
.ds-ico svg{ width:26px; height:26px; }
.ds-ico{ width:46px; height:46px; flex:none; border-radius:13px; display:grid; place-items:center; font-size:1.4rem;
  background:linear-gradient(135deg,#a855f7,#7c3aed); box-shadow:0 8px 18px rgba(124,58,237,.4); }
.ds-head b{ display:block; color:#241a40; font-size:1.08rem; }
.ds-head span{ font-size:.85rem; color:#8b85a0; }

/* scene 1 - scan bars */
.ds-line{ display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:.85rem; color:#6b6480; font-weight:600; }
.ds-line span{ width:110px; flex:none; }
.ds-line i{ flex:1; height:9px; border-radius:999px; background:#ece8fa; position:relative; overflow:hidden; }
.ds-line i::after{ content:""; position:absolute; left:0; top:0; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,#22d3ee,#7c3aed); transition:width 1s cubic-bezier(.34,1,.5,1); }
.demo-scene.show .ds-line i::after{ width:var(--w); }
.ds-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
.ds-tags span{ font-size:.8rem; font-weight:600; color:#6d28d9; background:#f3eeff; border:1px solid #e0d8fa; padding:6px 12px; border-radius:999px;
  opacity:0; transform:translateY(6px); animation:dsPop .4s ease forwards; }
.demo-scene.show .ds-tags span:nth-child(1){ animation-delay:.5s } .demo-scene.show .ds-tags span:nth-child(2){ animation-delay:.65s } .demo-scene.show .ds-tags span:nth-child(3){ animation-delay:.8s }
@keyframes dsPop{ to{ opacity:1; transform:none } }

/* scene 2 - applying list */
.ds-apply{ list-style:none; margin:0; padding:0; }
.ds-apply li{ display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px solid #eee; border-radius:12px; margin-bottom:10px; background:#fff;
  opacity:0; transform:translateX(-10px); }
.demo-scene.show .ds-apply li{ animation:dsRow .45s ease forwards; }
.demo-scene.show .ds-apply li:nth-child(1){ animation-delay:.15s } .demo-scene.show .ds-apply li:nth-child(2){ animation-delay:.5s } .demo-scene.show .ds-apply li:nth-child(3){ animation-delay:.85s } .demo-scene.show .ds-apply li:nth-child(4){ animation-delay:1.2s }
@keyframes dsRow{ to{ opacity:1; transform:none } }
.ds-apply .co{ font-weight:700; color:#241a40; width:78px; flex:none; }
.ds-apply .ro{ flex:1; color:#8b85a0; font-size:.88rem; }
.ds-apply .ok{ color:#059669; font-size:.85rem; font-weight:700; }
.ds-apply .sending{ color:#d97706; font-size:.85rem; font-weight:700; }

/* scene 3 - dashboard */
.ds-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
.ds-stats > div{ background:#fff; border:1px solid #eee; border-radius:12px; padding:12px 8px; text-align:center; }
.ds-stats b{ display:block; font-size:1.5rem; font-weight:800; background:linear-gradient(135deg,#7c3aed,#6d28d9); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ds-stats span{ font-size:.72rem; color:#8b85a0; font-weight:600; }
.ds-rows{ display:grid; gap:8px; }
.ds-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 14px; background:#fff; border:1px solid #eee; border-radius:10px;
  opacity:0; transform:translateY(8px); }
.demo-scene.show .ds-row{ animation:dsRow .4s ease forwards; }
.demo-scene.show .ds-row:nth-child(1){ animation-delay:.3s } .demo-scene.show .ds-row:nth-child(2){ animation-delay:.45s } .demo-scene.show .ds-row:nth-child(3){ animation-delay:.6s }
.ds-row .co{ font-weight:700; color:#241a40; }
.ds-row .st{ font-size:.75rem; font-weight:700; padding:4px 11px; border-radius:999px; }
.st.applied{ background:#eef2ff; color:#4f46e5 } .st.review{ background:#fff7ed; color:#ea580c } .st.interview{ background:#ecfdf5; color:#059669 }

/* scene 4 - win */
.ds-win{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.ds-win-ic{ font-size:3.4rem; animation:dsBounce 1s cubic-bezier(.34,1.6,.5,1); }
.ds-win b{ font-size:1.5rem; color:#241a40; margin-top:6px; }
.ds-win p{ color:#6d28d9; font-weight:600; margin:6px 0 0; }
.ds-win-tag{ margin-top:16px; font-size:.85rem; color:#8b85a0; background:#f3eeff; padding:8px 16px; border-radius:999px; }
@keyframes dsBounce{ 0%{ transform:scale(0) rotate(-20deg); opacity:0 } 60%{ transform:scale(1.2) } 100%{ transform:scale(1); opacity:1 } }

/* controls */
.demo-ctrl{ display:flex; align-items:center; gap:14px; margin-top:18px; }
.demo-play{ width:42px; height:42px; flex:none; border:0; border-radius:50%; cursor:pointer; font-size:.95rem; color:#fff;
  background:linear-gradient(135deg,#7c3aed,#6d28d9); box-shadow:0 8px 18px rgba(124,58,237,.4); transition:transform .15s; }
.demo-play:hover{ transform:scale(1.08); }
.demo-track{ flex:1; height:10px; border-radius:999px; background:#ece8fa; overflow:hidden; box-shadow:inset 0 1px 2px rgba(76,29,149,.12); }
.demo-track i{ position:relative; display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#7c3aed,#a855f7); transition:width .1s linear; }
.demo-track i::after{ content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%); width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid #7c3aed; box-shadow:0 2px 6px rgba(124,58,237,.4); }
/* home page: no play button — full-width bar with the step NAMES inside it.
   The fill sweeps left→right through the steps; passed steps turn white,
   the current step is a white pill, upcoming steps stay dark. */
.demo-ctrl.noplay{ flex-wrap:wrap; --steps:8; }
.demo-ctrl.noplay .demo-track{ flex:1 1 100%; height:48px; position:relative; background:#efeafc; border:1px solid #e6ddfb; box-shadow:inset 0 1px 3px rgba(76,29,149,.08); }
.demo-ctrl.noplay .demo-track i{ background:linear-gradient(90deg,#7c3aed 0%,#9333ea 55%,#a855f7 100%); box-shadow:0 0 22px rgba(139,92,246,.45); }
/* soft shine sweeping across the filled portion */
.demo-ctrl.noplay .demo-track i::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.32) 50%,transparent 100%); background-size:55% 100%; background-repeat:no-repeat; animation:demoShine 2.4s linear infinite; }
@keyframes demoShine{ 0%{ background-position:-55% 0 } 100%{ background-position:180% 0 } }
/* glowing head marker at the leading edge of the fill */
.demo-ctrl.noplay .demo-track i::after{ display:block; content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:6px; height:calc(100% - 16px); border-radius:6px; background:#fff; box-shadow:0 0 12px 3px rgba(255,255,255,.75); opacity:.92; }
/* thin segment checkpoints between the 8 steps */
.demo-ctrl.noplay .demo-track::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100% / var(--steps) - 1px),rgba(255,255,255,.32) calc(100% / var(--steps) - 1px),rgba(255,255,255,.32) calc(100% / var(--steps))); }
/* equal columns (adapts to the step count via --steps) so every word aligns to its segment */
.demo-ctrl.noplay .demo-dots{ position:absolute; inset:0; z-index:2; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; align-items:center; }
.demo-ctrl.noplay .demo-dots button{ justify-self:center; display:inline-flex; align-items:center; border:0; background:transparent; color:#8b83a8; font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; line-height:1; padding:7px 14px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:color .2s, background .2s, transform .15s, box-shadow .2s; }
.demo-ctrl.noplay .demo-dots button:hover{ color:#5b21b6; }
.demo-ctrl.noplay .demo-dots button.done{ color:#fff; }
.demo-ctrl.noplay .demo-dots button.on{ color:#5b21b6; background:#fff; font-weight:900; transform:scale(1.08); box-shadow:0 6px 16px rgba(76,29,149,.34),0 0 0 3px rgba(255,255,255,.5); }
@media (prefers-reduced-motion:reduce){ .demo-ctrl.noplay .demo-track i::before{ animation:none; } }
@media (max-width:680px){ .demo-ctrl.noplay .demo-track{ height:38px; } .demo-ctrl.noplay .demo-dots button{ font-size:.52rem; padding:5px 2px; letter-spacing:.01em; } }
.demo-dots{ display:flex; gap:6px; }
.demo-dots button{ border:1.5px solid #e0d8fa; background:#fff; color:#8b85a0; font-size:.76rem; font-weight:700; padding:6px 12px; border-radius:999px; cursor:pointer; transition:.18s; }
.demo-dots button.on{ background:linear-gradient(135deg,#7c3aed,#6d28d9); color:#fff; border-color:transparent; }

/* scene - discovery call chat bubbles */
.ds-call{ display:flex; flex-direction:column; gap:12px; padding-top:6px; }
.ds-bubble{ max-width:78%; padding:11px 15px; border-radius:16px; font-size:.9rem; line-height:1.4; opacity:0; transform:translateY(8px); }
.demo-scene.show .ds-bubble{ animation:dsRow .45s ease forwards; }
.demo-scene.show .ds-bubble:nth-child(1){ animation-delay:.2s } .demo-scene.show .ds-bubble:nth-child(2){ animation-delay:.9s } .demo-scene.show .ds-bubble:nth-child(3){ animation-delay:1.6s }
.ds-bubble.l{ align-self:flex-start; background:#fff; color:#241a40; border:1px solid #eee; border-bottom-left-radius:4px; }
.ds-bubble.r{ align-self:flex-end; background:linear-gradient(135deg,#7c3aed,#6d28d9); color:#fff; border-bottom-right-radius:4px; }

/* scene - market extra bars */
.ds-bars{ margin-top:16px; }

/* scene - resume document */
.ds-doc{ display:flex; gap:22px; align-items:center; justify-content:center; padding-top:10px; }
.ds-doc-paper{ position:relative; width:160px; flex:none; background:#fff; border:1px solid #eee; border-radius:10px; padding:16px 14px; box-shadow:0 6px 16px rgba(46,16,101,.08); display:flex; flex-direction:column; gap:9px; }
.ds-doc-paper .l{ height:8px; border-radius:999px; background:#ece8fa; }
.l.w90{width:90%}.l.w80{width:80%}.l.w70{width:70%}.l.w60{width:60%}.l.w50{width:50%}
.ds-doc-stamp{ position:absolute; right:-10px; bottom:14px; background:linear-gradient(135deg,#10b981,#059669); color:#fff; font-size:.72rem; font-weight:800; padding:5px 10px; border-radius:8px; box-shadow:0 6px 14px rgba(16,185,129,.4); transform:rotate(-6deg) scale(0); }
.demo-scene.show .ds-doc-stamp{ animation:dsBounce .6s ease .7s forwards; }
.ds-doc-side{ display:flex; flex-direction:column; gap:10px; padding-top:4px; }
.ds-chip{ font-size:.85rem; font-weight:600; color:#059669; background:#ecfdf5; border:1px solid #c8efdd; padding:9px 13px; border-radius:10px; opacity:0; transform:translateX(-8px); }
.demo-scene.show .ds-chip{ animation:dsRow .4s ease forwards; }
.demo-scene.show .ds-chip:nth-child(1){animation-delay:.3s}.demo-scene.show .ds-chip:nth-child(2){animation-delay:.5s}.demo-scene.show .ds-chip:nth-child(3){animation-delay:.7s}

/* scene - free tools */
.ds-tools{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding-top:6px; }
.ds-tool{ background:#fff; border:1px solid #eee; border-radius:14px; padding:18px; text-align:center; opacity:0; transform:translateY(10px); }
.demo-scene.show .ds-tool{ animation:dsRow .45s ease forwards; }
.demo-scene.show .ds-tool:nth-child(1){animation-delay:.2s}.demo-scene.show .ds-tool:nth-child(2){animation-delay:.45s}
.ds-tool-ic{ font-size:2rem; }
.ds-tool b{ display:block; color:#241a40; margin:8px 0 4px; font-size:.98rem; }
.ds-tool p{ font-size:.82rem; color:#8b85a0; margin:0; line-height:1.4; }

/* percent label on scan/market bars */
.ds-line em{ width:40px; flex:none; text-align:right; font-style:normal; font-weight:800; color:#7c3aed; font-size:.85rem; }
.ds-line em::after{ content:"%"; font-size:.7em; opacity:.7; }

/* market - bigger 4-stat grid */
.ds-stats-big{ grid-template-columns:repeat(4,1fr); }
.ds-stats-big b{ font-size:1.7rem; }
.ds-stats-big span{ font-size:.68rem; }

/* resume - scanning beam over the paper */
.ds-doc-paper{ position:relative; overflow:hidden; }
.ds-doc-scan{ position:absolute; left:0; right:0; height:34px; top:-34px; pointer-events:none;
  background:linear-gradient(180deg, rgba(124,58,237,0), rgba(124,58,237,.25), rgba(124,58,237,0)); }
.demo-scene.show .ds-doc-scan{ animation:docScan 2.2s ease-in-out 1; }
@keyframes docScan{ 0%{ top:-34px } 100%{ top:100% } }
.ds-doc-paper .l{ opacity:0; animation:dsLine .4s ease forwards; }
.demo-scene.show .ds-doc-paper .l:nth-child(1){animation-delay:.15s}
.demo-scene.show .ds-doc-paper .l:nth-child(2){animation-delay:.28s}
.demo-scene.show .ds-doc-paper .l:nth-child(3){animation-delay:.41s}
.demo-scene.show .ds-doc-paper .l:nth-child(4){animation-delay:.54s}
.demo-scene.show .ds-doc-paper .l:nth-child(5){animation-delay:.67s}
.demo-scene.show .ds-doc-paper .l:nth-child(6){animation-delay:.8s}
.demo-scene.show .ds-doc-paper .l:nth-child(7){animation-delay:.93s}
@keyframes dsLine{ from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:none} }

/* track - mini dashboard table */
.ds-tbl{ display:grid; gap:6px; }
.ds-tr{ display:grid; grid-template-columns:1.1fr 1.3fr .5fr .9fr; align-items:center; gap:8px; padding:9px 12px; background:#fff; border:1px solid #eee; border-radius:9px; font-size:.84rem; color:#241a40;
  opacity:0; transform:translateY(8px); }
.demo-scene.show .ds-tr{ animation:dsRow .4s ease forwards; }
.demo-scene.show .ds-tr:nth-child(1){animation-delay:.25s}.demo-scene.show .ds-tr:nth-child(2){animation-delay:.4s}
.demo-scene.show .ds-tr:nth-child(3){animation-delay:.55s}.demo-scene.show .ds-tr:nth-child(4){animation-delay:.7s}.demo-scene.show .ds-tr:nth-child(5){animation-delay:.85s}
.ds-tr.ds-th{ background:transparent; border:0; padding:2px 12px; color:#9aa; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; opacity:1; transform:none; animation:none; }
.ds-tr .co{ font-weight:700; }
.ds-tr .ds-jd{ color:#7c3aed; }
.ds-tr .st{ font-size:.7rem; font-weight:700; padding:3px 9px; border-radius:999px; justify-self:start; }

/* tools - SVG icons */
.ds-tool-ic svg{ width:34px; height:34px; }
.ds-tool-ic{ display:inline-grid; place-items:center; }

/* win - confetti */
.ds-win{ position:relative; }
.ds-confetti{ position:absolute; font-size:1.4rem; opacity:0; }
.demo-scene.show .ds-confetti{ animation:confetti 1.4s ease-out .3s forwards; }
.ds-confetti{ top:30%; left:30%; } .ds-confetti.c2{ top:25%; left:65%; } .ds-confetti.c3{ top:45%; left:50%; }
.demo-scene.show .ds-confetti.c2{ animation-delay:.5s } .demo-scene.show .ds-confetti.c3{ animation-delay:.7s }
@keyframes confetti{ 0%{ opacity:0; transform:translateY(20px) scale(.5) rotate(0) } 40%{ opacity:1 } 100%{ opacity:0; transform:translateY(-50px) scale(1.2) rotate(40deg) } }

/* Hira presenter */
.demo-hira{ display:flex; align-items:center; gap:14px; margin:18px auto 0; max-width:680px; padding:0 6px; }
.demo-hira-img{ width:auto; height:92px; flex:none; object-fit:contain; filter:drop-shadow(0 8px 12px rgba(46,16,101,.3)); animation:hiraBobDemo 3s ease-in-out infinite; }
@keyframes hiraBobDemo{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.demo-hira-say{ position:relative; background:#fff; border:1px solid #ece8fa; color:#332a52; font-weight:600; font-size:.92rem; line-height:1.45; padding:13px 18px; border-radius:6px 16px 16px 16px; box-shadow:0 10px 26px rgba(46,16,101,.12); flex:1; }
.demo-hira-say::before{ content:""; position:absolute; left:-8px; top:18px; border:8px solid transparent; border-right-color:#fff; border-left:0; }
.demo-hira-say.pop{ animation:sayPop .4s cubic-bezier(.34,1.5,.5,1); }
@keyframes sayPop{ from{ opacity:.3; transform:scale(.96) } to{ opacity:1; transform:none } }

@media (max-width:600px){
  .demo-screen{ height:400px; }
  .ds-stats{ grid-template-columns:repeat(2,1fr); }
  .ds-tools{ grid-template-columns:1fr; }
  .ds-doc{ flex-direction:column; align-items:center; }
  .demo-dots{ flex-wrap:wrap; justify-content:center; }
  .demo-dots button{ padding:5px 8px; font-size:.66rem; }
  .demo-hira-img{ width:auto; height:74px; }
  .demo-hira-say{ font-size:.84rem; }
}
@media (prefers-reduced-motion:reduce){
  .demo-scene{ transition:none } .ds-win-ic{ animation:none } .demo-hira-img{ animation:none }
}

/* =========================================================
   Portfolio "how-to" demo - extra scene visuals (reuses .demo-* frame)
   ========================================================= */
/* step 1 - paste resume */
.pf-paste{ display:flex; flex-direction:column; gap:18px; align-items:center; padding-top:12px; }
.pf-textarea{ width:100%; max-width:440px; background:#fff; border:1.5px dashed #cbb9f2; border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:11px; }
.pf-textarea .l{ height:9px; border-radius:999px; background:#ece8fa; opacity:0; animation:dsLine .4s ease forwards; }
.demo-scene.show .pf-textarea .l:nth-child(1){ animation-delay:.2s }
.demo-scene.show .pf-textarea .l:nth-child(2){ animation-delay:.34s }
.demo-scene.show .pf-textarea .l:nth-child(3){ animation-delay:.48s }
.demo-scene.show .pf-textarea .l:nth-child(4){ animation-delay:.62s }
.pf-btn{ background:linear-gradient(135deg,#7c3aed,#6d28d9); color:#fff; border:0; font-weight:700; font-size:.92rem; padding:12px 22px; border-radius:12px; cursor:pointer; box-shadow:0 10px 24px rgba(124,58,237,.35); opacity:0; transform:translateY(8px); }
.demo-scene.show .pf-btn{ animation:dsRow .5s ease .95s forwards; }

/* step 3 - theme picker */
.pf-themes{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding-top:12px; }
.pf-theme{ border:2px solid #eee; border-radius:12px; padding:11px; background:#fff; text-align:center; opacity:0; transform:translateY(10px); }
.demo-scene.show .pf-theme{ animation:dsRow .45s ease forwards; }
.demo-scene.show .pf-theme:nth-child(1){ animation-delay:.2s }
.demo-scene.show .pf-theme:nth-child(2){ animation-delay:.35s }
.demo-scene.show .pf-theme:nth-child(3){ animation-delay:.5s }
.pf-prev{ height:62px; border-radius:8px; margin-bottom:10px; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:10px; }
.pf-theme.t1 .pf-prev{ background:linear-gradient(135deg,#ede9fe,#ddd6fe); }
.pf-theme.t2 .pf-prev{ background:#f2f2f5; }
.pf-theme.t3 .pf-prev{ background:linear-gradient(135deg,#1f2937,#4c1d95); }
.pf-prev span{ height:6px; border-radius:999px; background:rgba(124,58,237,.4); }
.pf-theme.t2 .pf-prev span{ background:#c7c7d1; }
.pf-theme.t3 .pf-prev span{ background:rgba(255,255,255,.55); }
.pf-prev span:nth-child(1){ width:55% } .pf-prev span:nth-child(2){ width:90% } .pf-prev span:nth-child(3){ width:40% }
.pf-theme b{ font-size:.82rem; color:#241a40; }
.pf-theme.on{ border-color:#7c3aed; box-shadow:0 12px 26px rgba(124,58,237,.22); }
.pf-theme.on b{ color:#6d28d9; }

/* step 4 - publish */
.pf-publish{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; }
.pf-live{ background:#fff; border:1px solid #eee; border-radius:16px; padding:22px 26px; box-shadow:0 14px 34px rgba(46,16,101,.1); display:flex; flex-direction:column; align-items:center; gap:14px; min-width:300px;
  opacity:0; transform:translateY(10px); }
.demo-scene.show .pf-live{ animation:dsRow .5s ease .2s forwards; }
.pf-live-badge{ display:inline-flex; align-items:center; gap:7px; font-size:.76rem; font-weight:800; color:#059669; background:#ecfdf5; padding:5px 12px; border-radius:999px; }
.pf-live-badge i{ width:8px; height:8px; border-radius:50%; background:#10b981; animation:pfPulse 1.6s infinite; }
@keyframes pfPulse{ 0%{ box-shadow:0 0 0 0 rgba(16,185,129,.5) } 70%{ box-shadow:0 0 0 8px rgba(16,185,129,0) } 100%{ box-shadow:0 0 0 0 rgba(16,185,129,0) } }
.pf-url{ font-weight:700; color:#241a40; font-size:1rem; background:#f3eeff; border:1px solid #e0d8fa; padding:10px 16px; border-radius:10px; }
.pf-share{ display:flex; gap:9px; flex-wrap:wrap; justify-content:center; }
.pf-share span{ font-size:.78rem; font-weight:600; color:#6d28d9; background:#f3eeff; border:1px solid #e0d8fa; padding:7px 12px; border-radius:999px; }
.pf-note{ font-size:.85rem; color:#8b85a0; margin:0; }
@media (max-width:600px){ .pf-themes{ grid-template-columns:1fr 1fr 1fr; gap:8px; } .pf-theme{ padding:8px } .pf-prev{ height:48px } }