body {
  font-family: sans-serif;
  margin: 0;
  line-height: 1.5;
}

body:not(.admin):not(.user-area):not([class*="bg-"]) {
  background-color: #000;
}

body:not(.admin):not(.user-area):not([class*="text-"]) {
  color: #fff;
}

body.bg-slate-50,
body.bg-slate-100,
body.bg-slate-200 {
  color: #0f172a;
}

body.admin,
body.login {
  background-color: #fff;
}

body.admin main,
body.login main {
  color: #000;
}

body.admin header,
body.admin header *,
body.login header,
body.login header *,
body.admin aside,
body.admin aside * {

  color: #fff !important;
}

body.user-area {
  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 45%),
              radial-gradient(circle at bottom right, rgba(244, 114, 182, 0.1), transparent 45%),
              #020617;
  color: #e2e8f0;
  min-height: 100vh;
}

body.user-area main {
  max-width: none;
  margin: 0;
  padding: 0;
}

body.user-area a,
body.user-area a:visited {
  color: inherit;
}

body.user-area .bg-white {
  background-color: rgba(15, 23, 42, 0.65) !important;
  color: #e2e8f0;
}

body.user-area .bg-gray-50 {
  background-color: rgba(15, 23, 42, 0.45) !important;
  color: #e2e8f0;
}

body.user-area .bg-gray-100,
body.user-area .bg-gray-200 {
  background-color: rgba(15, 23, 42, 0.35) !important;
  color: #e2e8f0;
}

body.user-area .bg-slate-50,
body.user-area .bg-slate-100,
body.user-area .bg-slate-200 {
  background-color: rgba(15, 23, 42, 0.4) !important;
  color: #e2e8f0;
}

body.user-area .bg-blue-50 {
  background-color: rgba(56, 189, 248, 0.18) !important;
  color: #e0f2fe;
}

body.user-area .bg-rose-50,
body.user-area .bg-rose-50\/70 {
  background-color: rgba(244, 114, 182, 0.18) !important;
  color: #fde4f2;
}

body.user-area .bg-blue-600,
body.user-area .bg-emerald-600,
body.user-area .bg-rose-600 {
  color: #fff !important;
}

body.user-area .text-black,
body.user-area .text-gray-900 {
  color: #f8fafc !important;
}

body.user-area .text-gray-800,
body.user-area .text-gray-700 {
  color: #dce2f5 !important;
}

body.user-area .text-gray-600,
body.user-area .text-gray-500 {
  color: #b6c2e1 !important;
}

body.user-area .text-gray-400 {
  color: #94a3b8 !important;
}

body.user-area .border-gray-100,
body.user-area .border-gray-200 {
  border-color: rgba(148, 163, 184, 0.35) !important;
}

body.user-area .border-gray-300 {
  border-color: rgba(148, 163, 184, 0.5) !important;
}

body.user-area .border-blue-300 {
  border-color: rgba(125, 211, 252, 0.6) !important;
}

body.user-area .border-emerald-300 {
  border-color: rgba(74, 222, 128, 0.6) !important;
}

@media (min-width: 768px) {
  .md\:w-64 {
    width: 16rem;
  }
  .md\:w-72 {
    width: 18rem;
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:gap-8 {
    gap: 2rem;
  }
  .md\:mt-0 {
    margin-top: 0;
  }
}

body.user-area input,
body.user-area textarea,
body.user-area select {
  background-color: rgba(15, 23, 42, 0.75);
  border-color: rgba(148, 163, 184, 0.45);
  color: #f8fafc;
}

body.user-area input[type="file"] {
  padding: 0.4rem 0.5rem;
  background-color: rgba(15, 23, 42, 0.55);
}

body.user-area input::placeholder,
body.user-area textarea::placeholder {
  color: rgba(203, 213, 225, 0.7);
}

body.user-area select option {
  color: #0f172a;
}

input,
textarea,
select {
  color: #000;
}

input::placeholder,
textarea::placeholder {
  color: #666;
}

body:not(.user-area) main {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem;
  background: transparent;
}

body.login main {
  display: flex;
  min-height: calc(100vh - 4rem);
  align-items: center;
  justify-content: center;
}

#loginApp {
  width: 100%;
  max-width: 24rem;
}

a,
a:visited {
  color: inherit;
}

body:not(.admin):not(.login) a,
body:not(.admin):not(.login) a:visited {
  color: inherit;
}

body.admin main a,
body.admin main a:visited {
  color: #000;
}

a:hover {
  text-decoration: underline;
}

.text-white {
  color: #fff !important;
}

.text-black {
  color: #000 !important;
}

.bg-white {
  background-color: #fff !important;
  color: #000;
}

.bg-black {
  background-color: #000 !important;
  color: #fff;
}

.hover\:text-white:hover {
  color: #fff !important;
}

.hover\:text-black:hover {
  color: #000 !important;
}

.hover\:bg-black:hover {
  background-color: #000 !important;
  color: #fff;
}

.hover\:bg-white:hover {
  background-color: #fff !important;
  color: #000;
}

.btn {
  --btn-text-color: #fff;
  background-color: #000;
  color: var(--btn-text-color);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn.text-white {
  --btn-text-color: #fff;
  color: var(--btn-text-color) !important;
}

.btn.text-black {
  --btn-text-color: #000;
  color: var(--btn-text-color) !important;
}

.btn:hover {
  background-color: #333;
}


.btn.bg-white {
  background-color: #fff;
  --btn-text-color: #000;
  color: var(--btn-text-color);
}

.btn.bg-white:hover {
  background-color: #f0f0f0;
}

#hero .btn:not(.bg-white) {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
}

#hero .btn:not(.bg-white):hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.border {
  border: 1px solid #ccc;
}

.rounded {
  border-radius: 0.25rem;
}

.hidden {
  display: none;
}

footer {
  background: #222;
  color: #fff;
  text-align: center;
  padding: 1rem;
}

body.admin aside {
  background-color: #1f2937; /* Tailwind gray-800 */
  color: #fff;
}

header {
  background-color: #000;
  color: #fff;
}

header a {
  color: #fff !important;
}

#moodboard-board-wrapper .canvas-container {
  position: relative;
}

#moodboard-board-wrapper .canvas-container .upper-canvas,
#moodboard-board-wrapper .canvas-container .lower-canvas {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#moodboard-board-wrapper .canvas-container .upper-canvas {
  background-color: transparent !important;
}

#moodboard-board-wrapper .canvas-container .lower-canvas {
  background-color: #fff !important;
}