/* ══════════════════════════════════════

   Patro Luttre - Liberchies — animateur.css

   Portail animateur

   ══════════════════════════════════════ */



@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Nunito+Sans:wght@400;600&display=swap');



:root {

  --green:       #2E7D32;

  --green-dark:  #1b5e20;

  --green-light: #E8F5E9;

  --yellow:      #F9C800;

  --red:         #c62828;

  --red-light:   #FFEBEE;

  --border:      #e0e0e0;

  --bg:          #f4f5f7;

  --card:        #ffffff;

  --text:        #1a1a1a;

  --muted:       #5f6368;

  --radius:      14px;

  --shadow:      0 2px 12px rgba(0,0,0,0.08);

}



*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body { font-family:'Nunito Sans',sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }

h1,h2,h3 { font-family:'Nunito',sans-serif; }



/* ── LOGIN ── */

.login-page {

  min-height:100vh;

  background:linear-gradient(145deg,var(--green-dark) 0%,var(--green) 60%,#43A047 100%);

  display:flex; align-items:center; justify-content:center;

  padding:2rem; position:relative; overflow:hidden;

}

.login-blob { position:absolute; border-radius:50%; background:rgba(255,255,255,0.06); pointer-events:none; }

.login-blob-1 { width:400px; height:400px; top:-120px; right:-100px; }

.login-blob-2 { width:250px; height:250px; bottom:-80px; left:-60px; }

.login-card {

  background:#fff; border-radius:20px; padding:2.8rem 2.5rem;

  width:100%; max-width:420px;

  box-shadow:0 24px 64px rgba(0,0,0,0.25);

  position:relative; z-index:1;

}

.login-logo-wrap { text-align:center; margin-bottom:2rem; }

.login-logo { height:64px; width:auto; margin:0 auto 10px; display:block; }

.login-logo-text { font-family:'Nunito',sans-serif; font-size:20px; font-weight:900; color:var(--green); }

.login-logo-sub { font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.5px; }

.login-divider { height:1px; background:var(--border); margin:1.5rem 0; }

.login-title { font-size:18px; font-weight:800; margin-bottom:.3rem; }

.login-subtitle { font-size:13px; color:var(--muted); margin-bottom:1.6rem; }

.form-group { margin-bottom:1.1rem; }

.form-group label { display:block; font-size:11px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:5px; }

.form-group input {

  width:100%; border:1.5px solid var(--border); border-radius:9px; padding:12px 14px;

  font-size:15px; font-family:'Nunito Sans',sans-serif; background:#fff; color:var(--text);

  outline:none; transition:border-color .15s,box-shadow .15s;

}

.form-group input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(46,125,50,.12); }

.error-msg { background:var(--red-light); color:var(--red); border:1px solid #ffcdd2; border-radius:8px; padding:10px 14px; font-size:13px; font-weight:700; margin-bottom:1rem; display:none; align-items:center; gap:8px; }

.error-msg.show { display:flex; }

.btn-login { width:100%; background:var(--green); color:#fff; border:none; padding:13px; border-radius:10px; font-family:'Nunito',sans-serif; font-size:15px; font-weight:800; cursor:pointer; transition:background .15s; margin-top:4px; }

.btn-login:hover { background:var(--green-dark); }

.btn-login:disabled { opacity:.6; cursor:not-allowed; }

.back-link { display:block; text-align:center; margin-top:1.5rem; font-size:13px; color:var(--muted); transition:color .15s; text-decoration:none; }

.back-link:hover { color:var(--green); }



/* ── PROFIL PAGE ── */

.profil-header {

  background:linear-gradient(135deg,var(--green-dark),var(--green));

  color:#fff; padding:1.5rem 2rem;

  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;

}

.profil-header-left { display:flex; align-items:center; gap:14px; }

.profil-logo { height:44px; border-radius:8px; }

.profil-site-name { font-family:'Nunito',sans-serif; font-size:16px; font-weight:900; }

.profil-site-sub { font-size:11px; opacity:.75; font-weight:600; }

.profil-header-right { display:flex; align-items:center; gap:10px; }

.btn-logout-anim {

  background:rgba(255,255,255,.15); color:#fff; border:1.5px solid rgba(255,255,255,.4);

  padding:8px 18px; border-radius:9px; font-family:'Nunito',sans-serif;

  font-size:13px; font-weight:800; cursor:pointer; transition:background .15s;

}

.btn-logout-anim:hover { background:rgba(255,255,255,.25); }



.profil-body { max-width:860px; margin:0 auto; padding:2rem 1.5rem; }



.profil-greeting { margin-bottom:2rem; }

.profil-greeting h1 { font-size:24px; font-weight:900; margin-bottom:.3rem; }

.profil-greeting p { font-size:14px; color:var(--muted); }



/* ── PENDING BANNER ── */

.pending-banner {

  background:#FFF9C4; border:1px solid #F9C800; border-radius:10px;

  padding:12px 16px; margin-bottom:1.5rem;

  display:flex; align-items:flex-start; gap:10px; font-size:13px; font-weight:700; color:#7a6000;

}

.pending-list { margin-top:8px; display:flex; flex-direction:column; gap:6px; }

.pending-item {

  display:flex; align-items:center; justify-content:space-between; gap:10px;

  background:rgba(255,255,255,.6); border-radius:8px; padding:8px 12px; font-weight:600;

}

.pending-item .pend-label { font-size:12px; color:#555; }

.pend-badge {

  font-size:11px; font-weight:800; padding:2px 8px; border-radius:99px;

}

.pend-badge.pending  { background:#FFF176; color:#827717; }

.pend-badge.approved { background:#C8E6C9; color:#1b5e20; }

.pend-badge.rejected { background:#FFCDD2; color:#c62828; }



/* ── PROFIL CARDS ── */

.profil-year-section { margin-bottom:2rem; }

.profil-year-label {

  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;

  color:var(--muted); padding:.3rem 0 .5rem; border-bottom:1px solid #eee; margin-bottom:.8rem;

  display:flex; align-items:center; gap:8px;

}

.badge-current {

  background:var(--green-light); color:var(--green); font-size:10px; font-weight:900;

  padding:2px 8px; border-radius:99px; text-transform:uppercase; letter-spacing:.5px;

}

.profil-card {

  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);

  padding:1.4rem; box-shadow:var(--shadow); display:flex; gap:1.2rem; align-items:flex-start;

  flex-wrap:wrap;

}

.profil-avatar {

  width:72px; height:72px; border-radius:50%; object-fit:cover; flex-shrink:0;

  border:3px solid var(--border);

}

.profil-avatar-initials {

  width:72px; height:72px; border-radius:50%; flex-shrink:0;

  display:flex; align-items:center; justify-content:center;

  font-family:'Nunito',sans-serif; font-size:22px; font-weight:900;

  border:3px solid rgba(0,0,0,.08);

}

.profil-info { flex:1; min-width:200px; }

.profil-name { font-size:18px; font-weight:900; margin-bottom:.5rem; }

.profil-pills { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:.8rem; }

.pill {

  display:inline-flex; align-items:center; gap:4px;

  font-size:11px; font-weight:800; padding:3px 10px; border-radius:99px; line-height:1.6;

}

.pill-role { background:#ebebeb; color:#555; }

.pill-sec  { /* color set inline */ }

.profil-contact { font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:4px; margin-top:.5rem; }

.profil-contact span { display:flex; align-items:center; gap:6px; }

.profil-actions { display:flex; flex-direction:column; gap:8px; align-items:flex-end; flex-shrink:0; }

.btn-edit-field {

  background:var(--green-light); color:var(--green-dark); border:none;

  padding:8px 16px; border-radius:9px; font-family:'Nunito',sans-serif;

  font-size:13px; font-weight:800; cursor:pointer; transition:background .15s; white-space:nowrap;

}

.btn-edit-field:hover { background:#c8e6c9; }



/* ── MODAL ── */

.modal-overlay {

  position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(3px);

  z-index:1000; display:none; align-items:center; justify-content:center; padding:1rem;

}

.modal-overlay.open { display:flex; }

.modal {

  background:#fff; border-radius:18px; width:100%; max-width:480px;

  box-shadow:0 24px 64px rgba(0,0,0,.25); overflow:hidden; animation:modalIn .2s ease;

}

@keyframes modalIn { from{opacity:0;transform:scale(.95) translateY(8px)} to{opacity:1;transform:none} }

.modal-header { padding:1.4rem 1.8rem 1.1rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }

.modal-title { font-size:17px; font-weight:900; font-family:'Nunito',sans-serif; }

.modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--muted); width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; transition:background .15s; }

.modal-close:hover { background:#f0f0f0; }

.modal-body { padding:1.5rem 1.8rem; }

.modal-footer { padding:1.1rem 1.8rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }

.field-group { margin-bottom:1rem; }

.field-group label { display:block; font-size:11px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:5px; }

.field-group input { width:100%; border:1.5px solid var(--border); border-radius:8px; padding:9px 12px; font-size:14px; font-family:'Nunito Sans',sans-serif; background:#fff; color:var(--text); outline:none; transition:border-color .15s; }

.field-group input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(46,125,50,.1); }

.btn-primary { background:var(--green); color:#fff; border:none; padding:10px 24px; border-radius:9px; font-family:'Nunito',sans-serif; font-size:14px; font-weight:800; cursor:pointer; transition:background .15s; }

.btn-primary:hover { background:var(--green-dark); }

.btn-secondary { background:transparent; color:var(--muted); border:1.5px solid var(--border); padding:9px 20px; border-radius:9px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:700; cursor:pointer; transition:all .15s; }

.btn-secondary:hover { border-color:#aaa; color:var(--text); }



/* image preview */

.img-preview-wrap { display:flex; gap:12px; align-items:flex-start; }

.img-preview { width:80px; height:80px; border-radius:10px; border:2px dashed #ddd; overflow:hidden; flex-shrink:0; background:#f5f5f5; display:flex; align-items:center; justify-content:center; }

.img-preview img { width:100%; height:100%; object-fit:cover; }

.img-preview-placeholder { font-size:11px; color:#aaa; text-align:center; padding:4px; }

.btn-upload-label { display:inline-block; background:var(--green-dark); color:#fff; padding:8px 14px; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; }



/* toast */

#anim-toast {

  position:fixed; bottom:2rem; right:2rem; background:#1a1a1a; color:#fff;

  padding:12px 22px; border-radius:12px; font-family:'Nunito',sans-serif; font-weight:800;

  font-size:14px; z-index:9999; box-shadow:0 8px 24px rgba(0,0,0,.25);

  transform:translateY(80px); opacity:0; transition:all .3s cubic-bezier(.34,1.56,.64,1); pointer-events:none;

}

#anim-toast.show { transform:translateY(0); opacity:1; }

#anim-toast.success { background:var(--green); }

#anim-toast.error   { background:var(--red); }



/* ── ANNÉES PAR PROFIL ── */

.profil-years-section {

  max-width: 480px;

  margin: 1.4rem auto 0;

}

.profil-years-title {

  font-size: 11px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .08em;

  color: var(--muted);

  margin-bottom: .7rem;

  padding-left: 2px;

}

.profil-years-grid {

  display: flex;

  flex-direction: column;

  gap: 8px;

}

.profil-year-card {

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: 12px;

  padding: .85rem 1.1rem;

  box-shadow: 0 1px 4px rgba(0,0,0,.05);

}

.profil-year-card-header {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: .55rem;

}

.profil-year-card-label {

  font-family: 'Nunito', sans-serif;

  font-size: 14px;

  font-weight: 900;

  color: var(--text);

}

.profil-year-card-pills {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  align-items: center;

}

.profil-year-card-actions {

  display: flex;

  gap: 8px;

  margin-top: .7rem;

  flex-wrap: wrap;

}

.btn-edit-small {

  font-size: 12px !important;

  padding: 6px 12px !important;

}



body.dark .profil-year-card { background: var(--card); border-color: var(--border); }

body.dark .profil-year-card-label { color: var(--text); }

body.dark .profil-years-title { color: var(--muted); }



/* ── IDENTITY CARD ── */

.id-card {

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: 18px;

  box-shadow: 0 4px 24px rgba(0,0,0,0.10);

  max-width: 480px;

  margin: 0 auto;

  overflow: hidden;

}



.id-card-header {

  background: linear-gradient(135deg, var(--green-dark), var(--green));

  color: #fff;

  padding: 1.2rem 1.6rem;

  display: flex;

  align-items: center;

  gap: 14px;

}

.id-card-logo {

  height: 42px;

  width: 42px;

  border-radius: 10px;

  object-fit: contain;

  background: rgba(255,255,255,.15);

  flex-shrink: 0;

}

.id-card-org {

  font-family: 'Nunito', sans-serif;

  font-size: 16px;

  font-weight: 900;

  line-height: 1.2;

}

.id-card-type {

  font-size: 11px;

  opacity: .75;

  font-weight: 600;

  letter-spacing: .4px;

}

.id-card-year {

  margin-left: auto;

  background: rgba(255,255,255,.2);

  border: 1px solid rgba(255,255,255,.35);

  color: #fff;

  font-family: 'Nunito', sans-serif;

  font-size: 13px;

  font-weight: 900;

  padding: 4px 12px;

  border-radius: 99px;

  letter-spacing: .4px;

  flex-shrink: 0;

}



.id-card-body {

  display: flex;

  gap: 1.4rem;

  padding: 1.6rem;

  align-items: flex-start;

}



.id-card-photo-wrap {

  position: relative;

  flex-shrink: 0;

}

.id-card-photo {

  width: 96px;

  height: 96px;

  border-radius: 14px;

  object-fit: cover;

  border: 3px solid var(--border);

  display: block;

}

.id-card-initials {

  width: 96px;

  height: 96px;

  border-radius: 14px;

  border: 3px solid rgba(0,0,0,.08);

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: 'Nunito', sans-serif;

  font-size: 28px;

  font-weight: 900;

}

.id-card-edit-photo {

  position: absolute;

  bottom: -8px;

  right: -8px;

  width: 28px;

  height: 28px;

  border-radius: 50%;

  background: var(--green);

  color: #fff;

  border: 2px solid var(--card);

  font-size: 13px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background .15s, transform .15s;

  padding: 0;

  line-height: 1;

}

.id-card-edit-photo:hover { background: var(--green-dark); transform: scale(1.1); }

.id-card-edit-photo:disabled { background: #aaa; cursor: not-allowed; transform: none; }



.id-card-info {

  flex: 1;

  min-width: 0;

}

.id-card-name {

  font-family: 'Nunito', sans-serif;

  font-size: 20px;

  font-weight: 900;

  margin-bottom: .6rem;

  line-height: 1.2;

}

.id-card-pills {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-bottom: .8rem;

}

.id-card-divider {

  height: 1px;

  background: var(--border);

  margin: .7rem 0;

}

.id-card-field {

  display: flex;

  flex-direction: column;

  gap: 2px;

  margin-bottom: .55rem;

}

.id-card-field-label {

  font-size: 10px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .6px;

  color: var(--muted);

}

.id-card-field-value {

  font-size: 14px;

  font-weight: 700;

  display: flex;

  align-items: center;

  gap: 6px;

  flex-wrap: wrap;

}



.id-card-actions {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  padding: 1rem 1.6rem 1.4rem;

  border-top: 1px solid var(--border);

}

.id-card-actions .btn-edit-field {

  flex: 1;

  min-width: calc(50% - 4px);

  text-align: center;

}



/* responsive */

@media(max-width:600px) {
  .profil-body { padding:1rem; }
  .profil-header { padding:1rem; }
  .profil-header-left,
  .profil-header-right { width:100%; }
  .profil-header-right { justify-content:flex-start; flex-wrap:wrap; }
  .profil-header-right > * { min-width:0; }
  .btn-logout-anim { flex:1 1 150px; }
  .profil-card { flex-direction:column; }
  .profil-actions { flex-direction:row; flex-wrap:wrap; align-items:flex-start; }
  .id-card-body { flex-direction:column; align-items:center; text-align:center; }
  .id-card-pills { justify-content:center; }
  .id-card-field { align-items:center; }
  .id-card-actions .btn-edit-field { min-width:calc(50% - 4px); }

}



/* ════════════════════════════════════════

   MODE SOMBRE — Midnight Blue + Emerald

════════════════════════════════════════ */

body.dark {

  --green:       #34d399;

  --green-dark:  #10b981;

  --green-light: rgba(52,211,153,0.12);

  --yellow:      #fbbf24;

  --red:         #f87171;

  --red-light:   rgba(248,113,113,0.12);

  --border:      #1e3048;

  --bg:          #0e1521;

  --card:        #152030;

  --text:        #e2eeff;

  --muted:       #6b8cad;

}

body.dark { background: var(--bg); color: var(--text); }



/* Login card */

body.dark .login-card { background: #152030; box-shadow: 0 24px 64px rgba(0,0,0,0.5); }

body.dark .login-divider { background: #1e3048; }

body.dark .login-title { color: var(--text); }

body.dark .login-subtitle { color: var(--muted); }

body.dark .login-logo-text { color: var(--green); }

body.dark .login-logo-sub { color: var(--muted); }

body.dark .form-group label { color: var(--muted); }

body.dark .form-group input {

  background: #0e1e30; color: var(--text); border-color: #1e3048;

}

body.dark .form-group input::placeholder { color: #3a5a7a; }

body.dark .form-group input:focus { background: #102030; border-color: var(--green); }

body.dark .back-link { color: var(--muted); }

body.dark .back-link:hover { color: var(--green); }



/* Profil cards */

body.dark .profil-card { background: var(--card); border-color: var(--border); }

body.dark .profil-year-label { color: var(--muted); border-bottom-color: #1e3048; }

body.dark .pill-role { background: #1e3048; color: #8ab0d0; }

body.dark .profil-contact { color: var(--muted); }



/* Pending banner */

body.dark .pending-banner {

  background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.25); color: #fbbf24;

}

body.dark .pending-item { background: rgba(255,255,255,0.04); }

body.dark .pending-item .pend-label { color: #8ab0d0; }

body.dark .pend-badge.pending  { background: rgba(251,191,36,0.2);  color: #fbbf24; }

body.dark .pend-badge.approved { background: rgba(52,211,153,0.15); color: #34d399; }

body.dark .pend-badge.rejected { background: rgba(248,113,113,0.15);color: #f87171; }

body.dark .badge-current { background: rgba(52,211,153,0.15); color: var(--green); }



/* Buttons */

body.dark .btn-edit-field { background: #1a2e44; color: #7ab8e8; }

body.dark .btn-edit-field:hover { background: #1e3850; }



/* Identity card */

body.dark .id-card { background: var(--card); border-color: var(--border); }

body.dark .id-card-photo { border-color: #1e3048; }

body.dark .id-card-initials { border-color: #1e3048; }

body.dark .id-card-edit-photo { border-color: var(--card); }

body.dark .id-card-divider { background: #1e3048; }

body.dark .id-card-actions { border-top-color: #1e3048; }

body.dark .id-card-field-label { color: var(--muted); }

body.dark .id-card-name { color: var(--text); }



/* Modal */

body.dark .modal { background: #152030; }

body.dark .modal-header { border-bottom-color: #1e3048; }

body.dark .modal-title { color: var(--text); }

body.dark .modal-close:hover { background: #1e3048; }

body.dark .modal-footer { border-top-color: #1e3048; background: #0e1e30; }

body.dark .field-group label { color: var(--muted); }

body.dark .field-group input,

body.dark .field-group select {

  background: #0e1e30; color: var(--text); border-color: #1e3048;

}

body.dark .field-group input:focus,

body.dark .field-group select:focus {

  border-color: var(--green);

  box-shadow: 0 0 0 3px rgba(52,211,153,0.15);

  background: #102030;

}

body.dark .btn-secondary { color: var(--muted); border-color: #1e3048; }

body.dark .btn-secondary:hover { border-color: #3a6080; color: var(--text); }

body.dark .img-preview { background: #0e1e30; border-color: #1e3048; }

body.dark .img-preview-placeholder { color: #3a5a7a; }



/* Calendar (month/day view) */

body.dark .cal-nav h2 { color: #b0cce8; }

body.dark .cal-nav button { background: #1b5e20; }

body.dark .cal-nav .btn-today { background: #0d2818; color: var(--green); }

body.dark .cal-header-cell { color: #6b8cad; }

body.dark .view-tabs { background: #0e1e30; }

body.dark .view-tab { color: #6b8cad; }

body.dark .view-tab.active { background: #152030; color: var(--green); box-shadow: none; }

body.dark .cal-day { background: #152030; border-color: #1e3048; }

body.dark .cal-day.today { background: #0d2a1a; border-color: var(--green); }

body.dark .cal-day-num { color: #8ab0d0; }

body.dark .cal-day.today .cal-day-num { color: var(--green); }

body.dark .cal-day-add { color: #2a4060; }

body.dark .cal-day-add:hover { color: var(--green); }

body.dark .cal-event.absence { background: rgba(248,113,113,0.15); color: #f87171; }

body.dark .cal-event.event   { background: rgba(96,165,250,0.15);  color: #60a5fa; }

body.dark .cal-event.reunion { background: rgba(167,139,250,0.15); color: #a78bfa; }

body.dark .cal-event.patro   { background: rgba(52,211,153,0.15);  color: #34d399; }

body.dark .cal-event.note    { background: rgba(251,191,36,0.15);  color: #fbbf24; }

body.dark .day-view { background: #152030; border-color: #1e3048; }

body.dark .day-event { border-bottom-color: #1e3048; }

body.dark .day-event-title { color: var(--text); }

body.dark .day-event-meta  { color: var(--muted); }

body.dark .day-view-empty  { color: #3a5a7a; }



/* Dark mode toggle button (animateur header) */

.anim-dark-toggle {

  display: flex; align-items: center;

  background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.3);

  border-radius: 99px; padding: 4px 6px;

  cursor: pointer; transition: background .2s;

  flex-shrink: 0;

}

.anim-dark-toggle:hover { background: rgba(255,255,255,.25); }

.anim-dark-toggle-pill {

  width: 40px; height: 22px; border-radius: 99px;

  background: rgba(255,255,255,.4);

  position: relative; transition: background .25s;

}

.anim-dark-toggle-pill::before {

  content: '🌙';

  position: absolute; right: 4px; top: 50%;

  transform: translateY(-50%);

  font-size: 12px; line-height: 1;

}

.anim-dark-toggle-pill::after {

  content: ''; position: absolute;

  top: 3px; left: 3px;

  width: 16px; height: 16px; border-radius: 50%;

  background: #fff; transition: transform .25s;

  box-shadow: 0 1px 3px rgba(0,0,0,0.2);

}

body.dark .anim-dark-toggle-pill { background: var(--green); }

body.dark .anim-dark-toggle-pill::before { content: '☀️'; right: auto; left: 4px; }

body.dark .anim-dark-toggle-pill::after  { transform: translateX(18px); }