/* The Mystica — "night" style shared with the YouTube/TikTok videos (2026-10-10).
   Colours from the video generator: sky #1a0833, mid #4a1777, glow #b27be6, gold #ffd36e. */
:root { --mn-sky: #1a0833; --mn-mid: #4a1777; --mn-glow: #b27be6; --mn-gold: #ffd36e; --mn-cream: #faf4ff; }

/* ---------- Home hero ---------- */
.mx-home-hero {
  background: var(--mn-sky) url(/images/brand/mystica-night-wide.webp) 50% 50% / cover no-repeat !important;
  border-bottom: 0 !important; color: var(--mn-cream); position: relative; overflow: hidden;
}
.mx-home-hero h1 { color: #fff !important; }
.mx-home-hero .mx-lead { color: #e6dcf7 !important; }
.mx-home-hero .mx-eyebrow { color: var(--mn-gold); background: rgba(255, 211, 110, .12); border: 1px solid rgba(255, 211, 110, .35); }
.mx-home-hero .rws-image { box-shadow: 0 0 0 2px var(--mn-gold), 0 10px 30px rgba(0, 0, 0, .45) !important; border-radius: 6px; }
.mx-home-hero figcaption a, .mx-home-hero .mx-home-paths a, .mx-home-hero p a { color: var(--mn-gold) !important; }
.mx-home-hero .mx-home-note, .mx-home-hero p:not(.mx-lead) { color: #cfc3e8 !important; }
.mx-home-hero .mx-home-actions .mx-btn:first-child { background: var(--mn-gold) !important; color: var(--mn-sky) !important; border-color: var(--mn-gold) !important; }
.mx-home-hero .mx-home-actions .mx-btn { box-shadow: 0 6px 22px rgba(0, 0, 0, .35); }
.mx-home-hero-in { position: relative; z-index: 1; }
@media (min-width: 1180px) {
  .mx-home-hero::after { content: ""; position: absolute; right: max(2%, calc((100% - 1280px) / 2)); bottom: 0; width: 250px; height: 433px;
    background: url(/images/brand/mystica-figure.webp) 50% 100% / contain no-repeat, radial-gradient(closest-side, rgba(255,211,110,.22), rgba(255,211,110,0)) 50% 45% / 100% 100% no-repeat; pointer-events: none; }
}
@media (max-width: 760px) {
  .mx-home-hero { background-image: url(/images/brand/mystica-night-sky.webp) !important; background-position: 50% 0 !important; }
}

/* ---------- Chat pages ---------- */
.chat-wrap {
  background: var(--mn-sky) url(/images/brand/mystica-night-wide.webp) 50% 0 / cover no-repeat !important;
  padding: 28px 16px 2rem !important;
}
.chat-wrap .chat { border-top: 4px solid var(--mn-gold) !important; box-shadow: 0 18px 50px rgba(0, 0, 0, .45) !important; }
.chat-wrap .chat-top { background: linear-gradient(135deg, var(--mn-sky), var(--mn-mid)); border-bottom: 0 !important; }
.chat-wrap .chat-top .who, .chat-wrap .chat-top .counter { color: #fff !important; }
.chat-wrap .chat-top .note { color: #e2d6f6 !important; opacity: 1 !important; background: none !important; padding: 0 !important; margin: 2px 0 0 !important;
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important; font-size: .85rem !important; max-width: none !important; }
.chat-wrap .chat-top > div:first-child { display: flex; flex-direction: column; justify-content: center; min-height: 48px;
  padding-left: 60px; background: url(/images/brand/mystica-avatar.webp) 0 50% / 48px 48px no-repeat; }
.chat-wrap .msg.mystica { position: relative; margin-left: 42px; }
.chat-wrap .msg.mystica::before { content: ""; position: absolute; left: -42px; top: 0; width: 34px; height: 34px; border-radius: 50%;
  background: url(/images/brand/mystica-avatar.webp) center / cover no-repeat; box-shadow: 0 0 0 2px var(--mn-gold); }
.chat-wrap .disclaimer { background: rgba(255, 255, 255, .94) !important; }
@media (max-width: 760px) { .chat-wrap { background-image: url(/images/brand/mystica-night-sky.webp) !important; } }
@media (max-width: 560px) { .chat-wrap .msg.mystica { margin-left: 38px; } .chat-wrap .msg.mystica::before { left: -38px; width: 30px; height: 30px; } }