/* =====================================================
   PROJET LUNE — Premium skin (Bootstrap 5.3)
   Objectif : plus “app”, plus respirant, plus premium
===================================================== */
/* =====================================================
   UTILITAIRES UI LUNE
   Classes réutilisables pour les composants interactifs
   (boutons, cards, pills, menus, widgets, etc.)

   -----------------------------------------
   RADIUS (formes)
   -----------------------------------------

   l-radius-pill
     → bord très arrondi (forme pilule)
     → utilisé pour boutons, pills, chips

   l-radius-round
     → cercle parfait
     → utilisé pour icônes rondes, boutons icônes

   l-radius-md
     → arrondi moyen (~12px)
     → utilisé pour petits panels, menus

   l-radius-lg
     → arrondi large (~18px)
     → utilisé pour cards et blocs principaux


   -----------------------------------------
   HOVER / INTERACTIONS
   -----------------------------------------

   l-hover-premium
     → effet hover premium :
        - halo lumineux radial
        - transition douce
        - léger lift

     → recommandé pour :
        boutons, pills, menus interactifs


   l-hover-lift
     → élévation au hover :
        - translateY léger
        - ombre plus forte

     → recommandé pour :
        cards interactives
        blocs cliquables


   -----------------------------------------
   SURFACE PREMIUM
   -----------------------------------------

   l-surface-hover
     → surface "glass / premium" :
        - fond translucide
        - blur léger
        - ombre douce

     → utilisé pour :
        faux boutons
        menus
        panels
        widgets


   -----------------------------------------
   COMBINAISONS COURANTES
   -----------------------------------------

   Bouton premium
     class="btn btn-outline-light l-radius-pill l-hover-premium"

   Card interactive
     class="card l-radius-lg l-hover-lift"

   Menu / pill
     class="l-surface-hover l-radius-pill l-hover-premium"


   Ces utilitaires constituent le socle UI du projet Lune.
===================================================== */

/* =====================================================
   TOKENS
===================================================== */
:root{
  --l-bg: #0E1428;
  --l-surface: rgba(255,255,255,.035);
  --l-surface-2: rgba(255,255,255,.05);
  --l-border: rgba(255,255,255,.09);

  --l-text: #F4F6FA;
  --l-muted: rgba(244,246,250,.72);

  --l-accent: #7B9CFF;
  --l-warm: #FFD27A;

  --l-radius: 18px;
  --l-radius-lg: 24px;

  --l-shadow: 0 18px 50px rgba(0,0,0,.35);
  --l-shadow-soft: 0 10px 26px rgba(0,0,0,.25);

  --l-gap: 14px;

  --l-fz: 15px;
  --l-lh: 1.55;
  --l-topbar-h: 56px;

  --bg-white-04: rgba(255,255,255,.04);

  /* timeline éclipses */
  --ecl-line-w: 1px;
  --ecl-center-x: 50%;
  --ecl-dot: 10px;
  --ecl-card-w: 44%;
  --ecl-gap: 16px;
}

/* =====================================================
   BASE
===================================================== */
html,
body{
  background: var(--l-bg);
  color: var(--l-text);
  font-size: var(--l-fz);
  line-height: var(--l-lh);
}

a{
  color: inherit;
  text-decoration: none!important;
}

a:hover{
  opacity: .92; 
}

.text-white-50{
  color: var(--l-muted) !important;
}

hr{
  border-color: var(--l-border) !important;
  opacity: 1 !important;
}

/* =====================================================
   UTILITAIRES LUNE — RÉUTILISABLES
   À poser sur <a>, <button>, wrappers, faux dropdowns...
===================================================== */
.l-radius-pill{ border-radius: 999px; }
.l-radius-round{ border-radius: 50%; }
.l-radius-md{ border-radius: 12px; }
.l-radius-lg{ border-radius: 18px; }

.l-surface-hover{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}


.l-hover-premium{
  position: relative;
  transition:
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease,
    color .22s ease,
    opacity .22s ease;
}

.l-hover-premium::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: radial-gradient(
    circle at center,
    rgba(127,255,255,.30),
    rgba(127,255,255,.12) 40%,
    transparent 70%
  );
  opacity:0;
  transition: opacity .28s ease;
  pointer-events:none;
}

@media (hover:hover){
  .l-hover-premium:hover{
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.32);
    transform: translateY(-1px);
  }

  .l-hover-premium:hover::before{
    opacity:.55;
  }
}

.l-hover-lift{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

@media (hover:hover){
  .l-hover-lift:hover{
    transform: translateY(-2px);
    box-shadow: var(--l-shadow);
  }
}

.bg-light-04{
  background: var(--bg-white-04);
}

/* =====================================================
   CARDS / HEADER / BUTTONS / BADGES
===================================================== */
.card{
  background: var(--l-surface);
  border: 1px solid var(--l-border);
  border-radius: var(--l-radius);
  box-shadow: var(--l-shadow-soft);
  overflow: hidden;
}

.card-header{
  background: transparent !important;
}

.list-group-item{
  background: transparent;
  border-color: var(--l-border);
  color: var(--l-text);
}

@media (hover:hover){
  .card:hover{
    transform: translateY(-2px);
    box-shadow: var(--l-shadow);
    border-color: rgba(255,255,255,.14);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
}

header.sticky-top{
  background: rgba(14,20,40,.72);
  border-color: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(10px);
}

.btn-outline-light{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.92);

  backdrop-filter: blur(6px);

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.btn-outline-light:hover{
  box-shadow:
    0 6px 18px rgba(0,0,0,.35),
    0 0 10px rgba(127,255,255,.18);
}

@media (hover:hover){
  .btn-outline-light:hover{
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.35);
    color: #fff;

    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    transform: translateY(-1px);
  }
}
.btn-lune{
  background: linear-gradient(135deg, rgba(123,156,255,.95), rgba(255,210,122,.55));
  border: 0;
  color: #0B1024;
  font-weight: 600;
}

.btn-lune:hover{
  filter: brightness(1.03);
}

.badge.text-bg-secondary{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85) !important;
}

/* =====================================================
   HERO / KPI / ACCORDION / MODES
===================================================== */
.lune-hero{
  border-radius: var(--l-radius-lg);
  background:
    radial-gradient(900px 480px at 50% 20%, rgba(123,156,255,.24), transparent 62%),
    radial-gradient(650px 320px at 50% 0%, rgba(255,210,122,.14), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: var(--l-shadow);
}

.lune-img{
  filter: drop-shadow(0 20px 36px rgba(0,0,0,.55));
}

.lune-halo{
  position: relative;
  display: inline-block;
}

.lune-halo::before{
  content:"";
  position:absolute;
  inset:-18% -22%;
  background: radial-gradient(circle at 50% 50%, rgba(123,156,255,.18), transparent 60%);
  filter: blur(10px);
  z-index: 0;
}

.lune-halo > img{
  position: relative;
  z-index: 1;
}

.lune-kpi{
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: .45rem .75rem;
}

.accordion-button{
  background: transparent !important;
  color: var(--l-text) !important;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none !important;
}

.accordion-button::after{
  filter: brightness(1.8);
}

.accordion-body{
  color: var(--l-muted);
}

.mode-lifestyle-only,
.mode-tradition-only{
  display:none;
}

body[data-lune-mode="lifestyle"] .mode-lifestyle-only{
  display:block;
}

body[data-lune-mode="tradition"] .mode-tradition-only{
  display:block;
}

body[data-lune-mode="lifestyle"] .tech-details{
  display:none;
}

body[data-lune-mode="tradition"]{
  font-size: 1.05rem;
  line-height: 1.65;
}

/* =====================================================
   MICRO ANIMATION
===================================================== */
@media (prefers-reduced-motion: no-preference){
  .float-soft{
    animation: floatSoft 6.5s ease-in-out infinite;
  }

  @keyframes floatSoft{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-6px); }
  }
}

/* =====================================================
   MOON
===================================================== */
.moon-wrap{
  display:inline-block;
}

.moon-svg{
  display:block;
  filter:
    drop-shadow(0 0 12px rgba(200,220,255,.18))
    drop-shadow(0 0 36px rgba(120,170,255,.10));
}

/* animations */
@keyframes mlGlowPulse{
  0%   { opacity:.45; transform: scale(.98); }
  45%  { opacity:.95; transform: scale(1.02); }
  100% { opacity:.65; transform: scale(1); }
}

@keyframes mlSlideOut{
  0%   { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-18px); opacity: 0; }
}

@keyframes mlSlideIn{
  0%   { transform: translateX(18px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes mlUnderlineFlash{
  0%   { border-bottom-color: rgba(255,255,255,.55); }
  45%  { border-bottom-color: rgba(255,255,255,1); }
  100% { border-bottom-color: rgba(255,255,255,.70); }
}

@keyframes mlMenuIn{
  0%   { opacity:0; transform: translateX(-50%) translateY(-6px) scale(.985); }
  100% { opacity:1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes mlDateShake{
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-4px); }
  40%  { transform: translateX(4px); }
  60%  { transform: translateX(-3px); }
  80%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* =====================================================
   ECLIPSES — Timeline alternée (dark-only)
===================================================== */
.ecl-timeline{
  position: relative;
  padding: 1rem 0;
}

.ecl-timeline::before{
  content:"";
  position:absolute;
  left: var(--ecl-center-x);
  top: 0;
  bottom: 0;
  width: var(--ecl-line-w);
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(127,255,255,.18),
    rgba(255,255,255,.10),
    rgba(127,255,255,.08)
  );
  z-index: 0;
  opacity: .9;
}

.ecl-item{
  position: relative;
  display:flex;
  padding: 1.25rem 0;
}

.ecl-item:nth-child(odd){
  justify-content:flex-start;
}

.ecl-item:nth-child(even){
  justify-content:flex-end;
}

.ecl-card{
  width: var(--ecl-card-w);
  position:relative;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: .95rem;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.055),
    rgba(255,255,255,.035)
  );
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  margin-left: var(--ecl-gap);
  margin-right: var(--ecl-gap);
}

.ecl-card:hover{
  transform: translateY(-2px);
  border-color: rgba(127,255,255,.30);
  box-shadow: 0 .95rem 1.9rem rgba(0,0,0,.42);
}

.ecl-dot{
  position:absolute;
  left: var(--ecl-center-x);
  top: 2.2rem;
  width: var(--ecl-dot);
  height: var(--ecl-dot);
  border-radius: 999px;
  transform: translate(-50%,-50%);
  z-index: 3;
  background:#fff;
  box-shadow:
    0 0 0 5px rgba(255,255,255,.08),
    0 0 10px rgba(127,255,255,.25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.ecl-item:hover .ecl-dot{
  transform: translate(-50%,-50%) scale(1.08);
  box-shadow:
    0 0 0 6px rgba(255,255,255,.10),
    0 0 16px rgba(127,255,255,.28);
  filter: brightness(1.05);
}

.ecl-dot[data-type="total"]{ background: rgba(255,84,92,.95); }
.ecl-dot[data-type="partial"]{ background: rgba(255,207,72,.95); }
.ecl-dot[data-type="penumbral"]{ background: rgba(186,194,208,.95); }

.ecl-item::after{
  content:"";
  position:absolute;
  left: var(--ecl-center-x);
  top: 2.2rem;
  height: 2px;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}

.ecl-item:nth-child(odd)::after{
  width: calc((var(--ecl-card-w) / 2) + var(--ecl-gap) + 10px);
  transform: translate(-100%,-50%);
  background: linear-gradient(
    to left,
    rgba(255,255,255,.14),
    rgba(255,255,255,.10) 35%,
    rgba(255,255,255,0) 100%
  );
}

.ecl-item:nth-child(even)::after{
  width: calc((var(--ecl-card-w) / 2) + var(--ecl-gap) + 10px);
  background: linear-gradient(
    to right,
    rgba(255,255,255,.14),
    rgba(255,255,255,.10) 35%,
    rgba(255,255,255,0) 100%
  );
}

.ecl-title{
  letter-spacing:-.2px;
}

.ecl-meta{
  opacity:.85;
}

.ecl-badge{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: .35rem .75rem;
  font-weight: 500;
  letter-spacing: .3px;
}

.ecl-type-desc{
  opacity:.9;
  line-height:1.45;
}

.ecl-type-icon{
  flex-shrink:0;
  opacity:.9;
}

.ecl-type-icon svg{
  display:block;
}

.ecl-svg{
  display:block;
  opacity:.9;
  transition: transform .2s ease, opacity .2s ease;
}

.ecl-item:hover .ecl-svg{
  transform: scale(1.05);
  opacity: 1;
}

@media (max-width:991.98px){
  :root{
    --ecl-center-x: 1.1rem;
    --ecl-card-w: 100%;
    --ecl-gap: 12px;
  }

  .ecl-timeline{
    padding-left: 2.2rem;
  }

  .ecl-timeline::before{
    left: var(--ecl-center-x);
    transform: none;
  }

  .ecl-item{
    justify-content:flex-start !important;
  }

  .ecl-card{
    margin-left: var(--ecl-gap);
    margin-right: 0;
    width: 100%;
  }

  .ecl-dot{
    left: var(--ecl-center-x);
    transform: translate(-50%,-50%);
  }

  .ecl-item::after{
    left: var(--ecl-center-x);
    width: 1.2rem;
    transform: translateY(-50%);
    background: rgba(255,255,255,.12);
  }
}

/* =====================================================
   MONTH GRID
===================================================== */
.ml-cal-header{
  letter-spacing: .2px;
}

.ml-cal-weekday{
  font-size: .825rem;
  opacity: .75;
}

.ml-cal-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .75rem;
}

.ml-cal-cell{
  position: relative;
  min-height: 120px;
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,.08);
  background: var(--bs-body-bg);
  transition: transform .18s ease, box-shadow .18s ease;
}

[data-bs-theme="dark"] .ml-cal-cell{
  border-color: rgba(255,255,255,.12);
}

.ml-cal-cell a{
  color: inherit;
  text-decoration: none;
  display: block;
  height: 100%;
  padding: .75rem;
  border-radius: 1rem;
}

.ml-cal-cell a:hover{
  background: rgba(0,0,0,.03);
}

[data-bs-theme="dark"] .ml-cal-cell a:hover{
  background: rgba(255,255,255,.04);
}

.ml-cal-daynum{
  font-weight: 500;
  font-size: .9rem;
}

.ml-cal-emoji{
  font-size: 1.2rem;
}

.ml-cal-meta{
  font-size: .8rem;
  opacity: .75;
}

.ml-cal-badge,
.ml-ecl-badge{
  font-size: .72rem;
}

.ml-cal-today{
  outline: 2px solid rgba(13,110,253,.55);
  box-shadow: 0 0 0 4px rgba(13,110,253,.08);
}

.ml-day-card{
  border-radius: 1rem;
  transition: transform .15s ease, box-shadow .15s ease;
}

.ml-day-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 .8rem 1.8rem rgba(0,0,0,.08);
}

.ml-day-today{
  outline: 2px solid rgba(13,110,253,.45);
  outline-offset: 2px;
}

[data-bs-theme="dark"] .ml-day-today{
  box-shadow: 0 0 0 2px rgba(100,180,255,.45), 0 .6rem 1.6rem rgba(0,0,0,.35);
}

.ml-illum-bar{
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
}

[data-bs-theme="dark"] .ml-illum-bar{
  background: rgba(255,255,255,.12);
}

.ml-illum-bar > span{
  display:block;
  height: 100%;
  background: rgba(13,255,253,.55);
}

.ml-cal-eclipse{
  border-color: rgba(220,53,69,.45);
  box-shadow: 0 0 0 2px rgba(220,53,69,.10);
}

.ml-only-desktop{
  display: none;
}

.ml-only-mobile{
  display: grid;
}

@media (max-width: 575px){
  .ml-cal-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 576px) and (max-width: 991px){
  .ml-cal-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px){
  .ml-cal-grid{
    grid-template-columns: repeat(7, 1fr);
  }

  .ml-only-mobile{
    display: none !important;
  }

  .ml-only-desktop{
    display: block !important;
  }
}

/* Bloc premium “Éclipses du mois” */
.ml-ecl-wrap{
  display: flex;
  justify-content: center;
}

[data-bs-theme="dark"] .ml-ecl-card{
  border-color: rgba(255,255,255,.12);
}

.ml-ecl-icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.04);
}

[data-bs-theme="dark"] .ml-ecl-icon{
  background: rgba(255,255,255,.06);
}

.ml-ecl-icon svg{
  color: currentColor;
  opacity: .9;
}

.ml-ecl-txt{
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}

.ml-ecl-title{
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.1;
}

.ml-ecl-sub{
  font-size: .85rem;
  opacity: .75;
  margin-top: .15rem;
}

.ml-ecl-body{
  padding: .9rem 1rem 0;
}

.ml-ecl-chips{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}

.ml-ecl-chip{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .74rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .34rem .55rem;
  letter-spacing: .12px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 .35rem .9rem rgba(0,0,0,.10);
  transition: transform .14s ease, box-shadow .14s ease;
}

[data-bs-theme="dark"] .ml-ecl-chip{
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 .35rem .9rem rgba(0,0,0,.35);
}

.ml-ecl-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 .55rem 1.2rem rgba(0,0,0,.14);
}

[data-bs-theme="dark"] .ml-ecl-chip:hover{
  box-shadow: 0 .55rem 1.2rem rgba(0,0,0,.45);
}

.ml-ecl-ic{
  font-size: .9rem;
  line-height: 1;
  opacity: .95;
  transform: translateY(-.5px);
}

.ml-ecl-sep{
  opacity: .65;
  font-weight: 900;
}

.ml-ecl-time{
  font-size: .72rem;
  opacity: .85;
  font-weight: 800;
}

.ml-chip-moon{ opacity: .95; }
.ml-chip-date{ font-weight: 700; font-size: .9rem; }
.ml-chip-dot{ opacity: .55; }
.ml-chip-type{ font-size: .95rem; opacity: .85; }
.ml-chip-time{ font-size: .8rem; opacity: .75; padding-left: 0; }

.ml-chip-total{ box-shadow: inset 0 0 0 999px rgba(220,53,69,.06); }
.ml-chip-partial{ box-shadow: inset 0 0 0 999px rgba(255,193,7,.08); }
.ml-chip-penumbral{ box-shadow: inset 0 0 0 999px rgba(108,117,125,.08); }

[data-bs-theme="dark"] .ml-chip-total{ box-shadow: inset 0 0 0 999px rgba(220,53,69,.14); }
[data-bs-theme="dark"] .ml-chip-partial{ box-shadow: inset 0 0 0 999px rgba(255,193,7,.14); }
[data-bs-theme="dark"] .ml-chip-penumbral{ box-shadow: inset 0 0 0 999px rgba(108,117,125,.16); }

/* =====================================================
   STARS
===================================================== */
.ml-stars i{
  font-size: 1.05rem;
  color: #e6e9ff;
  transition: opacity .2s ease;
}

.ml-stars i.bi-star{
  opacity: 0.25;
}

.ml-stars i.bi-star-fill{
  opacity: 0.95;
  text-shadow: 0 0 6px rgba(180, 200, 255, 0.6);
}

/* =====================================================
   DESKTOP CALENDAR – PREMIUM HOVER
===================================================== */
.ml-cal-cell:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  z-index: 2;
}

[data-bs-theme="dark"] .ml-cal-cell:hover{
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
}

.ml-cal-cell:hover > a{
  border-radius: 1rem;
  box-shadow: inset 0 0 0 1px rgba(13,110,253,.12);
}

[data-bs-theme="dark"] .ml-cal-cell:hover > a{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}

.ml-cal-cell:hover .ml-cal-emoji{
  transform: scale(1.08);
  transition: transform .2s ease;
}

/* =====================================================
   PSYCHO PREVIEW
===================================================== */
.ml-psy-line{
  margin-top: .35rem;
}

.ml-psy-line .ml-psy-name{
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.1;
  opacity: .9;
}

.ml-psy-line .ml-psy-focus{
  font-size: .68rem;
  line-height: 1.15;
  opacity: .75;
}

.ml-psy-ic{
  opacity: .75;
  flex: 0 0 auto;
}

.ml-psy-txt{
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
  text-align:center;
}

[data-bs-theme="dark"] .ml-psy-line{
  opacity: .82;
}

.ml-psy-desktop{
  line-height: 1.15;
  margin-top: .25rem;
}

.ml-psy-name{
  font-size: .91rem;
  font-weight: 600;
  opacity: .9;
  text-align: center;
}

.ml-psy-focus{
  font-size: .87rem;
  opacity: .75;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-bs-theme="dark"] .ml-psy-name{
  opacity:.95;
}

[data-bs-theme="dark"] .ml-psy-focus{
  opacity:.82;
}
.moon-meta-row .badge {
  transition: transform .15s ease, box-shadow .15s ease;
}

.moon-meta-row .badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.15);
}