:root {
    --bg: #0f121c;
    --surface: #181b28;
    --surface-dark: #0d1018;
    --border: #3b3560;
    --text: #d0d3df;
    --text-bright: #eeeef6;
    --muted: #5a5490;
    --accent: #7b68ee;
    --accent-hover: #9683f0;
    --accent-pressed: #6559d1;
    --accent-secondary: #c77dbb;
    --ok: #8ae234;
    --error: #e64040;
}

html,
body {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

.app-container {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 20px 40px rgb(0 0 0 / 35%) !important;
}

.logo-txt {
    color: var(--text-bright) !important;
}

.text-primary-700,
label.text-primary-700 {
    color: var(--accent) !important;
}

a.text-primary-600 {
    color: var(--accent) !important;
}

a.text-primary-600:hover {
    color: var(--accent-hover) !important;
}

.app-inp-txt,
.app-inp-sel {
    background-color: var(--surface-dark) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.app-inp-txt::placeholder {
    color: var(--muted) !important;
}

.app-inp-txt:focus,
.app-inp-sel:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgb(123 104 238 / 35%) !important;
    outline: none !important;
}

.app-inp-prf-img {
    color: var(--muted) !important;
}

.app-btn-pri {
    background-color: var(--accent) !important;
    color: var(--text-bright) !important;
}

.app-btn-pri:hover {
    background-color: var(--accent-hover) !important;
}

.app-btn-pri:active {
    background-color: var(--accent-pressed) !important;
}

.app-btn-sec {
    background-color: var(--surface-dark) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

.app-btn-sec:hover {
    border-color: var(--accent) !important;
    color: var(--accent-hover) !important;
}

#bookmarks > div {
    background-color: var(--surface) !important;
    border-top: 2px solid var(--accent) !important;
    color: var(--accent) !important;
}

#qrcode {
    background-color: #fff !important;
    border: 1px solid var(--border) !important;
}

.app-login-btn-box {
    background-color: var(--surface-dark) !important;
    border: 1px solid var(--border) !important;
}

.app-login-btn-box:hover {
    border-color: var(--accent) !important;
    background-color: var(--surface) !important;
}

.app-login-btn-txt {
    color: var(--text) !important;
}