html[data-theme="light"] {
    --an-black: #eef2f7;
    --an-black-soft: #f8fafc;
    --an-graphite: #e2e8f0;
    --an-card: #ffffff;
    --an-card-light: #f8fafc;
    --an-white: #0f172a;
    --an-text: #172033;
    --an-muted: #5f6d80;
    --an-border: rgba(15, 23, 42, 0.12);
    --an-border-strong: rgba(15, 23, 42, 0.20);
    --an-shadow: 0 20px 55px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at 15% 20%, rgba(214, 168, 79, 0.16), transparent 32%),
        radial-gradient(circle at 85% 80%, rgba(214, 168, 79, 0.08), transparent 30%),
        var(--an-black) !important;
    color: var(--an-text) !important;
}

html[data-theme="light"] .bg-dark,
html[data-theme="light"] .bg-black {
    background-color: var(--an-card) !important;
}

html[data-theme="light"] .text-light,
html[data-theme="light"] .text-white {
    color: var(--an-text) !important;
}

html[data-theme="light"] .text-secondary {
    color: var(--an-muted) !important;
}

html[data-theme="light"] .border-secondary {
    border-color: var(--an-border) !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .card.bg-black,
html[data-theme="light"] .card.bg-dark {
    background: var(--an-card) !important;
    color: var(--an-text) !important;
}

html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] .input-group-text {
    color: var(--an-text) !important;
    background: var(--an-card-light) !important;
    border-color: var(--an-border-strong) !important;
}

html[data-theme="light"] .form-control::placeholder {
    color: #7b8798 !important;
}

html[data-theme="light"] .table-dark,
html[data-theme="light"] .table-dark > :not(caption) > * > * {
    color: var(--an-text) !important;
    background-color: var(--an-card) !important;
    border-color: var(--an-border) !important;
}

html[data-theme="light"] .table-hover > tbody > tr:hover > * {
    color: var(--an-text) !important;
    background-color: #f1f5f9 !important;
}

html[data-theme="light"] .btn-outline-light,
html[data-theme="light"] .btn-outline-secondary {
    color: var(--an-text) !important;
    border-color: var(--an-border-strong) !important;
}

html[data-theme="light"] .btn-outline-light:hover,
html[data-theme="light"] .btn-outline-secondary:hover {
    color: #ffffff !important;
    background-color: #334155 !important;
    border-color: #334155 !important;
}

.preference-tools {
    position: fixed;
    z-index: 1050;
    right: 18px;
    bottom: 18px;
    display: flex;
    gap: 8px;
    padding: 7px;
    border: 1px solid var(--an-border);
    border-radius: 14px;
    background: rgba(17, 20, 25, 0.92);
    box-shadow: var(--an-shadow);
    backdrop-filter: blur(12px);
}

html[data-theme="light"] .preference-tools {
    background: rgba(255, 255, 255, 0.92);
}

.preference-button {
    min-width: 42px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--an-border);
    border-radius: 9px;
    background: transparent;
    color: var(--an-text);
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.preference-button:hover {
    border-color: var(--an-accent);
}

@media (max-width: 540px) {
    .preference-tools {
        right: 12px;
        bottom: 12px;
    }

    .preference-button {
        min-width: 38px;
        padding: 0 9px;
    }
}