/* =========================================================
   白色主题 · 前台布局美化（叠加层，加载于 app.css 与内联 :root 之后）
   目标：以白色为主色调，统一圆角/阴影/间距，视觉更干净现代。
   仅新增覆盖规则，不修改原 app.css，便于回滚。
   ========================================================= */

:root {
    /* 白色主色调：页面近白、卡片纯白、文字深中性色 */
    --theme-color: #2b2f36;
    --theme-background: #f5f6f8;
    --theme-other_background: #ffffff;
    /* 统一设计变量 */
    --tw-border: #eceef1;
    --tw-border-strong: #e3e6ea;
    --tw-shadow-sm: 0 2px 8px rgba(23, 43, 77, 0.05);
    --tw-shadow: 0 8px 24px rgba(23, 43, 77, 0.07);
    --tw-shadow-lg: 0 14px 40px rgba(23, 43, 77, 0.10);
    --tw-radius: 16px;
    --tw-radius-sm: 12px;
    --tw-muted: #8a9099;
}

html, body {
    background-color: var(--theme-background);
    color: var(--theme-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-osgrayscale: grayscale;
}

/* ---------- 顶部导航：白色磨砂 + 细线分隔 ---------- */
.headerBox .bg {
    background-color: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 1px 0 var(--tw-border), 0 4px 18px rgba(23, 43, 77, 0.04);
}

.headerBox .box .logoBox .title {
    letter-spacing: .3px;
}

.headerBox .box .navs .item,
.headerBox .box .navs a {
    border-radius: 10px;
    padding: 6px 12px;
    margin-left: 8px;
    transition: background-color .2s, color .2s;
}

.headerBox .box .navs .item:hover,
.headerBox .box .navs a:hover {
    background-color: #f2f4f7;
}

/* 顶部搜索：浅灰填充胶囊，聚焦高亮 */
.headerBox .box .search {
    background-color: #f2f4f7;
    border-radius: 999px;
    transition: box-shadow .2s, background-color .2s;
}

.headerBox .box .search:after {
    display: none;
}

.headerBox .box .search:focus-within {
    background-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(19, 58, 179, 0.12), var(--tw-shadow-sm);
}

/* ---------- 首页搜索框 ---------- */
.searchBox .search {
    background-color: #ffffff;
    border: 1px solid var(--tw-border-strong);
    box-shadow: var(--tw-shadow);
    border-radius: 999px;
    transition: box-shadow .2s, border-color .2s, transform .2s;
}

.searchBox .search:focus-within {
    border-color: rgba(19, 58, 179, 0.35);
    box-shadow: 0 0 0 3px rgba(19, 58, 179, 0.10), var(--tw-shadow-lg);
}

.homeBox .subTitle {
    opacity: .55;
}

/* ---------- 卡片：纯白 + 细边 + 柔和阴影 ---------- */
.home .block,
.listBox .box {
    background-color: #ffffff;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius);
    box-shadow: var(--tw-shadow-sm);
    transition: box-shadow .25s, transform .25s;
}

.home .block:hover {
    box-shadow: var(--tw-shadow);
}

.home .nav,
.listBox .nav {
    letter-spacing: .2px;
}

/* 首页榜单缩略卡：hover 抬升 + 阴影 */
.home .content .list .item {
    border-radius: 12px;
    transition: transform .25s, box-shadow .25s;
}

.home .content .list .item:hover {
    transform: translateY(-6px);
    box-shadow: var(--tw-shadow);
}

.home .content .list .item .img {
    border-radius: 12px;
    background: #f2f4f7;
}

/* ---------- 搜索结果列表 ---------- */
.listBox .left .list .item {
    border-bottom: 1px solid var(--tw-border);
    padding: 18px 12px;
    border-radius: 12px;
    transition: background-color .2s;
}

.listBox .left .list .item:hover {
    background-color: #f7f9fc;
}

.listBox .left .list .item .type {
    color: var(--tw-muted);
}

/* 结果为空/榜单序号等次要文字统一灰度 */
.footerBox .box p {
    color: var(--tw-muted);
    opacity: 1;
}

/* ---------- 来源切换 / 筛选按钮 ---------- */
.source-switch,
.switch-items {
    border-radius: 12px;
}

.listBox .screen .box {
    border-radius: 14px;
}

/* ---------- 弹窗：大圆角 + 精致阴影 ---------- */
.el-dialog {
    border-radius: 18px !important;
    box-shadow: var(--tw-shadow-lg) !important;
    overflow: hidden;
    background-color: #ffffff;
}

.el-dialog__header {
    padding-top: 14px;
}

.dialogUrl .nav {
    background: #f7f9fc;
    border: 1px solid var(--tw-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 12px;
}

.dialogUrl .statement {
    margin-top: 14px;
    padding: 12px 14px;
    background: #fbfbfc;
    border: 1px dashed var(--tw-border-strong);
    border-radius: 12px;
    color: var(--tw-muted);
    font-size: 13px;
    line-height: 1.9;
}

/* 需求提交按钮 hover */
.layerBox .vbtn {
    border-radius: 10px;
    transition: filter .2s, transform .2s;
}

.layerBox .vbtn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.layerBox .el-textarea textarea {
    background-color: #f7f9fc;
    border: 1px solid var(--tw-border);
}

/* ---------- 全局细节：滚动条 + 选中色 ---------- */
::selection {
    background: rgba(19, 58, 179, 0.14);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #d7dbe0;
    border-radius: 999px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-thumb:hover {
    background: #c2c8d0;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- 移动端微调 ---------- */
@media (max-width: 768px) {
    .home .block,
    .listBox .box {
        border-radius: 14px;
    }
    .headerBox .box .navs .item,
    .headerBox .box .navs a {
        margin-left: 4px;
        padding: 6px 8px;
    }
    .searchBox .search {
        box-shadow: var(--tw-shadow-sm);
    }
}