/* EMBERS project-page layer. Kept separate while the feature flag is staged,
   so the established board remains untouched until its own UI phase. */
.one-listing { --signal: #f0522d; }
.community-spotlight { position: relative; overflow: hidden; }
.community-spotlight::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--signal), var(--ember-hi) 45%, transparent 88%);
}
.community-spotlight .project-section-head > b {
  border-color: rgba(255,179,63,.25); color: var(--ember-hi); background: rgba(255,179,63,.045);
}
.spotlight-principle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 18px;
  border: 1px solid #302b27; background: #302b27;
}
.spotlight-principle span {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 13px 15px;
  color: #837b74; background: #0b0a09; font: 12px/1.45 var(--sans);
}
.spotlight-principle i { color: var(--ember-hi); font: 14px/1 var(--sans); font-style: normal; }
.spotlight-principle b { color: #e8ded4; font-weight: 650; }

.spotlight-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.spotlight-lane {
  min-width: 0; padding: 18px; border: 1px solid #302b27;
  background: linear-gradient(145deg, rgba(255,255,255,.018), transparent 58%), #0b0a09;
}
.ember-lane { border-color: rgba(255,179,63,.23); background: linear-gradient(145deg, rgba(255,179,63,.045), transparent 62%), #0b0a09; }
.spotlight-lane-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.spotlight-lane-head > div > span { display: block; color: #746c65; font: 650 10px/1 var(--mono); letter-spacing: .14em; }
.spotlight-lane-head > div > b { display: block; margin-top: 7px; color: #d9cec4; font: 600 12px/1.35 var(--mono); }
.spotlight-lane-head > i { color: var(--signal); font: 20px/1 var(--sans); font-style: normal; }
.spotlight-lane-head .spark-mark { color: var(--ember-hi); text-shadow: 0 0 14px rgba(255,179,63,.45); }

.spotlight-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 17px; background: #292522; }
.spotlight-metrics > div { min-width: 0; padding: 13px 11px; background: #080807; }
.spotlight-metrics span, .ember-total span { display: block; color: #716a64; font: 650 10px/1.2 var(--mono); letter-spacing: .08em; }
.spotlight-metrics b { display: block; margin-top: 8px; color: #eee4da; font: 660 16px/1 var(--mono); white-space: nowrap; }
.spotlight-metrics small { display: block; margin-top: 6px; color: #5f5954; font: 10px/1.25 var(--mono); }
.paid-metrics > div:first-child b { color: var(--ember-hi); }
.spotlight-lane > p { margin: 14px 0 0; color: #7e7770; font: 12px/1.6 var(--sans); }

.ember-total { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; }
.ember-total b { color: #fff0d8; font: 710 32px/1 var(--mono); letter-spacing: -.05em; }
.ember-total span { color: var(--ember-hi); }
.rank-power-meter { position: relative; height: 7px; margin-top: 14px; overflow: hidden; background: var(--signal); }
.rank-power-meter i {
  position: absolute; top: 0; right: 0; bottom: 0;
  min-width: 0; background: var(--ember-hi); box-shadow: -6px 0 16px rgba(255,179,63,.38);
}
.community-spotlight .spark-mark { animation: spotlightSpark 4s ease-in-out infinite; }
.community-spotlight .rank-power-meter i { animation: emberMeterGlow 4.8s ease-in-out infinite; }
.ember-supporting { display: grid; gap: 7px; margin-top: 15px; }
.ember-supporting span { display: flex; justify-content: space-between; gap: 14px; color: #77706a; font: 11px/1.25 var(--mono); }
.ember-supporting b { color: #d9cec4; font-weight: 650; }

.spotlight-next {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: 12px; padding: 14px 16px; border: 1px solid #3c2f25; background: #100c09;
}
.spotlight-next span { color: #756d66; font: 650 10px/1 var(--mono); letter-spacing: .14em; }
.spotlight-next b { color: var(--ember-hi); font: 650 13px/1.25 var(--mono); }
.spotlight-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.spotlight-actions a {
  display: grid; place-items: center; min-height: 44px; border-radius: 0;
  text-decoration: none; font: 650 11px/1 var(--mono); letter-spacing: .1em;
}
.spotlight-actions .cta { color: #170b06; background: var(--signal); box-shadow: none; }
.spotlight-actions .ghost {
  width: auto; margin-left: 0; border: 1px solid #51402f;
  color: var(--ember-hi); background: rgba(255,179,63,.025);
}
.community-spotlight .spotlight-fineprint { margin-top: 13px; color: #655f59; font-size: 11px; line-height: 1.55; }

@media (max-width: 760px) {
  .spotlight-principle, .spotlight-columns { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .spotlight-principle span { align-items: flex-start; padding: 12px; }
  .spotlight-lane { padding: 15px; }
  .spotlight-metrics { grid-template-columns: 1fr 1fr; }
  .spotlight-metrics > div:last-child { grid-column: 1 / -1; }
  .spotlight-next { align-items: flex-start; flex-direction: column; gap: 8px; }
  .spotlight-actions { grid-template-columns: 1fr; }
}

/* The referral share remains a small utility card. Its glow identifies earned
   momentum without letting it compete with the paid-Heat action above. */
.project-share-card.ember-share-live {
  position: relative;
  overflow: hidden;
  border-color: rgba(255,179,63,.24);
  background: linear-gradient(145deg, rgba(255,179,63,.05), transparent 62%), rgba(14,13,12,.92);
}
.project-share-card.ember-share-live::before {
  content: '✦'; position: absolute; top: 13px; right: 16px;
  color: rgba(255,179,63,.22); font: 28px/1 var(--sans); pointer-events: none;
}
.project-share-card.ember-share-live .project-side-kicker { color: var(--ember-hi); }
.project-share-card .share-qualification {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid rgba(255,179,63,.12);
  color: #756d66; font: 10px/1.55 var(--mono); letter-spacing: .025em;
}
.project-share-card .share-qualification i {
  flex: none; color: var(--ember-hi); font-style: normal; text-shadow: 0 0 9px rgba(255,179,63,.35);
}
.project-share-card.ember-share-live .share-x {
  color: #170b06; border-color: var(--ember-hi); background: var(--ember-hi);
}
.project-share-card.ember-share-live .share-x:hover { color: #170b06; background: #ffc766; }

.ember-award-toast {
  position: fixed; z-index: 80; right: 20px; bottom: 20px;
  display: flex; align-items: center; gap: 12px; max-width: min(360px, calc(100vw - 28px));
  padding: 14px 16px; border: 1px solid rgba(255,179,63,.38);
  background: rgba(18,13,9,.97); box-shadow: 0 20px 60px rgba(0,0,0,.5);
  opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .28s, transform .28s;
}
.ember-award-toast[hidden] { display: none; }
.ember-award-toast.show { opacity: 1; transform: translate3d(0, 0, 0); }
.ember-award-toast > i {
  color: var(--ember-hi); font: 22px/1 var(--sans); font-style: normal;
  text-shadow: 0 0 16px rgba(255,179,63,.65); animation: toastSpark 1.4s ease-in-out infinite;
}
.ember-award-toast span { display: grid; gap: 5px; }
.ember-award-toast b { color: #fff0d8; font: 680 11px/1.2 var(--mono); letter-spacing: .08em; }
.ember-award-toast small { color: #91877e; font: 12px/1.35 var(--sans); }

@keyframes spotlightSpark {
  0%, 100% { transform: scale(.92); opacity: .72; }
  52% { transform: scale(1.08); opacity: 1; }
}
@keyframes emberMeterGlow {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}
@keyframes toastSpark {
  0%, 100% { transform: translateY(1px) scale(.9); opacity: .76; }
  52% { transform: translateY(-2px) scale(1.08); opacity: 1; }
}

@media (max-width: 480px) {
  .ember-award-toast { right: 14px; bottom: 82px; left: 14px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .project-share-card .share-qualification i { text-shadow: none; }
  .community-spotlight .spark-mark,
  .community-spotlight .rank-power-meter i,
  .ember-award-toast > i { animation: none; }
  .ember-award-toast { transition: none; transform: none; }
}

/* ============================================== THE TWO CURRENCIES, DRAWN ===

   Heat and Embers were both amber and both a platform emoji, which made them
   one thing rendered at two sizes. They are not one thing: Heat is bought and
   Embers are earned, they decay at different rates, and only one of them costs
   money. If a page cannot tell them apart at a glance it is not explaining the
   mechanic, it is decorating it.

   So they get different colours and real marks:

     HEAT    orange, a flame - the existing brand accent, unchanged
     EMBERS  violet, a spark burst - new, and deliberately not in the heat family

   Drawn as SVG rather than set as text. An emoji is a different picture on
   every platform, it is flat next to this palette, and it cannot be given a
   gradient or a glow. These are two small data URIs with no network cost. */

:root {
  --spark: #a855f7;
  --spark-hi: #d8b4fe;
  --spark-core: #e9d5ff;
}

.mark-flame, .mark-spark {
  display: inline-block; flex: none; background: center/contain no-repeat;
  font-size: 0 !important;                 /* the emoji underneath is decorative */
  vertical-align: -.16em;
}
.mark-flame { width: 15px; height: 19px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2030%22%3E%20%3Cdefs%3E%20%3ClinearGradient%20id=%22o%22%20x1=%220%22%20y1=%221%22%20x2=%220%22%20y2=%220%22%3E%20%3Cstop%20offset=%220%22%20stop-color=%22%23ff2d0f%22/%3E%3Cstop%20offset=%22.45%22%20stop-color=%22%23ff6a1f%22/%3E%20%3Cstop%20offset=%221%22%20stop-color=%22%23ffb33f%22/%3E%3C/linearGradient%3E%20%3ClinearGradient%20id=%22i%22%20x1=%220%22%20y1=%221%22%20x2=%220%22%20y2=%220%22%3E%20%3Cstop%20offset=%220%22%20stop-color=%22%23ffb33f%22/%3E%3Cstop%20offset=%22.6%22%20stop-color=%22%23ffe08a%22/%3E%20%3Cstop%20offset=%221%22%20stop-color=%22%23fffdf5%22/%3E%3C/linearGradient%3E%20%3C/defs%3E%20%3Cpath%20fill=%22url%28%23o%29%22%20d=%22M13.4.6c.5%204.2%203%206%205%208.6%202.4%203%203.3%205.7%203.3%208.6%200%205.6-4.3%209.9-9.7%209.9S2.3%2023.4%202.3%2017.8c0-3.4%201.3-5.9%203.3-8.2.5%201.9%201.5%203%202.6%203.3-.6-4.7.9-9%205.2-12.3z%22/%3E%20%3Cpath%20fill=%22url%28%23i%29%22%20d=%22M12.6%2012.1c.4%202.5%201.7%203.6%202.9%205.2%201.1%201.5%201.5%202.8%201.5%204.2%200%202.9-2.1%205-4.9%205s-4.9-2.1-4.9-5c0-1.9.8-3.3%202-4.6.2%201%20.6%201.6%201.2%201.8-.2-2.4.7-4.6%202.2-6.6z%22/%3E%20%3C/svg%3E"); }
.mark-spark {
  width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%20%3Cdefs%3E%3CradialGradient%20id=%22s%22%20cx=%2250%25%22%20cy=%2242%25%22%20r=%2255%25%22%3E%20%3Cstop%20offset=%220%22%20stop-color=%22%23fff%22/%3E%3Cstop%20offset=%22.35%22%20stop-color=%22%23f3e8ff%22/%3E%20%3Cstop%20offset=%221%22%20stop-color=%22%23a855f7%22/%3E%3C/radialGradient%3E%3C/defs%3E%20%3Cpath%20fill=%22url%28%23s%29%22%20d=%22M12%20.8c1.3%207.7%202.2%208.6%209.9%209.9-7.7%201.3-8.6%202.2-9.9%209.9-1.3-7.7-2.2-8.6-9.9-9.9C9.8%209.4%2010.7%208.5%2012%20.8z%22/%3E%20%3C/svg%3E");
  filter: drop-shadow(0 0 6px rgba(168,85,247,.55));
}

/* Every existing flame and spark, wherever the markup already put one. Keeping
   the selectors here rather than editing six files of markup means one place
   decides what these look like. */
.spotlight-principle span:first-child > i,
.paid-lane .spotlight-lane-head > i,
.power-paid > i {
  display: inline-block; flex: none; width: 15px; height: 19px; font-size: 0 !important;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2030%22%3E%20%3Cdefs%3E%20%3ClinearGradient%20id=%22o%22%20x1=%220%22%20y1=%221%22%20x2=%220%22%20y2=%220%22%3E%20%3Cstop%20offset=%220%22%20stop-color=%22%23ff2d0f%22/%3E%3Cstop%20offset=%22.45%22%20stop-color=%22%23ff6a1f%22/%3E%20%3Cstop%20offset=%221%22%20stop-color=%22%23ffb33f%22/%3E%3C/linearGradient%3E%20%3ClinearGradient%20id=%22i%22%20x1=%220%22%20y1=%221%22%20x2=%220%22%20y2=%220%22%3E%20%3Cstop%20offset=%220%22%20stop-color=%22%23ffb33f%22/%3E%3Cstop%20offset=%22.6%22%20stop-color=%22%23ffe08a%22/%3E%20%3Cstop%20offset=%221%22%20stop-color=%22%23fffdf5%22/%3E%3C/linearGradient%3E%20%3C/defs%3E%20%3Cpath%20fill=%22url%28%23o%29%22%20d=%22M13.4.6c.5%204.2%203%206%205%208.6%202.4%203%203.3%205.7%203.3%208.6%200%205.6-4.3%209.9-9.7%209.9S2.3%2023.4%202.3%2017.8c0-3.4%201.3-5.9%203.3-8.2.5%201.9%201.5%203%202.6%203.3-.6-4.7.9-9%205.2-12.3z%22/%3E%20%3Cpath%20fill=%22url%28%23i%29%22%20d=%22M12.6%2012.1c.4%202.5%201.7%203.6%202.9%205.2%201.1%201.5%201.5%202.8%201.5%204.2%200%202.9-2.1%205-4.9%205s-4.9-2.1-4.9-5c0-1.9.8-3.3%202-4.6.2%201%20.6%201.6%201.2%201.8-.2-2.4.7-4.6%202.2-6.6z%22/%3E%20%3C/svg%3E"); vertical-align: -.16em;
}
.spotlight-principle span:last-child > i,
.power-earned > i,
.ember-spark,
.project-share-card .share-qualification i {
  display: inline-block; flex: none; width: 18px; height: 18px; font-size: 0 !important;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%20%3Cdefs%3E%3CradialGradient%20id=%22s%22%20cx=%2250%25%22%20cy=%2242%25%22%20r=%2255%25%22%3E%20%3Cstop%20offset=%220%22%20stop-color=%22%23fff%22/%3E%3Cstop%20offset=%22.35%22%20stop-color=%22%23f3e8ff%22/%3E%20%3Cstop%20offset=%221%22%20stop-color=%22%23a855f7%22/%3E%3C/radialGradient%3E%3C/defs%3E%20%3Cpath%20fill=%22url%28%23s%29%22%20d=%22M12%20.8c1.3%207.7%202.2%208.6%209.9%209.9-7.7%201.3-8.6%202.2-9.9%209.9-1.3-7.7-2.2-8.6-9.9-9.9C9.8%209.4%2010.7%208.5%2012%20.8z%22/%3E%20%3C/svg%3E"); vertical-align: -.16em;
  text-shadow: none; filter: drop-shadow(0 0 5px rgba(168,85,247,.6));
}

/* The cluster, where there is room for embers to be plural. */
.ember-lane .spotlight-lane-head > i.spark-mark,
.ember-award-toast > i {
  display: inline-block; flex: none; width: 32px; height: 32px; font-size: 0 !important;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2030%2030%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id=%22c%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23fff%22/%3E%3Cstop%20offset=%22.4%22%20stop-color=%22%23e9d5ff%22/%3E%20%3Cstop%20offset=%221%22%20stop-color=%22%23a855f7%22/%3E%3C/radialGradient%3E%20%3C/defs%3E%20%3Cpath%20fill=%22url%28%23c%29%22%20d=%22M17.5%202.2c.9%205.3%201.8%206.2%207.1%207.1-5.3.9-6.2%201.8-7.1%207.1-.9-5.3-1.8-6.2-7.1-7.1%205.3-.9%206.2-1.8%207.1-7.1z%22/%3E%20%3Cpath%20fill=%22%23c084fc%22%20d=%22M7.6%2016.1c.6%203.2%201.1%203.7%204.3%204.3-3.2.6-3.7%201.1-4.3%204.3-.6-3.2-1.1-3.7-4.3-4.3%203.2-.6%203.7-1.1%204.3-4.3z%22/%3E%20%3Ccircle%20cx=%2223%22%20cy=%2221%22%20r=%221.9%22%20fill=%22%23d8b4fe%22/%3E%20%3Ccircle%20cx=%2214.5%22%20cy=%2227%22%20r=%221.2%22%20fill=%22%23a855f7%22/%3E%20%3Ccircle%20cx=%2226.5%22%20cy=%2214%22%20r=%221%22%20fill=%22%23e9d5ff%22/%3E%20%3C/svg%3E"); vertical-align: -.16em; text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(168,85,247,.7)) drop-shadow(0 0 24px rgba(168,85,247,.3));
}

/* The lane heads carry the big ones, so they get room to be seen. */
.paid-lane .spotlight-lane-head > i { width: 26px; height: 32px; }
.ember-lane .spotlight-lane-head > i.spark-mark { width: 30px; height: 30px; }

/* --------------------------------------------------------- the ember lane */

/* "More present" is mostly this: the lane is full of embers rather than
   labelled with one. A sparse field behind the content, low enough in contrast
   to stay behind the numbers. */
.ember-lane {
  position: relative;
  border-color: rgba(168,85,247,.28);
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20200%20140%22%3E%20%3Cg%20fill=%22%23a855f7%22%3E%20%3Cpath%20d=%22M24%2018c.5%202.8%201%203.3%203.8%203.8-2.8.5-3.3%201-3.8%203.8-.5-2.8-1-3.3-3.8-3.8%202.8-.5%203.3-1%203.8-3.8z%22%20opacity=%22.8%22/%3E%20%3Cpath%20d=%22M168%2034c.4%202.2.8%202.6%203%203-2.2.4-2.6.8-3%203-.4-2.2-.8-2.6-3-3%202.2-.4%202.6-.8%203-3z%22%20opacity=%22.7%22/%3E%20%3Cpath%20d=%22M96%20108c.4%202.4.9%202.9%203.3%203.3-2.4.4-2.9.9-3.3%203.3-.4-2.4-.9-2.9-3.3-3.3%202.4-.4%202.9-.9%203.3-3.3z%22%20opacity=%22.62%22/%3E%20%3Cpath%20d=%22M138%2092c.3%201.8.7%202.2%202.5%202.5-1.8.3-2.2.7-2.5%202.5-.3-1.8-.7-2.2-2.5-2.5%201.8-.3%202.2-.7%202.5-2.5z%22%20opacity=%22.72%22/%3E%20%3Ccircle%20cx=%2262%22%20cy=%2252%22%20r=%221.6%22%20opacity=%22.72%22/%3E%3Ccircle%20cx=%22182%22%20cy=%2276%22%20r=%221.6%22%20opacity=%22.62%22/%3E%20%3Ccircle%20cx=%2212%22%20cy=%2288%22%20r=%221.4%22%20opacity=%22.58%22/%3E%3Ccircle%20cx=%22118%22%20cy=%2224%22%20r=%221.8%22%20opacity=%22.68%22/%3E%20%3Ccircle%20cx=%2246%22%20cy=%22122%22%20r=%221.5%22%20opacity=%22.55%22/%3E%3Ccircle%20cx=%22152%22%20cy=%22126%22%20r=%221%22%20opacity=%22.3%22/%3E%20%3Ccircle%20cx=%2288%22%20cy=%2266%22%20r=%221.4%22%20opacity=%22.55%22/%3E%3Ccircle%20cx=%22196%22%20cy=%22108%22%20r=%221.5%22%20opacity=%22.55%22/%3E%20%3C/g%3E%20%3C/svg%3E") 0 0/170px 120px repeat,
    linear-gradient(145deg, rgba(168,85,247,.09), transparent 62%),
    #0a0910;
}
.ember-lane > * { position: relative; }
.ember-lane .spotlight-lane-head > div > span { color: #8f7fa8; }
.ember-lane .spotlight-lane-head > div > b { color: var(--spark-core); }

.ember-total b { color: #f3e8ff; text-shadow: 0 0 22px rgba(168,85,247,.4); }
.ember-total span { color: var(--spark-hi); }
.ember-lane .ember-supporting b { color: #e4d4f5; }

/* HEAT + EMBERS = RANK POWER, as one bar. The base is what was bought and the
   segment on the right is what was earned - the same sum the panel is trying
   to explain, in the two colours that now mean those two things. */
.rank-power-meter {
  height: 9px; border-radius: 5px;
  background: linear-gradient(90deg, #f0522d, #ff8a3d);
}
.rank-power-meter i {
  border-radius: 5px;
  background: linear-gradient(90deg, var(--spark), var(--spark-hi));
  box-shadow: -8px 0 20px rgba(168,85,247,.55), 0 0 12px rgba(168,85,247,.4);
}

/* The share card and its spark, in the same violet. */
.project-share-card.ember-share-live {
  border-color: rgba(168,85,247,.3);
  background: linear-gradient(145deg, rgba(168,85,247,.07), transparent 62%), rgba(12,11,16,.94);
}
.project-share-card.ember-share-live::before {
  content: ''; width: 30px; height: 30px; top: 14px; right: 16px;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2030%2030%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id=%22c%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23fff%22/%3E%3Cstop%20offset=%22.4%22%20stop-color=%22%23e9d5ff%22/%3E%20%3Cstop%20offset=%221%22%20stop-color=%22%23a855f7%22/%3E%3C/radialGradient%3E%20%3C/defs%3E%20%3Cpath%20fill=%22url%28%23c%29%22%20d=%22M17.5%202.2c.9%205.3%201.8%206.2%207.1%207.1-5.3.9-6.2%201.8-7.1%207.1-.9-5.3-1.8-6.2-7.1-7.1%205.3-.9%206.2-1.8%207.1-7.1z%22/%3E%20%3Cpath%20fill=%22%23c084fc%22%20d=%22M7.6%2016.1c.6%203.2%201.1%203.7%204.3%204.3-3.2.6-3.7%201.1-4.3%204.3-.6-3.2-1.1-3.7-4.3-4.3%203.2-.6%203.7-1.1%204.3-4.3z%22/%3E%20%3Ccircle%20cx=%2223%22%20cy=%2221%22%20r=%221.9%22%20fill=%22%23d8b4fe%22/%3E%20%3Ccircle%20cx=%2214.5%22%20cy=%2227%22%20r=%221.2%22%20fill=%22%23a855f7%22/%3E%20%3Ccircle%20cx=%2226.5%22%20cy=%2214%22%20r=%221%22%20fill=%22%23e9d5ff%22/%3E%20%3C/svg%3E"); opacity: .5;
}
.project-share-card.ember-share-live .project-side-kicker { color: var(--spark-hi); }
.project-share-card .share-qualification { border-top-color: rgba(168,85,247,.16); }
.project-share-card .share-qualification i {
  display: inline-block; width: 14px; height: 14px; font-size: 0 !important;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%20%3Cdefs%3E%3CradialGradient%20id=%22s%22%20cx=%2250%25%22%20cy=%2242%25%22%20r=%2255%25%22%3E%20%3Cstop%20offset=%220%22%20stop-color=%22%23fff%22/%3E%3Cstop%20offset=%22.35%22%20stop-color=%22%23f3e8ff%22/%3E%20%3Cstop%20offset=%221%22%20stop-color=%22%23a855f7%22/%3E%3C/radialGradient%3E%3C/defs%3E%20%3Cpath%20fill=%22url%28%23s%29%22%20d=%22M12%20.8c1.3%207.7%202.2%208.6%209.9%209.9-7.7%201.3-8.6%202.2-9.9%209.9-1.3-7.7-2.2-8.6-9.9-9.9C9.8%209.4%2010.7%208.5%2012%20.8z%22/%3E%20%3C/svg%3E"); text-shadow: none;
}
.project-share-card.ember-share-live .share-x {
  color: #150a1e; border-color: var(--spark-hi); background: var(--spark-hi);
}
.project-share-card.ember-share-live .share-x:hover { background: #efdcff; }

/* The toast, when an ember is actually earned. */
.ember-award-toast { border-color: rgba(168,85,247,.42); background: rgba(15,11,20,.97); }
.ember-award-toast > i { width: 26px; height: 26px; }
.ember-award-toast b { color: var(--spark-core); }

/* The ember-side controls, still amber and so still reading as Heat. The
   button that earns Embers should look like Embers. */
.spotlight-actions .ghost {
  border-color: rgba(168,85,247,.42); color: var(--spark-hi);
  background: rgba(168,85,247,.06);
}
.spotlight-actions .ghost:hover { border-color: var(--spark); color: #f3e8ff; }
.community-spotlight .project-section-head > b {
  border-color: rgba(168,85,247,.3); color: var(--spark-hi); background: rgba(168,85,247,.06);
}
.community-spotlight::before {
  background: linear-gradient(90deg, var(--signal), var(--ember-hi) 38%, var(--spark) 78%, transparent 96%);
}

/* A spark that only twinkles is a dot. These drift and brighten, which is what
   makes the lane feel alive rather than illustrated. */
.community-spotlight .spark-mark { animation: spotlightSpark 4.6s ease-in-out infinite; }

@keyframes spotlightSpark {
  0%, 100% { transform: translateY(1px) scale(.9) rotate(0deg); opacity: .78; }
  50% { transform: translateY(-2px) scale(1.1) rotate(18deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .community-spotlight .spark-mark { animation: none; }
}