/* ============================================================
 * 蓝湾主题：统一视觉层（阶段 1 · 基础组件）
 *
 * 目标：把卡片、按钮、表单、弹窗收敛到同一套语言 ——
 *   1px 描边 + 8 / 6 / 4px 小圆角 + 柔和留白，去掉悬浮阴影。
 *
 * 只在主题设置「界面风格」选「新 UI」时加载（默认仍走原版样式），
 * 本文件在主题全部 CSS 之后加载，只做覆盖、不改原文件。
 * 想停用：后台把界面风格切回「默认」即可。
 * ============================================================ */

:root {
    --zl-r-card: 8px;
    --zl-r-box: 8px;
    --zl-r-ctl: 6px;
    --zl-r-sm: 4px;
    --zl-shadow-pop: 0 8px 24px rgba(15, 23, 42, .08);
}

/* ---------- 卡片 ---------- */

/* 内容卡片统一描边，不再靠阴影区分层次。
   用 !important 是因为各页面里还散着一堆单类规则在改圆角和阴影，
   逐条覆盖会越写越长，也不方便以后统一调整。 */
.card {
    border: 1px solid var(--zl-border) !important;
    border-radius: var(--zl-r-card) !important;
    box-shadow: none !important;
}

/* 鼠标移上去不再浮起：整页几十张卡片一起浮动很晃眼。
   可点击的列表行有自己的悬停态（.threadItem:hover），不受影响。 */
.card:hover {
    box-shadow: none !important;
}

/* 圆角要贴到子元素上，否则表头 / 表脚的方角会顶破卡片圆角 */
.card > .card-header {
    border-bottom: 1px solid var(--zl-border-soft);
    border-radius: var(--zl-r-card) var(--zl-r-card) 0 0;
}

.card > .card-footer {
    border-top: 1px solid var(--zl-border-soft);
    border-radius: 0 0 var(--zl-r-card) var(--zl-r-card);
}

/* 堆叠卡片（列表卡与详情卡上下拼在一起）本来就靠直角拼接，
   这里保持原样，否则中间会多出一条边框、圆角也会断开 */
.card.card-postlist {
    border-top-width: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.card.card-thread {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* ---------- 按钮：不再用胶囊 ---------- */

.btn,
.zbtn-pill,
.btn-block.zbtn-pill {
    border-radius: var(--zl-r-ctl) !important;
}

/* ---------- 表单控件 ---------- */

.form-control,
.custom-select,
.custom-file-label,
.input-group > .form-control {
    border-radius: var(--zl-r-ctl) !important;
}

/* ---------- 弹窗 ---------- */

.modal-content {
    border: 1px solid var(--zl-border);
    border-radius: var(--zl-r-card);
    box-shadow: var(--zl-shadow-pop);
}

/* ---------- 其它小件 ---------- */

.pagination-wrap a,
.pagination-wrap span,
.zpage a,
.zpage span {
    border-radius: var(--zl-r-sm);
}

.alert,
.zuc-msg {
    border-radius: var(--zl-r-box);
}

/* ============================================================
 * 阶段 2：页面级版式
 * ============================================================ */

/* 页头与分类条都补一条下边线，和卡片描边同一套语言 */
#header,
#nav_pc_2 {
    border-bottom: 1px solid var(--zl-border);
}

/* 分类导航：文字高亮改成小圆角块，背景不再贴着字 */
#nav_pc_2 .znav-cats > li > a {
    padding: 4px 10px;
    border-radius: var(--zl-r-ctl);
}

#nav_pc_2 .znav-cats > li > a:hover {
    background: var(--zl-surface-soft);
    color: var(--zl-text);
}

#nav_pc_2 .znav-cats > li.active > a {
    background: var(--zl-primary-soft);
    color: #0084ff;
}

/* 面包屑：从「无边框白条」并入卡片体系 */
.breadcrumb {
    border: 1px solid var(--zl-border) !important;
    border-radius: var(--zl-r-card) !important;
}

/* 列表：分隔线用最浅一档，缩略图跟随控件圆角 */
.threadlist .thread {
    border-bottom-color: var(--zl-border-soft);
}

.zthread-thumb {
    border-radius: var(--zl-r-ctl);
}

/* 用户中心左侧导航：悬停 / 选中改成圆角块，去掉左侧竖条 */
.zuc-nav-list {
    padding: 6px 8px;
}

.zuc-nav-link {
    border-radius: var(--zl-r-ctl);
}

.zuc-nav-link.active::before {
    display: none;
}

/* 页脚：与页头呼应，补一条上边线 */
footer {
    border-top: 1px solid var(--zl-border);
}

/* 正文卡片里那条 <hr>：用最浅的分隔线，别在描边卡片里再压一条深线 */
.card-body > hr {
    border-top-color: var(--zl-border-soft);
}

/* ============================================================
 * 阶段 3：把新 UI 里还残留的 9 / 10px 收到同一档
 *
 * 基础 CSS 里这些值是按原版观感调的，不能直接改（会连默认 UI 一起变），
 * 所以统一在新 UI 的覆盖层里收口。
 * ============================================================ */

/* 面板级：与卡片同档 */
.zwrite-media,
.zwrite-types,
.zgal,
.zvideo,
.zpan-row,
.zpan-add,
.zwrite-video-preview {
    border-radius: var(--zl-r-card);
}

/* 控件级：与按钮 / 输入框同档 */
.zwrite-type,
.zgal-edit-add,
.zgal-thumb,
.zwrite-bar-btn {
    border-radius: var(--zl-r-ctl);
}

/* 少数还写成胶囊的按钮 */
.zhide-btn,
#qq_connect_group .btn,
.zvote-btn {
    border-radius: var(--zl-r-ctl);
}

/* 分享菜单：与卡片同档 */
.zshare-dropdown {
    border-radius: var(--zl-r-card);
}

.zshare-option {
    border-radius: var(--zl-r-ctl);
}

/* ============================================================
 * 阶段 4：用户中心 + 其余仍偏大的圆角
 * ============================================================ */

/* 用户中心顶部胶囊导航、支付快捷金额、移动端登录按钮 */
.zuc-topnav-link,
.zpay-quick-btn,
.znav-mobile-login {
    border-radius: var(--zl-r-ctl);
}

/* 块级：统一到卡片档 */
.media-body.zarticle-hero,
.ztl-card,
.zbounty-bar,
.zui-dialog .modal-content,
.zbq-hero,
.zbq-hero-stat-card,
.zbq-empty-card,
.zbq-item,
.zbq-a,
.zpan-group,
.zpan-group .zpan-card,
.zpan-group .zpan-card:hover,
.zpan-group .zpan-card:focus,
.thread_pl,
.link-block.active,
.znav-search-form {
    border-radius: var(--zl-r-card);
}

/* 控件 / 图标：统一到控件档 */
.loglist-sort a,
.zlink-icon,
.zannounce-icon,
.zquick-icon,
.zquick-img,
.zwrite-content {
    border-radius: var(--zl-r-ctl);
}

/* 搜索框：从 40px 胶囊改成控件圆角，左右两段仍保持拼接 */
.search-box {
    border-radius: var(--zl-r-ctl);
}

.search-box .txt {
    border-radius: var(--zl-r-ctl) 0 0 var(--zl-r-ctl);
}

.search-box .iconfont {
    border-radius: 0 var(--zl-r-ctl) var(--zl-r-ctl) 0;
}

/* ---------- 移动端：分类条横向滑动 ---------- */

/* 横向滚动的基础样式写在 emlog-bridge.css（对所有 UI 生效），
   这里只补新 UI 的圆角与子菜单浮层细节。 */
@media (max-width: 991.98px) {
    #nav_pc_2 .znav-cats {
        align-items: flex-start;
    }

    #nav_pc_2 .znav-cats > li > a {
        padding: 4px 8px;
    }
}

/* 子菜单被搬到 body 下时的浮层样式（移动端展开）。
   此时它不再是 #nav_pc_2 的后代，上面那条规则选不到，位置由 JS 写入。 */
.znav-submenu.is-floating {
    position: fixed;
    z-index: 1070;
    margin: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: var(--zl-shadow-pop);
}