:root {
  --uw-bg: #050708;
  --uw-bg-2: #0a1010;
  --uw-panel: rgba(12, 18, 19, 0.9);
  --uw-panel-2: rgba(18, 27, 28, 0.86);
  --uw-border: rgba(183, 157, 92, 0.22);
  --uw-border-soft: rgba(148, 163, 184, 0.16);
  --uw-emerald: #22c684;
  --uw-emerald-2: #0f8f63;
  --uw-gold: #c6a45d;
  --uw-gold-2: #8f733a;
  --uw-silver: #d7dee7;
  --uw-muted: #8b98a9;
  --uw-danger: #8f1d27;
  --uw-danger-2: #5d1118;
  --uw-amber: #d49a35;
  --uw-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  --uw-glow: 0 0 34px rgba(34, 198, 132, 0.12);
  color-scheme: dark;
}

html {
  background: var(--uw-bg);
}

body {
  background:
    radial-gradient(circle at 18% 10%, rgba(34, 198, 132, 0.11), transparent 28rem),
    radial-gradient(circle at 88% 3%, rgba(198, 164, 93, 0.13), transparent 25rem),
    linear-gradient(135deg, #030505 0%, #081111 48%, #10100d 100%) !important;
  color: var(--uw-silver) !important;
  font-family: "Trebuchet MS", "Segoe UI", Georgia, sans-serif;
  letter-spacing: 0.005em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(198, 164, 93, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198, 164, 93, 0.028) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), transparent 75%);
}

.card,
.glass-panel,
[class*="bg-slate-800"],
[class*="bg-slate-900"] {
  background:
    linear-gradient(180deg, rgba(18, 27, 28, 0.94), rgba(7, 11, 12, 0.9)) !important;
  border-color: var(--uw-border) !important;
  box-shadow: var(--uw-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

aside.card,
aside {
  background:
    linear-gradient(180deg, rgba(13, 20, 20, 0.98), rgba(5, 8, 9, 0.98)) !important;
  border-right: 1px solid rgba(198, 164, 93, 0.25) !important;
}

main {
  background:
    radial-gradient(circle at 50% -10%, rgba(198, 164, 93, 0.08), transparent 28rem),
    linear-gradient(180deg, rgba(10, 15, 16, 0.52), rgba(4, 6, 7, 0.1)) !important;
}

h1,
h2,
h3,
h4 {
  color: #f2efe7 !important;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.42);
}

p,
label,
.text-slate-300,
.text-slate-400,
.text-slate-500 {
  color: var(--uw-muted) !important;
}

aside h1 {
  color: var(--uw-gold) !important;
  text-shadow: 0 0 24px rgba(198, 164, 93, 0.18);
}

button,
a[download],
.badge,
select,
input,
textarea {
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

button,
a[download] {
  border: 1px solid rgba(198, 164, 93, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.24);
}

button:hover,
a[download]:hover {
  transform: translateY(-1px);
  border-color: rgba(34, 198, 132, 0.44) !important;
  box-shadow: var(--uw-glow), 0 16px 34px rgba(0, 0, 0, 0.32);
}

aside button {
  color: var(--uw-silver) !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)) !important;
  border: 1px solid rgba(148, 163, 184, 0.11) !important;
}

aside button:hover {
  background: linear-gradient(90deg, rgba(34, 198, 132, 0.18), rgba(198, 164, 93, 0.08)) !important;
  color: #fff !important;
}

.bg-blue-600,
.bg-cyan-600,
.bg-purple-600,
.bg-green-600,
.bg-emerald-600 {
  background: linear-gradient(135deg, var(--uw-emerald-2), var(--uw-emerald)) !important;
  color: #04100b !important;
}

.bg-orange-600,
.bg-yellow-600,
.bg-amber-600 {
  background: linear-gradient(135deg, var(--uw-gold-2), var(--uw-gold)) !important;
  color: #120d05 !important;
}

.bg-red-700,
.bg-red-900\/40,
.bg-rose-600 {
  background: linear-gradient(135deg, var(--uw-danger-2), var(--uw-danger)) !important;
  color: #ffe8e8 !important;
}

input,
select,
textarea,
.input {
  background: rgba(3, 7, 8, 0.78) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  color: var(--uw-silver) !important;
  outline: none !important;
}

input:focus,
select:focus,
textarea:focus,
.input:focus {
  border-color: rgba(34, 198, 132, 0.66) !important;
  box-shadow: 0 0 0 3px rgba(34, 198, 132, 0.1) !important;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 18px;
}

th {
  background: rgba(198, 164, 93, 0.1) !important;
  color: #e9dcc0 !important;
}

td {
  border-color: rgba(148, 163, 184, 0.12) !important;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--uw-gold), var(--uw-emerald-2)) !important;
}

.showcase-shell,
[class*="rounded-\\[2rem\\]"],
[class*="rounded-3xl"] {
  border-color: var(--uw-border) !important;
}

.text-purple-400,
.text-purple-300,
.text-cyan-400,
.text-cyan-300,
.text-blue-400,
.text-blue-300 {
  color: #8ee8c5 !important;
}

.text-orange-400,
.text-yellow-400,
.text-yellow-300,
.text-amber-300 {
  color: var(--uw-gold) !important;
}

.text-red-400,
.text-rose-300,
.text-red-300 {
  color: #ef8f8f !important;
}

.silver-text,
.silver-icon {
  color: #dbe5ee !important;
  text-shadow: 0 0 16px rgba(219, 229, 238, 0.24) !important;
}

.modal > .relative,
.modal .card {
  max-width: min(96vw, 1180px);
}

@media (max-width: 900px) {
  .flex.h-screen.overflow-hidden {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  aside.w-80 {
    width: 100% !important;
    max-height: none;
    padding: 1rem !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  aside h1,
  aside #user-info {
    grid-column: 1 / -1;
  }

  main {
    padding: 1rem !important;
  }

  h2 {
    font-size: 1.8rem !important;
  }

  .grid {
    gap: 1rem !important;
  }
}