/* =========================================================
   QEEL GLOBAL DARK FINAL
   只修颜色，不修改尺寸 / 布局 / position
   ========================================================= */

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

    --qd-bg:#081321;
    --qd-bg2:#0b1727;
    --qd-card:#101c2d;
    --qd-card2:#142238;
    --qd-card3:#182941;

    --qd-line:#293c56;
    --qd-line2:#334a68;

    --qd-text:#f3f7fd;
    --qd-text2:#dbe7f5;
    --qd-muted:#91a6c1;

    --qd-blue:#4f93f7;
}


/* ===== 页面基础 ===== */

html[data-theme="dark"] body{
    background:#081321 !important;
    color:#f3f7fd !important;
}

html[data-theme="dark"] main,
html[data-theme="dark"] .content-page,
html[data-theme="dark"] .doc-shell{
    color:#f3f7fd;
}


/* =========================================================
   通用白色卡片
   ========================================================= */

html[data-theme="dark"] :is(
    .card,
    .tool-card,
    .stat-card,
    .status-card,
    .stack-card,
    .resource-card,
    .result-card,
    .result,
    .workspace,
    .advanced-tools,
    .info-split,
    .doc-section,
    .about-story,
    .about-values article,
    .endpoint-list article,
    .notice-list,
    .api-meta > div,
    .settings-primary,
    .settings-secondary,
    .settings-layout > article,
    .monitor-card,
    .node-card,
    .status-window,
    .health-item
){
    background:#101c2d !important;
    border-color:#293c56 !important;
    color:#f3f7fd !important;
    box-shadow:none !important;
}


/* =========================================================
   首页 / 独立工具页顶部大白框
   DNS / HTTP / SSL / Ping / Domain 等
   ========================================================= */

html[data-theme="dark"] :is(
    .hero-inner,
    .content-hero,
    .tool-hero,
    .tool-shell,
    .query-box,
    .query-form,
    .launch-card,
    .signature-card
){
    background:#101c2d !important;
    border-color:#293c56 !important;
    color:#f3f7fd !important;
    box-shadow:none !important;
}


/* 部分独立工具页可能直接使用 section */
html[data-theme="dark"] main > section:not(.hero):not(.plain),
html[data-theme="dark"] .content-page > section{
    border-color:#293c56;
}


/* =========================================================
   标题
   ========================================================= */

html[data-theme="dark"] :is(
    h1,h2,h3,h4,
    .section-title,
    .card-head h2,
    .card-head h3
){
    color:#f5f9ff !important;
    -webkit-text-fill-color:#f5f9ff !important;
}


/* =========================================================
   普通说明文字
   ========================================================= */

html[data-theme="dark"] :is(
    p,
    small,
    .muted,
    .sub,
    .description,
    .hero-copy p,
    .content-hero p
){
    color:#9fb0c7;
}


/* =========================================================
   表单：解决截图里 DNS / HTTP 顶部仍然白色的问题
   ========================================================= */

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
    background:#0b1727 !important;
    border-color:#334a68 !important;

    color:#edf4ff !important;
    -webkit-text-fill-color:#edf4ff !important;

    box-shadow:none !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
    color:#7086a2 !important;
    -webkit-text-fill-color:#7086a2 !important;
    opacity:1 !important;
}

html[data-theme="dark"] option{
    background:#101c2d;
    color:#f3f7fd;
}


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

html[data-theme="dark"] table{
    background:#101c2d !important;
    color:#eaf2fc !important;
    border-color:#293c56 !important;
}

html[data-theme="dark"] th{
    background:#142238 !important;
    color:#f5f9ff !important;
    border-color:#293c56 !important;
}

html[data-theme="dark"] td{
    background:#101c2d !important;
    color:#d7e3f2 !important;
    border-color:#293c56 !important;
}


/* =========================================================
   code / pre / 返回结果
   ========================================================= */

html[data-theme="dark"] :is(
    pre,
    code,
    .code-sample,
    .query-result,
    .result-box,
    .api-request-preview
){
    border-color:#293c56 !important;
}

html[data-theme="dark"] pre{
    background:#0a1626 !important;
    color:#dce8f7 !important;
}

html[data-theme="dark"] code{
    background:#142238;
    color:#a9caff;
}


/* =========================================================
   独立工具结果列表
   ========================================================= */

html[data-theme="dark"] :is(
    .line-row,
    .resolver-row,
    .security-item,
    .issue-row,
    .doc-row,
    .list-item,
    .result-item
){
    background:#142238 !important;
    border-color:#293c56 !important;
    color:#e4edf8 !important;
}


/* =========================================================
   API 页面
   ========================================================= */

html[data-theme="dark"] .api-console{
    background:#101c2d !important;
    border-color:#293c56 !important;
    color:#f3f7fd !important;
}

html[data-theme="dark"] .api-console pre{
    background:#0b1727 !important;
}

html[data-theme="dark"] .endpoint-list article{
    background:#142238 !important;
    border-color:#293c56 !important;
}


/* =========================================================
   关于我们 / 文档页面
   ========================================================= */

html[data-theme="dark"] .about-values article,
html[data-theme="dark"] .about-story,
html[data-theme="dark"] .doc-section,
html[data-theme="dark"] .doc-toc{
    background:#101c2d !important;
    border-color:#293c56 !important;
}


/* =========================================================
   Platform 监控中心
   ========================================================= */

/* 左侧导航 */
html[data-theme="dark"] #tabs.side{
    background:#101c2d !important;
    border:1px solid #293c56 !important;
    box-shadow:none !important;
}

html[data-theme="dark"] #tabs.side button{
    background:#182941 !important;
    border:1px solid #334a68 !important;
    color:#dbe7f5 !important;
    -webkit-text-fill-color:#dbe7f5 !important;
    box-shadow:none !important;
}

html[data-theme="dark"] #tabs.side button.active{
    background:#4388e8 !important;
    border-color:#5799f5 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}


/* Platform 动态卡片 */
html[data-theme="dark"] .view :is(
    article,
    .card,
    .monitor-card,
    .node-check,
    .metric,
    .status-window
){
    background:#142238 !important;
    border-color:#293c56 !important;
    color:#edf4ff !important;
}


/* 监控列表动态项目 */
html[data-theme="dark"] :is(
    #monitorList,
    #recentMonitors,
    .monitor-list,
    .monitor-grid
) > *{
    background:#142238 !important;
    border-color:#293c56 !important;
    color:#edf4ff !important;
}


/* 监控卡片里面的统计小块 */
html[data-theme="dark"] :is(
    .monitor-kv,
    .monitor-kv-item,
    .monitor-stat,
    .status-stat,
    .metric-box
){
    background:#0b1727 !important;
    border-color:#293c56 !important;
    color:#edf4ff !important;
}


/* checkbox 卡片 */
html[data-theme="dark"] .view label:has(input[type="checkbox"]),
html[data-theme="dark"] .node-check{
    background:#142238 !important;
    border-color:#293c56 !important;
    color:#dbe7f5 !important;
    -webkit-text-fill-color:#dbe7f5 !important;
}

html[data-theme="dark"] input[type="checkbox"]{
    accent-color:#4388e8;
}


/* =========================================================
   修复 monitor 动态 HTML 直接生成白色背景
   ========================================================= */

html[data-theme="dark"] #v-monitors article,
html[data-theme="dark"] #v-monitors article > div,
html[data-theme="dark"] #v-overview article,
html[data-theme="dark"] #v-nodes label,
html[data-theme="dark"] #v-statuspage label{
    border-color:#293c56 !important;
}


/* =========================================================
   只针对已知卡片的内联白色 background
   ========================================================= */

html[data-theme="dark"] :is(
    #v-monitors,
    #v-overview,
    #v-nodes,
    #v-statuspage,
    .workspace,
    .advanced-tools,
    .content-page
) [style*="background: white"],

html[data-theme="dark"] :is(
    #v-monitors,
    #v-overview,
    #v-nodes,
    #v-statuspage,
    .workspace,
    .advanced-tools,
    .content-page
) [style*="background:#fff"],

html[data-theme="dark"] :is(
    #v-monitors,
    #v-overview,
    #v-nodes,
    #v-statuspage,
    .workspace,
    .advanced-tools,
    .content-page
) [style*="background: #fff"]{
    background:#142238 !important;
}


/* =========================================================
   边框统一
   ========================================================= */

html[data-theme="dark"] :is(
    .card,
    .tool-card,
    .doc-section,
    .workspace,
    .advanced-tools,
    .content-hero,
    .query-form,
    .result,
    .monitor-card,
    .node-check
){
    border-color:#293c56 !important;
}


/* =========================================================
   链接
   ========================================================= */

html[data-theme="dark"] main a{
    color:#74a9ff;
}


/* =========================================================
   状态颜色保持语义
   ========================================================= */

html[data-theme="dark"] :is(
    .ok,
    .good,
    .success,
    .status-ok
){
    color:#34d399 !important;
    -webkit-text-fill-color:#34d399 !important;
}

html[data-theme="dark"] :is(
    .error,
    .danger,
    .bad,
    .status-error
){
    color:#fb7185 !important;
    -webkit-text-fill-color:#fb7185 !important;
}

html[data-theme="dark"] :is(
    .warn,
    .warning
){
    color:#fbbf24 !important;
    -webkit-text-fill-color:#fbbf24 !important;
}


/* =========================================================
   QEEL DARK COMPAT FINAL
   同时兼容 html.dark 与 html[data-theme="dark"]
   只修颜色，不修改布局、宽度、高度、position
   ========================================================= */


/* ===== 统一深色变量 ===== */

html:is(.dark,[data-theme="dark"]){
    color-scheme:dark;

    --bg:#081321 !important;
    --background:#081321 !important;
    --page-bg:#081321 !important;

    --card:#101c2d !important;
    --panel:#101c2d !important;
    --surface:#101c2d !important;
    --surface-1:#101c2d !important;
    --surface-2:#142238 !important;

    --line:#293c56 !important;
    --border:#293c56 !important;

    --text:#f3f7fd !important;
    --text-main:#f3f7fd !important;
    --muted:#91a6c1 !important;
}


/* ===== 页面 ===== */

html:is(.dark,[data-theme="dark"]) body{
    background:#081321 !important;
    color:#f3f7fd !important;
}


/* =========================================================
   独立工具页大白框
   HTTP / DNS / SSL / Ping / Qeel360 / Domain 等
   ========================================================= */

html:is(.dark,[data-theme="dark"]) :is(
    .hero-inner,
    .hero-card,
    .hero-panel,
    .content-hero,
    .tool-hero,
    .tool-shell,
    .tool-panel,
    .launch-card,
    .query-card,
    .query-box,
    .query-form,
    .search-panel,
    .check-panel,
    .diagnostic-panel
){
    background:#101c2d !important;
    border-color:#293c56 !important;
    color:#f3f7fd !important;
    box-shadow:none !important;
}


/* 首页/工具页内部输入区域 */

html:is(.dark,[data-theme="dark"]) :is(
    .hero-search,
    .hero-examples,
    .hero-target-actions,
    .search-box,
    .result-box,
    .result-panel,
    .tool-result
){
    background:#0b1727 !important;
    border-color:#293c56 !important;
    color:#eaf2fc !important;
}


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

html:is(.dark,[data-theme="dark"]) main :is(
    h1,h2,h3,h4,h5,
    .title,
    .card-title
){
    color:#f5f9ff !important;
    -webkit-text-fill-color:#f5f9ff !important;
}

html:is(.dark,[data-theme="dark"]) main :is(
    p,
    small,
    .muted,
    .description,
    .subtitle
){
    color:#9fb0c7;
}


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

html:is(.dark,[data-theme="dark"])
input:not([type="checkbox"]):not([type="radio"]),

html:is(.dark,[data-theme="dark"]) select,

html:is(.dark,[data-theme="dark"]) textarea{
    background:#0b1727 !important;
    border-color:#334a68 !important;

    color:#eef5ff !important;
    -webkit-text-fill-color:#eef5ff !important;

    box-shadow:none !important;
}

html:is(.dark,[data-theme="dark"]) input::placeholder,
html:is(.dark,[data-theme="dark"]) textarea::placeholder{
    color:#7690ae !important;
    -webkit-text-fill-color:#7690ae !important;
    opacity:1 !important;
}


/* =========================================================
   普通结果/说明卡片
   ========================================================= */

html:is(.dark,[data-theme="dark"]) :is(
    .card,
    .tool-card,
    .result-card,
    .status-card,
    .resource-card,
    .doc-section,
    .about-story,
    .notice-card,
    .info-card,
    .feature-card,
    .endpoint-list article,
    .about-values article
){
    background:#101c2d !important;
    border-color:#293c56 !important;
    color:#eaf2fc !important;
    box-shadow:none !important;
}


/* =========================================================
   Qeel 360 breadcrumb
   ========================================================= */

html:is(.dark,[data-theme="dark"]) :is(
    .breadcrumb,
    .breadcrumbs,
    .crumbs
){
    color:#91a6c1 !important;
}

html:is(.dark,[data-theme="dark"]) :is(
    .breadcrumb,
    .breadcrumbs,
    .crumbs
) a{
    color:#74a9ff !important;
}


/* =========================================================
   监控中心左侧导航
   ========================================================= */

html:is(.dark,[data-theme="dark"]) #tabs.side{
    background:#101c2d !important;
    border-color:#293c56 !important;
}

html:is(.dark,[data-theme="dark"]) #tabs.side button{
    background:#182941 !important;
    border-color:#334a68 !important;

    color:#e0e9f5 !important;
    -webkit-text-fill-color:#e0e9f5 !important;
}

html:is(.dark,[data-theme="dark"]) #tabs.side button.active{
    background:#4388e8 !important;
    border-color:#5799f5 !important;

    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}


/* =========================================================
   监控项目主卡
   ========================================================= */

html:is(.dark,[data-theme="dark"]) #v-monitors :is(
    article,
    .monitor-card,
    .monitor-item
){
    background:#142238 !important;
    border-color:#293c56 !important;
    color:#edf4ff !important;
}


/* 你截图中 24h / 7d / 30d / 平均响应 / SSL / 域名 */

html:is(.dark,[data-theme="dark"]) .monitor-kv-six > *,
html:is(.dark,[data-theme="dark"]) .monitor-kv-grid > *,
html:is(.dark,[data-theme="dark"]) .monitor-kv > *,
html:is(.dark,[data-theme="dark"]) .monitor-stats > *{
    background:#0b1727 !important;
    border:1px solid #293c56 !important;

    color:#dbe7f5 !important;
    -webkit-text-fill-color:#dbe7f5 !important;

    box-shadow:none !important;
}

html:is(.dark,[data-theme="dark"]) .monitor-kv-six > * *,
html:is(.dark,[data-theme="dark"]) .monitor-kv-grid > * *,
html:is(.dark,[data-theme="dark"]) .monitor-kv > * *,
html:is(.dark,[data-theme="dark"]) .monitor-stats > * *{
    color:#dbe7f5 !important;
    -webkit-text-fill-color:#dbe7f5 !important;
}


/* =========================================================
   多节点、状态页 Checkbox 卡片
   ========================================================= */

html:is(.dark,[data-theme="dark"]) #v-nodes label:has(input[type="checkbox"]),
html:is(.dark,[data-theme="dark"]) #v-statuspage label:has(input[type="checkbox"]),
html:is(.dark,[data-theme="dark"]) #v-monitors label:has(input[type="checkbox"]),
html:is(.dark,[data-theme="dark"]) .node-check{
    background:#142238 !important;
    border-color:#293c56 !important;

    color:#dbe7f5 !important;
    -webkit-text-fill-color:#dbe7f5 !important;

    box-shadow:none !important;
}


/* =========================================================
   动态生成的白色 style 卡片
   ========================================================= */

html:is(.dark,[data-theme="dark"]) main [style*="background:#fff"],
html:is(.dark,[data-theme="dark"]) main [style*="background: #fff"],
html:is(.dark,[data-theme="dark"]) main [style*="background:white"],
html:is(.dark,[data-theme="dark"]) main [style*="background: white"],
html:is(.dark,[data-theme="dark"]) main [style*="background:#ffffff"],
html:is(.dark,[data-theme="dark"]) main [style*="background: #ffffff"]{
    background:#142238 !important;
    border-color:#293c56 !important;
}


/* =========================================================
   table / pre / code
   ========================================================= */

html:is(.dark,[data-theme="dark"]) table{
    background:#101c2d !important;
    color:#eaf2fc !important;
}

html:is(.dark,[data-theme="dark"]) th{
    background:#142238 !important;
    color:#f5f9ff !important;
    border-color:#293c56 !important;
}

html:is(.dark,[data-theme="dark"]) td{
    background:#101c2d !important;
    color:#dce8f7 !important;
    border-color:#293c56 !important;
}

html:is(.dark,[data-theme="dark"]) pre{
    background:#0b1727 !important;
    border-color:#293c56 !important;
    color:#dce8f7 !important;
}


/* ===== 保持状态颜色 ===== */

html:is(.dark,[data-theme="dark"]) :is(
    .ok,.good,.success,.status-ok
){
    color:#34d399 !important;
    -webkit-text-fill-color:#34d399 !important;
}

html:is(.dark,[data-theme="dark"]) :is(
    .error,.bad,.danger,.status-error
){
    color:#fb7185 !important;
    -webkit-text-fill-color:#fb7185 !important;
}