/* ============================================
   MOMODINO UNIVERSE — Shared Design System
   themomodino.com
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=DM+Sans:wght@300;400;500&display=swap');

/* ── TOKENS ── */
:root {
  --pk:       #F4A7B9;
  --pk2:      #E8859C;
  --pk-deep:  #C45B79;
  --bl:       #6EB3D8;
  --bl2:      #4892BA;
  --gold:     #EDD69A;
  --navy:     #04071A;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  --player-h: 64px;
}

/* ── PAGE BACKGROUND (used on every page) ── */
.page-bg {
  background:
    radial-gradient(ellipse 65% 50% at 15% 8%,  #FEF0F3 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 92%,  #EDE0F8 0%, transparent 58%),
    radial-gradient(ellipse 75% 70% at 50% 45%,  #FAE8F0 0%, transparent 75%),
    linear-gradient(148deg, #FDE8EE 0%, #F8DDE8 22%, #F3D2E2 44%, #EAC8E0 66%, #DFC0EC 88%, #D4B8F4 100%);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, a { cursor: pointer; text-decoration: none; color: inherit; border: none; background: none; font-family: inherit; }
img { max-width: 100%; display: block; }

/* ── NAV PILL ── */
.nav {
  position: fixed;
  top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.55);
  border: 0.5px solid rgba(220,170,200,0.32);
  padding: 4px 7px; border-radius: 40px;
  backdrop-filter: blur(16px);
  z-index: 100;
  box-shadow: 0 2px 14px rgba(200,150,180,0.1);
}
.nav-item {
  padding: 7px 13px; border-radius: 30px;
  font-size: 11px; letter-spacing: 0.05em; font-weight: 500;
  color: rgba(145,70,110,0.48);
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.nav-item:hover, .nav-item.active {
  color: rgba(130,45,95,0.9);
  background: rgba(245,185,215,0.28);
}
.nav-divider { width: 1px; height: 14px; background: rgba(200,140,170,0.18); }
.nav-home {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(145,70,110,0.42);
  cursor: pointer; transition: all 0.15s; margin-right: 2px;
}
.nav-home:hover { background: rgba(245,185,215,0.25); color: rgba(130,45,95,0.88); }

/* ── PLAYER BAR ── */
.player {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--player-h);
  background: rgba(252,232,242,0.5);
  border-top: 0.5px solid rgba(215,168,192,0.18);
  backdrop-filter: blur(28px);
  display: flex; align-items: center;
  padding: 0 20px; gap: 13px;
  z-index: 90;
}
.player::before {
  content: '';
  position: absolute; top: 0; left: 0;
  height: 2px; width: var(--progress, 38%);
  background: linear-gradient(90deg, #D888B0, #B880C8);
  opacity: 0.55; pointer-events: none;
  transition: width 0.1s linear;
}
.player-thumb {
  width: 40px; height: 40px; border-radius: 9px;
  background: linear-gradient(135deg, #EEAAC4, #CC82AA);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(185,105,145,0.2);
  overflow: hidden;
}
.player-thumb img { width: 100%; height: 100%; object-fit: cover; }
.player-info { flex: 1; min-width: 0; }
.player-name { font-size: 13px; font-weight: 500; color: rgba(105,42,78,0.84); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-sub  { font-size: 10px; color: rgba(148,85,120,0.44); margin-top: 2px; }
.player-sub span { color: rgba(195,80,138,0.75); font-weight: 500; }
.ctrl {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(155,85,125,0.36); transition: all .14s;
}
.ctrl:hover { color: rgba(135,44,96,0.86); background: rgba(218,155,190,0.15); }
.ctrl-play {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #DC88B2, #BC70B4); color: #fff;
  box-shadow: 0 3px 12px rgba(185,98,142,0.25);
}
.ctrl-play:hover { transform: scale(1.08); }
.seek {
  flex: 0.44; height: 2px;
  background: rgba(188,138,168,0.13); border-radius: 2px;
  min-width: 44px; cursor: pointer; position: relative;
}
.seek-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #D888B0, #B880C8);
  border-radius: 2px; transition: width .1s linear;
  pointer-events: none;
}

/* ── FOOTER ── */
.footer {
  background: rgba(248,225,238,0.3);
  border: 0.5px solid rgba(215,168,192,0.16);
  border-top: none;
  padding: 12px 20px;
  display: flex; align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  backdrop-filter: blur(14px);
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 300;
  letter-spacing: 0.12em;
  color: rgba(115,50,90,0.6);
}
.footer-url {
  font-size: 10px; color: rgba(142,78,115,0.4);
  text-decoration: none;
}
.footer-url:hover { color: rgba(128,44,98,0.9); }
.footer-socials { display: flex; gap: 14px; align-items: center; }
.footer-social {
  color: rgba(142,72,112,0.36);
  display: flex; transition: color 0.18s;
}
.footer-social:hover { color: rgba(128,44,98,0.9); }
.footer-divider { width: 1px; height: 11px; background: rgba(188,132,162,0.18); }
.footer-email {
  font-size: 11px; color: rgba(142,72,112,0.36);
  text-decoration: none; transition: color 0.18s;
}
.footer-email:hover { color: rgba(128,44,98,0.9); }

/* ── SECTION EYEBROW ── */
.eyebrow {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500; color: rgba(188,100,148,0.55);
  margin-bottom: 7px; display: block;
}
.sec-label {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500; color: rgba(168,95,138,0.45);
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.sec-label::after {
  content: ''; flex: 1;
  height: 0.5px; background: rgba(210,160,190,0.2);
}

/* ── PAGE TITLE ── */
.page-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 56px);
  font-weight: 300; color: rgba(100,38,78,0.8);
  margin-bottom: 6px;
}
.page-sub {
  font-family: var(--font-display);
  font-style: italic; font-size: 14px;
  color: rgba(148,80,125,0.5);
  margin-bottom: 32px;
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(220,136,178,0.75), rgba(188,112,180,0.75));
  color: #fff; padding: 11px 24px; border-radius: 50px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  transition: all 0.2s; border: none;
  box-shadow: 0 4px 16px rgba(190,100,145,0.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(190,100,145,0.35); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.5); color: rgba(130,50,100,0.75);
  border: 0.5px solid rgba(218,165,195,0.4);
  padding: 11px 24px; border-radius: 50px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  transition: all 0.2s; backdrop-filter: blur(8px);
}
.btn-secondary:hover { background: rgba(255,255,255,0.7); border-color: rgba(218,165,195,0.65); }

/* ── CARD GLASS ── */
.glass-card {
  background: rgba(255,255,255,0.3);
  border: 0.5px solid rgba(218,170,198,0.26);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

/* ── STARS CANVAS ── */
canvas.stars {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

/* ── WRAP ── */
.wrap {
  position: relative; z-index: 5;
  padding: 84px 24px 100px;
  max-width: 960px; margin: 0 auto;
}

/* ── REVEAL ANIMATION ── */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: none; }

/* ── READABILITY ── */
.page-title { color: rgba(85,28,65,0.92) !important; }
.page-sub { color: rgba(130,65,105,0.72) !important; }
.eyebrow { color: rgba(168,80,130,0.72) !important; }
body { color: rgba(80,30,60,0.85); }

/* ── ANIMATED BACKGROUND ── */
@keyframes bgFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.page-bg {
  background: linear-gradient(
    -45deg,
    #FDE8EE, #F3D2E2, #EDE0F8, #FAE8F0,
    #EAC8E0, #D4B8F4, #FEF0F3, #DFC0EC
  ) !important;
  background-size: 400% 400% !important;
  animation: bgFlow 12s ease infinite;
}

/* space for fixed footer+player */
.wrap { padding-bottom: 140px !important; }

/* ── READABILITY ── */
.page-title { color: rgba(75,25,58,0.95) !important; }
.page-sub { color: rgba(120,55,95,0.78) !important; }
.eyebrow { color: rgba(160,75,125,0.78) !important; }
.sec-label { color: rgba(155,85,130,0.62) !important; }

/* ── GLOBAL TEXT READABILITY ── */
.page-title { color: rgba(72,22,55,0.92) !important; }
.page-sub { color: rgba(110,48,88,0.75) !important; }
.eyebrow { color: rgba(155,72,118,0.75) !important; }
.sec-label { color: rgba(148,68,115,0.65) !important; }
.sec-label::after { background: rgba(200,140,175,0.3) !important; }

/* orb drag */
.orb { user-select: none; }
.orb.dragging { transition: none !important; animation-play-state: paused !important; cursor: grabbing !important; }

/* ── BUBBLE ANIMATIONS ── */
@keyframes fa{0%,100%{transform:translate(0,0)}50%{transform:translate(5px,-11px)}}
@keyframes fb{0%,100%{transform:translate(0,0)}50%{transform:translate(-6px,-9px)}}
@keyframes fc{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-14px)}}
@keyframes fd{0%,100%{transform:translate(0,0)}50%{transform:translate(-5px,-8px)}}


/* ── RIPPLE ── */
@keyframes rippleAnim {
  to { transform: scale(1); opacity: 0; }
}

/* ── FOOTER SPACING ── */
.wrap { padding-bottom: 160px !important; }
#footer-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 88;
}
#player-wrap {
  position: fixed;
  bottom: 36px;
  left: 0;
  right: 0;
  z-index: 89;
}

/* ── FOOTER FIXED ── */
#player-wrap > div:last-child,
#player-wrap + div {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 88 !important;
}
#player-wrap > div:first-child {
  position: fixed !important;
  bottom: 36px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 89 !important;
}

/* ── MODE TOGGLE ── */
.mode-btn {
  background: none; border: none; cursor: pointer;
  font-size: 16px; padding: 4px 6px; border-radius: 8px;
  transition: transform 0.2s; line-height: 1;
}
.mode-btn:hover { transform: scale(1.2); }

/* ── BLUE MODE ── */
body.blue-mode {
  background: linear-gradient(-45deg, #0D0B1A, #1A1035, #0D1A2E, #1A0D2E) !important;
  background-size: 400% 400% !important;
  animation: bgFlow 15s ease infinite !important;
}
body.blue-mode .nav {
  background: rgba(20,15,40,0.75) !important;
  border-color: rgba(100,80,180,0.2) !important;
}
body.blue-mode .nav-item { color: rgba(180,160,255,0.75) !important; }
body.blue-mode .nav-item.active { color: rgba(220,200,255,0.95) !important; }
body.blue-mode .page-title { color: rgba(200,180,255,0.95) !important; }
body.blue-mode .page-sub { color: rgba(160,140,220,0.75) !important; }
body.blue-mode .eyebrow { color: rgba(140,120,200,0.7) !important; }
body.blue-mode .player {
  background: rgba(15,10,35,0.7) !important;
}
body.blue-mode .player-name { color: rgba(200,180,255,0.9) !important; }
body.blue-mode .player-sub { color: rgba(140,120,200,0.5) !important; }

/* ── BLUE MODE TEXT READABILITY ── */
body.blue-mode { color: rgba(220,210,255,0.9) !important; }
body.blue-mode .page-title { color: rgba(230,220,255,0.95) !important; }
body.blue-mode .page-sub { color: rgba(180,165,240,0.82) !important; }
body.blue-mode .eyebrow { color: rgba(160,145,220,0.78) !important; }
body.blue-mode .sec-label { color: rgba(155,140,215,0.72) !important; }

/* cards */
body.blue-mode .main-card,
body.blue-mode .city-card,
body.blue-mode .ch-card,
body.blue-mode .ac-card { 
  background: rgba(30,20,60,0.6) !important; 
  border-color: rgba(100,80,180,0.25) !important;
  color: rgba(220,210,255,0.9) !important;
}

/* track list */
body.blue-mode .track { color: rgba(200,185,255,0.85) !important; }
body.blue-mode .tr-name { color: rgba(220,205,255,0.88) !important; }
body.blue-mode .tr-dur { color: rgba(160,145,220,0.55) !important; }

/* travels */
body.blue-mode .dp-city { color: rgba(220,205,255,0.92) !important; }
body.blue-mode .dp-note { color: rgba(180,165,240,0.78) !important; }
body.blue-mode .dp-tag { 
  background: rgba(80,60,150,0.35) !important; 
  color: rgba(200,185,255,0.82) !important;
  border-color: rgba(100,80,180,0.25) !important;
}

/* community */
body.blue-mode .card-front { 
  background: linear-gradient(145deg,#1A1040,#251558,#1A1040) !important; 
  color: rgba(220,210,255,0.9) !important;
}
body.blue-mode #cf-quote { color: rgba(210,195,255,0.88) !important; }

/* footer + player */
body.blue-mode .player { background: rgba(12,8,30,0.85) !important; }
body.blue-mode .player-name { color: rgba(210,195,255,0.92) !important; }
body.blue-mode .player-sub { color: rgba(140,125,200,0.55) !important; }
body.blue-mode .footer { background: rgba(10,6,25,0.9) !important; }
body.blue-mode .footer-brand { color: rgba(180,165,240,0.7) !important; }
body.blue-mode .footer-url,
body.blue-mode .footer-social,
body.blue-mode .footer-email { color: rgba(140,125,200,0.5) !important; }

/* ── BLUE MODE UNIVERSAL TEXT FIX ── */
body.blue-mode *:not(.ac-img-inner):not(img):not(canvas) { color: rgba(220,210,255,0.92); }
body.blue-mode h1, body.blue-mode h2, body.blue-mode h3 { color: rgba(240,235,255,0.98) !important; }
body.blue-mode p, body.blue-mode span, body.blue-mode div { color: rgba(210,200,255,0.88); }
body.blue-mode a { color: rgba(180,165,255,0.82) !important; }
body.blue-mode .nav-item { color: rgba(200,185,255,0.85) !important; }
body.blue-mode .nav-item.active { color: rgba(255,255,255,0.98) !important; }
body.blue-mode input, body.blue-mode textarea { 
  color: rgba(220,210,255,0.9) !important; 
  background: rgba(30,20,60,0.5) !important;
  border-color: rgba(100,80,180,0.3) !important;
}
body.blue-mode input::placeholder, body.blue-mode textarea::placeholder {
  color: rgba(160,145,220,0.5) !important;
}
body.blue-mode button { color: rgba(220,210,255,0.9) !important; }

/* ── BLUE MODE CARDS & POPUPS ── */
body.blue-mode .main-card,
body.blue-mode .city-card,
body.blue-mode .ch-card,
body.blue-mode .ac-card,
body.blue-mode .ac-img-inner { 
  background: rgba(25,15,55,0.85) !important; 
  border-color: rgba(100,80,180,0.3) !important;
}

/* cast modal / profile popup */
body.blue-mode .modal,
body.blue-mode .modal-inner,
body.blue-mode [class*="modal"],
body.blue-mode [class*="popup"],
body.blue-mode [class*="detail"],
body.blue-mode .dp-wrap,
body.blue-mode #city-detail { 
  background: rgba(20,12,45,0.95) !important; 
  border-color: rgba(100,80,180,0.3) !important;
}

/* travels city detail panel */
body.blue-mode .dp-city,
body.blue-mode .dp-date,
body.blue-mode .dp-note,
body.blue-mode .dp-tag,
body.blue-mode .dp-close { 
  background: rgba(30,20,60,0.6) !important;
  border-color: rgba(100,80,180,0.25) !important;
}

/* track rows */
body.blue-mode .track,
body.blue-mode .track:hover { 
  background: rgba(30,20,60,0.5) !important; 
}

/* community card front */
body.blue-mode .card-front,
body.blue-mode .card-stage { 
  background: linear-gradient(145deg,#1A1040,#251558,#1A1040) !important; 
}

/* highlight box */
body.blue-mode .hl-box,
body.blue-mode [class*="highlight"] { 
  background: rgba(25,15,55,0.85) !important; 
}

/* ── BLUE MODE INDEX ── */
body.blue-mode .cloud { display: none !important; }
body.blue-mode .orb {
  background: rgba(30,20,60,0.7) !important;
  box-shadow: 0 0 20px rgba(140,100,255,0.3), 0 0 0 0.5px rgba(120,80,220,0.4) !important;
}
body.blue-mode .orb svg { color: rgba(200,180,255,0.85) !important; }
body.blue-mode .orb-center {
  background: rgba(40,25,80,0.85) !important;
  box-shadow: 0 0 30px rgba(140,100,255,0.4), 0 0 0 0.5px rgba(120,80,220,0.5) !important;
}

/* ── BLUE MODE IMAGE FIX ── */
body.blue-mode img,
body.blue-mode .ac-img-inner[style*="url("] { 
  filter: none !important;
  opacity: 1 !important;
}
body.blue-mode canvas { color: unset !important; }

/* ── BLUE MODE ALBUM COVER FIX ── */
body.blue-mode .ac-img-inner[style*="background:url"] {
  background: var(--cover-bg) !important;
}

/* keep album covers in blue mode */
body.blue-mode .ac-img-inner { 
  background: unset !important;
}

/* ── BLUE MODE ALBUM COVER PRESERVE ── */
body.blue-mode .ac-img-inner,
body.blue-mode .ac-img-inner[style],
body.blue-mode .ac-img-inner[style*="url"] {
  background: unset !important;
  background-image: inherit !important;
}

/* force keep inline background on ac-img-inner */
body.blue-mode .ac-img-inner[style*="background:url"] {
  background: attr(style) !important;
}

/* ── BLUE MODE KEEP COVERS ── */
body.blue-mode .ac-img-inner[data-bg] {
  background: var(--cover) !important;
}

/* ── BLUE MODE TRAVELS ── */
body.blue-mode .map-wrap,
body.blue-mode #map-wrap { 
  background: rgba(15,10,40,0.8) !important;
  border-color: rgba(80,60,160,0.3) !important;
}
body.blue-mode .pin-label { 
  background: rgba(20,12,50,0.9) !important;
  color: rgba(220,210,255,0.95) !important;
}
body.blue-mode #city-detail,
body.blue-mode .city-detail {
  background: rgba(18,10,45,0.96) !important;
  border-color: rgba(80,60,160,0.3) !important;
  color: rgba(220,210,255,0.92) !important;
}
body.blue-mode .dp-tag {
  background: rgba(40,25,80,0.7) !important;
  border-color: rgba(100,80,180,0.3) !important;
  color: rgba(200,185,255,0.85) !important;
}
body.blue-mode .city-card {
  background: rgba(20,12,45,0.85) !important;
  border-color: rgba(80,60,160,0.25) !important;
}

/* ── BLUE MODE COMMUNITY ── */
body.blue-mode input,
body.blue-mode textarea {
  background: rgba(25,15,55,0.7) !important;
  border-color: rgba(100,80,180,0.35) !important;
  color: rgba(220,210,255,0.9) !important;
}
body.blue-mode input::placeholder,
body.blue-mode textarea::placeholder {
  color: rgba(150,135,210,0.55) !important;
}
body.blue-mode .nl-wrap,
body.blue-mode .msg-wrap,
body.blue-mode .msg-form {
  background: rgba(20,12,45,0.6) !important;
  border-color: rgba(80,60,160,0.25) !important;
}
body.blue-mode .float-btn,
body.blue-mode .nl-btn {
  background: rgba(80,55,160,0.75) !important;
  color: rgba(220,210,255,0.95) !important;
}
body.blue-mode #bwall {
  background: rgba(15,8,40,0.5) !important;
  border-color: rgba(80,60,160,0.2) !important;
}

/* ── BLUE MODE STORIES ── */
body.blue-mode .ch-card {
  background: rgba(20,12,45,0.85) !important;
  border-color: rgba(80,60,160,0.25) !important;
}

/* ── BLUE MODE MUSIC TRACK LIST ── */
body.blue-mode .track:hover {
  background: rgba(40,25,80,0.5) !important;
}
body.blue-mode .track.playing {
  background: rgba(60,40,120,0.5) !important;
}
body.blue-mode .hl-box {
  background: rgba(20,12,45,0.85) !important;
  border-color: rgba(80,60,160,0.25) !important;
}
body.blue-mode .sec-head {
  color: rgba(160,145,220,0.7) !important;
}

/* ── BLUE MODE CAST ── */
body.blue-mode .main-card,
body.blue-mode .city-card {
  background: rgba(20,12,45,0.85) !important;
  border-color: rgba(80,60,160,0.25) !important;
}
body.blue-mode .view-btn {
  background: rgba(40,25,80,0.6) !important;
  color: rgba(200,185,255,0.85) !important;
}
body.blue-mode .char-badge {
  background: rgba(40,25,80,0.5) !important;
  border-color: rgba(100,80,180,0.3) !important;
}

/* ── BLUE MODE TEXT ONLY - NO BACKGROUND CHANGES ── */
body.blue-mode input,
body.blue-mode textarea {
  color: rgba(220,210,255,0.9) !important;
  border-color: rgba(100,80,180,0.35) !important;
}
body.blue-mode input::placeholder,
body.blue-mode textarea::placeholder {
  color: rgba(150,135,210,0.55) !important;
}

/* ── BLUE MODE COMMUNITY TEXT ── */
body.blue-mode .community-wrap,
body.blue-mode .tarot-section,
body.blue-mode .bubble-section,
body.blue-mode .msg-section,
body.blue-mode .nl-section,
body.blue-mode #cf-quote,
body.blue-mode .card-hint,
body.blue-mode .sec-label,
body.blue-mode .nl-label,
body.blue-mode .draw-btn,
body.blue-mode .cf-share { color: rgba(230,220,255,0.92) !important; }

body.blue-mode input,
body.blue-mode textarea {
  color: rgba(230,220,255,0.92) !important;
  border-color: rgba(120,100,200,0.4) !important;
}

/* ── BLUE MODE TRAVELS MAP ── */
body.blue-mode .map-wrap {
  background: rgba(10,6,28,0.82) !important;
  border-color: rgba(80,60,160,0.25) !important;
}
body.blue-mode .city-cards-grid .city-card {
  background: rgba(15,8,38,0.75) !important;
  border-color: rgba(80,60,160,0.2) !important;
}

/* ── BLUE MODE FOOTER + PLAYER ── */
body.blue-mode .player {
  background: rgba(8,5,22,0.92) !important;
  border-color: rgba(80,60,160,0.2) !important;
}
body.blue-mode .player-name { color: rgba(230,220,255,0.95) !important; }
body.blue-mode .player-sub { color: rgba(160,145,220,0.6) !important; }
body.blue-mode .player-sub span { color: rgba(180,165,240,0.8) !important; }
body.blue-mode .ctrl { color: rgba(200,185,255,0.7) !important; }
body.blue-mode .ctrl-play { background: rgba(80,55,160,0.8) !important; }
body.blue-mode .seek { background: rgba(60,45,120,0.4) !important; }
body.blue-mode .seek-fill { background: linear-gradient(90deg,#8060D0,#A080E0) !important; }
body.blue-mode #player-wrap > div:last-child,
body.blue-mode #player-wrap > div > div:last-child {
  background: rgba(6,3,18,0.95) !important;
  border-color: rgba(60,45,120,0.2) !important;
}
body.blue-mode .footer-brand { color: rgba(220,210,255,0.85) !important; }
body.blue-mode .footer-url { color: rgba(170,155,235,0.65) !important; }
body.blue-mode .footer-social { color: rgba(170,155,235,0.55) !important; }
body.blue-mode .footer-email { color: rgba(170,155,235,0.55) !important; }

/* ── BLUE MODE TRAVELS MAP ── */
body.blue-mode .map-outer {
  background: rgba(20,15,50,0.55) !important;
  border-color: rgba(100,80,180,0.25) !important;
}
body.blue-mode .cc-nm,
body.blue-mode .cc-co,
body.blue-mode .cc-note,
body.blue-mode .cc-date { color: rgba(220,210,255,0.9) !important; }
body.blue-mode .cc-song {
  background: rgba(40,25,80,0.5) !important;
  color: rgba(200,185,255,0.85) !important;
  border-color: rgba(80,60,160,0.25) !important;
}
body.blue-mode .dp-city,
body.blue-mode .dp-date,
body.blue-mode .dp-note { color: rgba(220,210,255,0.9) !important; }
body.blue-mode .dp-tag {
  background: rgba(40,25,80,0.5) !important;
  color: rgba(200,185,255,0.85) !important;
  border-color: rgba(80,60,160,0.25) !important;
}
body.blue-mode .dp-close { color: rgba(180,165,240,0.7) !important; }

/* ── BLUE MODE FOOTER TEXT WHITE ── */
body.blue-mode .footer-brand,
body.blue-mode .footer-url,
body.blue-mode .footer-social,
body.blue-mode .footer-email { color: rgba(230,220,255,0.88) !important; }

/* ── BLUE MODE INDEX TITLE ── */
body.blue-mode .bg-title {
  color: rgba(200,190,255,0.12) !important;
}
body.blue-mode .tagline {
  color: rgba(180,165,240,0.55) !important;
}

/* ── BLUE MODE TRAVELS CITY CARDS ── */
body.blue-mode .city-card,
body.blue-mode .cards-grid .city-card {
  background: rgba(20,15,50,0.55) !important;
  border-color: rgba(100,80,180,0.25) !important;
}

/* ── BLUE MODE MOMODINO TITLES ── */
body.blue-mode .bg-title {
  color: rgba(220,210,255,0.15) !important;
}
body.blue-mode .footer-brand {
  color: rgba(230,220,255,0.92) !important;
}
body.blue-mode .footer-url {
  color: rgba(190,175,255,0.65) !important;
}

/* ── BLUE MODE TAROT BACKFACE ── */
body.blue-mode .card-face {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
body.blue-mode .card-inner {
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
}

/* ── BLUE MODE TAROT TEXT ── */
body.blue-mode .cf-attr,
body.blue-mode #cf-quote { color: rgba(220,210,255,0.9) !important; }
body.blue-mode .card-front div[style*="rgba(168"] { color: rgba(220,210,255,0.88) !important; }

/* ── BLUE MODE TAROT FLIP FIX ── */
body.blue-mode .card-stage { perspective: 1200px !important; }
body.blue-mode .card-inner { 
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
}
body.blue-mode .card-face { 
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  background-color: transparent;
}
body.blue-mode .card-back { 
  transform: rotateY(0deg) !important;
}
body.blue-mode .card-front { 
  transform: rotateY(180deg) !important;
}
body.blue-mode .card-stage.flipped .card-inner { 
  transform: rotateY(180deg) !important;
}

/* ── BLUE MODE INDEX MOMODINO ── */
body.blue-mode .bg-title {
  color: rgba(220,210,255,0.18) !important;
}

/* ── BLUE MODE BG TITLE ── */
body.blue-mode .bg-title {
  color: rgba(255,255,255,0.12) !important;
}

/* ── BLUE MODE BG TITLE FORCE ── */
html body.blue-mode .bg-title {
  color: rgba(255,255,255,0.22) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.22) !important;
}

/* ── BLUE MODE FOOTER MOMODINO WHITE ── */
html body.blue-mode .footer-brand,
html body.blue-mode .footer-url,
html body.blue-mode .footer-socials a,
html body.blue-mode .footer-email {
  color: rgba(230,220,255,0.92) !important;
  -webkit-text-fill-color: rgba(230,220,255,0.92) !important;
}

/* ── BLUE MODE MOMODINO GLOW ── */
html body.blue-mode .bg-title {
  color: rgba(255,255,255,0.25) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.25) !important;
  text-shadow: 0 0 40px rgba(180,160,255,0.4), 0 0 80px rgba(140,120,220,0.2) !important;
}

/* ── BLUE MODE ORB WHITE ── */
body.blue-mode .orb {
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 0 20px rgba(180,160,255,0.3), 0 0 0 0.5px rgba(200,185,255,0.4) !important;
}
body.blue-mode .orb svg {
  color: rgba(40,25,80,0.85) !important;
}
body.blue-mode .orb-center {
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 0 30px rgba(180,160,255,0.4), 0 0 0 0.5px rgba(200,185,255,0.5) !important;
}
body.blue-mode .orb-center svg {
  color: rgba(40,25,80,0.85) !important;
}

/* ── BLUE MODE MOMODINO GLOW WHITE ── */
html body.blue-mode .bg-title {
  color: rgba(255,255,255,0.35) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.35) !important;
  text-shadow: 0 0 40px rgba(255,255,255,0.3), 0 0 80px rgba(255,255,255,0.15), 0 0 120px rgba(200,180,255,0.2) !important;
}

/* ── BLUE MODE ORB ICON DEEP PURPLE ── */
body.blue-mode .orb svg,
body.blue-mode .orb-center svg {
  color: rgba(60,20,120,0.85) !important;
}

/* ── BLUE MODE ORB GLOW ── */
body.blue-mode .orb {
  box-shadow: 0 0 15px rgba(180,160,255,0.5), 0 0 30px rgba(140,120,220,0.3), 0 0 0 0.5px rgba(200,185,255,0.4) !important;
}
body.blue-mode .orb-center {
  box-shadow: 0 0 20px rgba(180,160,255,0.6), 0 0 40px rgba(140,120,220,0.35), 0 0 0 0.5px rgba(200,185,255,0.5) !important;
}

/* ── BLUE MODE ORB ICON FORCE ── */
body.blue-mode .orb svg,
body.blue-mode .orb-center svg {
  color: rgba(50,10,100,1) !important;
  opacity: 1 !important;
}

/* ── BLUE MODE MOMODINO GLOW REVERT ── */
html body.blue-mode .bg-title {
  color: rgba(200,190,255,0.15) !important;
  -webkit-text-fill-color: rgba(200,190,255,0.15) !important;
  text-shadow: 0 0 40px rgba(180,160,255,0.4), 0 0 80px rgba(140,120,220,0.2) !important;
}