/*
 * Qeel 独立工具页统一主题修复
 * Light / Dark
 */

/* =========================
   默认浅色
   ========================= */

:root {
    --qeel-bg: #f6f8fc;
    --qeel-bg-soft: #f1f6fd;
    --qeel-surface: #ffffff;
    --qeel-surface-2: #f7f9fc;

    --qeel-text: #14213d;
    --qeel-text-2: #66758f;
    --qeel-text-3: #8794a9;

    --qeel-border: #dce5f0;

    --qeel-primary: #4d8ff7;
    --qeel-primary-hover: #377de8;

    --qeel-input-bg: #ffffff;
    --qeel-input-text: #14213d;

    --qeel-code-bg: #f4f7fb;
    --qeel-shadow: 0 8px 30px rgba(20, 33, 61, .05);
}

html {
    color-scheme: light !important;
}

html[data-theme="light"],
html.light,
body[data-theme="light"],
body.light {
    --qeel-bg: #f6f8fc;
    --qeel-bg-soft: #f1f6fd;
    --qeel-surface: #ffffff;
    --qeel-surface-2: #f7f9fc;

    --qeel-text: #14213d;
    --qeel-text-2: #66758f;
    --qeel-text-3: #8794a9;

    --qeel-border: #dce5f0;

    --qeel-primary: #4d8ff7;
    --qeel-primary-hover: #377de8;

    --qeel-input-bg: #ffffff;
    --qeel-input-text: #14213d;

    --qeel-code-bg: #f4f7fb;
}


/* =========================
   自动深色
   ========================= */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --qeel-bg: #07111f;
        --qeel-bg-soft: #0b1727;
        --qeel-surface: #101b2c;
        --qeel-surface-2: #0d1929;

        --qeel-text: #edf4ff;
        --qeel-text-2: #aab9ce;
        --qeel-text-3: #8291a7;

        --qeel-border: #24344a;

        --qeel-primary: #5d9cff;
        --qeel-primary-hover: #78adff;

        --qeel-input-bg: #0a1422;
        --qeel-input-text: #f1f6ff;

        --qeel-code-bg: #091320;

        --qeel-shadow: 0 12px 35px rgba(0, 0, 0, .18);

        color-scheme: dark !important;
    }
}


/* =========================
   手动深色
   ========================= */

html[data-theme="dark"],
html.dark,
body[data-theme="dark"],
body.dark {
    --qeel-bg: #07111f;
    --qeel-bg-soft: #0b1727;
    --qeel-surface: #101b2c;
    --qeel-surface-2: #0d1929;

    --qeel-text: #edf4ff;
    --qeel-text-2: #aab9ce;
    --qeel-text-3: #8291a7;

    --qeel-border: #24344a;

    --qeel-primary: #5d9cff;
    --qeel-primary-hover: #78adff;

    --qeel-input-bg: #0a1422;
    --qeel-input-text: #f1f6ff;

    --qeel-code-bg: #091320;

    --qeel-shadow: 0 12px 35px rgba(0, 0, 0, .18);

    color-scheme: dark !important;
}

html[data-theme="dark"] {
    color-scheme: dark !important;
}


/* =========================
   页面主体
   ========================= */

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

body {
    transition:
        background-color .2s ease,
        color .2s ease;
}


/* =========================
   顶部导航
   ========================= */

header,
.site-header,
.navbar,
.top,
.topbar,
.nav {
    background-color: var(--qeel-surface) !important;
    border-color: var(--qeel-border) !important;
    color: var(--qeel-text) !important;
}

header a,
.site-header a,
.navbar a,
.top a,
.topbar a,
.nav a {
    color: var(--qeel-text) !important;
}

header a:hover,
.site-header a:hover,
.navbar a:hover,
.top a:hover,
.topbar a:hover,
.nav a:hover,
header a.active,
.navbar a.active,
.top a.active {
    color: var(--qeel-primary) !important;
}


/* =========================
   卡片 / 面板 / 工具区域
   ========================= */

.card,
.panel,
.box,
.tool-card,
.tool-box,
.tool-panel,
.content-card,
.info-card,
.result-card,
.query-card,
.search-card,
.main-card,
.status-card,
.section-card,
[class$="-card"],
[class$="-panel"] {
    background: var(--qeel-surface) !important;
    background-image: none !important;
    border-color: var(--qeel-border) !important;
    color: var(--qeel-text) !important;
    box-shadow: var(--qeel-shadow) !important;
}


/* =========================
   标题文字
   ========================= */

h1,
h2,
h3,
h4,
h5,
h6,
.title,
.card-title,
.panel-title,
.tool-title,
.result-title,
.section-title,
strong,
label {
    color: var(--qeel-text) !important;
}

p,
li,
.description,
.desc,
.subtitle,
.muted,
.help,
.hint,
.tip,
.meta,
small {
    color: var(--qeel-text-2) !important;
}


/* 面包屑 */

.breadcrumb,
.breadcrumb a,
.breadcrumb span {
    color: var(--qeel-text-2) !important;
}

.breadcrumb a:hover {
    color: var(--qeel-primary) !important;
}


/* =========================
   输入框
   ========================= */

input,
textarea,
select {
    background: var(--qeel-input-bg) !important;
    color: var(--qeel-input-text) !important;
    border-color: var(--qeel-border) !important;
    box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--qeel-text-3) !important;
    opacity: 1 !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--qeel-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(77,143,247,.15) !important;
}


/* =========================
   按钮
   ========================= */

button,
.btn,
.button,
.primary-btn,
.query-btn,
.submit-btn {
    border-color: transparent !important;
}

button:not(.theme-toggle):not(.icon-btn),
.btn-primary,
.primary-btn,
.query-btn,
.submit-btn {
    background: var(--qeel-primary) !important;
    color: #ffffff !important;
}

button:not(.theme-toggle):not(.icon-btn):hover,
.btn-primary:hover,
.primary-btn:hover,
.query-btn:hover,
.submit-btn:hover {
    background: var(--qeel-primary-hover) !important;
}


/* =========================
   检测结果
   ========================= */

.result,
.results,
.result-box,
.output,
.response,
pre,
code {
    border-color: var(--qeel-border) !important;
    color: var(--qeel-text) !important;
}

pre,
code {
    background: var(--qeel-code-bg) !important;
}


/* =========================
   表格
   ========================= */

table {
    color: var(--qeel-text) !important;
    border-color: var(--qeel-border) !important;
}

th {
    background: var(--qeel-bg-soft) !important;
    color: var(--qeel-text) !important;
}

td,
th {
    border-color: var(--qeel-border) !important;
}

tr {
    background: var(--qeel-surface) !important;
}


/* =========================
   普通链接
   ========================= */

main a,
.content a,
.container a,
.wrapper a {
    color: var(--qeel-primary);
}


/* =========================
   分割线
   ========================= */

hr {
    border-color: var(--qeel-border) !important;
}


/* =========================
   强制处理页面内硬编码白色卡片
   ========================= */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hero,
    :root:not([data-theme="light"]) .tool,
    :root:not([data-theme="light"]) .content-box,
    :root:not([data-theme="light"]) .main-box,
    :root:not([data-theme="light"]) .info-box {
        background: var(--qeel-surface) !important;
        background-image: none !important;
        border-color: var(--qeel-border) !important;
        color: var(--qeel-text) !important;
    }
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .tool,
html[data-theme="dark"] .content-box,
html[data-theme="dark"] .main-box,
html[data-theme="dark"] .info-box,
body[data-theme="dark"] .hero,
body[data-theme="dark"] .tool,
body[data-theme="dark"] .content-box,
body[data-theme="dark"] .main-box,
body[data-theme="dark"] .info-box,
body.dark .hero,
body.dark .tool,
body.dark .content-box,
body.dark .main-box,
body.dark .info-box {
    background: var(--qeel-surface) !important;
    background-image: none !important;
    border-color: var(--qeel-border) !important;
    color: var(--qeel-text) !important;
}


/* 防止浅色主题出现深色输入区域 */

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
body[data-theme="light"] input,
body[data-theme="light"] textarea,
body[data-theme="light"] select {
    background: #ffffff !important;
    color: #14213d !important;
}