@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --bg-main: #050505;
  --bg-side: #0f0f0f;
  --bg-panel: #111318;
  --bg-panel-2: #1a1d23;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);
  --text-main: #f3f4f6;
  --text-sub: #9ca3af;
  --blue: #3b82f6;
  --red: #ef4444;
  --green: #22c55e;
  --yellow: #f59e0b;
}

.theme-midnight {
  color-scheme: light;
  --bg-main: #ffffff;
  --bg-side: #ffffff;
  --bg-panel: #ffffff;
  --bg-panel-2: #ffffff;
  --line: rgba(15, 23, 42, 0.22);
  --line-soft: rgba(15, 23, 42, 0.14);
  --text-main: #020617;
  --text-sub: #1e293b;
  --blue: #2563eb;
  background: #ffffff;
  color: #020617;
}

.theme-graphite {
  --bg-main: #08090b;
  --bg-side: #101114;
  --bg-panel: #15171c;
  --bg-panel-2: #20232a;
  --blue: #7dd3fc;
  background: #08090b;
}

.theme-emerald {
  --bg-main: #03100d;
  --bg-side: #071713;
  --bg-panel: #0b1d18;
  --bg-panel-2: #122d25;
  --blue: #34d399;
  background: radial-gradient(circle at 72% 0%, rgba(16, 185, 129, 0.12), transparent 34%), #03100d;
}

.theme-cobalt {
  --bg-main: #021019;
  --bg-side: #061621;
  --bg-panel: #071d2b;
  --bg-panel-2: #0d3045;
  --blue: #22d3ee;
  background: radial-gradient(circle at 78% 0%, rgba(34, 211, 238, 0.13), transparent 34%), #021019;
}

.theme-amber {
  --bg-main: #120b03;
  --bg-side: #1a1005;
  --bg-panel: #211506;
  --bg-panel-2: #3a2408;
  --blue: #f59e0b;
  background: radial-gradient(circle at 78% 0%, rgba(245, 158, 11, 0.13), transparent 34%), #120b03;
}

.theme-rose {
  --bg-main: #13060b;
  --bg-side: #1b0910;
  --bg-panel: #240b14;
  --bg-panel-2: #3d1020;
  --blue: #fb7185;
  background: radial-gradient(circle at 78% 0%, rgba(244, 63, 94, 0.13), transparent 34%), #13060b;
}

html[data-ui-theme="midnight"],
body[data-ui-theme="midnight"],
body[data-ui-theme="midnight"] #root {
  background: #ffffff !important;
  color: #020617;
}

html[data-ui-theme="graphite"],
body[data-ui-theme="graphite"],
body[data-ui-theme="graphite"] #root {
  background: #08090b !important;
}

html[data-ui-theme="emerald"],
body[data-ui-theme="emerald"],
body[data-ui-theme="emerald"] #root {
  background: #03100d !important;
}

html[data-ui-theme="cobalt"],
body[data-ui-theme="cobalt"],
body[data-ui-theme="cobalt"] #root {
  background: #021019 !important;
}

html[data-ui-theme="amber"],
body[data-ui-theme="amber"],
body[data-ui-theme="amber"] #root {
  background: #120b03 !important;
}

html[data-ui-theme="rose"],
body[data-ui-theme="rose"],
body[data-ui-theme="rose"] #root {
  background: #13060b !important;
}

.theme-midnight .bg-\[\#0a0a0a\],
.theme-midnight .bg-\[\#050505\],
.theme-midnight .bg-\[\#0f0f0f\],
.theme-midnight .bg-\[\#111318\],
.theme-midnight .bg-\[\#11161f\],
.theme-midnight .bg-\[\#1a1d23\],
.theme-midnight .bg-\[\#141d2d\],
.theme-midnight [class*="bg-black"] {
  background-color: #ffffff !important;
}

.theme-midnight [class*="bg-white/"] {
  background-color: #ffffff !important;
}

.theme-midnight [class*="border-white/"] {
  border-color: rgba(15, 23, 42, 0.24) !important;
}

.theme-midnight [class*="divide-white/"] > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(15, 23, 42, 0.18) !important;
}

.theme-midnight .text-white,
.theme-midnight .text-gray-200,
.theme-midnight .text-gray-300,
.theme-midnight .text-gray-700,
.theme-midnight .text-gray-800 {
  color: #020617 !important;
}

.theme-midnight .text-gray-400,
.theme-midnight .text-gray-500,
.theme-midnight .text-gray-600,
.theme-midnight .text-slate-400,
.theme-midnight .text-\[\#6b7690\],
.theme-midnight .text-\[\#7f8ca3\],
.theme-midnight .text-\[\#6f7b92\],
.theme-midnight .text-\[\#7e8aa2\],
.theme-midnight .text-\[\#7f8aa3\],
.theme-midnight .text-\[\#8ea2c9\],
.theme-midnight .text-\[\#97a2b8\],
.theme-midnight .text-\[\#9fb0ca\],
.theme-midnight .text-\[\#9fb3d9\] {
  color: #1e293b !important;
}

.theme-midnight .text-blue-300,
.theme-midnight .text-blue-400,
.theme-midnight .text-blue-500,
.theme-midnight .text-\[\#7fb0ff\],
.theme-midnight .text-\[\#9db9ff\] {
  color: #1e40af !important;
}

.theme-midnight .text-emerald-300,
.theme-midnight .text-emerald-400,
.theme-midnight .text-green-300,
.theme-midnight .text-green-400,
.theme-midnight .text-green-500,
.theme-midnight .text-teal-300 {
  color: #047857 !important;
}

.theme-midnight .text-amber-200,
.theme-midnight .text-amber-300,
.theme-midnight .text-amber-400,
.theme-midnight .text-yellow-300,
.theme-midnight .text-yellow-400,
.theme-midnight .text-yellow-500 {
  color: #b45309 !important;
}

.theme-midnight .text-red-200,
.theme-midnight .text-red-300,
.theme-midnight .text-red-400,
.theme-midnight .text-red-500,
.theme-midnight .text-rose-400 {
  color: #b91c1c !important;
}

.theme-midnight .text-violet-300 {
  color: #6d28d9 !important;
}

.theme-midnight .text-\[\#d3daea\],
.theme-midnight .text-\[\#d7def0\] {
  color: #020617 !important;
}

.theme-midnight input,
.theme-midnight select,
.theme-midnight textarea {
  background-color: #ffffff !important;
  color: #020617 !important;
  border-color: rgba(15, 23, 42, 0.22) !important;
}

.theme-midnight input::placeholder,
.theme-midnight textarea::placeholder {
  color: #475569 !important;
  opacity: 1;
}

.theme-midnight option {
  color: #020617;
}

.theme-midnight .opacity-60,
.theme-midnight .opacity-70 {
  opacity: 1 !important;
}

body[data-ui-theme="midnight"] .bg-\[\#111318\],
body[data-ui-theme="midnight"] .bg-\[\#11161f\],
body[data-ui-theme="midnight"] .bg-\[\#1a1d23\],
body[data-ui-theme="midnight"] .bg-\[\#141d2d\] {
  background-color: #ffffff !important;
}

body[data-ui-theme="midnight"] .text-white,
body[data-ui-theme="midnight"] .text-white\/95,
body[data-ui-theme="midnight"] .text-gray-200,
body[data-ui-theme="midnight"] .text-gray-300,
body[data-ui-theme="midnight"] .text-gray-700,
body[data-ui-theme="midnight"] .text-gray-800,
body[data-ui-theme="midnight"] .text-\[\#d3daea\],
body[data-ui-theme="midnight"] .text-\[\#d7def0\] {
  color: #020617 !important;
}

body[data-ui-theme="midnight"] .text-gray-400,
body[data-ui-theme="midnight"] .text-gray-500,
body[data-ui-theme="midnight"] .text-gray-600,
body[data-ui-theme="midnight"] .text-slate-400,
body[data-ui-theme="midnight"] .text-\[\#6b7690\],
body[data-ui-theme="midnight"] .text-\[\#6f7b92\],
body[data-ui-theme="midnight"] .text-\[\#7e8aa2\],
body[data-ui-theme="midnight"] .text-\[\#7f8aa3\],
body[data-ui-theme="midnight"] .text-\[\#7f8ca3\],
body[data-ui-theme="midnight"] .text-\[\#8ea2c9\],
body[data-ui-theme="midnight"] .text-\[\#97a2b8\],
body[data-ui-theme="midnight"] .text-\[\#9fb0ca\],
body[data-ui-theme="midnight"] .text-\[\#9fb3d9\] {
  color: #1e293b !important;
}

body[data-ui-theme="midnight"] .text-blue-300,
body[data-ui-theme="midnight"] .text-blue-400,
body[data-ui-theme="midnight"] .text-blue-400\/80,
body[data-ui-theme="midnight"] .text-blue-500,
body[data-ui-theme="midnight"] .text-blue-900,
body[data-ui-theme="midnight"] .text-\[\#7fb0ff\],
body[data-ui-theme="midnight"] .text-\[\#9db9ff\] {
  color: #1e40af !important;
}

body[data-ui-theme="midnight"] .text-emerald-300,
body[data-ui-theme="midnight"] .text-emerald-400,
body[data-ui-theme="midnight"] .text-green-300,
body[data-ui-theme="midnight"] .text-green-400,
body[data-ui-theme="midnight"] .text-green-500,
body[data-ui-theme="midnight"] .text-teal-300 {
  color: #047857 !important;
}

body[data-ui-theme="midnight"] .text-amber-200,
body[data-ui-theme="midnight"] .text-amber-300,
body[data-ui-theme="midnight"] .text-amber-400,
body[data-ui-theme="midnight"] .text-yellow-300,
body[data-ui-theme="midnight"] .text-yellow-400,
body[data-ui-theme="midnight"] .text-yellow-500 {
  color: #b45309 !important;
}

body[data-ui-theme="midnight"] .text-red-200,
body[data-ui-theme="midnight"] .text-red-300,
body[data-ui-theme="midnight"] .text-red-400,
body[data-ui-theme="midnight"] .text-red-500,
body[data-ui-theme="midnight"] .text-rose-400 {
  color: #b91c1c !important;
}

body[data-ui-theme="midnight"] .text-violet-300 {
  color: #6d28d9 !important;
}

body[data-ui-theme="midnight"] [class*="border-white/"] {
  border-color: rgba(15, 23, 42, 0.24) !important;
}

body[data-ui-theme="midnight"] .opacity-40,
body[data-ui-theme="midnight"] .opacity-50,
body[data-ui-theme="midnight"] .opacity-60,
body[data-ui-theme="midnight"] .opacity-70,
body[data-ui-theme="midnight"] .opacity-80 {
  opacity: 1 !important;
}

body[data-ui-theme="midnight"] button:disabled,
body[data-ui-theme="midnight"] [disabled] {
  opacity: 1 !important;
}

body[data-ui-theme="midnight"] .bg-blue-500,
body[data-ui-theme="midnight"] .bg-blue-600,
body[data-ui-theme="midnight"] .bg-red-500,
body[data-ui-theme="midnight"] .bg-red-600,
body[data-ui-theme="midnight"] .bg-emerald-600,
body[data-ui-theme="midnight"] .bg-\[\#3390ff\],
body[data-ui-theme="midnight"] .bg-\[\#ff5a66\] {
  color: #ffffff !important;
}

.theme-graphite [class*="bg-black"] {
  background-color: rgba(21, 23, 28, 0.72) !important;
}

.theme-emerald [class*="bg-black"] {
  background-color: rgba(11, 29, 24, 0.72) !important;
}

.theme-cobalt [class*="bg-black"] {
  background-color: rgba(7, 29, 43, 0.72) !important;
}

.theme-amber [class*="bg-black"] {
  background-color: rgba(33, 21, 6, 0.72) !important;
}

.theme-rose [class*="bg-black"] {
  background-color: rgba(36, 11, 20, 0.72) !important;
}

.theme-graphite .bg-\[\#0a0a0a\],
.theme-graphite .bg-\[\#050505\] {
  background-color: #08090b !important;
}

.theme-graphite .bg-\[\#0f0f0f\] {
  background-color: #101114 !important;
}

.theme-graphite .bg-\[\#111318\],
.theme-graphite .bg-\[\#11161f\] {
  background-color: #15171c !important;
}

.theme-graphite .bg-\[\#141d2d\] {
  background-color: #20242d !important;
}

.theme-emerald .bg-\[\#0a0a0a\],
.theme-emerald .bg-\[\#050505\],
.theme-cobalt .bg-\[\#0a0a0a\],
.theme-cobalt .bg-\[\#050505\],
.theme-amber .bg-\[\#0a0a0a\],
.theme-amber .bg-\[\#050505\],
.theme-rose .bg-\[\#0a0a0a\],
.theme-rose .bg-\[\#050505\] {
  background-color: #03100d !important;
}

.theme-cobalt .bg-\[\#0a0a0a\],
.theme-cobalt .bg-\[\#050505\] {
  background-color: #021019 !important;
}

.theme-amber .bg-\[\#0a0a0a\],
.theme-amber .bg-\[\#050505\] {
  background-color: #120b03 !important;
}

.theme-rose .bg-\[\#0a0a0a\],
.theme-rose .bg-\[\#050505\] {
  background-color: #13060b !important;
}

.theme-emerald .bg-\[\#0f0f0f\],
.theme-cobalt .bg-\[\#0f0f0f\],
.theme-amber .bg-\[\#0f0f0f\],
.theme-rose .bg-\[\#0f0f0f\] {
  background-color: #071713 !important;
}

.theme-cobalt .bg-\[\#0f0f0f\] {
  background-color: #061621 !important;
}

.theme-amber .bg-\[\#0f0f0f\] {
  background-color: #1a1005 !important;
}

.theme-rose .bg-\[\#0f0f0f\] {
  background-color: #1b0910 !important;
}

.theme-emerald .bg-\[\#111318\],
.theme-emerald .bg-\[\#11161f\],
.theme-cobalt .bg-\[\#111318\],
.theme-cobalt .bg-\[\#11161f\],
.theme-amber .bg-\[\#111318\],
.theme-amber .bg-\[\#11161f\],
.theme-rose .bg-\[\#111318\],
.theme-rose .bg-\[\#11161f\] {
  background-color: #0b1d18 !important;
}

.theme-cobalt .bg-\[\#111318\],
.theme-cobalt .bg-\[\#11161f\] {
  background-color: #071d2b !important;
}

.theme-amber .bg-\[\#111318\],
.theme-amber .bg-\[\#11161f\] {
  background-color: #211506 !important;
}

.theme-rose .bg-\[\#111318\],
.theme-rose .bg-\[\#11161f\] {
  background-color: #240b14 !important;
}

.theme-emerald .bg-\[\#141d2d\],
.theme-cobalt .bg-\[\#141d2d\],
.theme-amber .bg-\[\#141d2d\],
.theme-rose .bg-\[\#141d2d\] {
  background-color: #102a23 !important;
}

.theme-cobalt .bg-\[\#141d2d\] {
  background-color: #0d3045 !important;
}

.theme-amber .bg-\[\#141d2d\] {
  background-color: #3a2408 !important;
}

.theme-rose .bg-\[\#141d2d\] {
  background-color: #3d1020 !important;
}

.theme-emerald .bg-blue-600 {
  background-color: #059669 !important;
}

.theme-cobalt .bg-blue-600 {
  background-color: #0891b2 !important;
}

.theme-amber .bg-blue-600 {
  background-color: #d97706 !important;
}

.theme-rose .bg-blue-600 {
  background-color: #e11d48 !important;
}

.theme-emerald .text-blue-500,
.theme-emerald .text-blue-400,
.theme-emerald .text-blue-300 {
  color: #34d399 !important;
}

.theme-cobalt .text-blue-500,
.theme-cobalt .text-blue-400,
.theme-cobalt .text-blue-300 {
  color: #22d3ee !important;
}

.theme-amber .text-blue-500,
.theme-amber .text-blue-400,
.theme-amber .text-blue-300 {
  color: #f59e0b !important;
}

.theme-rose .text-blue-500,
.theme-rose .text-blue-400,
.theme-rose .text-blue-300 {
  color: #fb7185 !important;
}

.theme-emerald .border-blue-500,
.theme-emerald .border-blue-500\/30,
.theme-emerald .border-blue-500\/40 {
  border-color: rgba(52, 211, 153, 0.45) !important;
}

.theme-cobalt .border-blue-500,
.theme-cobalt .border-blue-500\/30,
.theme-cobalt .border-blue-500\/40 {
  border-color: rgba(34, 211, 238, 0.45) !important;
}

.theme-amber .border-blue-500,
.theme-amber .border-blue-500\/30,
.theme-amber .border-blue-500\/40 {
  border-color: rgba(245, 158, 11, 0.45) !important;
}

.theme-rose .border-blue-500,
.theme-rose .border-blue-500\/30,
.theme-rose .border-blue-500\/40 {
  border-color: rgba(251, 113, 133, 0.45) !important;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  min-height: 100%;
  background: var(--bg-main);
}

body, #root {
  height: 100%;
  min-height: 100vh;
}

#root {
  background: var(--bg-main);
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
}

button, input, select {
  font: inherit;
}

input,
textarea,
select {
  color: var(--text-main);
}

input::placeholder,
textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-main);
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.3) inset;
  -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.3) inset;
  transition: background-color 9999s ease-out 0s;
  caret-color: var(--text-main);
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.page-enter {
  animation: fadeIn 0.25s ease-out forwards;
}

.glass-panel {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}

.phone-frame {
  height: 67vh;
  aspect-ratio: 350 / 775;
  background: #000;
  border-radius: 24px;
  border: 6px solid #1a1a1a;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.7);
}

.btn-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid transparent;
  transition: 0.18s ease;
}

.btn-action:hover {
  transform: translateY(-1px);
}

.btn-action:active {
  transform: scale(0.98);
}

.btn-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
  box-shadow: none;
  filter: saturate(0.75);
}

.btn-action:disabled:hover,
.btn-action:disabled:active {
  transform: none;
}

.btn-blue {
  background: rgba(37, 99, 235, 0.2);
  border-color: rgba(37, 99, 235, 0.4);
  color: #60a5fa;
}

.btn-red {
  background: rgba(220, 38, 38, 0.2);
  border-color: rgba(220, 38, 38, 0.4);
  color: #f87171;
}

.btn-green {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.4);
  color: #4ade80;
}

.btn-gray {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #a3a3a3;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 999px;
  width: 64px;
  min-width: 64px;
  height: 32px;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  word-break: keep-all;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed;
  flex-direction: row;
  flex-shrink: 0;
  border: 1px solid transparent;
  letter-spacing: 0;
  overflow: hidden;
}

.status-online {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.28);
}

.status-offline {
  color: #9ca3af;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.theme-midnight .btn-action,
body[data-ui-theme="midnight"] .btn-action {
  border-color: rgba(15, 23, 42, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.theme-midnight .btn-blue,
body[data-ui-theme="midnight"] .btn-blue {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.48);
  color: #1d4ed8;
}

.theme-midnight .btn-red,
body[data-ui-theme="midnight"] .btn-red {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.48);
  color: #b91c1c;
}

.theme-midnight .btn-green,
body[data-ui-theme="midnight"] .btn-green {
  background: rgba(5, 150, 105, 0.12);
  border-color: rgba(5, 150, 105, 0.48);
  color: #047857;
}

.theme-midnight .btn-gray,
body[data-ui-theme="midnight"] .btn-gray {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.36);
  color: #1e293b;
}

.theme-midnight .status-offline,
body[data-ui-theme="midnight"] .status-offline {
  color: #334155;
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.42);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.theme-midnight .status-online,
body[data-ui-theme="midnight"] .status-online {
  color: #047857;
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(5, 150, 105, 0.38);
}

body[data-ui-theme="midnight"] .font-black,
body[data-ui-theme="midnight"] .font-extrabold,
body[data-ui-theme="midnight"] .font-bold {
  font-weight: 500 !important;
}

.theme-midnight .bg-\[\#11151d\],
.theme-midnight .bg-\[\#0d1117\],
body[data-ui-theme="midnight"] .bg-\[\#11151d\],
body[data-ui-theme="midnight"] .bg-\[\#0d1117\] {
  background-color: #ffffff !important;
}

.theme-midnight .border-\[\#293243\],
.theme-midnight .border-\[\#263244\],
body[data-ui-theme="midnight"] .border-\[\#293243\],
body[data-ui-theme="midnight"] .border-\[\#263244\] {
  border-color: rgba(15, 23, 42, 0.24) !important;
}

.theme-graphite .bg-\[\#11151d\],
.theme-graphite .bg-\[\#0d1117\],
body[data-ui-theme="graphite"] .bg-\[\#11151d\],
body[data-ui-theme="graphite"] .bg-\[\#0d1117\] {
  background-color: #15171c !important;
}

.theme-emerald .bg-\[\#11151d\],
.theme-emerald .bg-\[\#0d1117\],
body[data-ui-theme="emerald"] .bg-\[\#11151d\],
body[data-ui-theme="emerald"] .bg-\[\#0d1117\] {
  background-color: #0b1d18 !important;
}

.theme-cobalt .bg-\[\#11151d\],
.theme-cobalt .bg-\[\#0d1117\],
body[data-ui-theme="cobalt"] .bg-\[\#11151d\],
body[data-ui-theme="cobalt"] .bg-\[\#0d1117\] {
  background-color: #071d2b !important;
}

.theme-amber .bg-\[\#11151d\],
.theme-amber .bg-\[\#0d1117\],
body[data-ui-theme="amber"] .bg-\[\#11151d\],
body[data-ui-theme="amber"] .bg-\[\#0d1117\] {
  background-color: #211506 !important;
}

.theme-rose .bg-\[\#11151d\],
.theme-rose .bg-\[\#0d1117\],
body[data-ui-theme="rose"] .bg-\[\#11151d\],
body[data-ui-theme="rose"] .bg-\[\#0d1117\] {
  background-color: #240b14 !important;
}

body[data-ui-theme="midnight"] option {
  background-color: #ffffff;
  color: #020617;
}

body[data-ui-theme="graphite"] option {
  background-color: #15171c;
  color: #f3f4f6;
}

body[data-ui-theme="emerald"] option {
  background-color: #0b1d18;
  color: #f3f4f6;
}

body[data-ui-theme="cobalt"] option {
  background-color: #071d2b;
  color: #f3f4f6;
}

body[data-ui-theme="amber"] option {
  background-color: #211506;
  color: #f3f4f6;
}

body[data-ui-theme="rose"] option {
  background-color: #240b14;
  color: #f3f4f6;
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  animation: shimmer 1.6s infinite;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  100% { transform: translateX(100%); }
}