:root {
  --scrollbar-track: #1a1d24;
  --scrollbar-thumb: #3b3f4a;
  --scrollbar-thumb-hover: #4a4f5c;
  --textarea-scrollbar-thumb: #3b3f4a;
  --textarea-scrollbar-border: #22262e;
}

[data-theme="light"] {
  --scrollbar-track: #f8fafc;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;
  --textarea-scrollbar-thumb: #cbd5e1;
  --textarea-scrollbar-border: #f1f5f9;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

textarea::-webkit-scrollbar {
  width: 8px;
}

textarea::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

textarea::-webkit-scrollbar-thumb {
  background: var(--textarea-scrollbar-thumb);
  border-radius: 4px;
  border: 2px solid var(--textarea-scrollbar-border);
}

textarea {
  scrollbar-gutter: stable;
}

select option {
  background-color: #1e293b;
  color: white;
  padding: 10px;
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
  }
}

* {
  scroll-behavior: smooth;
}

::selection {
  background-color: rgba(99, 102, 241, 0.3);
  color: white;
}

.dropdown-item:hover {
  background-color: #2a2e38;
}

[data-theme="light"] {
  color: #1e293b;
}

[data-theme="light"] body {
  background-color: #f8fafc;
  color: #1e293b;
}

[data-theme="light"] header {
  background-color: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] header span:first-child {
  color: #1e293b;
}

[data-theme="light"] header span:last-child {
  color: #64748b;
}

[data-theme="light"] h1 {
  color: #1e293b;
}

[data-theme="light"] p {
  color: #64748b;
}

[data-theme="light"] #themeToggle {
  background-color: #f1f5f9;
  color: #64748b;
}

[data-theme="light"] #themeToggle:hover {
  color: #1e293b;
}

[data-theme="light"] textarea {
  background-color: #f1f5f9;
  color: #1e293b;
}

[data-theme="light"] textarea::placeholder {
  color: #94a3b8;
}

[data-theme="light"] #dropdownBtn {
  background-color: #f1f5f9;
  color: #1e293b;
}

[data-theme="light"] #dropdownBtn:hover {
  background-color: #e2e8f0;
}

[data-theme="light"] #dropdownMenu {
  background-color: #f1f5f9;
}

[data-theme="light"] .dropdown-item {
  color: #475569;
}

[data-theme="light"] .dropdown-item.selected {
  color: #6366f1;
}

[data-theme="light"] .dropdown-item:hover {
  background-color: #e2e8f0;
}

[data-theme="light"] .check-icon {
  color: #6366f1;
}

[data-theme="light"] #charCount {
  color: #94a3b8;
}

[data-theme="light"] section > div {
  background-color: #f1f5f9;
  border-color: #e2e8f0;
}

[data-theme="light"] section p {
  color: #64748b;
}

[data-theme="light"] footer {
  border-color: #e2e8f0;
}

[data-theme="light"] footer span {
  color: #94a3b8;
}

[data-theme="light"] footer a {
  color: #6366f1;
}

[data-theme="light"] footer a:hover {
  color: #6366f1;
}

[data-theme="light"] main .bg-\[\#22262e\],
[data-theme="light"] textarea {
  background-color: #f1f5f9;
}

[data-theme="light"] main pre {
  color: #1e293b;
}

[data-theme="light"] .text-slate-500 {
  color: #94a3b8;
}

[data-theme="light"] .bg-slate-800 {
  background-color: #e2e8f0;
  color: #1e293b;
}

[data-theme="light"] main .bg-\[\#22262e\],
[data-theme="light"] #uploadArea > div,
[data-theme="light"] .file-item,
[data-theme="light"] #fileList > div {
  background-color: #f1f5f9;
  border-color: #e2e8f0;
}

[data-theme="light"] #uploadArea {
  border-color: #cbd5e1;
}

[data-theme="light"] #uploadArea:hover > div,
[data-theme="light"] #uploadArea.group:hover > div {
  border-color: #6366f1;
  background-color: #f8fafc;
}

[data-theme="light"] .text-white {
  color: #1e293b;
}

[data-theme="light"] .text-slate-400 {
  color: #64748b;
}

[data-theme="light"] .text-slate-500 {
  color: #64748b;
}

[data-theme="light"] .bg-slate-700\/50,
[data-theme="light"] .bg-\[\#22262e\]\/50 {
  background-color: #f1f5f9;
}

[data-theme="light"] .border-slate-600 {
  border-color: #cbd5e1;
}

[data-theme="light"] .border-slate-700\/50 {
  border-color: #e2e8f0;
}

[data-theme="light"] .bg-slate-700\/50 {
  background-color: #e2e8f0;
}

[data-theme="light"] .bg-primary\/10 {
  background-color: rgba(99, 102, 241, 0.1);
}

[data-theme="light"] h2 {
  color: #1e293b;
}

[data-theme="light"] h3 {
  color: #1e293b;
}

[data-theme="light"] #langToggle {
  background-color: #f1f5f9;
  color: #64748b;
}

[data-theme="light"] #langToggle:hover {
  background-color: #e2e8f0;
  color: #1e293b;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  z-index: 9999;
}