/* ============================================================
   ESUOR Accessibility Panel — Scoped Styles (acc-*)
   Dual-theme: Light & Dark — auto-syncs with site mode
   All variables scoped to .acc-panel-root to avoid leaking
   ============================================================ */

/* ══════════════════════════════════════════════
   THEME TOKENS — Light (default)
   Variables are set on .acc-panel (the rendered box) so they
   cascade reliably to all children regardless of browser.
   .acc-panel-root keeps display:contents but no longer holds vars.
   ══════════════════════════════════════════════ */
.acc-panel-root {
  display: contents;     /* invisible wrapper — children layout normally */
}

/* Light-mode token root — the actual rendered panel box */
.acc-panel {
  --acc-accent:         #004B7B;
  --acc-accent-hover:   #c4101f;
  --acc-accent-soft:    rgb(25 232 217 / 10%);
  --acc-accent-glow:    rgba(232,25,44,0.22);

  /* Surfaces — pure whites & very light greys matching Image 1 */
  --acc-bg-panel:       #ffffff;    /* panel shell: pure white */
  --acc-bg-body:        #f4f5f7;    /* scrollable body: faint off-white */
  --acc-bg-section:     #ffffff;    /* section card containers: white */
  --acc-bg-card:        #f0f1f5;    /* icon wrap & btn backgrounds: light grey */
  --acc-bg-card-hover:  #e6e8ef;    /* hover state */
  --acc-bg-input:       #f4f5f7;    /* textarea */
  --acc-bg-footer:      #ffffff;    /* footer: white */

  /* Borders — very subtle light grey */
  --acc-border:         #e4e6ee;
  --acc-border-card:    #dcdfe9;
  --acc-border-header:  #eceef5;

  /* Text */
  --acc-text-primary:   #111827;
  --acc-text-secondary: #374151;
  --acc-text-muted:     #9ca3af;
  --acc-text-label:     #6b7280;

  /* Shadow */
  --acc-shadow-panel:   -4px 0 32px rgba(0,0,0,0.10);
  --acc-shadow-card:    0 1px 3px rgba(0,0,0,0.05);

  /* Slider track */
  --acc-track:          #dcdfe9;

  /* RST button hover */
  --acc-rst-hover-bg:   #e6e8ef;
  --acc-rst-hover-border: #c8cad8;
}

/* ══════════════════════════════════════════════
   THEME TOKENS — Dark
   Applied when .acc-panel-root has class .acc-dark.
   Colours matched exactly to Image 2: dark charcoal/grey,
   NOT purple — #111827 base, #1f2937 surfaces, #252d3d cards.
   ══════════════════════════════════════════════ */
.acc-panel-root.acc-dark .acc-panel {
  /* Surfaces — dark charcoal matching Image 2 */
  --acc-bg-panel:       #1a1f2e;    /* panel shell: dark navy-charcoal */
  --acc-bg-body:        #111827;    /* scrollable body: darkest layer */
  --acc-bg-section:     #1f2937;    /* section wrappers: slightly lighter */
  --acc-bg-card:        #2d3748;    /* icon wraps, btns: distinct mid-dark */
  --acc-bg-card-hover:  #374151;    /* hover: a shade lighter */
  --acc-bg-input:       #111827;    /* textarea background */
  --acc-bg-footer:      #1a1f2e;    /* footer: matches panel */

  /* Borders — subtle dark dividers */
  --acc-border:         #2d3748;
  --acc-border-card:    #374151;
  --acc-border-header:  #252d3d;

  /* Text — light grey tones for readability */
  --acc-text-primary:   #f9fafb;
  --acc-text-secondary: #d1d5db;
  --acc-text-muted:     #6b7280;
  --acc-text-label:     #9ca3af;

  /* Shadow — deeper in dark mode */
  --acc-shadow-panel:   -4px 0 40px rgba(0,0,0,0.60);
  --acc-shadow-card:    0 1px 4px rgba(0,0,0,0.35);

  /* Slider */
  --acc-track:          #374151;

  /* RST hover */
  --acc-rst-hover-bg:   #374151;
  --acc-rst-hover-border: #4b5563;
}

/* ══════════════════════════════════════════════
   NAVBAR TRIGGER
   ══════════════════════════════════════════════ */
.acc-nav-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid;
  cursor: pointer;
  color: inherit;
  transition: background 0.2s;
  position: relative;
  padding: 0;
  flex-shrink: 0;
}
body.acc-dark-mode .acc-nav-trigger{border: 1px solid #fff;}

.acc-nav-trigger:hover {
  background: rgba(128,128,128,0.15);
}
.acc-nav-trigger i {
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
}
.acc-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  background: #e8192c;
  border-radius: 50%;
  border: 2px solid transparent;
  display: none;
}
.acc-nav-trigger.acc-active .acc-badge {
  display: block;
}

/* ══════════════════════════════════════════════
   OVERLAY
   ══════════════════════════════════════════════ */
.acc-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 99998;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.acc-overlay.acc-show    { display: block; }
.acc-overlay.acc-visible { opacity: 1; }

/* ══════════════════════════════════════════════
   PANEL SHELL
   ══════════════════════════════════════════════ */
.acc-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 100vw;
  height: 100vh;
  background-color: var(--acc-bg-panel);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.25s ease,
              box-shadow 0.25s ease;
  box-shadow: var(--acc-shadow-panel);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  color: var(--acc-text-primary);
  overflow: hidden;
}
.acc-panel.acc-open {
  transform: translateX(0);
}

/* ══════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════ */
.acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 13px;
  background-color: var(--acc-bg-panel);
  border-bottom: 1px solid var(--acc-border-header);
  flex-shrink: 0;
  transition: background 0.25s, border-color 0.25s;
}
.acc-header-left {
  display: flex;
  align-items: center;
  gap: 9px;
}
.acc-header-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--acc-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s;
}
.acc-header-icon i {
  font-size: 17px;
  color: var(--acc-accent);
  line-height: 1;
  transition: color 0.25s;
}
.acc-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--acc-text-primary);
  letter-spacing: 0.01em;
  transition: color 0.25s;
}
.acc-header p {
  margin: 1px 0 0;
  font-size: 10.5px;
  color: var(--acc-text-muted);
  transition: color 0.25s;
}
.acc-close-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--acc-bg-card);
  border: 1px solid var(--acc-border-card);
  color: var(--acc-text-muted);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  line-height: 1;
  flex-shrink: 0;
}
.acc-close-btn:hover {
  background: var(--acc-accent);
  border-color: var(--acc-accent);
  color: #fff;
}

/* ══════════════════════════════════════════════
   SCROLLABLE BODY
   ══════════════════════════════════════════════ */
.acc-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 14px 16px;
  scroll-behavior: smooth;
  background-color: var(--acc-bg-body);
  transition: background 0.25s;
}
.acc-body::-webkit-scrollbar { width: 3px; }
.acc-body::-webkit-scrollbar-track { background: transparent; }
.acc-body::-webkit-scrollbar-thumb {
  background: var(--acc-border);
  border-radius: 3px;
}

/* ══════════════════════════════════════════════
   SECTION LABELS
   ══════════════════════════════════════════════ */
.acc-section-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--acc-text-muted);
  padding: 12px 2px 6px;
  transition: color 0.25s;
}

/* ══════════════════════════════════════════════
   SECTION CARD WRAPPER
   ══════════════════════════════════════════════ */
.acc-section {
  background-color: var(--acc-bg-section);
  border: 1px solid var(--acc-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: var(--acc-shadow-card);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

/* ══════════════════════════════════════════════
   TEXT CONTROL ROWS
   ══════════════════════════════════════════════ */
.acc-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--acc-border);
  gap: 8px;
  transition: border-color 0.25s;
}
.acc-control-row:last-child { border-bottom: none; }

.acc-control-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--acc-text-secondary);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.25s;
}
.acc-control-label i {
  font-size: 14px;
  color: var(--acc-text-muted);
  width: 16px;
  text-align: center;
  transition: color 0.25s;
}

/* A⁻ A A⁺ font size buttons */
.acc-font-size-group {
  display: flex;
  align-items: center;
  gap: 3px;
}
.acc-fs-btn {
  border: 1px solid var(--acc-border-card);
  background: var(--acc-bg-card);
  color: var(--acc-text-secondary);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: inherit;
  font-weight: 700;
  line-height: 1;
  padding: 5px 9px;
  min-width: 30px;
}
.acc-fs-btn:hover {
  background: var(--acc-accent);
  border-color: var(--acc-accent);
  color: #fff;
}
.acc-fs-btn.acc-fs-dec { font-size: 10px; }
.acc-fs-btn.acc-fs-mid {
  font-size: 12px;
  color: var(--acc-text-muted);
  background: transparent;
  border-color: transparent;
  cursor: default;
  pointer-events: none;
  min-width: 20px;
  padding: 5px 4px;
}
.acc-fs-btn.acc-fs-inc { font-size: 15px; }

/* +/- step buttons */
.acc-btn-group { display: flex; align-items: center; gap: 4px; }
.acc-icon-btn {
  width: 27px;
  height: 27px;
  border-radius: 6px;
  border: 1px solid var(--acc-border-card);
  background: var(--acc-bg-card);
  color: var(--acc-text-secondary);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  line-height: 1;
  font-family: inherit;
}
.acc-icon-btn:hover {
  background: var(--acc-accent);
  border-color: var(--acc-accent);
  color: #fff;
}
.acc-icon-btn.acc-rst {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--acc-text-muted);
  width: auto;
  padding: 0 7px;
  min-width: 32px;
}
.acc-icon-btn.acc-rst:hover {
  background: var(--acc-rst-hover-bg);
  border-color: var(--acc-rst-hover-border);
  color: var(--acc-text-secondary);
}

/* ══════════════════════════════════════════════
   SLIDER ROW
   ══════════════════════════════════════════════ */
.acc-slider-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--acc-border);
  transition: border-color 0.25s;
}
.acc-slider-row:last-child { border-bottom: none; }

.acc-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.acc-slider-header .acc-sl-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--acc-text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.25s;
}
.acc-slider-header .acc-sl-label i {
  font-size: 14px;
  color: var(--acc-text-muted);
  width: 16px;
  text-align: center;
  transition: color 0.25s;
}
.acc-slider-header .acc-sl-val {
  font-size: 11px;
  font-weight: 600;
  color: var(--acc-accent);
  background: var(--acc-accent-soft);
  border-radius: 5px;
  padding: 2px 8px;
  transition: background 0.25s;
}

.acc-slider {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 4px;
  background: var(--acc-track);
  outline: none;
  cursor: pointer;
  transition: background 0.25s;
}
.acc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--acc-accent);
  cursor: pointer;
  border: 2px solid var(--acc-bg-panel);
  box-shadow: 0 0 0 1px var(--acc-accent), 0 2px 6px var(--acc-accent-glow);
  transition: border-color 0.25s;
}
.acc-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--acc-accent);
  border: 2px solid var(--acc-bg-panel);
}

/* ══════════════════════════════════════════════
   TOGGLE CARD GRID
   ══════════════════════════════════════════════ */
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; }
.acc-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

.acc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 16px 8px 14px;
  cursor: pointer;
  border: none;
  background: var(--acc-bg-section);
  font-family: inherit;
  transition: background 0.15s;
  text-align: center;
  position: relative;
  border-right: 1px solid var(--acc-border);
  border-bottom: 1px solid var(--acc-border);
  min-height: 86px;
}
.acc-grid .acc-card:nth-child(2n)   { border-right: none; }
.acc-grid-3 .acc-card:nth-child(3n) { border-right: none; }
.acc-section .acc-card:last-child,
.acc-section .acc-card:nth-last-child(-n+2):nth-child(odd) { border-bottom: none; }
.acc-card:hover { background: var(--acc-bg-card-hover); }

/* Icon wrap */
.acc-card-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--acc-bg-card);
  border: 1px solid var(--acc-border-card);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.acc-card-icon-wrap i {
  font-size: 19px;
  color: var(--acc-text-muted);
  transition: color 0.2s;
}

.acc-card-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--acc-text-label);
  line-height: 1.3;
  transition: color 0.15s;
}

/* ON state */
.acc-card.acc-on .acc-card-icon-wrap {
  background: var(--acc-accent);
  border-color: var(--acc-accent);
  box-shadow: 0 0 14px rgb(25 162 232 / 45%);
}
.acc-card.acc-on .acc-card-icon-wrap i { color: #fff; }
.acc-card.acc-on .acc-card-label {
  color: var(--acc-accent);
  font-weight: 600;
}
.acc-card.acc-active .acc-card-icon { background: var(--acc-accent); }

/* ══════════════════════════════════════════════
   TTS
   ══════════════════════════════════════════════ */
.acc-tts-box { padding: 12px 14px; }

.acc-tts-textarea {
  width: 100%;
  min-height: 86px;
  border: 1px solid var(--acc-border-card);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 11.5px;
  font-family: inherit;
  color: var(--acc-text-primary);
  background: var(--acc-bg-input);
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.25s, color 0.25s;
  outline: none;
  line-height: 1.55;
}
.acc-tts-textarea::placeholder { color: var(--acc-text-muted); }
.acc-tts-textarea:focus { border-color: var(--acc-accent); }

.acc-tts-controls { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }

.acc-btn {
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--acc-border-card);
  background: var(--acc-bg-card);
  font-size: 11.5px;
  font-weight: 500;
  font-family: inherit;
  color: var(--acc-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}
.acc-btn i { font-size: 12px; }
.acc-btn:hover {
  background: var(--acc-bg-card-hover);
  border-color: var(--acc-border);
  color: var(--acc-text-primary);
}
.acc-btn-primary {
  background: var(--acc-accent);
  border-color: var(--acc-accent);
  color: #fff;
}
.acc-btn-primary:hover {
  background: var(--acc-accent-hover);
  border-color: var(--acc-accent-hover);
  color: #fff;
}

.acc-tts-tip {
  font-size: 10.5px;
  color: var(--acc-text-muted);
  margin-top: 9px;
  line-height: 1.5;
  transition: color 0.25s;
}
.acc-tts-status {
  font-size: 11px;
  color: var(--acc-text-muted);
  margin-top: 5px;
  min-height: 15px;
  transition: color 0.25s;
}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.acc-footer {
  padding: 11px 14px;
  border-top: 1px solid var(--acc-border-header);
  flex-shrink: 0;
  background-color: var(--acc-bg-footer);
  transition: background 0.25s, border-color 0.25s;
}
.acc-reset-btn {
  width: 100%;
  padding: 10px;
  border-radius: 9px;
  border: 1px solid var(--acc-border-card);
  background: var(--acc-bg-card);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  color: var(--acc-text-label);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all 0.2s;
}
.acc-reset-btn i { font-size: 15px; }
.acc-reset-btn:hover {
  border-color: var(--acc-accent);
  color: var(--acc-accent);
  background: var(--acc-accent-soft);
}

/* ══════════════════════════════════════════════
   THEME TRANSITION — smooth panel children only
   (excludes .acc-panel itself — it has its own transition)
   ══════════════════════════════════════════════ */
.acc-panel *:not(.acc-slider):not(.acc-tts-textarea) {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}

/* ══════════════════════════════════════════════
   SITE-WIDE DARK MODE
   Activated by body.acc-dark-mode (toggled via JS).
   Previously injected at runtime via injectDarkModeStyle()
   in JS — now lives here where it belongs.
   ══════════════════════════════════════════════ */
body.acc-dark-mode {
  background-color: #111827 !important;
  color: #f9fafb !important;
}

body.acc-dark-mode header,
body.acc-dark-mode nav,
body.acc-dark-mode .navbar {
  background-color: #1a1f2e !important;
}
body.acc-dark-mode footer {
  background-color: #001f33 !important;
  color: #f9fafb !important;
}
/*body.acc-dark-mode section,*/
body.acc-dark-mode .section, 
body.acc-dark-mode .acc-close-btn, 
body.acc-dark-mode .acc-reset-btn  {
  background-color: #111827 !important;
}
body.acc-dark-mode .card,
body.acc-dark-mode .acc-header,
body.acc-dark-mode .acc-footer,
body.acc-dark-mode .acc-section,
body.acc-dark-mode .acc-body,
body.acc-dark-mode .acc-icon-btn,
body.acc-dark-mode .acc-fs-btn,
body.acc-dark-mode [class*="card"],
body.acc-dark-mode .hiring-step {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #f9fafb !important;
}
body.acc-dark-mode h1,
body.acc-dark-mode h2,
body.acc-dark-mode h3,
body.acc-dark-mode h4,
body.acc-dark-mode h5,
body.acc-dark-mode h6 {
  color: #f9fafb !important;
}
body.acc-dark-mode p,
/*body.acc-dark-mode li,*/
body.acc-dark-mode span {
  color: #d1d5db !important;
}
/*body.acc-dark-mode a { color: #60a5fa !important; }*/

body.acc-dark-mode img { opacity: .88 !important; }
/*body.acc-dark-mode input,*/
body.acc-dark-mode textarea,
body.acc-dark-mode select {
  background: #1f2937 !important;
  color: #f9fafb !important;
  border-color: #374151 !important;
}
/* Keep the panel itself unaffected by site dark-mode filter rules */
body.acc-dark-mode #acc-panel-root,
body.acc-dark-mode #acc-panel-root * {
  filter: none !important;
}
body.acc-dark-mode #logo img,
body.acc-dark-mode .navbar-brand img {
  filter: brightness(0) invert(1) !important;
}

body.acc-dark-mode .acc-slider { color:#fff !important }

/* ══════════════════════════════════════════════
   SITE-WIDE FEATURE STYLES (always active)
   ══════════════════════════════════════════════ */
body.acc-links-highlighted a,
body.acc-links-highlighted a:visited {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  outline: 2px solid var(--acc-accent-glow, rgba(232,25,44,0.3)) !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}
body.acc-dyslexia-font,
body.acc-dyslexia-font * {
  font-family: 'OpenDyslexic','Comic Sans MS','Trebuchet MS',cursive !important;
  letter-spacing: 0.08em !important;
  word-spacing: 0.2em !important;
}
body.acc-adhd-mode p,
body.acc-adhd-mode li,
body.acc-adhd-mode span { max-width: 70ch !important; }
body.acc-adhd-mode * { letter-spacing: 0.04em !important; word-spacing: 0.15em !important; }
body.acc-adhd-mode img:not(.acc-panel img),
body.acc-adhd-mode video { opacity: 0.55 !important; }

body.acc-inverted { filter: invert(1) hue-rotate(180deg); }
body.acc-inverted .acc-panel,
body.acc-inverted .acc-overlay,
body.acc-inverted img,
body.acc-inverted video,
body.acc-inverted iframe { filter: invert(1) hue-rotate(180deg); }

body.acc-big-cursor,
body.acc-big-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M5 5 L5 30 L12 23 L18 36 L22 34 L16 21 L26 21 Z' fill='black' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 5 5, auto !important;
}


/* ══════════════════════════════════════════════
   DARK THEME — token overrides live above on
   .acc-panel-root.acc-dark .acc-panel { ... }
   All child elements inherit vars from .acc-panel
   so no per-element !important rules are needed.

   Structural element overrides below ensure correct
   backgrounds on header/body/footer in dark mode
   without relying on inline styles from JS.
   ══════════════════════════════════════════════ */
.acc-panel-root.acc-dark .acc-panel {
  background-color: #1a1f2e;
  color: #f9fafb;
}
.acc-panel-root.acc-dark .acc-header {
  background-color: #1a1f2e;
  border-bottom-color: #252d3d;
}
.acc-panel-root.acc-dark .acc-body {
  background-color: #111827;
}
.acc-panel-root.acc-dark .acc-footer {
  background-color: #1a1f2e;
  border-top-color: #252d3d;
}

/* Light mode explicit overrides — ensures inline styles from
   any previous dark toggle are cleanly overridden by CSS */
.acc-panel-root:not(.acc-dark) .acc-panel {
  background-color: #ffffff;
  color: #111827;
}
.acc-panel-root:not(.acc-dark) .acc-header {
  background-color: #ffffff;
  border-bottom-color: #eceef5;
}
.acc-panel-root:not(.acc-dark) .acc-body {
  background-color: #f4f5f7;
}
.acc-panel-root:not(.acc-dark) .acc-footer {
  background-color: #ffffff;
  border-top-color: #eceef5;
}
@media (max-width: 480px) {
  .acc-panel { width: 100vw; }
}