/*
 * Desktop homepage card system.
 * Dark card surfaces with restrained, neutral interaction states.
 * Mobile is served from index.html and is intentionally untouched here.
 */
@media (min-width: 901px) {
  html[data-theme="dark"] .mc,
  html[data-theme="dark"] .stats > .stat {
    position: relative;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: linear-gradient(155deg, #242526 0%, #1f2021 100%) !important;
    color: #e4e6eb !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .34) !important;
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease, border-color .22s ease !important;
  }

  html[data-theme="dark"] .mc:hover,
  html[data-theme="dark"] .mc:focus-within,
  html[data-theme="dark"] .stats > .stat:hover,
  html[data-theme="dark"] .stats > .stat:focus-within {
    transform: translateY(-4px) !important;
    border-color: rgba(255,255,255,.24) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 18px 38px rgba(0, 0, 0, .24) !important;
    outline: 0;
  }

  html[data-theme="dark"] .mc:active,
  html[data-theme="dark"] .stats > .stat:active {
    transform: translateY(-1px) !important;
  }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] .mc,
  html[data-theme="dark"] .stats > .stat {
    transition: none !important;
  }
}


/* Desktop-only button accents: each inner action follows its card's accent color. */
@media (min-width: 901px) {
  html[data-theme="dark"] .mc.cv .mcl,
  html[data-theme="light"] .mc.cv .mcl {
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 1px rgba(167, 139, 250, .20), 0 0 12px rgba(167, 139, 250, .20) !important;
  }
  html[data-theme="dark"] .mc.dr .mcl,
  html[data-theme="light"] .mc.dr .mcl {
    border-color: #fb7185 !important;
    box-shadow: 0 0 0 1px rgba(251, 113, 133, .20), 0 0 12px rgba(251, 113, 133, .20) !important;
  }
  html[data-theme="dark"] .mc.soc .mcl,
  html[data-theme="light"] .mc.soc .mcl {
    border-color: #22d3ee !important;
    box-shadow: 0 0 0 1px rgba(34, 211, 238, .20), 0 0 12px rgba(34, 211, 238, .20) !important;
  }
  html[data-theme="dark"] .mc.mag .mcl,
  html[data-theme="light"] .mc.mag .mcl {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, .20), 0 0 12px rgba(251, 191, 36, .20) !important;
  }
  html[data-theme="dark"] .mc.con .mcl,
  html[data-theme="light"] .mc.con .mcl {
    border-color: #34d399 !important;
    box-shadow: 0 0 0 1px rgba(52, 211, 153, .20), 0 0 12px rgba(52, 211, 153, .20) !important;
  }
  html[data-theme="dark"] .mc.act .mcl,
  html[data-theme="light"] .mc.act .mcl {
    border-color: #fb923c !important;
    box-shadow: 0 0 0 1px rgba(251, 146, 60, .20), 0 0 12px rgba(251, 146, 60, .20) !important;
  }
  html[data-theme="dark"] .mc.joc .gbtn,
  html[data-theme="light"] .mc.joc .gbtn {
    border-color: #f472b6 !important;
    box-shadow: 0 0 0 1px rgba(244, 114, 182, .20), 0 0 12px rgba(244, 114, 182, .20) !important;
  }
  html[data-theme="dark"] .mc.tv .mcl,
  html[data-theme="light"] .mc.tv .mcl {
    border-color: #2dd4bf !important;
    box-shadow: 0 0 0 1px rgba(45, 212, 191, .20), 0 0 12px rgba(45, 212, 191, .20) !important;
  }
  html[data-theme="dark"] .mc.chat .mcl,
  html[data-theme="light"] .mc.chat .mcl {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 1px rgba(129, 140, 248, .20), 0 0 12px rgba(129, 140, 248, .20) !important;
  }
}

/* Desktop homepage polish: centered actions, centered subtitles, and restrained neon depth. */
@media (min-width: 901px) {
  .mc .mci {
    align-items: center;
  }

  .mc .mc-ico {
    align-self: center;
  }

  .mc .mc-lbl,
  .mc .mc-tit {
    width: 100%;
    align-self: center;
    text-align: center;
  }

  .mc .mc-links {
    width: 100%;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    flex-shrink: 0;
  }

  .mc .mcl {
    width: min(100%, 360px);
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
  }

  .mc .mcl span {
    display: none !important;
  }

  .mc .mc-cta {
    align-self: center;
    width: min(100%, 320px);
    max-width: 100%;
    box-sizing: border-box;
    margin: 16px auto 0 !important;
    justify-content: center;
    text-align: center;
  }

  .mc.joc .ggrid {
    width: 100%;
    justify-items: center;
  }

  .mc.joc .gbtn {
    width: 100%;
    max-width: 180px;
    box-sizing: border-box;
  }


  /* Same neon accent around every card icon as the card itself. */
  html[data-theme="dark"] .mc.cv .mc-ico,
  html[data-theme="light"] .mc.cv .mc-ico,

  html[data-theme="dark"] .mc.dr .mc-ico,
  html[data-theme="light"] .mc.dr .mc-ico {
    border: 1px solid #fb7185 !important;
    box-shadow: 0 0 0 1px rgba(251, 113, 133, .20), 0 0 12px rgba(251, 113, 133, .22) !important;
  }

  html[data-theme="dark"] .mc.soc .mc-ico,
  html[data-theme="light"] .mc.soc .mc-ico {
    border: 1px solid #22d3ee !important;
    box-shadow: 0 0 0 1px rgba(34, 211, 238, .20), 0 0 12px rgba(34, 211, 238, .22) !important;
  }

  html[data-theme="dark"] .mc.mag .mc-ico,
  html[data-theme="light"] .mc.mag .mc-ico {
    border: 1px solid #fbbf24 !important;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, .20), 0 0 12px rgba(251, 191, 36, .22) !important;
  }

  html[data-theme="dark"] .mc.con .mc-ico,
  html[data-theme="light"] .mc.con .mc-ico {
    border: 1px solid #34d399 !important;
    box-shadow: 0 0 0 1px rgba(52, 211, 153, .20), 0 0 12px rgba(52, 211, 153, .22) !important;
  }

  html[data-theme="dark"] .mc.act .mc-ico,
  html[data-theme="light"] .mc.act .mc-ico {
    border: 1px solid #fb923c !important;
    box-shadow: 0 0 0 1px rgba(251, 146, 60, .20), 0 0 12px rgba(251, 146, 60, .22) !important;
  }

  html[data-theme="dark"] .mc.joc .mc-ico,
  html[data-theme="light"] .mc.joc .mc-ico {
    border: 1px solid #f472b6 !important;
    box-shadow: 0 0 0 1px rgba(244, 114, 182, .20), 0 0 12px rgba(244, 114, 182, .22) !important;
  }

  html[data-theme="dark"] .mc.tv .mc-ico,
  html[data-theme="light"] .mc.tv .mc-ico {
    border: 1px solid #2dd4bf !important;
    box-shadow: 0 0 0 1px rgba(45, 212, 191, .20), 0 0 12px rgba(45, 212, 191, .22) !important;
  }

  html[data-theme="dark"] .mc.chat .mc-ico,
  html[data-theme="light"] .mc.chat .mc-ico {
    border: 1px solid #818cf8 !important;
    box-shadow: 0 0 0 1px rgba(129, 140, 248, .20), 0 0 12px rgba(129, 140, 248, .22) !important;
  }

  /* Soft inner neon depth keeps the content readable instead of washing it out. */
  html[data-theme="dark"] .mc.cv,
  html[data-theme="light"] .mc.cv,

  html[data-theme="dark"] .mc.dr,
  html[data-theme="light"] .mc.dr {
    box-shadow: inset 0 0 32px rgba(251, 113, 133, .10), 0 0 18px rgba(251, 113, 133, .20), 0 12px 30px rgba(0, 0, 0, .18) !important;
  }

  html[data-theme="dark"] .mc.soc,
  html[data-theme="light"] .mc.soc {
    box-shadow: inset 0 0 32px rgba(34, 211, 238, .10), 0 0 18px rgba(34, 211, 238, .20), 0 12px 30px rgba(0, 0, 0, .18) !important;
  }

  html[data-theme="dark"] .mc.mag,
  html[data-theme="light"] .mc.mag {
    box-shadow: inset 0 0 32px rgba(251, 191, 36, .10), 0 0 18px rgba(251, 191, 36, .20), 0 12px 30px rgba(0, 0, 0, .18) !important;
  }

  html[data-theme="dark"] .mc.con,
  html[data-theme="light"] .mc.con {
    box-shadow: inset 0 0 32px rgba(52, 211, 153, .10), 0 0 18px rgba(52, 211, 153, .20), 0 12px 30px rgba(0, 0, 0, .18) !important;
  }

  html[data-theme="dark"] .mc.act,
  html[data-theme="light"] .mc.act {
    box-shadow: inset 0 0 32px rgba(251, 146, 60, .10), 0 0 18px rgba(251, 146, 60, .20), 0 12px 30px rgba(0, 0, 0, .18) !important;
  }

  html[data-theme="dark"] .mc.joc,
  html[data-theme="light"] .mc.joc {
    box-shadow: inset 0 0 32px rgba(244, 114, 182, .10), 0 0 18px rgba(244, 114, 182, .20), 0 12px 30px rgba(0, 0, 0, .18) !important;
  }

  html[data-theme="dark"] .mc.tv,
  html[data-theme="light"] .mc.tv {
    box-shadow: inset 0 0 32px rgba(45, 212, 191, .10), 0 0 18px rgba(45, 212, 191, .20), 0 12px 30px rgba(0, 0, 0, .18) !important;
  }

  html[data-theme="dark"] .mc.chat,
  html[data-theme="light"] .mc.chat {
    box-shadow: inset 0 0 32px rgba(129, 140, 248, .10), 0 0 18px rgba(129, 140, 248, .20), 0 12px 30px rgba(0, 0, 0, .18) !important;
  }
}

/* Final desktop accent pass: card glow and primary card actions use the same color. */
@media (min-width: 901px) {
  html[data-theme="dark"] body .mc.cv,
  html[data-theme="light"] body .mc.cv,

  html[data-theme="dark"] body .mc.dr,
  html[data-theme="light"] body .mc.dr {
    box-shadow: inset 0 0 32px rgba(251, 113, 133, .10), 0 0 18px rgba(251, 113, 133, .20), 0 12px 30px rgba(0, 0, 0, .18) !important;
  }

  html[data-theme="dark"] body .mc.soc,
  html[data-theme="light"] body .mc.soc {
    box-shadow: inset 0 0 32px rgba(34, 211, 238, .10), 0 0 18px rgba(34, 211, 238, .20), 0 12px 30px rgba(0, 0, 0, .18) !important;
  }

  html[data-theme="dark"] body .mc.mag,
  html[data-theme="light"] body .mc.mag {
    box-shadow: inset 0 0 32px rgba(251, 191, 36, .10), 0 0 18px rgba(251, 191, 36, .20), 0 12px 30px rgba(0, 0, 0, .18) !important;
  }

  html[data-theme="dark"] body .mc.con,
  html[data-theme="light"] body .mc.con {
    box-shadow: inset 0 0 32px rgba(52, 211, 153, .10), 0 0 18px rgba(52, 211, 153, .20), 0 12px 30px rgba(0, 0, 0, .18) !important;
  }

  html[data-theme="dark"] body .mc.act,
  html[data-theme="light"] body .mc.act {
    box-shadow: inset 0 0 32px rgba(251, 146, 60, .10), 0 0 18px rgba(251, 146, 60, .20), 0 12px 30px rgba(0, 0, 0, .18) !important;
  }

  html[data-theme="dark"] body .mc.joc,
  html[data-theme="light"] body .mc.joc {
    box-shadow: inset 0 0 32px rgba(244, 114, 182, .10), 0 0 18px rgba(244, 114, 182, .20), 0 12px 30px rgba(0, 0, 0, .18) !important;
  }

  html[data-theme="dark"] body .mc.tv,
  html[data-theme="light"] body .mc.tv {
    box-shadow: inset 0 0 32px rgba(45, 212, 191, .10), 0 0 18px rgba(45, 212, 191, .20), 0 12px 30px rgba(0, 0, 0, .18) !important;
  }

  html[data-theme="dark"] body .mc.chat,
  html[data-theme="light"] body .mc.chat {
    box-shadow: inset 0 0 32px rgba(129, 140, 248, .10), 0 0 18px rgba(129, 140, 248, .20), 0 12px 30px rgba(0, 0, 0, .18) !important;
  }

  html[data-theme="dark"] body .mc.cv .mc-cta,
  html[data-theme="light"] body .mc.cv .mc-cta,

  html[data-theme="dark"] body .mc.dr .mc-cta,
  html[data-theme="light"] body .mc.dr .mc-cta {
    border-color: #fb7185 !important;
    box-shadow: 0 0 0 1px rgba(251, 113, 133, .20), 0 0 12px rgba(251, 113, 133, .22) !important;
  }

  html[data-theme="dark"] body .mc.soc .mc-cta,
  html[data-theme="light"] body .mc.soc .mc-cta {
    border-color: #22d3ee !important;
    box-shadow: 0 0 0 1px rgba(34, 211, 238, .20), 0 0 12px rgba(34, 211, 238, .22) !important;
  }

  html[data-theme="dark"] body .mc.mag .mc-cta,
  html[data-theme="light"] body .mc.mag .mc-cta {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, .20), 0 0 12px rgba(251, 191, 36, .22) !important;
  }

  html[data-theme="dark"] body .mc.con .mc-cta,
  html[data-theme="light"] body .mc.con .mc-cta {
    border-color: #34d399 !important;
    box-shadow: 0 0 0 1px rgba(52, 211, 153, .20), 0 0 12px rgba(52, 211, 153, .22) !important;
  }

  html[data-theme="dark"] body .mc.act .mc-cta,
  html[data-theme="light"] body .mc.act .mc-cta {
    border-color: #fb923c !important;
    box-shadow: 0 0 0 1px rgba(251, 146, 60, .20), 0 0 12px rgba(251, 146, 60, .22) !important;
  }

  html[data-theme="dark"] body .mc.joc .mc-cta,
  html[data-theme="light"] body .mc.joc .mc-cta {
    border-color: #f472b6 !important;
    box-shadow: 0 0 0 1px rgba(244, 114, 182, .20), 0 0 12px rgba(244, 114, 182, .22) !important;
  }

  html[data-theme="dark"] body .mc.tv .mc-cta,
  html[data-theme="light"] body .mc.tv .mc-cta {
    border-color: #2dd4bf !important;
    box-shadow: 0 0 0 1px rgba(45, 212, 191, .20), 0 0 12px rgba(45, 212, 191, .22) !important;
  }

  html[data-theme="dark"] body .mc.chat .mc-cta,
  html[data-theme="light"] body .mc.chat .mc-cta {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 1px rgba(129, 140, 248, .20), 0 0 12px rgba(129, 140, 248, .22) !important;
  }
}