[x-cloak] { display: none !important; }

:root {
    --brand-purple: #7b4b75;
    --brand-purple-strong: #9a5b92;
    --brand-red: #b5303a;
    --brand-red-strong: #d1434e;
    --brand-mist: #c5c7cf;
    --surface-border: rgba(197, 199, 207, 0.18);
    --surface-elevated: rgba(21, 24, 34, 0.82);
    --surface-deep: rgba(14, 17, 25, 0.86);
    --text-primary: #e8edf4;
    --text-muted: rgba(226, 231, 240, 0.78);
}

body {
    background:
        radial-gradient(1200px 600px at 10% -20%, rgba(122, 75, 117, 0.18), transparent 60%),
        radial-gradient(1000px 500px at 90% -10%, rgba(167, 168, 173, 0.12), transparent 60%),
        #10131d;
    color: var(--text-primary);
}

.card,
.stats,
.navbar,
.menu,
.tabs-boxed,
.table thead {
    background-color: var(--surface-elevated) !important;
    border: 1px solid var(--surface-border);
}

.drawer-side .menu {
    background-color: var(--surface-deep) !important;
}

.menu-title,
.stat-title,
.stat-desc,
.text-base-content\/50,
.text-base-content\/60,
.text-base-content\/70 {
    color: var(--text-muted) !important;
}

.btn-ghost,
.tab,
.card-title,
.table th,
.table td,
h1,
h2,
h3,
h4,
p,
span,
a {
    color: var(--text-primary);
}

.tab-active,
.menu li > *:not(ul):not(.menu-title):not(details).active {
    background-color: rgba(126, 26, 34, 0.82) !important;
    border-color: rgba(220, 92, 103, 0.58) !important;
    color: #fff !important;
}

.btn-ghost {
    border: 1px solid rgba(226, 231, 240, 0.14);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    background-color: rgba(181, 48, 58, 0.24) !important;
    color: #fff !important;
}

.btn-ghost:focus-visible {
    outline: 2px solid var(--brand-red-strong);
    outline-offset: 2px;
}

.link,
.link-primary {
    color: #dfb7d8 !important;
}

.badge {
    border-color: rgba(226, 231, 240, 0.18);
}

.badge-warning {
    background-color: #f3b63f !important;
    color: #2c1a00 !important;
    border-color: rgba(243, 182, 63, 0.45) !important;
}