/* ── Import elastic base (icons, layout logic, plugins) ─────────────────── */
@import url("../../elastic/styles/styles.min.css");

/* ══════════════════════════════════════════════════════════════════════════
   neoDASH × Roundcube — Skin v3.0
   inspired by neoDASH dashboard · built by neocrypto × Claude 2026
   ══════════════════════════════════════════════════════════════════════════ */

/* ── §0 · Design Tokens ──────────────────────────────────────────────────── */
:root {
  /* violet palette */
  --v:    #7c3aed;
  --vl:   #a78bfa;
  --vd:   #5b21b6;
  --vxl:  #c4b5fd;
  --vbg:  rgba(124,58,237,.08);
  --vbg2: rgba(124,58,237,.16);
  --vbg3: rgba(124,58,237,.24);
  /* semantic colors */
  --cyan:   #06b6d4;
  --green:  #10b981;
  --red:    #ef4444;
  --amber:  #f59e0b;
  /* radius */
  --r:   10px;
  --rl:  14px;
  --rxl: 18px;
  --rfl: 24px;
  /* typography */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
  /* animation */
  --ease: cubic-bezier(.4,0,.2,1);
  --t: all .17s var(--ease);
}

/* ── §1 · Font + Scrollbars ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body, #layout, #layout > div { font-family: var(--font) !important; }
* { scrollbar-width: thin; scrollbar-color: rgba(124,58,237,.25) transparent; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124,58,237,.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(124,58,237,.5); }
::selection { background: rgba(124,58,237,.22); color: var(--vxl); }

/* ── §2 · Dark-mode tokens ───────────────────────────────────────────────── */
html.dark-mode {
  --bg:     #07060f;
  --s0:     #09081a;
  --s1:     #0f0e1a;
  --s2:     #13111f;
  --s3:     #1a1828;
  --br:     rgba(124,58,237,.14);
  --br2:    rgba(51,65,85,.4);
  --txt:    #e2e8f0;
  --muted:  #94a3b8;
  --subtle: #475569;
  --sh:     0 2px 12px rgba(0,0,0,.45);
  --shg:    0 0 0 1px var(--br), 0 12px 40px rgba(0,0,0,.5);
  --shv:    0 0 0 1px rgba(124,58,237,.22), 0 8px 32px rgba(124,58,237,.18);
}

/* ── §3 · Light-mode tokens ──────────────────────────────────────────────── */
html:not(.dark-mode) {
  --bg:     #f1f5f9;
  --s0:     #e8edf5;
  --s1:     #ffffff;
  --s2:     #f8fafc;
  --s3:     #f1f5f9;
  --br:     rgba(124,58,237,.1);
  --br2:    rgba(203,213,225,.55);
  --txt:    #0f172a;
  --muted:  #475569;
  --subtle: #94a3b8;
  --sh:     0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --shg:    0 0 0 1px var(--br), 0 8px 24px rgba(0,0,0,.07);
  --shv:    0 0 0 1px rgba(124,58,237,.15), 0 6px 24px rgba(124,58,237,.1);
}

/* ── §4 · Body & Root Background ─────────────────────────────────────────── */
html.dark-mode body,
html.dark-mode #layout {
  background: var(--bg) !important;
  color: var(--txt) !important;
}
html:not(.dark-mode) body,
html:not(.dark-mode) #layout {
  background: var(--bg) !important;
  color: var(--txt) !important;
}

/* Dark grid pattern */
html.dark-mode body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(124,58,237,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.03) 1px, transparent 1px);
  background-size: 44px 44px;
}
html.dark-mode #layout { position: relative; z-index: 1; }

/* Light subtle pattern */
html:not(.dark-mode) body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(124,58,237,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.018) 1px, transparent 1px);
  background-size: 44px 44px;
}
html:not(.dark-mode) #layout { position: relative; z-index: 1; }

/* ── §5 · Card Layout — panels become glassy cards ───────────────────────── */
html #layout {
  display: flex !important;
  padding: 8px 8px 8px 0 !important;
  gap: 8px !important;
}
html #layout-sidebar {
  border-radius: 0 var(--rl) var(--rl) 0 !important;
  overflow: hidden !important;
  border-right: none !important;
  flex-shrink: 0 !important;
}
html #layout-list {
  border-radius: var(--rl) !important;
  overflow: hidden !important;
  border-right: none !important;
  flex-shrink: 0 !important;
}
html #layout-content {
  border-radius: var(--rl) !important;
  overflow: hidden !important;
}

/* Panel surfaces — dark */
html.dark-mode #layout-sidebar {
  background: var(--s1) !important;
  border: 1px solid var(--br) !important;
  box-shadow: var(--shg) !important;
}
html.dark-mode #layout-list {
  background: var(--s1) !important;
  border: 1px solid var(--br) !important;
  box-shadow: var(--shg) !important;
}
html.dark-mode #layout-content {
  background: var(--s1) !important;
  border: 1px solid var(--br) !important;
  box-shadow: var(--shg) !important;
}

/* Panel surfaces — light */
html:not(.dark-mode) #layout-sidebar {
  background: var(--s1) !important;
  border: 1px solid var(--br) !important;
  box-shadow: var(--shg) !important;
}
html:not(.dark-mode) #layout-list {
  background: var(--s1) !important;
  border: 1px solid var(--br) !important;
  box-shadow: var(--shg) !important;
}
html:not(.dark-mode) #layout-content {
  background: var(--s1) !important;
  border: 1px solid var(--br) !important;
  box-shadow: var(--shg) !important;
}

/* ── §6 · Navigation Strip — always dark violet ──────────────────────────── */

/* #layout-menu is a flex-column so header + links + special-buttons stack properly */
#layout-menu {
  background: linear-gradient(180deg, #0c0a1e 0%, #080716 100%) !important;
  border-right: none !important;
  width: 78px !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
}
#layout-menu .popover-header {
  background: linear-gradient(180deg, #0c0a1e, #080716) !important;
  height: 62px !important;
  min-height: 62px !important;
  line-height: 62px !important;
  border-bottom: 1px solid rgba(124,58,237,.15) !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
#layout-menu #logo,
#layout-menu .popover-header img {
  width: 34px !important;
  height: 34px !important;
  filter: drop-shadow(0 0 10px rgba(124,58,237,.55)) !important;
  animation: nd-logo-pulse 3s ease-in-out infinite !important;
  display: block !important;
  margin: 0 auto !important;
}

/* #taskmenu fills the remaining height between header and special-buttons */
#taskmenu {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  padding: 8px 6px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
#taskmenu a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(148,163,184,.65) !important;
  border-radius: 10px !important;
  padding: 8px 4px !important;
  font-size: 9.5px !important;
  letter-spacing: .03em !important;
  transition: var(--t) !important;
  position: relative !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
  width: 100% !important;
}
#taskmenu a::after { display: none !important; }
#taskmenu a::before {
  font-size: 20px !important;
  color: rgba(148,163,184,.65) !important;
  transition: var(--t) !important;
  margin-bottom: 3px !important;
  display: block !important;
  line-height: 1 !important;
}
#taskmenu a:hover,
#taskmenu a:focus {
  background: rgba(124,58,237,.14) !important;
  color: var(--vl) !important;
  border-color: rgba(124,58,237,.2) !important;
}
#taskmenu a:hover::before,
#taskmenu a:focus::before { color: var(--vl) !important; }
#taskmenu a.selected {
  background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(99,102,241,.12)) !important;
  color: var(--vl) !important;
  border-color: rgba(124,58,237,.25) !important;
  box-shadow: 0 2px 12px rgba(124,58,237,.15), inset 0 1px 0 rgba(167,139,250,.15) !important;
}
#taskmenu a.selected::before { color: var(--vl) !important; }
/* active indicator bar */
#taskmenu a.selected .button-inner::before,
#taskmenu a.selected > span::before {
  content: '' !important;
  position: absolute !important;
  left: -1px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 20px !important;
  border-radius: 0 3px 3px 0 !important;
  background: linear-gradient(180deg, var(--vl), var(--v)) !important;
  box-shadow: 0 0 8px var(--v) !important;
}
/* Compose button */
#taskmenu .action-buttons a.compose {
  background: linear-gradient(135deg, var(--v), var(--vd)) !important;
  color: #fff !important;
  border-color: transparent !important;
  border-radius: 12px !important;
  margin-bottom: 4px !important;
  box-shadow: 0 4px 16px rgba(124,58,237,.38) !important;
}
#taskmenu .action-buttons a.compose::before { color: #fff !important; }
#taskmenu .action-buttons a.compose:hover {
  background: linear-gradient(135deg, #8b5cf6, var(--v)) !important;
  box-shadow: 0 6px 22px rgba(124,58,237,.55) !important;
  transform: translateY(-1px) !important;
}

/* Special bottom buttons — remove absolute positioning, sit at bottom of flex column */
#taskmenu .special-buttons {
  position: static !important;
  left: unset !important;
  bottom: unset !important;
  margin-top: auto !important;
  width: 100% !important;
  background: transparent !important;
  border-top: 1px solid rgba(124,58,237,.12) !important;
  padding: 8px 0 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
}
#taskmenu .special-buttons a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(148,163,184,.65) !important;
  border-radius: 8px !important;
  transition: var(--t) !important;
  padding: 7px 4px !important;
  font-size: 9px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  width: 100% !important;
  border: 1px solid transparent !important;
}
#taskmenu .special-buttons a::before {
  color: rgba(148,163,184,.65) !important;
  font-size: 16px !important;
  display: block !important;
  margin-bottom: 2px !important;
  line-height: 1 !important;
  transition: var(--t) !important;
}
#taskmenu .special-buttons a::after { display: none !important; }
#taskmenu .special-buttons a:hover {
  background: rgba(124,58,237,.14) !important;
  color: var(--vl) !important;
  border-color: rgba(124,58,237,.2) !important;
}
#taskmenu .special-buttons a:hover::before { color: var(--vl) !important; }

/* ── §6b · Responsive nav strip ──────────────────────────────────────────── */
/* Tablet 481–1024px: narrower strip, icons only */
@media screen and (min-width: 481px) and (max-width: 1024px) {
  #layout-menu { width: 52px !important; }
  #taskmenu a span.inner,
  #taskmenu .special-buttons a span.inner { display: none !important; }
  #taskmenu a { padding: 9px 4px !important; font-size: 0 !important; }
  #taskmenu a::before { margin-bottom: 0 !important; font-size: 20px !important; }
  #taskmenu .special-buttons a { padding: 8px 4px !important; font-size: 0 !important; }
  #taskmenu .special-buttons a::before { margin-bottom: 0 !important; font-size: 18px !important; }
}
/* Mobile ≤480px: elastic handles the popover menu, reset our overrides */
@media screen and (max-width: 480px) {
  #layout-menu { width: auto !important; overflow: visible !important; }
  #taskmenu { flex: unset !important; overflow: visible !important; }
  #taskmenu .special-buttons { position: absolute !important; }
}

/* ── §7 · Panel Headers / Toolbars ───────────────────────────────────────── */
html.dark-mode #layout > div > .header {
  background: rgba(13,12,24,.88) !important;
  border-bottom: 1px solid var(--br) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  height: 54px !important;
  min-height: 54px !important;
  line-height: 54px !important;
  color: var(--txt) !important;
}
html:not(.dark-mode) #layout > div > .header {
  background: rgba(255,255,255,.88) !important;
  border-bottom: 1px solid var(--br) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  height: 54px !important;
  min-height: 54px !important;
  line-height: 54px !important;
  color: var(--txt) !important;
}
/* Panel footers */
html.dark-mode #layout > div > .footer {
  background: rgba(13,12,24,.7) !important;
  border-top: 1px solid var(--br) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
}
html:not(.dark-mode) #layout > div > .footer {
  background: rgba(248,250,252,.88) !important;
  border-top: 1px solid var(--br) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
}
/* Header title */
html.dark-mode #layout > div > .header .header-title { color: var(--txt) !important; font-weight: 600 !important; font-size: 14px !important; }
html:not(.dark-mode) #layout > div > .header .header-title { color: var(--txt) !important; font-weight: 600 !important; font-size: 14px !important; }

/* Toolbar buttons */
html.dark-mode .menu.toolbar a,
html.dark-mode .menu.toolbar button {
  color: var(--subtle) !important;
  border-radius: 8px !important;
  padding: 5px 7px !important;
  transition: var(--t) !important;
  font-size: 11px !important;
  border: 1px solid transparent !important;
}
html.dark-mode .menu.toolbar a::before,
html.dark-mode .menu.toolbar button::before { color: var(--subtle) !important; transition: var(--t) !important; }
html.dark-mode .menu.toolbar a:hover,
html.dark-mode .menu.toolbar button:hover,
html.dark-mode .menu.toolbar a.active {
  background: var(--vbg2) !important;
  color: var(--vl) !important;
  border-color: rgba(124,58,237,.2) !important;
}
html.dark-mode .menu.toolbar a:hover::before,
html.dark-mode .menu.toolbar button:hover::before,
html.dark-mode .menu.toolbar a.active::before { color: var(--vl) !important; }
html:not(.dark-mode) .menu.toolbar a,
html:not(.dark-mode) .menu.toolbar button {
  color: var(--subtle) !important;
  border-radius: 8px !important;
  transition: var(--t) !important;
  font-size: 11px !important;
}
html:not(.dark-mode) .menu.toolbar a:hover,
html:not(.dark-mode) .menu.toolbar button:hover,
html:not(.dark-mode) .menu.toolbar a.active {
  background: var(--vbg) !important;
  color: var(--v) !important;
}

/* ── §8 · Search Bar ─────────────────────────────────────────────────────── */
html.dark-mode .searchbar {
  background: var(--s2) !important;
  border-bottom: 1px solid var(--br2) !important;
  border-top: none !important;
}
html.dark-mode .searchbar input,
html.dark-mode .searchbar form { background: transparent !important; color: var(--txt) !important; }
html.dark-mode .searchbar input::placeholder { color: var(--subtle) !important; }
html.dark-mode .searchbar a::before { color: var(--subtle) !important; }
html.dark-mode .searchbar:focus-within { box-shadow: inset 0 -2px 0 var(--v) !important; }
html:not(.dark-mode) .searchbar {
  background: var(--s2) !important;
  border-bottom: 1px solid var(--br2) !important;
}
html:not(.dark-mode) .searchbar input::placeholder { color: var(--subtle) !important; }
html:not(.dark-mode) .searchbar:focus-within { box-shadow: inset 0 -2px 0 var(--v) !important; }

/* ── §9 · Folder List / Sidebar ──────────────────────────────────────────── */
/* dark */
html.dark-mode #layout-sidebar > .scroller { background: var(--s1) !important; }
html.dark-mode .folderlist { background: transparent !important; }
html.dark-mode .folderlist li a {
  color: var(--muted) !important;
  border-radius: 9px !important;
  margin: 1px 8px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  transition: var(--t) !important;
  border: 1px solid transparent !important;
  display: flex !important;
  align-items: center !important;
}
html.dark-mode .folderlist li a:hover {
  background: var(--vbg) !important;
  color: var(--txt) !important;
  border-color: rgba(124,58,237,.12) !important;
}
html.dark-mode .folderlist li.selected > a {
  background: var(--vbg2) !important;
  color: var(--vl) !important;
  border-color: rgba(124,58,237,.22) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 10px rgba(124,58,237,.12) !important;
}
html.dark-mode .folderlist li a::before { color: var(--subtle) !important; }
html.dark-mode .folderlist li.selected > a::before { color: var(--vl) !important; }
html.dark-mode .folderlist .unreadcount {
  background: linear-gradient(135deg, var(--v), var(--vd)) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 1px 7px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(124,58,237,.38) !important;
  margin-left: auto !important;
}
/* light */
html:not(.dark-mode) #layout-sidebar > .scroller { background: var(--s1) !important; }
html:not(.dark-mode) .folderlist li a {
  color: var(--muted) !important;
  border-radius: 9px !important;
  margin: 1px 8px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  transition: var(--t) !important;
  border: 1px solid transparent !important;
}
html:not(.dark-mode) .folderlist li a:hover {
  background: var(--vbg) !important;
  color: var(--v) !important;
}
html:not(.dark-mode) .folderlist li.selected > a {
  background: var(--vbg2) !important;
  color: var(--v) !important;
  border-color: rgba(124,58,237,.18) !important;
  font-weight: 600 !important;
}
html:not(.dark-mode) .folderlist .unreadcount {
  background: linear-gradient(135deg, var(--v), var(--vd)) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 1px 7px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  margin-left: auto !important;
}

/* Quota bar */
html.dark-mode .quota-widget .bar { background: var(--s3) !important; border-radius: 4px !important; height: 3px !important; }
html.dark-mode .quota-widget .value { background: linear-gradient(90deg, var(--v), var(--cyan)) !important; height: 3px !important; border-radius: 4px !important; box-shadow: 0 0 8px rgba(124,58,237,.4) !important; }
html.dark-mode .quota-widget .count { color: var(--subtle) !important; font-size: 10px !important; }
html:not(.dark-mode) .quota-widget .bar { background: var(--s3) !important; border-radius: 4px !important; height: 3px !important; }
html:not(.dark-mode) .quota-widget .value { background: linear-gradient(90deg, var(--v), var(--cyan)) !important; height: 3px !important; border-radius: 4px !important; }

/* ── §10 · Message List ──────────────────────────────────────────────────── */
/* dark */
html.dark-mode #layout-list > .scroller { background: var(--s1) !important; }
html.dark-mode .messagelist { background: transparent !important; border: none !important; }
html.dark-mode .messagelist thead th {
  background: var(--s2) !important;
  color: var(--subtle) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--br2) !important;
  padding: 8px 12px !important;
}
html.dark-mode .messagelist tbody tr { transition: background .12s ease !important; }
html.dark-mode .messagelist tbody tr td {
  border-bottom: 1px solid rgba(51,65,85,.2) !important;
  color: var(--muted) !important;
  background: transparent !important;
  padding: 10px 12px !important;
  font-size: 12.5px !important;
}
html.dark-mode .messagelist tbody tr td.subject { color: var(--txt) !important; }
html.dark-mode .messagelist tbody tr td.date { color: var(--subtle) !important; font-size: 11px !important; }
html.dark-mode .messagelist tbody tr:hover td {
  background: var(--vbg) !important;
}
html.dark-mode .messagelist tbody tr.selected td {
  background: var(--vbg2) !important;
  border-bottom-color: rgba(124,58,237,.18) !important;
}
html.dark-mode .messagelist tbody tr.selected td.subject { color: var(--vl) !important; }
html.dark-mode .messagelist tbody tr.unread td.subject {
  color: #f1f5f9 !important;
  font-weight: 700 !important;
}
html.dark-mode .messagelist tbody tr.unread td.from { color: var(--txt) !important; font-weight: 500 !important; }
html.dark-mode .messagelist span.msgicon.status.unread::before { color: var(--vl) !important; }
html.dark-mode .messagelist span.flagged::before { color: var(--amber) !important; }
html.dark-mode .messagelist span.attachment::before { color: var(--muted) !important; }
/* light */
html:not(.dark-mode) #layout-list > .scroller { background: var(--s1) !important; }
html:not(.dark-mode) .messagelist { background: transparent !important; border: none !important; }
html:not(.dark-mode) .messagelist thead th {
  background: var(--s2) !important;
  color: var(--subtle) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--br2) !important;
  padding: 8px 12px !important;
}
html:not(.dark-mode) .messagelist tbody tr td {
  border-bottom: 1px solid rgba(226,232,240,.7) !important;
  color: var(--muted) !important;
  background: transparent !important;
  padding: 10px 12px !important;
  font-size: 12.5px !important;
  transition: background .12s ease !important;
}
html:not(.dark-mode) .messagelist tbody tr td.subject { color: var(--txt) !important; }
html:not(.dark-mode) .messagelist tbody tr td.date { color: var(--subtle) !important; font-size: 11px !important; }
html:not(.dark-mode) .messagelist tbody tr:hover td { background: rgba(124,58,237,.04) !important; }
html:not(.dark-mode) .messagelist tbody tr.selected td {
  background: rgba(124,58,237,.07) !important;
  border-bottom-color: rgba(124,58,237,.1) !important;
}
html:not(.dark-mode) .messagelist tbody tr.selected td.subject { color: var(--v) !important; }
html:not(.dark-mode) .messagelist tbody tr.unread td.subject { font-weight: 700 !important; color: #0f172a !important; }
html:not(.dark-mode) .messagelist span.msgicon.status.unread::before { color: var(--v) !important; }
html:not(.dark-mode) .messagelist span.flagged::before { color: var(--amber) !important; }

/* ── §11 · Message Content View ──────────────────────────────────────────── */
html.dark-mode #layout-content > .scroller { background: var(--s1) !important; }
html.dark-mode #layout-content > .content,
html.dark-mode #layout-content > .formcontent { background: var(--s1) !important; }

/* message header card */
html.dark-mode #message-header {
  background: var(--s2) !important;
  border-bottom: 1px solid var(--br) !important;
  padding: 16px 20px !important;
}
html.dark-mode #message-header .subject {
  color: var(--txt) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -.01em !important;
}
html.dark-mode #message-header tr.from td,
html.dark-mode #message-header tr.to td,
html.dark-mode #message-header tr.cc td { color: var(--muted) !important; font-size: 12px !important; }
html.dark-mode #message-header .addresses a { color: var(--vl) !important; }
html.dark-mode #message-header .header-links a { color: var(--subtle) !important; }
html.dark-mode #message-header .header-links a:hover { color: var(--vl) !important; }

/* message body */
html.dark-mode .message-htmlpart,
html.dark-mode .message-part {
  background: var(--s1) !important;
  color: var(--txt) !important;
  padding: 20px 24px !important;
}
html.dark-mode .message-htmlpart a { color: var(--vl) !important; }
html.dark-mode .message-htmlpart blockquote {
  border-left: 3px solid var(--v) !important;
  background: var(--vbg) !important;
  padding: 8px 14px !important;
  margin: 8px 0 !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--muted) !important;
}
/* light content */
html:not(.dark-mode) #layout-content > .scroller { background: var(--s1) !important; }
html:not(.dark-mode) #layout-content > .content,
html:not(.dark-mode) #layout-content > .formcontent { background: var(--s1) !important; }
html:not(.dark-mode) #message-header {
  background: var(--s2) !important;
  border-bottom: 1px solid var(--br) !important;
  padding: 16px 20px !important;
}
html:not(.dark-mode) #message-header .subject { color: var(--txt) !important; font-size: 16px !important; font-weight: 700 !important; }
html:not(.dark-mode) #message-header tr.from td,
html:not(.dark-mode) #message-header tr.to td { color: var(--muted) !important; font-size: 12px !important; }
html:not(.dark-mode) #message-header .addresses a { color: var(--v) !important; }
html:not(.dark-mode) .message-htmlpart,
html:not(.dark-mode) .message-part { background: var(--s1) !important; color: var(--txt) !important; padding: 20px 24px !important; }
html:not(.dark-mode) .message-htmlpart a { color: var(--v) !important; }
html:not(.dark-mode) .message-htmlpart blockquote { border-left: 3px solid var(--v) !important; background: var(--vbg) !important; padding: 8px 14px !important; border-radius: 0 8px 8px 0 !important; }

/* Attachments */
html.dark-mode .attachmentslist li {
  background: var(--s2) !important;
  border: 1px solid var(--br2) !important;
  border-radius: 9px !important;
  color: var(--muted) !important;
  transition: var(--t) !important;
}
html.dark-mode .attachmentslist li:hover { border-color: var(--v) !important; background: var(--vbg) !important; }
html.dark-mode .attachmentslist li a { color: var(--vl) !important; }
html:not(.dark-mode) .attachmentslist li {
  background: var(--s2) !important;
  border: 1px solid var(--br2) !important;
  border-radius: 9px !important;
  color: var(--muted) !important;
  transition: var(--t) !important;
}
html:not(.dark-mode) .attachmentslist li:hover { border-color: var(--v) !important; background: var(--vbg) !important; }
html:not(.dark-mode) .attachmentslist li a { color: var(--v) !important; }

/* ── §12 · Buttons ───────────────────────────────────────────────────────── */
html.dark-mode .btn-primary {
  background: linear-gradient(135deg, var(--v) 0%, var(--vd) 100%) !important;
  border-color: var(--v) !important;
  border-radius: var(--r) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 7px 16px !important;
  box-shadow: 0 4px 14px rgba(124,58,237,.35) !important;
  transition: var(--t) !important;
}
html.dark-mode .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #8b5cf6, var(--v)) !important;
  box-shadow: 0 6px 22px rgba(124,58,237,.52) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
html.dark-mode .btn-primary:focus { box-shadow: 0 0 0 3px rgba(124,58,237,.3) !important; }
html.dark-mode .btn-primary:disabled { opacity: .45 !important; }
html.dark-mode .btn-secondary {
  background: var(--s2) !important;
  border: 1px solid var(--br2) !important;
  border-radius: var(--r) !important;
  color: var(--muted) !important;
  transition: var(--t) !important;
}
html.dark-mode .btn-secondary:hover:not(:disabled) {
  background: var(--vbg) !important;
  border-color: var(--v) !important;
  color: var(--vl) !important;
}
html.dark-mode .btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: none !important;
  border-radius: var(--r) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(239,68,68,.28) !important;
}
html.dark-mode .btn-danger:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(239,68,68,.42) !important; transform: translateY(-1px) !important; }
html.dark-mode .btn-link { color: var(--vl) !important; }
html.dark-mode .floating-action-buttons a.button {
  background: linear-gradient(135deg, var(--v), var(--vd)) !important;
  box-shadow: 0 6px 24px rgba(124,58,237,.5), 0 0 0 1px rgba(167,139,250,.2) !important;
  border-radius: 50% !important;
  transition: var(--t) !important;
}
html.dark-mode .floating-action-buttons a.button:hover {
  box-shadow: 0 8px 32px rgba(124,58,237,.65) !important;
  transform: translateY(-2px) scale(1.04) !important;
}
/* light buttons */
html:not(.dark-mode) .btn-primary {
  background: linear-gradient(135deg, var(--v), var(--vd)) !important;
  border-color: var(--v) !important;
  border-radius: var(--r) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(124,58,237,.22) !important;
  transition: var(--t) !important;
}
html:not(.dark-mode) .btn-primary:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(124,58,237,.35) !important; transform: translateY(-1px) !important; color: #fff !important; }
html:not(.dark-mode) .btn-primary:focus { box-shadow: 0 0 0 3px rgba(124,58,237,.25) !important; }
html:not(.dark-mode) .btn-secondary:hover:not(:disabled) { background: var(--vbg) !important; border-color: var(--v) !important; color: var(--v) !important; }
html:not(.dark-mode) .btn-link { color: var(--v) !important; }
html:not(.dark-mode) .floating-action-buttons a.button { background: linear-gradient(135deg, var(--v), var(--vd)) !important; border-radius: 50% !important; box-shadow: 0 6px 24px rgba(124,58,237,.35) !important; }

/* ── §13 · Forms & Inputs ────────────────────────────────────────────────── */
html.dark-mode .form-control,
html.dark-mode select.form-control,
html.dark-mode textarea.form-control,
html.dark-mode input[type=text],
html.dark-mode input[type=email],
html.dark-mode input[type=password],
html.dark-mode input[type=search],
html.dark-mode textarea {
  background: var(--s2) !important;
  border: 1px solid var(--br2) !important;
  border-radius: var(--r) !important;
  color: var(--txt) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  transition: var(--t) !important;
}
html.dark-mode .form-control:focus,
html.dark-mode input[type=text]:focus,
html.dark-mode input[type=email]:focus,
html.dark-mode input[type=password]:focus,
html.dark-mode textarea:focus {
  background: var(--s1) !important;
  border-color: var(--v) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.16) !important;
  color: var(--txt) !important;
}
html.dark-mode .form-control::placeholder { color: var(--subtle) !important; }
html.dark-mode label, html.dark-mode .col-form-label { color: var(--muted) !important; font-size: 12px !important; font-weight: 500 !important; }
html.dark-mode .form-check-input { background: var(--s2) !important; border-color: var(--br2) !important; }
html.dark-mode .form-check-input:checked { background-color: var(--v) !important; border-color: var(--v) !important; box-shadow: 0 0 8px rgba(124,58,237,.3) !important; }
/* light forms */
html:not(.dark-mode) .form-control:focus,
html:not(.dark-mode) input[type=text]:focus,
html:not(.dark-mode) input[type=email]:focus,
html:not(.dark-mode) input[type=password]:focus { border-color: var(--v) !important; box-shadow: 0 0 0 3px rgba(124,58,237,.14) !important; }
html:not(.dark-mode) .form-check-input:checked { background-color: var(--v) !important; border-color: var(--v) !important; }

/* ── §14 · Compose ───────────────────────────────────────────────────────── */
html.dark-mode #compose-header {
  background: var(--s2) !important;
  border-bottom: 1px solid var(--br2) !important;
}
html.dark-mode #compose-subject {
  background: var(--s2) !important;
  border-color: var(--br2) !important;
  border-radius: var(--r) !important;
  color: var(--txt) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
html.dark-mode #compose-subject:focus {
  border-color: var(--v) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.15) !important;
  background: var(--s1) !important;
}
html.dark-mode .tagedit-list {
  background: var(--s2) !important;
  border: 1px solid var(--br2) !important;
  border-radius: var(--r) !important;
  transition: var(--t) !important;
}
html.dark-mode .tagedit-list:focus-within {
  border-color: var(--v) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.15) !important;
}
html.dark-mode .tagedit-list li.tagedit-listelement-old {
  background: rgba(124,58,237,.18) !important;
  border: 1px solid rgba(124,58,237,.28) !important;
  border-radius: 20px !important;
  color: var(--vl) !important;
  font-size: 12px !important;
}
html.dark-mode .tagedit-list li.tagedit-listelement-old a { color: var(--subtle) !important; }
html.dark-mode .tagedit-list li.tagedit-listelement-old a:hover { color: var(--red) !important; }
html.dark-mode .tagedit-list li.tagedit-listelement-new input { background: transparent !important; color: var(--txt) !important; }
/* light compose */
html:not(.dark-mode) .tagedit-list:focus-within { border-color: var(--v) !important; box-shadow: 0 0 0 3px rgba(124,58,237,.12) !important; }
html:not(.dark-mode) .tagedit-list li.tagedit-listelement-old { background: var(--vbg2) !important; border: 1px solid rgba(124,58,237,.2) !important; border-radius: 20px !important; color: var(--v) !important; }
html:not(.dark-mode) #compose-subject:focus { border-color: var(--v) !important; box-shadow: 0 0 0 3px rgba(124,58,237,.12) !important; }

/* ── §15 · Dialogs & Menus ───────────────────────────────────────────────── */
/* dark */
html.dark-mode .ui-dialog {
  background: var(--s1) !important;
  border: 1px solid var(--br) !important;
  border-radius: var(--rxl) !important;
  box-shadow: 0 28px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(124,58,237,.12) !important;
  overflow: hidden !important;
  animation: nd-scalein .2s var(--ease) !important;
}
html.dark-mode .ui-dialog .ui-dialog-titlebar {
  background: linear-gradient(135deg, var(--s2), var(--s3)) !important;
  border-bottom: 1px solid var(--br2) !important;
  color: var(--txt) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 14px 18px !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
}
html.dark-mode .ui-dialog .ui-dialog-titlebar-close { color: var(--subtle) !important; border-radius: 8px !important; transition: var(--t) !important; }
html.dark-mode .ui-dialog .ui-dialog-titlebar-close:hover { background: var(--vbg2) !important; color: var(--vl) !important; }
html.dark-mode .ui-dialog .ui-dialog-content { background: var(--s1) !important; color: var(--txt) !important; padding: 20px !important; }
html.dark-mode .ui-dialog .ui-dialog-buttonpane { background: var(--s2) !important; border-top: 1px solid var(--br2) !important; padding: 12px 18px !important; }
html.dark-mode .ui-menu {
  background: var(--s1) !important;
  border: 1px solid var(--br) !important;
  border-radius: var(--rl) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(124,58,237,.08) !important;
  padding: 5px !important;
  animation: nd-fadein .15s var(--ease) !important;
}
html.dark-mode .ui-menu .ui-menu-item-wrapper {
  border-radius: 7px !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  padding: 7px 12px !important;
  transition: var(--t) !important;
}
html.dark-mode .ui-menu .ui-state-active,
html.dark-mode .ui-menu .ui-menu-item-wrapper:hover {
  background: var(--vbg2) !important;
  color: var(--vl) !important;
  border: none !important;
}
html.dark-mode .popover {
  background: var(--s1) !important;
  border: 1px solid var(--br) !important;
  border-radius: var(--rl) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.5) !important;
  animation: nd-fadein .15s var(--ease) !important;
}
html.dark-mode .popover .menu li a {
  color: var(--muted) !important;
  border-radius: 8px !important;
  margin: 1px 5px !important;
  padding: 7px 11px !important;
  font-size: 13px !important;
  transition: var(--t) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
html.dark-mode .popover .menu li a:hover { background: var(--vbg2) !important; color: var(--vl) !important; }
html.dark-mode .popover .menu li a::before { color: var(--subtle) !important; }
html.dark-mode .popover .menu li a:hover::before { color: var(--vl) !important; }
/* light dialogs */
html:not(.dark-mode) .ui-dialog { border-radius: var(--rxl) !important; border: 1px solid rgba(124,58,237,.1) !important; box-shadow: 0 20px 50px rgba(0,0,0,.1), 0 0 0 1px rgba(124,58,237,.06) !important; overflow: hidden !important; animation: nd-scalein .2s var(--ease) !important; }
html:not(.dark-mode) .ui-dialog .ui-dialog-titlebar { background: #f8f7ff !important; border-bottom: 1px solid rgba(124,58,237,.1) !important; font-weight: 600 !important; font-size: 14px !important; }
html:not(.dark-mode) .ui-dialog .ui-dialog-buttonpane { background: #f8f7ff !important; border-top: 1px solid rgba(124,58,237,.08) !important; }
html:not(.dark-mode) .ui-menu { border-radius: var(--rl) !important; border: 1px solid rgba(124,58,237,.1) !important; box-shadow: 0 14px 36px rgba(0,0,0,.1) !important; padding: 5px !important; animation: nd-fadein .15s var(--ease) !important; }
html:not(.dark-mode) .ui-menu .ui-state-active,
html:not(.dark-mode) .ui-menu .ui-menu-item-wrapper:hover { background: var(--vbg2) !important; color: var(--v) !important; }
html:not(.dark-mode) .popover { border-radius: var(--rl) !important; border: 1px solid rgba(124,58,237,.1) !important; box-shadow: 0 14px 36px rgba(0,0,0,.08) !important; }
html:not(.dark-mode) .popover .menu li a:hover { background: var(--vbg) !important; color: var(--v) !important; }

/* ── §16 · Notifications ─────────────────────────────────────────────────── */
html.dark-mode #messagestack div {
  border-radius: var(--r) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.4) !important;
  animation: nd-slide-in .22s var(--ease) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
html.dark-mode #messagestack .alert-info { background: rgba(6,182,212,.1) !important; border-color: rgba(6,182,212,.22) !important; color: #67e8f9 !important; }
html.dark-mode #messagestack .alert-success { background: rgba(16,185,129,.1) !important; border-color: rgba(16,185,129,.22) !important; color: #6ee7b7 !important; }
html.dark-mode #messagestack .alert-warning { background: rgba(245,158,11,.08) !important; border-color: rgba(245,158,11,.18) !important; color: #fcd34d !important; }
html.dark-mode #messagestack .alert-danger { background: rgba(239,68,68,.09) !important; border-color: rgba(239,68,68,.18) !important; color: #fca5a5 !important; }
html.dark-mode #messagestack .loading { background: rgba(15,14,26,.9) !important; border-color: var(--br) !important; color: var(--muted) !important; }
html:not(.dark-mode) #messagestack div { border-radius: var(--r) !important; box-shadow: 0 8px 24px rgba(0,0,0,.1) !important; animation: nd-slide-in .22s var(--ease) !important; font-size: 13px !important; }

/* ── §17 · Listing tables ────────────────────────────────────────────────── */
html.dark-mode .listing { background: transparent !important; }
html.dark-mode .listing tbody tr td { border-bottom: 1px solid rgba(51,65,85,.18) !important; color: var(--txt) !important; transition: background .1s !important; padding: 9px 12px !important; }
html.dark-mode .listing tbody tr:hover td { background: var(--vbg) !important; }
html.dark-mode .listing tbody tr.selected td { background: var(--vbg2) !important; color: var(--vl) !important; }
html.dark-mode .listing thead th { background: var(--s2) !important; color: var(--subtle) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .07em !important; text-transform: uppercase !important; border-bottom: 1px solid var(--br2) !important; }
html:not(.dark-mode) .listing tbody tr:hover td { background: rgba(124,58,237,.03) !important; }
html:not(.dark-mode) .listing tbody tr.selected td { background: rgba(124,58,237,.07) !important; color: var(--v) !important; }

/* ── §18 · Settings ──────────────────────────────────────────────────────── */
html.dark-mode #settings-sections li a { color: var(--muted) !important; border-radius: 9px !important; margin: 1px 8px !important; padding: 7px 10px !important; transition: var(--t) !important; }
html.dark-mode #settings-sections li.selected a,
html.dark-mode #settings-sections li a:hover { background: var(--vbg2) !important; color: var(--vl) !important; }
html.dark-mode fieldset.propform { border: 1px solid var(--br2) !important; border-radius: var(--rl) !important; padding: 16px 20px !important; background: var(--s1) !important; margin-bottom: 12px !important; }
html.dark-mode fieldset.propform legend { color: var(--vl) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; padding: 0 8px !important; }
html.dark-mode .propform td.title { color: var(--muted) !important; font-size: 12px !important; font-weight: 500 !important; }
html:not(.dark-mode) #settings-sections li.selected a,
html:not(.dark-mode) #settings-sections li a:hover { background: var(--vbg) !important; color: var(--v) !important; }
html:not(.dark-mode) fieldset.propform { border: 1px solid var(--br2) !important; border-radius: var(--rl) !important; padding: 16px 20px !important; }
html:not(.dark-mode) fieldset.propform legend { color: var(--v) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; }

/* ── §19 · Contacts ──────────────────────────────────────────────────────── */
html.dark-mode .contactlist td.contact { color: var(--txt) !important; }
html.dark-mode .contactlist td.contactgroup { color: var(--muted) !important; }
html.dark-mode #contact-details .contact-head { background: var(--s2) !important; border-radius: var(--rl) !important; border: 1px solid var(--br2) !important; margin: 12px !important; padding: 20px !important; }
html.dark-mode #contact-details .contact-head .contactpic { border: 2px solid var(--br) !important; border-radius: 50% !important; box-shadow: 0 0 16px rgba(124,58,237,.2) !important; }

/* ── §20 · Login Page ────────────────────────────────────────────────────── */
html.dark-mode body.task-login {
  background:
    radial-gradient(ellipse 60% 55% at 20% 25%, rgba(124,58,237,.15) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 80% 75%, rgba(99,102,241,.1) 0%, transparent 65%),
    #07060f !important;
}
html.dark-mode body.task-login::before {
  background-image:
    linear-gradient(rgba(124,58,237,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.04) 1px, transparent 1px);
  background-size: 44px 44px;
}
html.dark-mode #login-form {
  background: rgba(15,14,26,.88) !important;
  border: 1px solid rgba(124,58,237,.2) !important;
  border-radius: var(--rfl) !important;
  padding: 44px 48px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(124,58,237,.12), 0 0 60px rgba(124,58,237,.1) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
html.dark-mode #login-form #logo {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto 20px !important;
  filter: drop-shadow(0 0 20px rgba(124,58,237,.6)) !important;
  animation: nd-logo-pulse 3s ease-in-out infinite !important;
}
html.dark-mode #login-form .input-group {
  background: rgba(21,19,35,.7) !important;
  border: 1px solid rgba(124,58,237,.2) !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
  transition: var(--t) !important;
  margin-bottom: 12px !important;
}
html.dark-mode #login-form .input-group:focus-within {
  border-color: var(--v) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.18) !important;
}
html.dark-mode #login-form .input-group .icon { background: transparent !important; border: none !important; color: var(--subtle) !important; }
html.dark-mode #login-form .input-group .form-control { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--txt) !important; }
html.dark-mode #login-form .submit {
  background: linear-gradient(135deg, var(--v), var(--vd)) !important;
  border: none !important;
  border-radius: var(--r) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .04em !important;
  padding: 12px !important;
  width: 100% !important;
  box-shadow: 0 6px 22px rgba(124,58,237,.42) !important;
  transition: var(--t) !important;
  margin-top: 6px !important;
  cursor: pointer !important;
}
html.dark-mode #login-form .submit:hover {
  box-shadow: 0 8px 28px rgba(124,58,237,.58) !important;
  transform: translateY(-1px) !important;
}
/* light login */
html:not(.dark-mode) body.task-login {
  background: radial-gradient(ellipse at 30% 30%, rgba(124,58,237,.06) 0%, transparent 55%), #f1f5f9 !important;
}
html:not(.dark-mode) #login-form {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(124,58,237,.12) !important;
  border-radius: var(--rfl) !important;
  padding: 44px 48px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.08), 0 0 0 1px rgba(124,58,237,.07) !important;
  backdrop-filter: blur(16px) !important;
}
html:not(.dark-mode) #login-form #logo { display: block !important; width: 52px !important; height: 52px !important; margin: 0 auto 20px !important; filter: drop-shadow(0 0 12px rgba(124,58,237,.35)) !important; }
html:not(.dark-mode) #login-form .input-group:focus-within { border-color: var(--v) !important; box-shadow: 0 0 0 3px rgba(124,58,237,.12) !important; }
html:not(.dark-mode) #login-form .submit { background: linear-gradient(135deg, var(--v), var(--vd)) !important; border: none !important; border-radius: var(--r) !important; color: #fff !important; font-weight: 700 !important; font-size: 14px !important; padding: 12px !important; width: 100% !important; box-shadow: 0 6px 20px rgba(124,58,237,.28) !important; }
html:not(.dark-mode) #login-form .submit:hover { box-shadow: 0 8px 26px rgba(124,58,237,.4) !important; transform: translateY(-1px) !important; }

/* ── §21 · Links ─────────────────────────────────────────────────────────── */
html.dark-mode a { color: var(--vl) !important; }
html.dark-mode a:hover { color: var(--vxl) !important; text-decoration: none !important; }
html:not(.dark-mode) a { color: var(--v) !important; }

/* ── §22 · Page nav / pagination ─────────────────────────────────────────── */
html.dark-mode .menu.pagenav a,
html.dark-mode .menu.pagenav .pagenav-text {
  background: var(--s2) !important;
  border: 1px solid var(--br2) !important;
  border-radius: 7px !important;
  color: var(--muted) !important;
}
html.dark-mode .menu.pagenav a:hover { background: var(--vbg2) !important; color: var(--vl) !important; border-color: var(--v) !important; }

/* ── §23 · Datepicker ────────────────────────────────────────────────────── */
html.dark-mode .ui-datepicker { background: var(--s1) !important; border: 1px solid var(--br) !important; border-radius: var(--rl) !important; box-shadow: 0 20px 50px rgba(0,0,0,.5) !important; }
html.dark-mode .ui-datepicker-header { background: var(--s2) !important; border-bottom: 1px solid var(--br2) !important; border-radius: var(--rl) var(--rl) 0 0 !important; color: var(--txt) !important; padding: 10px !important; }
html.dark-mode .ui-datepicker td a, html.dark-mode .ui-datepicker td span { color: var(--muted) !important; border-radius: 6px !important; }
html.dark-mode .ui-datepicker td a:hover { background: var(--vbg2) !important; color: var(--vl) !important; }
html.dark-mode .ui-datepicker .ui-state-active { background: var(--v) !important; color: #fff !important; border-radius: 6px !important; }

/* ── §24 · Drag layer ────────────────────────────────────────────────────── */
html.dark-mode #rcmdraglayer { background: rgba(124,58,237,.1) !important; border: 2px dashed var(--v) !important; border-radius: var(--r) !important; color: var(--vl) !important; }
html:not(.dark-mode) #rcmdraglayer { background: rgba(124,58,237,.06) !important; border: 2px dashed rgba(124,58,237,.4) !important; border-radius: var(--r) !important; }

/* ── §25 · Animations ────────────────────────────────────────────────────── */
@keyframes nd-logo-pulse {
  0%,100% { filter: drop-shadow(0 0 10px rgba(124,58,237,.48)); }
  50%      { filter: drop-shadow(0 0 28px rgba(124,58,237,.82)); }
}
@keyframes nd-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nd-scalein {
  from { opacity: 0; transform: scale(.97) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes nd-slide-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}