html, body, #app {
  min-height: 100%;
}

html {
  background:
    radial-gradient(circle at 10% 6%, rgba(255, 222, 149, 0.56), transparent 22%),
    radial-gradient(circle at 88% 12%, rgba(255, 183, 126, 0.28), transparent 20%),
    radial-gradient(circle at 82% 88%, rgba(255, 225, 170, 0.24), transparent 18%),
    linear-gradient(180deg, #fffbf4 0%, #fff4e3 46%, #fffaf1 100%) !important;
}

body {
  --tg-page: #fff8ef;
  --tg-page-soft: #fff3e2;
  --tg-page-deep: #fcebd0;
  --tg-panel: rgba(255, 255, 255, 0.84);
  --tg-panel-strong: rgba(255, 250, 240, 0.94);
  --tg-panel-soft: rgba(255, 246, 230, 0.78);
  --tg-border: rgba(194, 145, 69, 0.16);
  --tg-border-strong: rgba(194, 145, 69, 0.26);
  --tg-text: #2d2014;
  --tg-text-soft: #7d644b;
  --tg-title: #52361c;
  --tg-gold: #c78b2e;
  --tg-gold-strong: #dd9f3d;
  --tg-gold-soft: #f7e3bb;
  --tg-amber: #f0b45a;
  --tg-sun: #ffd67f;
  --tg-rose: #f39b72;
  --tg-shadow: 0 18px 48px rgba(127, 83, 23, 0.10);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 219, 140, 0.46), transparent 24%),
    radial-gradient(circle at 86% 14%, rgba(255, 174, 116, 0.22), transparent 22%),
    radial-gradient(circle at 78% 84%, rgba(255, 223, 164, 0.18), transparent 18%),
    linear-gradient(180deg, #fffaf2 0%, #fff4e6 45%, #fff9f3 100%) !important;
  color: var(--tg-text) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 20%),
    radial-gradient(circle at 18% 22%, rgba(255, 213, 119, 0.16), transparent 24%),
    radial-gradient(circle at 80% 18%, rgba(255, 165, 112, 0.10), transparent 20%);
  z-index: 0;
}

#app,
.min-h-screen,
.h-screen,
[class*="min-h-screen"],
[class*="bg-gray-50"],
[class*="bg-gray-100"],
[class*="bg-slate-50"],
[class*="bg-slate-100"],
[class*="bg-primary-50"],
.bg-white,
.bg-gray-50,
.bg-gray-100,
.bg-slate-50,
.bg-slate-100,
.bg-primary-50 {
  background-color: transparent !important;
}

body > *,
#app > * {
  position: relative;
  z-index: 1;
}

[class*="rounded"],
.card,
.panel,
.modal,
.dialog,
header,
nav,
aside,
main section,
main article,
form,
table,
pre,
blockquote,
[class*="border"] {
  border-color: var(--tg-border) !important;
}

.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
[class*="shadow"] {
  box-shadow: var(--tg-shadow) !important;
}

.bg-white,
.bg-white\/80,
.bg-white\/90,
[class*="bg-white/"],
[class*="bg-gray-100"],
[class*="bg-slate-100"],
[class*="bg-primary-50"],
[class*="bg-dark-800"]:not(.dark *),
[class*="bg-dark-900"]:not(.dark *),
[class*="bg-gray-800"]:not(.dark *),
[class*="bg-slate-800"]:not(.dark *) {
  background-color: var(--tg-panel) !important;
  backdrop-filter: blur(16px);
}

header,
nav,
aside,
[role="navigation"],
[class*="sidebar"],
[class*="header"],
[class*="topbar"],
[class*="navbar"] {
  background-color: rgba(255, 248, 236, 0.84) !important;
  backdrop-filter: blur(18px);
}

main,
[class*="content"],
[class*="layout"],
[class*="page"],
[class*="container"] {
  background-color: transparent !important;
}

.text-gray-900,
.text-gray-800,
.text-slate-900,
.text-slate-800,
.text-dark-900,
.text-primary-900,
[class*="text-gray-900"],
[class*="text-slate-900"] {
  color: var(--tg-text) !important;
}

.text-gray-700,
.text-gray-600,
.text-slate-700,
.text-slate-600,
.text-dark-600,
.text-dark-500,
[class*="text-gray-600"],
[class*="text-slate-600"],
[class*="text-dark-500"] {
  color: var(--tg-text-soft) !important;
}

h1, h2, h3, h4, h5, h6,
.font-bold,
.font-semibold,
.font-extrabold,
[class*="font-semibold"],
[class*="font-bold"] {
  color: var(--tg-title) !important;
}

.btn-primary,
button[class*="bg-primary"],
.bg-primary-500,
.bg-primary-600,
.bg-primary-700,
.hover\:bg-primary-600:hover,
.hover\:bg-primary-700:hover {
  background-image: linear-gradient(135deg, var(--tg-sun), var(--tg-amber), var(--tg-rose)) !important;
  background-color: var(--tg-gold-strong) !important;
  color: #4a2b0d !important;
  border-color: rgba(214, 151, 55, 0.18) !important;
  box-shadow: 0 12px 28px rgba(222, 161, 72, 0.24) !important;
}

.btn-primary:hover,
button[class*="bg-primary"]:hover,
.hover\:bg-primary-600:hover,
.hover\:bg-primary-700:hover {
  filter: saturate(1.06) brightness(0.98);
}

.btn-secondary,
.btn-ghost,
button[class*="border-gray"],
button[class*="bg-gray"],
button[class*="bg-slate"],
[class*="bg-gray-50"].border,
[class*="bg-white"].border,
.tab,
.badge,
.pill {
  background-color: rgba(255, 249, 239, 0.92) !important;
  color: var(--tg-text) !important;
  border-color: var(--tg-border-strong) !important;
}

input,
textarea,
select {
  background-color: rgba(255, 252, 246, 0.98) !important;
  color: var(--tg-text) !important;
  border-color: rgba(201, 153, 75, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58) !important;
}

input::placeholder,
textarea::placeholder {
  color: #b09373 !important;
}

input:focus,
textarea:focus,
select:focus,
button:focus,
a:focus {
  border-color: rgba(214, 149, 51, 0.48) !important;
  --tw-ring-color: rgba(214, 149, 51, 0.28) !important;
  box-shadow: 0 0 0 3px rgba(226, 170, 82, 0.18) !important;
}

.navigation-progress-bar[data-v-0856a86e] {
  background: linear-gradient(90deg, transparent 0%, #f2ba62 20%, #de9340 50%, #f7d27d 80%, transparent 100%) !important;
}

.btn-primary:is(.dark *),
.dark .btn-primary,
.dark button[class*="bg-primary"] {
  color: #3f2710 !important;
}

a,
.text-primary-500,
.text-primary-600,
.text-primary-700,
.hover\:text-primary-500:hover,
.hover\:text-primary-600:hover,
[class*="text-primary-500"],
[class*="text-primary-600"] {
  color: var(--tg-gold) !important;
}

.border-primary-500,
.border-primary-600,
.ring-primary-500,
.ring-primary-600,
[class*="border-primary"] {
  border-color: rgba(214, 149, 51, 0.36) !important;
  --tw-ring-color: rgba(214, 149, 51, 0.24) !important;
}

.from-primary-500,
.to-primary-600,
.via-primary-500,
[class*="from-primary"],
[class*="to-primary"] {
  --tw-gradient-from: #f6ce79 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: #de9944 var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #efb363, var(--tw-gradient-to) !important;
}

.bg-primary-100,
.bg-primary-50,
.hover\:bg-primary-50:hover,
.hover\:bg-primary-100:hover,
[class*="bg-primary-100"],
[class*="bg-primary-50"] {
  background-color: rgba(253, 238, 205, 0.90) !important;
  color: #8a5d1d !important;
}

.text-emerald-500,
.text-green-500,
.text-blue-500,
.text-sky-500,
.text-teal-500 {
  color: #c78b2e !important;
}

.bg-emerald-50,
.bg-green-50,
.bg-blue-50,
.bg-sky-50,
.bg-teal-50 {
  background-color: rgba(255, 243, 220, 0.86) !important;
}

table,
thead,
tbody,
tr,
th,
td,
[class*="table"],
[class*="thead"],
[class*="tbody"] {
  background-color: transparent !important;
  border-color: rgba(194, 145, 69, 0.14) !important;
}

tr:hover,
.hover\:bg-gray-50:hover,
.hover\:bg-slate-50:hover,
.hover\:bg-primary-50:hover {
  background-color: rgba(255, 242, 215, 0.55) !important;
}

.dark,
.dark body,
html.dark body {
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 215, 130, 0.18), transparent 20%),
    radial-gradient(circle at 88% 12%, rgba(255, 164, 110, 0.12), transparent 20%),
    linear-gradient(180deg, #24180f 0%, #1b120b 48%, #20150e 100%) !important;
  color: #f6ebd7 !important;
}

.dark .bg-dark-900,
.dark .bg-dark-800,
.dark .bg-dark-700,
.dark .bg-slate-900,
.dark .bg-slate-800,
.dark .bg-gray-900,
.dark .bg-gray-800,
.dark [class*="bg-dark-"],
.dark [class*="bg-slate-"],
.dark [class*="bg-gray-"] {
  background-color: rgba(43, 29, 18, 0.84) !important;
  border-color: rgba(236, 184, 92, 0.14) !important;
}

.dark .text-white,
.dark .text-gray-100,
.dark .text-slate-100,
.dark .text-dark-100,
.dark [class*="text-gray-100"],
.dark [class*="text-slate-100"] {
  color: #f6ead5 !important;
}

.dark .text-gray-300,
.dark .text-gray-400,
.dark .text-slate-300,
.dark .text-slate-400,
.dark [class*="text-gray-300"],
.dark [class*="text-slate-300"] {
  color: #d3b991 !important;
}

.dark header,
.dark nav,
.dark aside,
.dark [role="navigation"],
.dark [class*="sidebar"],
.dark [class*="header"] {
  background-color: rgba(51, 35, 21, 0.84) !important;
}

.dark input,
.dark textarea,
.dark select {
  background-color: rgba(58, 39, 24, 0.92) !important;
  color: #f4e6cd !important;
  border-color: rgba(232, 181, 84, 0.18) !important;
}

/* Admin dashboard refinement */
[class*="sidebar"] a,
[class*="menu"] a,
nav a,
aside a,
[role="navigation"] a {
  border-radius: 14px !important;
}

[class*="sidebar"] a:hover,
[class*="menu"] a:hover,
nav a:hover,
aside a:hover,
[role="navigation"] a:hover,
.hover\:bg-dark-700:hover,
.hover\:bg-dark-800:hover,
.hover\:bg-gray-100:hover,
.hover\:bg-slate-100:hover {
  background: linear-gradient(135deg, rgba(255, 233, 185, 0.86), rgba(255, 244, 221, 0.78)) !important;
  color: #6a4619 !important;
}

.router-link-active,
.router-link-exact-active,
[aria-current="page"],
[class*="active"]:not(input):not(textarea):not(select) {
  background: linear-gradient(135deg, rgba(255, 214, 123, 0.92), rgba(244, 171, 92, 0.82), rgba(241, 152, 111, 0.72)) !important;
  color: #4a2b0d !important;
  border-color: rgba(214, 149, 51, 0.28) !important;
  box-shadow: 0 10px 24px rgba(217, 157, 61, 0.18) !important;
}

[class*="sidebar"],
aside,
[role="navigation"] {
  background:
    linear-gradient(180deg, rgba(255, 250, 242, 0.88), rgba(255, 243, 223, 0.82)) !important;
  border-right-color: rgba(194, 145, 69, 0.14) !important;
}

header,
[class*="header"],
[class*="topbar"],
[class*="navbar"] {
  background:
    linear-gradient(180deg, rgba(255, 251, 245, 0.90), rgba(255, 246, 232, 0.82)) !important;
  border-bottom-color: rgba(194, 145, 69, 0.12) !important;
}

[class*="card"],
[class*="stat"],
[class*="stats"],
[class*="dashboard"] section,
[class*="dashboard"] article {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 236, 0.84)) !important;
  border-color: rgba(194, 145, 69, 0.14) !important;
}

[class*="card"] h1,
[class*="card"] h2,
[class*="card"] h3,
[class*="stat"] h1,
[class*="stat"] h2,
[class*="stat"] h3,
[class*="dashboard"] h1,
[class*="dashboard"] h2,
[class*="dashboard"] h3 {
  color: #5a3b1e !important;
}

[class*="badge"],
[class*="tag"],
[class*="chip"],
.inline-flex.rounded-full {
  background: rgba(255, 239, 204, 0.82) !important;
  color: #8a5c1b !important;
  border-color: rgba(214, 149, 51, 0.16) !important;
}

thead,
thead tr,
th {
  background: rgba(255, 244, 220, 0.72) !important;
  color: #7b5420 !important;
}

tbody tr {
  background: rgba(255, 251, 244, 0.56) !important;
}

tbody tr:nth-child(even) {
  background: rgba(255, 247, 232, 0.50) !important;
}

.dark [class*="sidebar"],
.dark aside,
.dark [role="navigation"] {
  background:
    linear-gradient(180deg, rgba(54, 37, 23, 0.92), rgba(41, 28, 18, 0.88)) !important;
}

.dark header,
.dark [class*="header"],
.dark [class*="topbar"],
.dark [class*="navbar"] {
  background:
    linear-gradient(180deg, rgba(51, 35, 21, 0.90), rgba(43, 29, 18, 0.84)) !important;
}

.dark .router-link-active,
.dark .router-link-exact-active,
.dark [aria-current="page"] {
  background: linear-gradient(135deg, rgba(232, 181, 84, 0.92), rgba(214, 141, 63, 0.84), rgba(192, 108, 71, 0.72)) !important;
  color: #2d1807 !important;
}

.dark thead,
.dark thead tr,
.dark th {
  background: rgba(83, 57, 31, 0.72) !important;
  color: #f0d8ad !important;
}

.dark tbody tr {
  background: rgba(52, 35, 21, 0.52) !important;
}

/* Login and landing-state refinement */
body:has(input[type="password"]) {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 219, 140, 0.54), transparent 22%),
    radial-gradient(circle at 84% 12%, rgba(255, 176, 116, 0.24), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(255, 229, 182, 0.30), transparent 28%),
    linear-gradient(180deg, #fffdf7 0%, #fff6e8 52%, #fffaf1 100%) !important;
}

body:has(input[type="password"]) main,
body:has(input[type="password"]) section,
body:has(input[type="password"]) .card,
body:has(input[type="password"]) [class*="card"],
body:has(input[type="password"]) [class*="panel"],
body:has(input[type="password"]) form {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,248,234,0.92)) !important;
  border-color: rgba(214, 149, 51, 0.16) !important;
  box-shadow:
    0 24px 64px rgba(137, 93, 28, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.78) !important;
}

body:has(input[type="password"]) h1,
body:has(input[type="password"]) h2,
body:has(input[type="password"]) h3 {
  color: #5d3b1d !important;
}

body:has(input[type="password"]) button[type="submit"],
body:has(input[type="password"]) .btn-primary {
  background-image: linear-gradient(135deg, #ffd978, #efb05a, #ea9167) !important;
  color: #4b2a0d !important;
  box-shadow: 0 16px 34px rgba(222, 161, 72, 0.28) !important;
}

/* Dashboard homepage / statistic cards */
[class*="dashboard"] [class*="stat"],
[class*="dashboard"] [class*="card"],
[class*="stats"] > *,
.grid [class*="stat"],
.grid [class*="card"] {
  position: relative;
  overflow: hidden;
}

[class*="dashboard"] [class*="stat"]::before,
[class*="dashboard"] [class*="card"]::before,
[class*="stats"] > *::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #ffd978, #efb05a, #ee8f6d);
  opacity: .9;
}

[class*="dashboard"] [class*="stat"] strong,
[class*="dashboard"] [class*="card"] strong,
[class*="stats"] strong,
[class*="dashboard"] .text-2xl,
[class*="dashboard"] .text-3xl,
[class*="dashboard"] .text-4xl,
[class*="stat"] .text-2xl,
[class*="stat"] .text-3xl,
[class*="stat"] .text-4xl {
  color: #8b5a1d !important;
}

[class*="dashboard"] svg,
[class*="stat"] svg,
[class*="stats"] svg {
  color: #d29434 !important;
}

[class*="dashboard"] .rounded-full,
[class*="stats"] .rounded-full,
[class*="stat"] .rounded-full {
  background: linear-gradient(135deg, rgba(255, 225, 159, 0.58), rgba(255, 190, 114, 0.24)) !important;
  border-color: rgba(214, 149, 51, 0.14) !important;
}

.dark body:has(input[type="password"]) {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 208, 120, 0.16), transparent 22%),
    radial-gradient(circle at 84% 12%, rgba(255, 162, 104, 0.12), transparent 20%),
    linear-gradient(180deg, #26190f 0%, #1d130c 55%, #22160f 100%) !important;
}

.dark body:has(input[type="password"]) main,
.dark body:has(input[type="password"]) section,
.dark body:has(input[type="password"]) .card,
.dark body:has(input[type="password"]) [class*="card"],
.dark body:has(input[type="password"]) [class*="panel"],
.dark body:has(input[type="password"]) form {
  background: linear-gradient(180deg, rgba(56,39,25,0.94), rgba(42,29,19,0.88)) !important;
  border-color: rgba(232, 181, 84, 0.16) !important;
}

/* Final polish */
.router-link-active,
.router-link-exact-active,
[aria-current="page"] {
  box-shadow:
    0 10px 24px rgba(217, 157, 61, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 3px 0 0 rgba(176, 112, 29, 0.72) !important;
}

header button,
header .rounded-full,
header [class*="button"],
[class*="topbar"] button,
[class*="navbar"] button {
  border-color: rgba(214, 149, 51, 0.16) !important;
  background-color: rgba(255, 248, 236, 0.86) !important;
}

header button:hover,
[class*="topbar"] button:hover,
[class*="navbar"] button:hover {
  background: linear-gradient(135deg, rgba(255, 232, 182, 0.92), rgba(255, 245, 224, 0.84)) !important;
}

[class*="dropdown"],
[role="menu"],
[role="listbox"],
[class*="popover"],
[class*="menu"] [class*="absolute"] {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,248,234,0.92)) !important;
  border-color: rgba(214, 149, 51, 0.14) !important;
  box-shadow: 0 24px 56px rgba(126, 83, 24, 0.12) !important;
}

body:has(input[type="password"]) form,
body:has(input[type="password"]) .card,
body:has(input[type="password"]) [class*="card"] {
  position: relative;
  overflow: hidden;
}

body:has(input[type="password"]) form::before,
body:has(input[type="password"]) .card::before,
body:has(input[type="password"]) [class*="card"]::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: -28px;
  height: 92px;
  background: radial-gradient(circle at 50% 100%, rgba(255, 215, 123, 0.34), transparent 68%);
  pointer-events: none;
}

body:has(input[type="password"]) h1,
body:has(input[type="password"]) h2 {
  letter-spacing: -.02em;
}

[class*="dashboard"] [class*="stat"],
[class*="dashboard"] [class*="card"],
[class*="stats"] > * {
  box-shadow:
    0 18px 42px rgba(132, 88, 28, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.66) !important;
}

[class*="dashboard"] .text-2xl,
[class*="dashboard"] .text-3xl,
[class*="dashboard"] .text-4xl,
[class*="stat"] .text-2xl,
[class*="stat"] .text-3xl,
[class*="stat"] .text-4xl {
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
  font-weight: 700 !important;
}

[class*="dashboard"] .rounded-full,
[class*="stats"] .rounded-full,
[class*="stat"] .rounded-full {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.56),
    0 10px 22px rgba(219, 159, 72, 0.16) !important;
}

.dark [class*="dropdown"],
.dark [role="menu"],
.dark [role="listbox"],
.dark [class*="popover"] {
  background: linear-gradient(180deg, rgba(56,39,25,0.96), rgba(42,29,19,0.92)) !important;
  border-color: rgba(232, 181, 84, 0.14) !important;
}