/* Theme surfaces use inherited CSS variables. Keep selectors short so a
   color switch does not restyle the whole tree twice. */

.transition-all {
    transition-property: transform, opacity, box-shadow;
}

html {
    background-color: var(--qk-reader-page, #f8fafc);
}

body:not(.convert-app-page):not(.qk-studio-page) {
    background-color: var(--qk-reader-page, #f8fafc) !important;
    color: var(--qk-reader-text, #1e293b) !important;
}

body:not(.convert-app-page):not(.qk-studio-page) #turbo-container {
    color: var(--qk-reader-text, #1e293b);
}

body:not(.convert-app-page):not(.qk-studio-page) .bg-white,
body:not(.convert-app-page):not(.qk-studio-page) .bg-slate-900 {
    background-color: var(--qk-reader-paper, #fff) !important;
}

body:not(.convert-app-page):not(.qk-studio-page) .bg-gray-50,
body:not(.convert-app-page):not(.qk-studio-page) .bg-slate-50,
body:not(.convert-app-page):not(.qk-studio-page) .bg-gray-002 {
    background-color: var(--qk-reader-page, #f8fafc) !important;
}

body:not(.convert-app-page):not(.qk-studio-page) .bg-gray-100,
body:not(.convert-app-page):not(.qk-studio-page) .bg-slate-100,
body:not(.convert-app-page):not(.qk-studio-page) .bg-slate-800 {
    background-color: var(--qk-reader-paper-soft, #f8fafc) !important;
}

body:not(.convert-app-page):not(.qk-studio-page) .border-gray-100,
body:not(.convert-app-page):not(.qk-studio-page) .border-gray-200,
body:not(.convert-app-page):not(.qk-studio-page) .border-gray-300,
body:not(.convert-app-page):not(.qk-studio-page) .border-slate-100,
body:not(.convert-app-page):not(.qk-studio-page) .border-slate-200,
body:not(.convert-app-page):not(.qk-studio-page) .border-slate-800 {
    border-color: var(--qk-reader-line, #e2e8f0) !important;
}

body:not(.convert-app-page):not(.qk-studio-page) .text-gray-800,
body:not(.convert-app-page):not(.qk-studio-page) .text-gray-900,
body:not(.convert-app-page):not(.qk-studio-page) .text-slate-800,
body:not(.convert-app-page):not(.qk-studio-page) .text-slate-900,
body:not(.convert-app-page):not(.qk-studio-page) .text-slate-700,
body:not(.convert-app-page):not(.qk-studio-page) .text-slate-100 {
    color: var(--qk-reader-text, #1e293b) !important;
}

body:not(.convert-app-page):not(.qk-studio-page) .text-gray-700,
body:not(.convert-app-page):not(.qk-studio-page) .text-gray-600,
body:not(.convert-app-page):not(.qk-studio-page) .text-gray-500,
body:not(.convert-app-page):not(.qk-studio-page) .text-gray-400,
body:not(.convert-app-page):not(.qk-studio-page) .text-slate-600,
body:not(.convert-app-page):not(.qk-studio-page) .text-slate-500,
body:not(.convert-app-page):not(.qk-studio-page) .text-slate-400,
body:not(.convert-app-page):not(.qk-studio-page) .text-slate-300 {
    color: var(--qk-reader-muted, #64748b) !important;
}

body:not(.convert-app-page) textarea,
body:not(.convert-app-page) select,
body:not(.convert-app-page) input[type="text"],
body:not(.convert-app-page) input[type="search"],
body:not(.convert-app-page) input[type="email"],
body:not(.convert-app-page) input[type="password"],
body:not(.convert-app-page) input[type="number"],
body:not(.convert-app-page) input[type="url"] {
    background-color: var(--qk-reader-paper-soft, #f8fafc) !important;
    color: var(--qk-reader-text, #1e293b) !important;
    border-color: var(--qk-reader-line, #e2e8f0) !important;
}

.qk-header-search input {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
    border: 0 !important;
}

.qk-header-search input::placeholder {
    color: #94a3b8 !important;
}

.qk-header-tab {
    background: var(--qk-reader-paper, #fff);
    border-color: var(--qk-reader-line, #e2e8f0);
    color: var(--qk-reader-text, #334155);
    box-shadow: 0 1px 2px var(--qk-reader-shadow, rgba(15, 23, 42, 0.06));
}

.header-tab-active {
    box-shadow: 0 0 0 1px var(--qk-reader-accent, #287e77), 0 1px 2px var(--qk-reader-shadow, rgba(15, 23, 42, 0.08));
}

.qk-site-footer {
    background: var(--qk-reader-page-soft, #eef2f7) !important;
    border-color: var(--qk-reader-line, #e2e8f0) !important;
    color: var(--qk-reader-muted, #64748b);
}

.qk-site-footer a[title] {
    background-color: var(--qk-reader-paper, #fff);
    border-color: var(--qk-reader-line, #e2e8f0);
    color: var(--qk-reader-text, #334155);
}

.qk-site-footer nav a {
    color: var(--qk-reader-text, #334155);
}

.qk-site-footer p,
.qk-site-footer span {
    color: var(--qk-reader-muted, #64748b);
}

.modal {
    background: var(--qk-reader-paper, #fff) !important;
    color: var(--qk-reader-text, #1e293b);
}