:root {
  /* Modern Color Palette */
  --primary-blue: #1e3a8a;
  --primary-blue-light: #3b82f6;
  --primary-blue-dark: #1e40af;
  --secondary-blue: #0ea5e9;
  --accent-gold: #f59e0b;
  --accent-gold-light: #fbbf24;

  /* Gradients */
  --gradient-primary: linear-gradient(
    135deg,
    #1e3a8a 0%,
    #3b82f6 50%,
    #0ea5e9 100%
  );
  --gradient-header: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  --gradient-nav: linear-gradient(
    135deg,
    #1e40af 0%,
    #3b82f6 50%,
    #0ea5e9 100%
  );
  --gradient-mobile: linear-gradient(
    135deg,
    #1e40af 0%,
    #2563eb 50%,
    #3b82f6 100%
  );

  /* Text Colors */
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-light: #94a3b8;
  --text-white: #ffffff;

  /* Background Colors */
  --bg-white: #ffffff;
  --bg-light: #f8fafc;
  --bg-overlay: rgba(30, 58, 138, 0.95);

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;

  /* Typography */
  --font-family:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Accessibility Button */

.clz-accessibility-toggle {
  position: fixed;
  left: 20px;
  bottom: 5%;
  transform: translateY(-50%);
  width: 55px;
  height: 55px;
  background: var(--gradient-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  z-index: 9999;
  box-shadow: var(--shadow-lg);
}

/* PANEL */

.clz-accessibility-panel {
  position: fixed;
  left: -360px;
  bottom: -35%;
  transform: translateY(-50%);
  width: 340px;
  max-height: 85vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-xl);
  z-index: 9999;
  transition: 0.35s ease;
  display: flex;
  flex-direction: column;
}

.clz-accessibility-panel.active {
  left: 20px;
}

/* HEADER */

.clz-access-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid #eee;
  font-weight: 600;
}

.clz-access-header span {
  color: var(--primary-blue);
}

.clz-access-header i {
  cursor: pointer;
  color: var(--primary-blue);
}

/* BODY */

.clz-access-body {
  overflow-y: auto;
  padding: 15px;
}

.clz-access-section {
  margin-bottom: 20px;
}

.clz-access-section h5 {
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--text-secondary);
}

/* GRID */

.clz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* BUTTON */

.clz-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  font-size: 13px;
  border: none;
  border-radius: 8px;
  background: #f1f5f9;
  cursor: pointer;
  transition: 0.2s;
}

.clz-btn:hover {
  background: var(--primary-blue-light);
  color: white;
}

.clz-btn.active {
  background: var(--primary-blue);
  color: #fff;
}

.clz-reset {
  background: #fee2e2;
}

.clz-link-highlight {
  outline: 3px solid #ffcc00 !important;
  background: #fff3cd !important;
  color: #000 !important;
  border-radius: 4px;
}

/* FOOTER */

.clz-access-footer {
  text-align: center;
  border-top: 1px solid #eee;
  padding: 8px 0;
}

.clz-access-footer h5 {
  font-size: 18px;
  margin-bottom: 0px;
}

/* =========================
ACCESSIBILITY FEATURES
========================= */

.clz-highlight a {
  background: yellow;
}

.clz-unsaturate {
  filter: grayscale(100%);
}

.clz-hideimg img {
  display: none !important;
}

/* INVERT FIX */

.clz-invert {
  filter: invert(1) hue-rotate(180deg);
}

.clz-invert .clz-accessibility-panel,
.clz-invert .clz-accessibility-toggle {
  filter: invert(1) hue-rotate(180deg);
}

/* =========================
TEXT TO SPEECH MODE
========================= */

.clz-tts-mode {
  cursor: crosshair;
}

.clz-tts-hover {
  outline: 2px dotted #f58634;
  outline-offset: 4px;
}

/* =========================
MOBILE FIX
========================= */

@media (max-width: 768px) {
  .clz-accessibility-panel {
    width: 95%;
    left: -100%;
    top: 0;
    height: 100vh;
    transform: none;
    border-radius: 0;
  }

  .clz-accessibility-panel.active {
    right: 0;
  }
}

/* BIG ACCESSIBILITY CURSOR */

.clz-bigcursor,
.clz-bigcursor * {
  cursor:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'>\
<path fill='%23ffcc00' stroke='%23000000' stroke-width='1.5' d='M3 2 L3 20 L8 15 L12 22 L15 20 L11 13 L19 13 Z'/>\
</svg>")
      4 4,
    auto !important;
}