/*!
 * 墨泪导航 · default 模板 - 深色主题
 * 由 assets/js/theme.js 控制：html[data-theme="dark"]
 * 设计目标：保留毛玻璃半透明质感，壁纸继续透出，不做整页反色
 */

/* ========== 基础底色 ========== */
/* --dk-page  : 页面底色（壁纸下方露出的区域）
   --dk-panel : 卡片/面板色，比底色略亮，保证卡片与背景有层次 */
html[data-theme="dark"] {
    --dk-page: 24, 27, 33;
    --dk-panel: 32, 35, 43;
    background-color: rgb(var(--dk-page));
    color-scheme: dark;
}

html[data-theme="dark"] body {
    background: rgb(var(--dk-page));
    color: #e8eaed;
}

/* ========== 壁纸：亮度与亮色模式一致，不额外压暗 ========== */
html[data-theme="dark"] .banner-video img {
    filter: none;
}

/* 底部渐变遮罩：亮色是白色雾化，暗色改为深色雾化。
   使用平滑缓出曲线（多节点 + 递增幅度递减），让壁纸在渐隐过程中
   始终保留可辨识度，末端再平滑没入页面底色，避免出现断层 */
html[data-theme="dark"] .bottom-cover {
    background-image: linear-gradient(
        rgba(var(--dk-page), 0) 0%,
        rgba(var(--dk-page), .02) 10%,
        rgba(var(--dk-page), .06) 20%,
        rgba(var(--dk-page), .12) 30%,
        rgba(var(--dk-page), .20) 40%,
        rgba(var(--dk-page), .30) 50%,
        rgba(var(--dk-page), .42) 60%,
        rgba(var(--dk-page), .55) 70%,
        rgba(var(--dk-page), .68) 80%,
        rgba(var(--dk-page), .78) 88%,
        rgba(var(--dk-page), .87) 94%,
        rgba(var(--dk-page), .93) 97%,
        rgb(var(--dk-page)) 100%) !important;
}

/* ========== 标题 / 导航 / 时钟（压在壁纸上，保持白色） ========== */
html[data-theme="dark"] h2.title {
    color: #fff;
    text-shadow: 1px 1px 12px rgba(0, 0, 0, .95), 0 2px 22px rgba(0, 0, 0, .8);
}

html[data-theme="dark"] p.content {
    color: rgba(255, 255, 255, .95);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .7);
}

/* 顶部导航区不额外压暗壁纸，改用文字阴影保证白字可读 */
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .75);
}

html[data-theme="dark"] #show_time,
html[data-theme="dark"] #show_date {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

html[data-theme="dark"] .type-right svg path {
    fill: #aeb4bd;
}

/* ========== 毛玻璃卡片 ========== */
html[data-theme="dark"] .mylist {
    /* 双层底色：上层中性灰压住壁纸色调偏移，下层透出壁纸。
       上浅下深，保证卡片下半部文字在任何亮度的壁纸上都清晰 */
    background:
        linear-gradient(rgba(var(--dk-panel), .11), rgba(var(--dk-panel), .37)),
        rgba(var(--dk-panel), .01);
    /* 轻微去色：只让壁纸的明暗透进卡片，不让暖色/粉色污染底色 */
    -webkit-backdrop-filter: blur(18px) saturate(60%) grayscale(45%);
    backdrop-filter: blur(18px) saturate(60%) grayscale(45%);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 .5rem .625rem rgba(0, 0, 0, .42);
    transition: background .3s ease, box-shadow .3s ease;
}

html[data-theme="dark"] .mylist li a {
    color: #d7dae0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}

html[data-theme="dark"] .mylist li.col-3:hover {
    background: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .mylist li.title {
    color: #e8eaed;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}

/* 图标芯片保持白底深色图标，保留品牌色可读性 */
html[data-theme="dark"] .mylist li.col-3 svg {
    background: #fff;
    border-color: #e6e8ec;
    color: #3f434a;
    fill: currentColor;
}

html[data-theme="dark"] .mylist li.col-3 img {
    background: #fff;
    border-color: #e6e8ec;
}

/* ========== 搜索框 ========== */
html[data-theme="dark"] #search-text {
    background-color: rgba(24, 26, 32, .62);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #e8eaed;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

html[data-theme="dark"] #search-text:hover {
    border: 1px solid rgba(255, 255, 255, .3);
}

html[data-theme="dark"] #search-text:focus {
    border: 1px solid #4e6ef2;
    background: rgba(24, 26, 32, .75);
}

html[data-theme="dark"] #search-text::-webkit-input-placeholder {
    color: rgba(255, 255, 255, .55);
}

/* ========== 搜索引擎按钮 ========== */
/* 按钮浮在亮色壁纸上，底色需保持足够暗度以托住白字 */
html[data-theme="dark"] .search-type li {
    background: rgba(24, 26, 32, .55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

html[data-theme="dark"] .search-type input:checked+label,
html[data-theme="dark"] .search-type input:hover+label {
    background-color: rgba(24, 26, 32, .78);
}

/* 引擎名称颜色由数据库内联指定（如 #696a6d），深色下需提亮保证可读 */
html[data-theme="dark"] .search-type label span {
    color: #e8eaed !important;
    filter: none;
}

/* ========== 联想词下拉 ========== */
html[data-theme="dark"] #word {
    background: rgba(var(--dk-panel), .95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 0 18px rgba(0, 0, 0, .6);
}

html[data-theme="dark"] #word li {
    color: #d7dae0;
}

html[data-theme="dark"] #word li:hover,
html[data-theme="dark"] li.selected {
    background-color: rgba(255, 255, 255, .1);
}

html[data-theme="dark"] #word li.sug-site {
    color: #d7dae0;
}

html[data-theme="dark"] #word li.sug-site .sug-icon svg {
    fill: #d7dae0;
}

html[data-theme="dark"] .sug-badge-inner {
    color: #7fb0ff;
    background: rgba(22, 119, 255, .18);
}

/* ========== 左侧分类抽屉 ========== */
html[data-theme="dark"] .change-type .type-left {
    background: rgba(var(--dk-panel), .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .6);
}

html[data-theme="dark"] .change-type .type-left ul li a {
    color: #d7dae0;
}

html[data-theme="dark"] .change-type .type-left ul li a:hover {
    color: #fff;
}

/* ========== 页脚 ========== */
html[data-theme="dark"] .footer.text-muted {
    color: #9aa0a6 !important;
}

html[data-theme="dark"] a.icp {
    color: #9aa0a6;
}

/* ========== 滚动条 ========== */
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: rgb(var(--dk-page));
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3a3f4a;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4a505d;
}

html[data-theme="dark"] ::-webkit-scrollbar-corner {
    background: #3a3f4a;
}