.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
body { font-family: 'Source Sans 3', sans-serif; }

/* ── Theme variables ── */
:root {
  --rp-bg: #f8f6fe;
  --rp-dot: rgba(160,130,210,0.16);
  --input-bg: #ffffff;
  --input-border: rgba(197,198,207,0.55);
  --input-text: #512B8B;
  --input-ph: rgba(117,119,126,0.55);
  --form-card-bg: #ffffff;
  --form-card-border: rgba(196,181,253,0.3);
  --form-card-shadow: rgba(81,43,139,0.12);
  --form-footer-bg: #faf8fe;
  --form-footer-border: rgba(196,181,253,0.25);
  --heading-color: #260d5e;
  --subtext-color: #75777e;
  --divider-color: rgba(197,198,207,0.35);
  --toggle-color: #512B8B;
  --toggle-hover-bg: rgba(81,43,139,0.08);
}
html.dark {
  --rp-bg: #1c1042;
  --rp-dot: rgba(161,130,255,0.09);
  --input-bg: #251456;
  --input-border: rgba(161,130,255,0.3);
  --input-text: #f0eaff;
  --input-ph: rgba(210,190,255,0.62);
  --form-card-bg: #180e3a;
  --form-card-border: rgba(161,130,255,0.22);
  --form-card-shadow: rgba(0,0,0,0.5);
  --form-footer-bg: #14092e;
  --form-footer-border: rgba(161,130,255,0.14);
  --heading-color: #ffffff;
  --subtext-color: rgba(210,190,255,0.82);
  --divider-color: rgba(161,130,255,0.18);
  --toggle-color: #c4a8ff;
  --toggle-hover-bg: rgba(161,130,255,0.15);
}

/* ── Left panel ── */
.left-panel {
  background: linear-gradient(150deg, #0d0625 0%, #160840 18%, #250d60 38%, #371274 58%, #471a82 78%, #512B8B 100%);
}
.dot-matrix {
  background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}

/* ── Right panel ── */
.right-panel {
  background-color: var(--rp-bg);
  background-image: radial-gradient(circle, var(--rp-dot) 1px, transparent 1px);
  background-size: 26px 26px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: background-color 0.3s;
}
.right-panel::-webkit-scrollbar { display: none; }

/* ── Theme toggle button ── */
.theme-toggle-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 10;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--input-border);
  background: var(--input-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  color: var(--toggle-color);
}
.theme-toggle-btn:hover { background: var(--toggle-hover-bg); }

/* ── Form inputs ── */
.input-wrap {
  display: flex;
  align-items: center;
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.3s;
}
.input-wrap:focus-within {
  border-color: rgba(115,43,144,0.55);
  box-shadow: 0 0 0 3px rgba(115,43,144,0.13);
}
.input-wrap, .input-wrap *:focus, .input-wrap *:focus-visible { outline: none !important; }
.input-wrap input {
  flex: 1;
  min-width: 0;
  font-family: 'Source Sans 3', sans-serif;
  color: var(--input-text);
  background: transparent;
  border: none;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  caret-color: #732B90;
  transition: color 0.3s;
}
html.dark .input-wrap input { caret-color: #c4a8ff; }
.input-wrap input::placeholder { color: var(--input-ph); }
.input-wrap input:-webkit-autofill,
.input-wrap input:-webkit-autofill:hover,
.input-wrap input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--input-text) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ── Form fields (select / textarea) ── */
.form-field {
  width: 100%;
  border: 1.5px solid var(--input-border);
  border-radius: 12px;
  font-family: 'Source Sans 3', sans-serif;
  color: var(--input-text);
  background: var(--input-bg);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.3s, color 0.3s;
  -webkit-appearance: none;
  appearance: none;
}
.form-field:focus {
  border-color: rgba(115,43,144,0.55);
  box-shadow: 0 0 0 3px rgba(115,43,144,0.13);
  outline: none !important;
}
.form-field::placeholder { color: var(--input-ph); }
.form-field option { color: #1b1c19; background: #ffffff; }
html.dark .form-field option { color: #f0eaff; background: #251456; }

/* ── Themed element classes ── */
.theme-heading { color: var(--heading-color); transition: color 0.3s; }
.theme-card { background: var(--form-card-bg) !important; border-color: var(--form-card-border) !important; transition: background 0.3s, border-color 0.3s; }
.theme-card-footer { background: var(--form-footer-bg) !important; border-color: var(--form-footer-border) !important; transition: background 0.3s; }
.theme-subtext { color: var(--subtext-color) !important; transition: color 0.3s; }
.theme-divider { border-color: var(--divider-color) !important; }

/* ── Dark mode Tailwind overrides ── */
html.dark .right-panel .text-on-surface { color: var(--heading-color) !important; }
html.dark .right-panel [class*="text-on-surface"]:not([class*="variant"]) { color: var(--heading-color) !important; }
html.dark .right-panel .text-on-surface-variant { color: var(--subtext-color) !important; }
html.dark .right-panel .text-on-surface { color: var(--heading-color) !important; }
html.dark .right-panel [class*="text-on-surface"]:not([class*="variant"]) { color: var(--heading-color) !important; }
html.dark .right-panel .text-secondary { color: #b09ae0 !important; }
html.dark .right-panel .text-primary { color: #a78bfa !important; }
html.dark .right-panel .border-t { border-color: var(--form-footer-border) !important; }
html.dark .right-panel .text-outline { color: rgba(200,180,240,0.5) !important; }
html.dark .right-panel .text-error { color: #ff8fa3 !important; }
html.dark .right-panel .bg-error-container { background: rgba(180,30,50,0.25) !important; }

/* ── Icon circle in dark ── */
html.dark .theme-icon-circle,
html.dark #icon-circle {
  background: rgba(130,80,220,0.35) !important;
  box-shadow: 0 4px 20px rgba(130,80,220,0.4) !important;
}
html.dark .theme-icon-circle iconify-icon,
html.dark #icon-circle iconify-icon { color: #d4b8ff !important; }

/* ── Thinner benefit dividers in dark ── */
html.dark .theme-divider > * + * { border-left-width: 0.5px; border-color: rgba(161,130,255,0.08) !important; }

/* ── Spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 0.8s linear infinite; display: inline-block; }