body {

    font-family: "Microsoft YaHei";

    padding:20px;

    background:#f5f5f5;

}


.header {

    background:white;

    padding:20px;

    font-size:28px;

    border-radius:15px;

}



.search {

    margin-top:20px;

    background:white;

    padding:15px;

    border-radius:10px;

    color:#888;

}



.book {

    background:white;

    margin-top:15px;

    padding:15px;

    border-radius:10px;

}


.price {

    color:red;

    font-size:22px;

}


button {

    margin-top:20px;

    width:100%;

    padding:15px;

    background:#1677ff;

    color:white;

    border:none;

    border-radius:10px;

    font-size:18px;

}

/* ========================
   管理员后台（仅作用于 .admin-page，不影响其他页面）
   ======================== */

.toolbar {

    margin-top:15px;

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}


.toolbar button {

    margin-top:0;

    width:auto;

    flex:1 1 160px;

    padding:12px 15px;

    font-size:16px;

}


.admin-page input,
.admin-page select {

    width:100%;

    box-sizing:border-box;

    margin-top:8px;

    padding:12px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:16px;

    background:white;

}


/* 手机端：减少留白，避免横向溢出 */

@media (max-width:600px) {

    .admin-page {

        padding:12px;

    }

    .admin-page .header {

        font-size:22px;

    }

    .toolbar button {

        flex:1 1 100%;

    }

}

/* ========================
   用户端：顶部导航 / 标签 / 数量按钮 / 图片
   ======================== */

.nav {

    margin-top:15px;

    padding:12px;

    background:white;

    border-radius:10px;

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    align-items:center;

}


.nav button {

    margin-top:0;

    width:auto;

    flex:1 1 auto;

    padding:10px 12px;

    font-size:15px;

}


.muted {

    color:#888;

    font-size:14px;

}


.tag {

    display:inline-block;

    margin-left:8px;

    padding:2px 8px;

    border-radius:8px;

    font-size:13px;

    color:white;

}


.tag-out {

    background:#d46b08;

}


.tag-off {

    background:#8c8c8c;

}


.qty-btn {

    width:auto;

    margin-top:0;

    padding:6px 14px;

    font-size:16px;

    border-radius:8px;

}


.qty {

    display:inline-block;

    min-width:32px;

    text-align:center;

    font-size:16px;

}


.book-image {

    display:block;

    max-width:100%;

    border-radius:10px;

    margin-top:10px;

}


button:disabled {

    background:#c8c8c8;

    color:#f5f5f5;

}


input,
select {

    max-width:100%;

    box-sizing:border-box;

}


/* 手机端：导航按钮整行、标题略小 */

@media (max-width:600px) {

    .nav button {

        flex:1 1 100%;

    }

    .header {

        font-size:22px;

    }

}

/* ========================
   统一顶部导航（返回 / 标题 / 首页）
   ======================== */

.page-nav {

    margin-bottom:12px;

    padding:8px 10px;

    background:white;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

}


.page-nav-side {

    display:flex;

    min-width:80px;

    flex:0 0 auto;

}


.page-nav-right {

    justify-content:flex-end;

}


.page-nav-title {

    flex:1 1 auto;

    min-width:0;

    text-align:center;

    font-size:16px;

    color:#333;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.nav-btn {

    display:inline-block;

    width:auto;

    margin-top:0;

    padding:10px 14px;

    min-height:44px;

    line-height:1.4;

    font-size:15px;

    color:white;

    background:#1677ff;

    border:none;

    border-radius:10px;

    text-decoration:none;

    text-align:center;

}


/* ========================
   统一「返回」按钮（学生端顶部返回，全站共用一套）
   book.html / orders.html / chat.html 共用同一尺寸与视觉：
   38px 高 / 左右内边距 13px / 字号 14px / 圆角 9px
   浅蓝底 #eaf2fb + 深蓝字 #1f4f8f；hover #dbe8f8，active #cfe0f4
   这里只统一外观；各页自身的间距 / 栅格定位留在各自的规则里
   ======================== */

.detail-back,
.orders-back,
.chat-body .nav-btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    min-height:38px;

    width:auto;

    padding:0 13px;

    border:1px solid #d9e2ef;

    border-radius:9px;

    background:#eaf2fb;

    color:#1f4f8f;

    font-size:14px;

    line-height:1;

    text-decoration:none;

    white-space:nowrap;

    cursor:pointer;

    box-sizing:border-box;

}


.detail-back:hover,
.orders-back:hover,
.chat-body .nav-btn:hover {

    background:#dbe8f8;

}


.detail-back:active,
.orders-back:active,
.chat-body .nav-btn:active {

    background:#cfe0f4;

}


.detail-back:focus-visible,
.orders-back:focus-visible,
.chat-body .nav-btn:focus-visible {

    outline:2px solid #1f4f8f;

    outline-offset:2px;

}


/* ========================
   后台模块导航 / 卡片按钮 / 表单
   ======================== */

.module-nav {

    margin-top:14px;

    padding:10px;

    background:white;

    border-radius:10px;

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}


.module-btn {

    width:auto;

    margin-top:0;

    flex:1 1 110px;

    min-height:44px;

    padding:12px 8px;

    font-size:15px;

    background:#f0f5ff;

    color:#1677ff;

}


.module-btn.is-active {

    background:#1677ff;

    color:white;

}


.card-actions {

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:12px;

}


.card-actions button {

    margin-top:0;

    flex:1 1 140px;

    min-height:44px;

}


.toolbar button {

    min-height:44px;

}


.btn-ghost {

    background:#f0f0f0;

    color:#333;

}


.form-row {

    display:block;

    margin-top:12px;

    font-size:14px;

    color:#555;

}


.form-row input,
.form-row select,
.form-row textarea {

    width:100%;

    box-sizing:border-box;

    margin-top:6px;

    padding:12px;

    min-height:44px;

    font-size:16px;

    background:white;

    border:1px solid #ddd;

    border-radius:10px;

}


.form-error {

    color:#d4380d;

    font-size:14px;

}


/* 操作结果提示条 */

.app-toast {

    position:fixed;

    left:50%;

    bottom:24px;

    transform:translateX(-50%);

    z-index:999;

    max-width:92%;

    padding:12px 18px;

    border-radius:10px;

    color:white;

    font-size:15px;

    display:none;

    box-shadow:0 4px 14px rgba(0,0,0,0.18);

}


.app-toast-ok {

    background:#237804;

}


.app-toast-error {

    background:#a8071a;

}


/* Toast 内的操作入口（如“去购物车”）：仅当 showToast 传入 action 时渲染 */
.toast-message {

    vertical-align:middle;

}


.toast-action {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:44px;

    margin-left:12px;

    padding:0 14px;

    border-radius:8px;

    background:rgba(255,255,255,0.18);

    color:white;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    vertical-align:middle;

    white-space:nowrap;

    max-width:100%;

    box-sizing:border-box;

}


.toast-action:hover {

    background:rgba(255,255,255,0.3);

}


/* ========================
   手机端：避免横向滚动、放大点击区域
   ======================== */

@media (max-width:600px) {

    body {

        padding:12px;

    }

    .header {

        font-size:22px;

        padding:16px;

    }

    .page-nav-title {

        font-size:15px;

    }

    .page-nav-side {

        min-width:72px;

    }

    .nav-btn {

        padding:10px 10px;

        font-size:14px;

    }

    .module-btn {

        flex:1 1 100%;

    }

    .card-actions button {

        flex:1 1 100%;

    }

    .toolbar button {

        flex:1 1 100%;

    }

    button {

        min-height:48px;

    }

    .app-toast {

        bottom:12px;

        /* 宽度按内容收紧：原来这里的 width:92% 会把提示条铺满整条屏幕。
           长文案由 max-width 兜住并自然换行；
           box-sizing:border-box 让 max-width 把左右 padding 也算进去，
           保证 360px 这类窄屏不会横向溢出。
           bottom 与定位方式（left:50% + translateX(-50%)）均未改动。 */
        width:max-content;

        max-width:calc(100vw - 32px);

        box-sizing:border-box;

    }

}


/* 长文本不撑破卡片 */

.book,
.detail-card,
.form-card {

    word-break:break-word;

}


img,
table {

    max-width:100%;

}

/* ========================
   回收申请状态标签
   ======================== */

.status-tag {

    display:inline-block;

    padding:3px 10px;

    border-radius:10px;

    font-size:13px;

}


.status-pending {

    background:#fff7e6;

    color:#ad6800;

}


.status-agreed {

    background:#f6ffed;

    color:#237804;

}


.status-rejected {

    background:#fff1f0;

    color:#a8071a;

}

/* 后台工具条内的筛选下拉框 */

.toolbar select {

    flex:1 1 160px;

    min-height:44px;

    padding:10px 12px;

    font-size:15px;

    border:1px solid #ddd;

    border-radius:10px;

    background:white;

}

/* ========================
   教材图片（管理员图书管理）
   ======================== */

.book-thumb {

    display:block;

    width:100%;

    max-width:220px;

    height:140px;

    object-fit:cover;

    border-radius:10px;

    margin:8px 0;

    background:#f5f5f5;

}


.book-thumb-empty {

    display:flex;

    align-items:center;

    justify-content:center;

    color:#999;

    font-size:14px;

    border:1px dashed #ddd;

}


.image-upload {

    margin-top:14px;

    padding-top:10px;

    border-top:1px solid #eee;

}


.image-preview {

    margin-top:6px;

}


.image-upload input[type="file"] {

    width:100%;

    box-sizing:border-box;

    margin-top:8px;

    padding:10px;

    min-height:44px;

    font-size:14px;

    background:white;

    border:1px solid #ddd;

    border-radius:10px;

}


@media (max-width:600px) {

    .book-thumb {

        max-width:100%;

        height:170px;

    }

}

/* ========================
   学生端商品图片
   ======================== */

.book-photo {

    display:block;

    width:100%;

    max-width:100%;

    height:160px;

    object-fit:cover;

    border-radius:10px;

    background:#f5f5f5;

    margin-bottom:10px;

    box-sizing:border-box;

}


.book-photo-empty {

    display:flex;

    align-items:center;

    justify-content:center;

    color:#999;

    font-size:14px;

    border:1px dashed #ddd;

}


.book-photo-detail {

    display:block;

    width:100%;

    max-width:100%;

    height:240px;

    object-fit:cover;

    border-radius:10px;

    background:#f5f5f5;

    margin:10px 0;

    box-sizing:border-box;

}


@media (max-width:600px) {

    .book-photo {

        height:170px;

    }

    .book-photo-detail {

        height:200px;

    }

}


/* ========================
   首页视觉样板（仅 .hp-* 作用域，不影响其它页面）
   ======================== */

.hp-main {
    max-width:1200px;
    margin:0 auto;
}


.hp-visually-hidden {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
}


/* ========================
   导航状态色（可复用，不绑定首页）
   nav-btn-active：当前所在页面，深蓝主色
   nav-btn-muted ：其它页面入口，浅蓝
   nav-btn-quiet ：次级 / 退出类操作，不参与当前页高亮
   可与 nav-btn / site-nav-link / .nav 里的按钮组合使用
   ======================== */

.nav-btn-active,
.nav .nav-btn-active {
    background:#1f4f8f;
    color:white;
    border:none;
}


.nav-btn-active:hover,
.nav .nav-btn-active:hover {
    background:#1a4379;
}


.nav-btn-active:active,
.nav .nav-btn-active:active {
    background:#163a68;
}


.nav-btn-muted,
.nav .nav-btn-muted {
    background:#eaf2fb;
    color:#1f4f8f;
    border:none;
}


.nav-btn-muted:hover,
.nav .nav-btn-muted:hover {
    background:#dbe8f8;
}


.nav-btn-muted:active,
.nav .nav-btn-muted:active {
    background:#cfe0f4;
}


.nav-btn-quiet,
.nav .nav-btn-quiet {
    background:#f2f4f7;
    color:#5a6b84;
    border:none;
}


.nav-btn-quiet:hover,
.nav .nav-btn-quiet:hover {
    background:#e8ecf2;
}


.nav-btn-quiet:active,
.nav .nav-btn-quiet:active {
    background:#dde2ea;
}


/* ========================
   全站统一顶部导航
   ======================== */

/* sticky 作用在 #page-nav 本身；只有调用 renderSiteNav 的页面会带 has-site-nav，
   后台页面仍走原来的 .page-nav，不受影响 */
#page-nav.has-site-nav {
    position:sticky;
    top:0;
    z-index:900;
    /* 抵消 body 的 20px padding + 浏览器默认 8px margin，让白底铺到视口边缘；
       纵向 padding 取对称值（14 + 14），使导航内容在满屏背景内垂直居中，
       同时保持背景尺寸与文档流高度不变 */
    margin-left:-28px;
    margin-right:-28px;
    margin-top:-28px;
    padding-left:28px;
    padding-right:28px;
    padding-top:14px;
    padding-bottom:14px;
    background:white;
    border-bottom:1px solid #e4eaf2;
    box-shadow:0 2px 10px rgba(20,50,95,.06);
}


.site-nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    max-width:1200px;
    margin:0 auto;
    min-height:60px;
}


.site-nav-brand {
    display:flex;
    align-items:baseline;
    gap:10px;
    min-width:0;
}


.site-nav-logo {
    /* 电脑端品牌字号；手机端由 ≤600 的两条覆盖规则各自指定，不依赖这里的值 */
    font-size:22px;
    font-weight:700;
    color:#14325f;
    white-space:nowrap;
}


.site-nav-tagline {
    font-size:13px;
    color:#7a8599;
    white-space:nowrap;
}


.site-nav-links {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
}


.site-nav-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:0;
    width:auto;
    min-height:44px;
    padding:0 16px;
    border-radius:10px;
    font-size:15px;
    line-height:1.2;
    text-decoration:none;
    white-space:nowrap;
}


.site-nav-icon {
    line-height:1;
}


/* 折叠态专用短文字：默认一律不显示，只有 ≤600px 折叠状态才切换出来，
   因此桌面端与手机端展开状态都只显示完整文字 */
.site-nav-label-short {
    display:none;
}


/* 退出登录：继续 quiet 色，水平 padding 略大，与普通入口区分但高度一致 */
.site-nav-logout {
    padding-left:20px;
    padding-right:20px;
}


/* 折叠箭头：基础一律不显示，只有 ≤600px 手机端才出现（601px 以上完全不存在） */
.site-nav-toggle {
    display:none;
}


/* 顶部「客服」快捷入口：基础一律不显示，只有 ≤600px 手机端才出现，
   与 .site-nav-toggle 同一套「默认隐藏 + 手机端开启」的写法 */
.site-nav-support {
    display:none;
}


.hp-search-section {
    margin-top:12px;
    padding:14px 16px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
}


.hp-search-box {
    display:flex;
    gap:10px;
    align-items:center;
}


#hp-search {
    flex:1 1 auto;
    min-width:0;
    min-height:44px;
    padding:0 14px;
    font-size:16px;
    color:#1f2733;
    background:white;
    border:1px solid #d9e2ef;
    border-radius:10px;
}


/* 搜索框容器：用于把放大镜图标定位在输入框内部右侧 */
.hp-search-field {
    position:relative;
    flex:1 1 auto;
    min-width:0;
    display:flex;
}


/* 给图标让出位置，避免文字压到图标上（覆盖各断点的 padding 简写） */
.hp-search-field #hp-search {
    padding-right:38px;
}


/* 放大镜：纯装饰，pointer-events:none 保证不影响输入与点击 */
.hp-search-icon {
    position:absolute;
    top:50%;
    right:13px;
    width:16px;
    height:16px;
    margin-top:-8px;
    pointer-events:none;
    background-repeat:no-repeat;
    background-position:center;
    background-size:16px 16px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E");
}


#hp-search:focus {
    outline:none;
    border-color:#1f4f8f;
    box-shadow:0 0 0 3px rgba(31,79,143,.12);
}


.hp-search-clear {
    flex:0 0 auto;
    min-height:44px;
    margin-top:0;
    width:auto;
    padding:0 16px;
    font-size:15px;
    background:#f0f3f8;
    color:#445;
    border:none;
    border-radius:10px;
}


.hp-categories {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}


.hp-chip {
    min-height:38px;
    margin-top:0;
    width:auto;
    padding:0 16px;
    font-size:14px;
    background:white;
    /* V0.8.2-04-E：普通状态文字改为更柔和的深灰（选中态由 .hp-chip-active 覆盖，不受影响） */
    color:#4b5563;
    border:1px solid #d9e2ef;
    border-radius:999px;
    cursor:pointer;
    transition:background-color .18s ease, color .18s ease;
}


/* 来源按钮的双文案：默认显示完整文案（桌面端），短文案（全部/官方/学生）
   只在 ≤768px 显示，由断点控制而不是 JS 判断视口宽度 */
.hp-chip-label-short {
    display:none;
}


.hp-chip:hover {
    border-color:#1f4f8f;
    color:#1f4f8f;
}


.hp-chip-active {
    background:#1f4f8f;
    border-color:#1f4f8f;
    color:white;
}


.hp-chip-active:hover {
    background:#1f4f8f;
    border-color:#1f4f8f;
    color:white;
}


/* ========================
   首页「求书大厅」入口条（V0.8.1）
   单行、浅蓝次级风格，尽量不占用首屏高度
   ======================== */

.hp-entry-bar {
    margin-top:10px;
}


.hp-entry-link {
    display:flex;
    align-items:center;
    gap:10px;
    min-height:44px;
    padding:8px 14px;
    background:#f6faff;
    border:1px solid #e4eaf2;
    border-radius:12px;
    text-decoration:none;
    box-sizing:border-box;
}


.hp-entry-link:hover {
    border-color:#cfe0f5;
    background:#f0f7ff;
}


.hp-entry-title {
    flex:0 0 auto;
    font-size:14px;
    font-weight:600;
    color:#1f4f8f;
}


.hp-entry-desc {
    flex:1 1 auto;
    min-width:0;
    font-size:13px;
    color:#7a8599;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}


.hp-entry-arrow {
    flex:0 0 auto;
    color:#9aa4b5;
    font-size:14px;
}


/* ========================
   首页教材筛选栏（出售类型标签 + 专业 / 成色 / 价格 / 排序）
   复用 .hp-chip 系列做标签，其余控件沿用搜索框的浅蓝次级风格
   ======================== */

.hp-filter-bar {
    margin-top:12px;
    padding:14px 16px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
}


/* 标签行在卡片内部，不再额外撑开上边距 */
.hp-filter-bar .hp-categories {
    margin-top:0;
}


.hp-filter-fields {
    display:flex;
    flex-wrap:wrap;
    gap:10px 12px;
    align-items:flex-end;
    margin-top:12px;
}


/* 「筛选 + 排序」快捷区：桌面端完全透明（子元素等同 .hp-filter-fields 的直接子项），
   保证桌面布局与改动前逐像素一致；移动端才作为整体盒子出现（见 ≤768px） */
.hp-filter-quick {
    display:contents;
}


/* V0.8.3-08 手机端「页面内下拉菜单」组件（排序 / 专业 / 成色共用）：
   默认（含桌面端）一律不显示触发器与面板，
   桌面端继续使用原生 select；只有 ≤768px 才把触发器与面板打开。
   注意：桌面端 .hp-filter-quick 是 display:contents，若不在这里隐藏，
   触发器会作为 .hp-filter-fields 的直接子项出现在桌面布局里。 */
.hp-inline-trigger,
.hp-inline-menu {
    display:none;
}


.hp-filter-field {
    flex:1 1 150px;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}


.hp-filter-label {
    font-size:13px;
    color:#7a8599;
}


.hp-filter-input {
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:44px;
    margin-top:0;
    padding:0 12px;
    font-size:15px;
    color:#1f2733;
    background:white;
    border:1px solid #d9e2ef;
    border-radius:10px;
    box-sizing:border-box;
}


.hp-filter-input:focus {
    outline:none;
    border-color:#1f4f8f;
    box-shadow:0 0 0 3px rgba(31,79,143,.12);
}


/* ========================
   V0.8.2-06：三个下拉框（默认排序 / 专业 / 成色）的 ▼ 箭头左移

   原生 select 的箭头由浏览器绘制在紧贴右边框处，CSS 无法移动它，
   所以这里关掉原生箭头（appearance:none），改用背景图自己画一个：
     · background-position 的 12px 决定箭头距右边框的距离（原来约 3~4px）
     · padding-right:22px 给箭头留出位置，保证文字不压箭头、也不被截断
   只作用于这三个 select（价格区间是 number 输入框，保持原生样式不变）。
   宽度、高度、字号、布局均未改动。
   ======================== */
#hp-sort,
#hp-major-filter,
#hp-condition-filter {
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    /* V0.8.2-07：与「筛选」按钮统一为同一张箭头图（#6b7280、10×6、折角线） */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:10px 6px;
    padding-right:22px;
}


.hp-filter-price {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}


/* 价格输入各自保留最小可输入宽度，避免窄屏被挤成一条缝 */
.hp-filter-price .hp-filter-input {
    flex:1 1 0;
    min-width:64px;
}


.hp-filter-price-sep {
    flex:0 0 auto;
    color:#7a8599;
}


.hp-filter-reset {
    flex:0 0 auto;
    min-height:44px;
    margin-top:0;
    width:auto;
    padding:0 16px;
    font-size:15px;
    background:#eaf2fb;
    color:#1f4f8f;
    border:1px solid #d9e2ef;
    border-radius:10px;
    cursor:pointer;
    transition:background-color .18s ease, border-color .18s ease;
}


.hp-filter-reset:hover {
    background:#dbe8f8;
    border-color:#b9d0ea;
}


.hp-filter-reset:active {
    background:#cfe0f4;
}


/* 「筛选」折叠按钮：基础样式（桌面端隐藏，只在 ≤768px 显示，见响应式一节） */
.hp-filter-toggle {
    display:none;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:44px;
    margin-top:0;
    width:auto;
    padding:0 14px;
    font-size:15px;
    background:#eaf2fb;
    color:#1f4f8f;
    border:1px solid #d9e2ef;
    border-radius:10px;
    cursor:pointer;
    transition:background-color .18s ease, border-color .18s ease;
}


.hp-filter-toggle:hover {
    background:#dbe8f8;
    border-color:#b9d0ea;
}


.hp-filter-toggle:active {
    background:#cfe0f4;
}


/* 高级筛选生效时给按钮一个提示，折叠状态下也能看出「有筛选」 */
.hp-filter-toggle.is-active {
    background:#dbe8f8;
    border-color:#b9d0ea;
    font-weight:bold;
}


    /* V0.8.2-07：展开 / 收起指示箭头
       改用与三个下拉框完全相同的箭头图（#6b7280、10×6、折角线），
       不再用 border + rotate 画折角，四处箭头视觉统一：
         · 收起态 ▼：不旋转
         · 展开态 ▲：整体旋转 180°，保留原有过渡动画
       盒子本身就是 10×6，垂直居中交给按钮的 flex align-items:center，
       因此不再需要之前补偿「墨迹重心」的 margin-top。 */
    .hp-filter-toggle-icon {
        width:10px;
        height:6px;
        margin-top:0;
        border:none;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat:no-repeat;
        background-position:center;
        background-size:10px 6px;
        transform:none;
        transition:transform .18s ease;
    }


    .hp-filter-bar.is-open .hp-filter-toggle-icon {
        margin-top:0;
        transform:rotate(180deg);
    }


.hp-count {
    margin:12px 2px 0;
    font-size:14px;
    color:#7a8599;
}


.hp-grid {
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
}


.hp-card {
    display:flex;
    flex-direction:column;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    overflow:hidden;
    cursor:pointer;
    transition:box-shadow .18s ease, transform .18s ease;
}


.hp-card:hover {
    box-shadow:0 6px 20px rgba(20,50,95,.08);
}


.hp-card:active {
    transform:scale(.99);
}


.hp-card:focus-visible {
    outline:none;
    box-shadow:0 0 0 3px rgba(31,79,143,.35);
}


.hp-card-img {
    display:block;
    width:100%;
    height:180px;
    object-fit:contain;
    background:#f2f5f9;
}


.hp-card-img-empty {
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9aa4b5;
    font-size:14px;
    border-bottom:1px dashed #e2e8f2;
}


.hp-card-body {
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:14px;
    flex:1 1 auto;
}


.hp-card-title {
    margin:0;
    font-size:16px;
    line-height:1.45;
    color:#1f2733;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}


/* 书名与来源标签同行：书名占剩余宽度（最多两行），来源/成色标签贴在其右侧 */
.hp-card-title-row {
    display:flex;
    align-items:flex-start;
    gap:6px;
}


.hp-card-title-row .hp-card-title {
    flex:1 1 auto;
    min-width:0;
}


.hp-card-title-row .hp-card-badges {
    flex:0 0 auto;
    /* 与书名首行视觉对齐（书名 16px、标签 11px） */
    margin-top:4px;
}


.hp-card-meta {
    margin:0;
    /* V0.8.2-08：作者 / 专业 / 年级属于次要信息，降一档字号压低视觉权重 */
    font-size:12px;
    color:#7a8599;
    word-break:break-word;
}


/* V0.8.3 热度（浏览量 / 销量）：跟在「专业 · 年级」后面的次级信息，
   字号比 meta 更小、颜色更淡，不抢书名与价格；
   用 inline 行内元素实现，行高仍由 12px 的 meta 决定，不会额外撑高卡片。
   nowrap 保证「👀128 · 🔥15」作为一个整体换行，不会从中间断开。 */
.hp-card-heat {
    white-space:nowrap;
    font-size:11px;
    color:#98a2b3;
}


.hp-card-heat-num {
    margin:0 1px;
    font-weight:600;
    color:#8a94a6;
}


.hp-card-heat-sep {
    margin:0 4px;
    color:#c3cbd8;
}


/* 学生自主出售的标签行（来源标识 + 成色）：与后台「学生出售」标签同一套配色。
   官方直售的卡片不会渲染这些节点，因此官方卡片样式完全不变。 */
.hp-card-badges {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}


.hp-card-source {
    display:inline-block;
    align-self:flex-start;
    /* V0.8.2-08：来源 / 成色标签略紧凑，避免挤压书名 */
    padding:1px 9px;
    border-radius:999px;
    background:#f0fbf4;
    color:#237804;
    font-size:11px;
    line-height:1.5;
    white-space:nowrap;
}


/* 来源标签配色：学生出售（浅绿）/ 官方直售（浅蓝），与后台标签体系一致 */
.hp-card-source.is-student {
    background:#f0fbf4;
    color:#237804;
}


.hp-card-source.is-official {
    background:#eaf2fb;
    color:#1f4f8f;
}


/* 成色标签：二手交易里最关键的信息，官方教材没有这一项 */
.hp-card-condition {
    display:inline-block;
    align-self:flex-start;
    padding:1px 9px;
    border-radius:999px;
    background:#f4f7fc;
    color:#5a6b80;
    font-size:11px;
    line-height:1.5;
    white-space:nowrap;
}


/* 卖家身份行：同样只出现在学生自主出售的卡片里 */
.hp-card-seller {
    color:#1f4f8f;
}


/* 卖家首字头像：与详情页、我的出售保持同一视觉语言 */
.hp-card-avatar {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    margin-right:4px;
    border-radius:50%;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:11px;
    font-weight:700;
    line-height:1;
    vertical-align:middle;
}


/* 学生商品左侧浅绿竖条：用伪元素实现，不占布局空间、不影响卡片尺寸与网格排版，
   也不会和 hover / focus 的 box-shadow 互相覆盖 */
.hp-card-student {
    position:relative;
}


.hp-card-student::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:#b7e2c4;
}


.hp-card-price-row {
    /* V0.8.2-09-R：恢复 08 的紧凑排版（不再把购买区强制压到卡片底部） */
    margin:2px 0 0;
    display:flex;
    align-items:baseline;
    gap:8px;
    flex-wrap:wrap;
}


.hp-card-price {
    /* V0.8.2-08：价格提高视觉权重，作为卡片第二视觉焦点 */
    font-size:22px;
    font-weight:700;
    color:#d4380d;
    letter-spacing:-.2px;
    line-height:1.2;
}


/* 货币符号弱化：让数字更突出，更接近电商价格排版 */
.hp-card-price-symbol {
    font-size:.62em;
    font-weight:600;
    margin-right:1px;
}


.hp-card-old {
    font-size:12px;
    color:#b6c0cf;
    text-decoration:line-through;
}


.hp-card-stock {
    margin:0;
    font-size:12px;
    color:#7a8599;
}


.hp-stock-out {
    display:inline-block;
    padding:2px 8px;
    border-radius:8px;
    font-size:12px;
    color:#a8071a;
    background:#fff1f0;
}


/* ========================
   V0.9.2 卡片三层结构：桌面端保持原样
     · .hp-card-stats / .hp-card-footer 用 display:contents 透明化，
       其子项在桌面端等同于 .hp-card-body 的直接子项（布局与改动前一致）；
     · 已售 / 浏览 在桌面端仍由「专业·年级」行内的热度（.hp-card-heat）呈现，
       因此统计块里的这两项在桌面端隐藏，只保留库存一行；
     · 用 order 把行序恢复为「价格 → 库存 → 加入购物车」，与改动前完全一致。
   ======================== */

.hp-card-stats,
.hp-card-footer {
    display:contents;
}


.hp-card-stat-sales,
.hp-card-stat-views {
    display:none;
}


.hp-card-stat-stock {
    order:2;
    margin:0;
    font-size:12px;
    color:#7a8599;
}


.hp-card-footer .hp-card-price-row {
    order:1;
}


.hp-card-footer .hp-card-add {
    order:3;
}


.hp-card-add {
    /* V0.8.2-09-R：恢复 08 的紧凑按钮（贴卡片底部、圆角 10px） */
    margin-top:auto;
    min-height:44px;
    width:100%;
    font-size:15px;
    color:white;
    background:#1f4f8f;
    border:none;
    border-radius:10px;
    cursor:pointer;
}


/* V0.8.2-09：为将来「学生出售」模式的差异化操作预留钩子。
   目前不写任何差异化样式，按钮外观与行为保持完全一致。 */
.hp-card-action.official {}


.hp-card-action.student {}


.hp-card-add:hover {
    background:#1a4379;
}


.hp-card-add:active {
    background:#163a68;
}


.hp-card-add:disabled {
    background:#d6dde8;
    color:#8f99a8;
    cursor:default;
}


.hp-empty {
    /* 空态是 .hp-grid 的网格项，默认只占一列（桌面 1/4、手机 1/2 宽）；
       跨满整行后与上方的搜索区、以及教材卡片行的左右边界对齐 */
    grid-column:1 / -1;
    background:white;
    border:1px dashed #d9e2ef;
    border-radius:14px;
    padding:42px 18px;
    text-align:center;
    color:#7a8599;
}


.hp-empty-title {
    margin:0 0 8px;
    font-size:16px;
    color:#445;
}


.hp-empty-clear {
    min-height:44px;
    margin-top:12px;
    width:auto;
    padding:0 22px;
    font-size:15px;
    color:#1f4f8f;
    background:#eef4fc;
    border:none;
    border-radius:10px;
}


/* ========================
   V0.9.4 加载态：给「加载中……」加一个转圈，
   让首屏拉取数据时不再是一块纯文字空态（空结果态不带这个元素）。
   ======================== */

.hp-loading-spinner {
    display:inline-block;
    width:22px;
    height:22px;
    margin-bottom:10px;
    border:2px solid #dbe6f4;
    border-top-color:#1f4f8f;
    border-radius:50%;
    animation:hpSpin .8s linear infinite;
}


@keyframes hpSpin {
    to {
        transform:rotate(360deg);
    }
}


/* 用户系统设置「减少动态效果」时停止旋转（静态圆环仍然可见） */
@media (prefers-reduced-motion: reduce) {

    .hp-loading-spinner {
        animation:none;
    }

}


/* 返回顶部悬浮按钮（仅首页 .hp-* 作用域）：白色圆形底板 + 简洁「^」箭头 */
.hp-back-top {
    position:fixed;
    right:20px;
    bottom:22px;
    z-index:800;
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    margin:0;
    padding:0;
    border:1px solid #e4eaf2;
    border-radius:50%;
    background:white;
    box-shadow:0 4px 14px rgba(20,50,95,.14);
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:opacity .18s ease, visibility .18s ease;
}


.hp-back-top.is-visible {
    opacity:1;
    visibility:visible;
}


.hp-back-top:hover {
    box-shadow:0 6px 18px rgba(20,50,95,.2);
}


.hp-back-top:focus-visible {
    outline:none;
    box-shadow:0 0 0 3px rgba(31,79,143,.25);
}


/* 箭头：用两条边框旋转 45° 画出「^」；
   旋转后的视觉重心偏上，用 margin-top 补偿回圆形底板的正中 */
.hp-back-top-icon {
    width:12px;
    height:12px;
    margin-top:4px;
    border-top:2px solid #8b93a1;
    border-left:2px solid #8b93a1;
    transform:rotate(45deg);
}


/* ========================
   悬浮购物车（仅首页、仅手机端）
   与 .hp-back-top 同一套视觉语言，但职责不同，因此独立成类，不复用它
   ======================== */

/* 601px 以上完全不出现；手机端由下方 ≤600 规则打开 */
.hp-floating-cart {
    display:none;
}


/* 图标：纯 CSS 线条（篮身 + 把手 + 两个实心轮子），颜色跟随 currentColor */
.hp-floating-cart-icon {
    position:relative;
    display:block;
    width:16px;
    height:10px;
    /* 无把手：水平方向绘制内容与盒子等宽，天然居中；
       轮子向下外扩 4px（篮底下边框之外 1px 间隙 + 3px 轮子），
       这里上移 2px 让绘制内容在按钮内垂直居中 */
    top:-2px;
    box-sizing:border-box;
    border:2px solid currentColor;
    /* 上缘微圆、下缘更圆：像篮筐而不是方盒子 */
    border-radius:3px 3px 4px 4px;
}


/* 轮子：两个等大的实心圆点（无把手），第二个用 box-shadow 复制；
   间距取 7px，使两轮相对篮筐左右完全对称，且与篮底留 1px 间隙 */
.hp-floating-cart-icon::after {
    content:"";
    position:absolute;
    left:1px;
    bottom:-6px;
    width:3px;
    height:3px;
    border-radius:50%;
    background:currentColor;
    box-shadow:7px 0 0 0 currentColor;
}


@media (max-width:1024px) {

    .hp-grid {
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

}


@media (max-width:760px) {

    .hp-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
    }

}


/* 中等宽度（平板 / 窄桌面）：品牌独占第一行，导航整体居中放到第二行。
   宽度不足以并排时，flex 会自由换行、把个别按钮甩到下一行，形成中间断层；
   这里改成明确的「品牌一行 + 导航一行」，换行由布局决定而不是由剩余宽度决定。
   注意：本区间与 ≤600px 手机布局、>1050px 桌面布局都不重叠，互不影响。 */
@media (min-width:601px) and (max-width:1050px) {

    .site-nav {
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:8px;
    }

    /* 第二行整体居中，不再靠右，也不会出现单个按钮掉行 */
    .site-nav-links {
        justify-content:center;
        gap:6px;
    }

    /* 略微收紧左右内边距（上下仍为 0）：
       六个入口在 601px 这类最窄宽度下（含滚动条占位）仍能保持同一行，
       不会掉到第三行、也不会横向滚动；
       触控高度仍由 .site-nav-link 的 min-height:44px 保证，未缩小按钮高度 */
    .site-nav-links .site-nav-link {
        padding-left:10px;
        padding-right:10px;
    }

}


@media (max-width:600px) {

    #page-nav.has-site-nav {
        /* 手机端 body padding 为 12px：12 + 8 = 20px；
           纵向 padding 取对称值（6 + 6），内容垂直居中，顶栏更紧凑 */
        margin-left:-20px;
        margin-right:-20px;
        margin-top:-20px;
        padding-left:20px;
        padding-right:20px;
        padding-top:6px;
        padding-bottom:6px;
    }

    .site-nav {
        flex-direction:column;
        align-items:stretch;
        gap:6px;
        padding:4px 0;
    }

    .site-nav-tagline {
        display:none;
    }

    .site-nav-logo {
        font-size:18px;
    }

    /* 展开态品牌文字：稍微放大 + 轻微右移。
       折叠态品牌整体 display:none，所以本规则只在展开态生效；
       右移用 transform 完成，不占用任何布局空间，也不会挤到右侧按钮。 */
    #page-nav:not(.is-nav-collapsed) .site-nav-logo {
        font-size:20px;
        transform:translateX(4px);
    }

    .site-nav-links {
        justify-content:flex-start;
        /* 给右上角绝对定位的折叠箭头留出通道：
           52px = 箭头 44px + 与按钮的 8px 间距，
           与箭头原先在流内占用的宽度一致，因此不会新增换行，
           同时保证箭头任何时候都不会压到按钮 */
        padding-right:52px;
    }

    /* 折叠箭头：移出 flex 排版流，绝对定位到手机端导航右上角，
       不再占用 flex 项、不参与换行；浅灰低调配色，触控区仍为 44×44 */
    .site-nav-toggle {
        position:absolute;
        top:6px;
        right:20px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:44px;
        min-width:44px;
        min-height:44px;
        margin:0;
        padding:0;
        border:none;
        background:transparent;
        color:#aab2bd;
        font-size:18px;
        line-height:1;
        cursor:pointer;
    }


    .site-nav-toggle:hover {
        color:#8b93a1;
        background:#f5f7fa;
    }


    .site-nav-toggle:active {
        color:#7a8599;
    }


    .site-nav-toggle:focus-visible {
        outline:none;
        color:#8b93a1;
        border-radius:10px;
        box-shadow:0 0 0 3px rgba(31,79,143,.18);
    }


    .site-nav-toggle-icon {
        display:block;
        font-size:24px;
        line-height:1;
        position:relative;
        /* 字体字符不再显示（保留它撑出的 24px 行盒，因此已调好的偏移不受影响），
           箭头改由下面的 ::before 用 CSS 线条绘制，与返回顶部按钮同一套画法 */
        color:transparent;
        /* 图案整体上移 8px：折叠态与展开态共用这一个定位值，
           两态的箭头盒都正好框住所在行的按钮，因此图案与按钮的相对位置一致。 */
        top:-8px;
    }


    /* CSS 线条箭头：两条边框旋转 45°，细线 + 灰蓝色，与 .hp-back-top-icon 一致。
       基础（展开态）是向上箭头；margin-top 同时承担「旋转后视觉重心补偿」与本次
       「展开态再向上 5px」（-2px → -7px），水平方向仍由 margin-left -6px 居中。 */
    .site-nav-toggle-icon::before {
        content:"";
        position:absolute;
        left:50%;
        top:50%;
        width:12px;
        height:12px;
        margin:-7px 0 0 -6px;
        border-top:2px solid #8b93a1;
        border-left:2px solid #8b93a1;
        transform:rotate(45deg);
    }


    /* 折叠态：同一套画法换成向下箭头（右下两条边框），补偿方向随之反向，
       并在原基础上向下 7px（-10px → -3px） */
    #page-nav.is-nav-collapsed .site-nav-toggle-icon::before {
        margin:-3px 0 0 -6px;
        border-top:none;
        border-left:none;
        border-bottom:2px solid #8b93a1;
        border-right:2px solid #8b93a1;
    }


    /* 仅折叠态：只调整「⌄」图案本身的垂直偏移（当前为向上 8px）。
       这是 .site-nav-toggle-icon 的覆盖规则，不动 .site-nav-toggle，
       所以按钮盒位置（top:10px / right:20px）、44×44 点击区、展开态与桌面端都不受影响。 */
    #page-nav.is-nav-collapsed .site-nav-toggle-icon {
        top:-8px;
    }

    /* 仅展开态：图案在共用值基础上再向下 11px（-8px → 3px）。
       同样是 .site-nav-toggle-icon 的覆盖规则，不动 .site-nav-toggle，
       所以按钮盒位置（top:auto / bottom:9px / right:20px）、44×44 点击区、
       折叠态图案与桌面端都不受影响。 */
    #page-nav:not(.is-nav-collapsed) .site-nav-toggle-icon {
        top:3px;
    }


    /* 折叠态：隐藏品牌 / 个人中心 / 退出登录。
       用 display:none 真正移出可见结构、Tab 顺序与可访问性树；
       登录 / 注册没有 data-nav-key="user" 也没有 #nav-logout，不会被误隐藏。 */
    #page-nav.is-nav-collapsed .site-nav-brand,
    #page-nav.is-nav-collapsed [data-nav-key="user"],
    #page-nav.is-nav-collapsed #nav-logout {
        display:none;
    }

    /* 折叠态：保留的入口等分一行宽度。
       flex-basis:0 + min-width:0 + nowrap 三者配合，
       数学上保证永远排在同一行（不会被 flex shrink 挤到第二行）；
       横向 padding 收到 8px、gap 收到 4px，为等分挤出空间。
       未登录时保留的是 首页 / 登录 / 注册，同样等分一行，布局依然合理。 */
    #page-nav.is-nav-collapsed .site-nav-links {
        flex-wrap:nowrap;
        gap:4px;
    }


    #page-nav.is-nav-collapsed .site-nav-links .site-nav-link {
        flex:1 1 0;
        min-width:0;
        box-sizing:border-box;
        font-size:14px;
        padding-left:8px;
        padding-right:8px;
    }

    /* 折叠态：只把「我的订单 / 我要卖书」换成短文字（订单 / 卖书）。
       购物车、首页、个人中心没有 shortLabel 配置，输出与显示都不受影响。 */
    #page-nav.is-nav-collapsed .site-nav-label-full {
        display:none;
    }


    #page-nav.is-nav-collapsed .site-nav-label-short {
        display:inline;
    }


    /* 折叠态只有一行按钮，去掉 .site-nav 的 60px 最小高度：
       那 16px 余量会被 justify-content:space-between 全部留在底部，
       导致整排内容偏高。改为 44px 后上下留白各 10px，内容真正垂直居中。 */
    #page-nav.is-nav-collapsed .site-nav {
        min-height:44px;
    }


    /* 折叠态箭头与按钮行同排：按钮行位于 10..54px，箭头盒子同步放到 10..54px，
       两者 44px 的视觉中心落在同一条水平线上。
       本规则只匹配折叠态；展开态的位置由下面 :not(.is-nav-collapsed) 那条负责。 */
    #page-nav.is-nav-collapsed .site-nav-toggle {
        top:10px;
    }

    /* 展开态：箭头移到整个白色导航区域的右下角（折叠态位置完全不受影响）。
       必须把 top 复位为 auto，否则 top 与 bottom 同时生效会纵向拉伸箭头盒子；
       bottom:9px = nav 下内边距 6px + .site-nav 下内边距 4px - 1px 下边框，
       正好让箭头盒底边与最后一行导航按钮的底边齐平；
       箭头仍位于右侧 52px 预留通道内，不会压到任何按钮或文字。 */
    #page-nav:not(.is-nav-collapsed) .site-nav-toggle {
        top:auto;
        bottom:9px;
    }

    .hp-card-img {
        height:160px;
    }

    .hp-search-box {
        gap:8px;
    }

    /* 手机端：返回顶部按钮贴近右下角（fixed 相对视口，不产生横向溢出） */
    .hp-back-top {
        right:16px;
        bottom:20px;
    }

}


/* 窄屏：筛选控件两列排布，价格区间独占一行，避免输入框被挤到无法输入 */
@media (max-width:480px) {

    .hp-filter-field {
        flex:1 1 calc(50% - 6px);
    }

    .hp-filter-field-price {
        flex:1 1 100%;
    }

}


/* 中间宽度（大屏手机横屏 / 窄平板）：专业、成色、排序维持正常排列，
   价格区间独占一整行，避免两个价格输入框被挤成很窄的一格。
   区间与 ≤480px、≥769px 互不重叠，手机与桌面布局不受影响。 */
@media (min-width:481px) and (max-width:768px) {

    .hp-filter-field-price {
        flex:1 1 100%;
    }

}


/* 移动端（≤768px）：价格区间与「重置筛选」并排 ——
   价格另起一行（专业 / 成色 之后），重置按钮贴在该行最右侧。
   放在上面两条「价格独占整行」的规则之后，用来覆盖它们。
   flex-basis 用 calc(100% - 110px)：换行计算时它一定放不下、
   于是另起一行，同时给右边的重置按钮（约 81px + 间距）留出位置；
   basis:auto 会按内容最大宽度算，容易被挤到下一行且不稳定。
   重置按钮隐藏时（无筛选条件），价格自然独占整行。 */
@media (max-width:768px) {

    .hp-filter-field-price {
        flex:1 1 calc(100% - 110px);
        min-width:0;
    }

    .hp-filter-reset {
        flex:0 0 auto;
        margin-left:auto;
    }

}


/* 移动端（≤768px）：高级筛选项默认收起，「筛选」按钮与排序固定可见。
   桌面端 ≥769px 不进入本区间，布局与折叠功能上线前完全一致。

   让两个按钮位置固定、不被展开内容挤走，只用 flex 属性的最小改动：
   · DOM 里「筛选」排在最前（第 1 个）、「排序」排在后（第 5 个），
     两者都不设 order，所以在 order 为 0 的这一组里按 DOM 顺序落在第一行；
   · 高级筛选项统一 order:2，永远排在按钮之后；
   · 展开时用 ::after 插一个「整行宽 + 零高度」的占位（order:1），
     把按钮行和高级筛选项强制分开，按钮绝不会被重新排布；
   · 占位只在展开态生成，收起时 content:none，不占位、不加高度。 */
@media (max-width:768px) {

    /* 「筛选」按钮在手机端显示（基础样式为 display:none，桌面端不显示） */
    .hp-filter-toggle {
        display:inline-flex;
    }

    /* 顶部按钮顺序：[默认排序] [筛选]。
       DOM 里排序排在筛选之后，用 order:-1 把它提到筛选左边即可；
       两者都固定在第一行，不参与展开内容的排布。 */
    .hp-filter-field-sort {
        order:-1;
    }

    .hp-filter-bar.is-open .hp-filter-fields::after {
        content:"";
        order:1;
        flex:0 0 100%;
        height:0;
    }

    /* 高级筛选项统一排在按钮行之后（按钮自身不参与排序） */
    .hp-filter-field-major,
    .hp-filter-field-condition,
    .hp-filter-field-price,
    .hp-filter-reset {
        order:2;
    }

    /* 收起状态：隐藏专业 / 成色 / 价格区间三个筛选项（原有折叠逻辑保持不变） */
    .hp-filter-bar:not(.is-open) .hp-filter-field-major,
    .hp-filter-bar:not(.is-open) .hp-filter-field-condition,
    .hp-filter-bar:not(.is-open) .hp-filter-field-price {
        display:none;
    }

}


/* 移动端紧凑化（≤768px）：压缩搜索区 / 筛选栏 / 教材卡片的高度。
   思路是优先砍留白、内边距和空行，再小幅下调字号，
   图片、标题、作者、专业年级、售价、库存、加购入口全部保留。
   桌面端 ≥769px 不进入本区间，布局与字号完全不变。 */
@media (max-width:768px) {

    /* ---- 搜索区 ----
       V0.9.3-A：上下内边距 9px 收到 6px（搜索框自身仍 38px，可点高度不变），
       整块高度约 57px → 52px */
    .hp-search-section {
        margin-top:6px;
        padding:6px 12px;
        border-radius:12px;
    }

    /* 字号仍保持 16px：低于 16px 时 iOS Safari 聚焦输入框会自动放大页面 */
    #hp-search {
        min-height:38px;
        padding:0 12px;
    }

    .hp-search-clear {
        min-height:38px;
        padding:0 12px;
        font-size:14px;
    }


    /* ---- 求书大厅入口 ----
       V0.9.3-A：视觉高度 44px → 36px（上下降到 4px），
       文字与配色沿用原有蓝色体系，整行仍是可点区域（≥36px） */
    .hp-entry-bar {
        margin-top:8px;
    }

    .hp-entry-link {
        min-height:36px;
        padding:4px 12px;
    }


    /* ---- 筛选栏 ---- */
    .hp-filter-bar {
        /* V0.9.3-A：上下内边距 10px → 4px、上边距 8px → 6px，
           两行按钮（各 30px）高度不变，整块高度约 86px → 74px */
        margin-top:6px;
        padding:4px 10px;
        border-radius:12px;
    }

    .hp-categories {
        gap:6px;
    }

    .hp-chip {
        min-height:34px;
        padding:0 14px;
    }

    .hp-filter-fields {
        margin-top:8px;
        gap:8px 10px;
    }

    .hp-filter-field {
        gap:4px;
    }

    .hp-filter-label {
        font-size:12px;
    }

    .hp-filter-input {
        min-height:38px;
        padding:0 10px;
    }

    /* 排序与筛选按钮同高，保持「排序在左、筛选在右」不变 */
    .hp-filter-toggle {
        min-height:38px;
        padding:0 12px;
        font-size:14px;
    }

    .hp-filter-reset {
        min-height:38px;
        padding:0 12px;
        font-size:14px;
    }


    /* ---- 数量提示与列表 ---- */
    .hp-count {
        margin:8px 2px 0;
    }

    .hp-grid {
        margin-top:8px;
        gap:8px;
    }


    /* ========================
       V0.8.2-04-D 筛选栏（完整文字版）
       [全部教材] [官方直售] [学生出售]     [筛选⌄] [默认排序⌄]

       实现要点（放在本媒体查询末尾，覆盖上面的紧凑规则）：
         · 筛选栏本身是 flex 行；来源按钮靠左，「筛选 + 排序」整组 margin-left:auto 靠右；
         · .hp-filter-fields 用 display:contents 让内部控件直接成为该行的成员，
           展开的高级筛选项按自身 flex-basis 自动换到下一行，
           因此展开时「筛选 / 排序」的位置完全不动；
         · 来源按钮在移动端也显示完整文案（全部教材 / 官方直售 / 学生出售）。
       ======================== */
    .hp-filter-bar {
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        /* 行间距 5px → 4px（V0.9.3-A）：第一行标签与第二行按钮更紧凑，
           列间距保持 6px 不变，展开态的高级筛选项排布不受影响 */
        gap:4px 6px;
    }

    .hp-categories {
        flex:0 1 auto;
        min-width:0;
        flex-wrap:nowrap;
        margin-top:0;
        gap:4px;
    }

    .hp-filter-fields {
        display:contents;
    }

    /* ========================
       V0.8.2-05：展开后的高级筛选面板整体变矮
         · 输入框 / 选择框高度 38px → 34px
         · 控件内文字 15px → 13px
         · 标签文字 → 12px
         · 筛选项之间的垂直间距收紧
       ======================== */
    .hp-filter-field-major,
    .hp-filter-field-condition,
    .hp-filter-field-price {
        gap:3px;
    }

    .hp-filter-field-major .hp-filter-input,
    .hp-filter-field-condition .hp-filter-input,
    .hp-filter-field-price .hp-filter-input {
        min-height:34px;
        padding:0 8px;
        font-size:13px;
    }

    .hp-filter-field-major .hp-filter-label,
    .hp-filter-field-condition .hp-filter-label,
    .hp-filter-field-price .hp-filter-label {
        font-size:12px;
    }

    /* 「筛选 + 排序」整组：手机端靠左显示（V0.8.3-04 从「靠右」改为「靠左」），
       整组仍是不可拆分的整体：来源按钮占满第一行后，它自然换到第二行最左侧；
       宽度足够时它就紧跟在来源按钮右边，不会跳到行尾。
       桌面端 ≥769px 不进入本媒体查询，布局完全不变 */
    .hp-filter-quick {
        display:flex;
        flex:0 0 auto;
        align-items:center;
        gap:6px;
        margin-left:0;
    }

    /* 来源按钮：完整文案，宽 78px、高 30px */
    .hp-chip {
        flex:0 0 auto;
        width:78px;
        min-height:30px;
        padding:0 4px;
        font-size:14px;
        font-weight:500;
        box-sizing:border-box;
    }

    /* 筛选按钮：宽 58px，点击逻辑不变 */
    .hp-filter-toggle {
        order:0;
        flex:0 0 auto;
        width:58px;
        min-height:30px;
        padding:0;
        font-size:14px;
        font-weight:500;
        box-sizing:border-box;
        /* V0.8.2-05：文字与箭头靠 flex 居中（不用 translateY 微调） */
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

    /* 排序：宽 90px，「默认排序」等完整文案不截断 */
    .hp-filter-field-sort {
        order:0;
        flex:0 0 auto;
    }

    .hp-filter-field-sort .hp-filter-label {
        display:none;
    }

    .hp-filter-field-sort .hp-filter-input {
        width:90px;
        min-height:30px;
        padding:0 6px;
        font-size:14px;
        font-weight:500;
        box-sizing:border-box;
    }


    /* ========================
       V0.8.3-05 手机端「默认排序」文字不被箭头遮挡
         · 实测：控件固定 90px，文字可视区只有 61px
           （90 − 左内边距 6 − 右内边距 22，右侧 22px 是给自绘箭头预留的），
           「默认排序」4 个汉字在部分机型字体下会顶到箭头、看起来被遮挡/截断；
         · 这里把控件加宽到 98px（文字区 61 → 69px），箭头位置保持不变，
           同时锁死按钮与控件的收缩与换行，保证文案始终完整；
         · 本块位于 ≤768px 媒体查询内，桌面端（≥769px）尺寸与布局完全不变。
       ======================== */

    .hp-filter-quick {
        gap:8px;
    }

    .hp-filter-quick button {
        white-space:nowrap;
        flex-shrink:0;
    }

    #hp-sort {
        min-width:82px;
        width:98px;
    }


    /* ========================
       V0.8.3-08 手机端统一「页面内下拉菜单」（排序 / 专业 / 成色共用）
         · 原生 select 只在手机端隐藏外观（仍保留在 DOM 里：值回填、change 事件、
           无障碍备用都靠它），交互改成 button + 页面内下拉面板；
         · 触发器 / 面板 / 菜单项各只有一套类名，三个下拉零重复；
         · 本块全部写在 ≤768px 内，桌面端（≥769px）继续使用原生 select。
       ======================== */

    /* 下拉字段容器成为菜单的定位参照 */
    .hp-inline-select {
        position:relative;
    }

    /* 隐藏原生 select（只隐藏外观，取值与 change 事件不受影响） */
    .hp-inline-select .hp-filter-input {
        display:none;
    }

    /* 触发器：与同行的选择框同高同圆角、同箭头（同一张 SVG、同一位置） */
    .hp-inline-trigger {
        display:inline-flex;
        align-items:center;
        /* 覆盖全局 button{width:100%; margin-top:20px}（style.css 顶部）：
           去掉那 20px 上边距，否则会和同行控件错开一行 */
        align-self:flex-start;
        width:100%;
        min-width:0;
        margin:0;
        min-height:34px;
        padding:0 22px 0 8px;
        font-size:13px;
        font-weight:500;
        color:#1f2733;
        background-color:white;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat:no-repeat;
        background-position:right 12px center;
        background-size:10px 6px;
        border:1px solid #d9e2ef;
        border-radius:10px;
        box-sizing:border-box;
        text-align:left;
        white-space:nowrap;
        cursor:pointer;
    }

    /* 排序触发器沿用 V0.8.3-05 的紧凑尺寸（与「筛选」按钮同高 30px） */
    .hp-filter-field-sort .hp-inline-trigger {
        width:auto;
        min-width:98px;
        min-height:30px;
        font-size:14px;
    }

    .hp-inline-trigger:focus-visible {
        outline:none;
        border-color:#1f4f8f;
        box-shadow:0 0 0 3px rgba(31,79,143,.12);
    }

    /* 箭头由背景图绘制，占位元素不显示 */
    .hp-inline-trigger-icon {
        display:none;
    }

    /* 展开面板：浮层显示，不撑高筛选栏 */
    .hp-inline-menu {
        display:block;
        position:absolute;
        top:calc(100% + 6px);
        left:0;
        min-width:100%;
        z-index:40;
        padding:4px;
        background:white;
        border:1px solid #e4eaf2;
        border-radius:10px;
        box-shadow:0 8px 20px rgba(20,50,95,.14);
        box-sizing:border-box;
    }

    .hp-inline-menu[hidden] {
        display:none;
    }

    /* 面板内每一项：整行可点、左对齐、不换行、紧凑行高 */
    .hp-inline-option {
        display:block;
        width:100%;
        margin:0;
        padding:8px 10px;
        /* 覆盖 ≤600px 的全局 button{min-height:48px}：
           菜单项保持 36px 紧凑行高，项多时也不会占掉大半屏 */
        min-height:36px;
        line-height:1.2;
        background:transparent;
        border:0;
        border-radius:8px;
        font-size:14px;
        font-weight:500;
        color:#1f2733;
        text-align:left;
        white-space:nowrap;
        cursor:pointer;
    }

    .hp-inline-option:hover {
        background:#f4f7fc;
    }

    /* 当前选中项：沿用全站浅蓝选中态 */
    .hp-inline-option[aria-selected="true"] {
        background:#eaf2fb;
        color:#1f4f8f;
        font-weight:600;
    }


    /* ========================
       V0.8.3-07 手机端「重置筛选」与相邻控件对齐（只改高度 / 字号 / 对齐）
         · 收起态：从 38px 降到 30px，与同一行的「筛选」按钮等高、垂直居中，
           两个按钮视觉完全对齐；
         · 展开态：高度 34px + 圆角 10px 与「价格区间」输入框一致，
           并用 align-self:flex-end 让底边与输入框对齐（原来中心对齐、高出 8px）；
         · 左右位置不变（仍由 margin-left:auto 贴该行最右侧），
           也不改展开/收起动画与折叠逻辑。
       ======================== */

    /* 收起态：与「筛选」按钮同高 */
    .hp-filter-bar:not(.is-open) .hp-filter-reset {
        min-height:30px;
        padding:0 12px;
        font-size:14px;
    }

    /* 展开态：与「价格区间」输入框同高、同圆角、底边对齐 */
    .hp-filter-bar.is-open .hp-filter-reset {
        min-height:34px;
        padding:0 10px;
        font-size:13px;
        border-radius:10px;
        align-self:flex-end;
    }


    /* ========================
       V0.9.3-C 筛选区交互视觉（仅手机端）
         · 默认态：来源标签保持白色药丸（次要信息），
           「筛选 / 排序」统一为浅蓝「工具」外观 + 更清晰的边框，
           两者底色一致，与白色标签形成明确的背景区分；
         · 三者的尺寸（标签 78×30、筛选 58×30、排序 98×30）全部不变，
           只改颜色，因此首屏商品位置不受影响；
         · 激活态：高级筛选生效时按钮底色加深 + 右上角小红点，
           收起状态下也能一眼看出「有筛选条件」；
         · 展开态：高级筛选项淡入 + 轻微下移（只动 opacity / transform，
           不参与布局计算，所以不会产生页面跳动）；
         · 浮层抬到商品卡片之上，且筛选栏自身建立层叠上下文，
           保证下拉菜单不会被卡片盖住。
       ======================== */

    /* 来源标签：只把边框提亮一档，让药丸形状更明确。
       必须显式排除选中态：本规则在源码里晚于 .hp-chip-active，
       若不加 :not()，会把「全部教材」的实心蓝底覆盖成白底，
       而文字仍是白色 → 变成看不见的空按钮。 */
    .hp-chip:not(.hp-chip-active) {
        border-color:#cbd9ea;
    }

    /* 补回原有 hover 反馈（本规则在前一条之后，避免被同优先级覆盖） */
    .hp-chip:not(.hp-chip-active):hover {
        border-color:#1f4f8f;
        color:#1f4f8f;
    }

    /* 「筛选」按钮：浅蓝工具外观（尺寸由上面的规则负责，这里只改颜色） */
    .hp-filter-toggle {
        background:#e9f1fb;
        border-color:#c2d6ee;
        color:#1f4f8f;
    }

    /* 「排序」触发器：与「筛选」同一套工具外观，两者视觉成对 */
    .hp-filter-field-sort .hp-inline-trigger {
        background-color:#e9f1fb;
        border-color:#c2d6ee;
        color:#1f4f8f;
    }

    /* 高级筛选已生效：底色加深 + 右上角红点（收起态同样可见） */
    .hp-filter-toggle.is-active {
        position:relative;
        background:#d3e5fa;
        border-color:#8fb4dd;
        color:#123a6b;
        font-weight:700;
    }

    .hp-filter-toggle.is-active::after {
        content:"";
        position:absolute;
        top:4px;
        right:5px;
        width:5px;
        height:5px;
        border-radius:50%;
        background:#d4380d;
    }

    /* 工具按钮按下反馈（只动 transform，不影响布局与高度） */
    .hp-filter-toggle,
    .hp-filter-field-sort .hp-inline-trigger {
        transition:transform .12s ease, background-color .16s ease, border-color .16s ease;
    }

    .hp-filter-toggle:active,
    .hp-filter-field-sort .hp-inline-trigger:active {
        transform:scale(.97);
    }

    /* 下拉触发器展开态：与「筛选」激活态呼应的边框反馈 */
    .hp-inline-trigger[aria-expanded="true"] {
        border-color:#8fb4dd;
        box-shadow:0 0 0 3px rgba(31,79,143,.10);
    }

    /* 展开动画：只动 opacity / transform，布局高度不变 → 无页面跳动 */
    @keyframes hpFilterReveal {
        from { opacity:0; transform:translateY(-4px); }
        to   { opacity:1; transform:none; }
    }

    .hp-filter-bar.is-open .hp-filter-field-major,
    .hp-filter-bar.is-open .hp-filter-field-condition,
    .hp-filter-bar.is-open .hp-filter-field-price {
        animation:hpFilterReveal .18s ease-out;
    }

    /* 浮层不被商品卡片盖住：position:relative 不带偏移，不改变布局 */
    .hp-filter-bar {
        position:relative;
        z-index:50;
    }

    .hp-inline-menu {
        z-index:60;
    }


}


@media (max-width:420px) {

    /* 小屏继续沿用 ≤760px 的两列，不再退回单列 */
    .hp-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    /* 窄列宽下按钮改用 border-box：内容盒 100% 再加 padding 会超出卡片被裁切 */
    .hp-card-add {
        box-sizing:border-box;
        padding-left:12px;
        padding-right:12px;
    }

}


/* ========================
   移动端横向教材卡片（≤768px）
   左图 + 右信息：图片固定在左，标题 / 作者 / 专业年级 / 售价 / 原价 / 库存 / 加购全部保留，
   加购按钮与价格同排，不再独占整行。
   必须放在 ≤420px 之后：手机单列的列数与按钮内边距需要覆盖前面的同名规则。
   桌面端 ≥769px 不进入本区间，卡片结构、尺寸与字号完全不变。
   ======================== */
@media (max-width:768px) {

    /* 横向卡片需要每张卡更宽：窄平板两列，手机（≤480px）单列整行一张 */
    .hp-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    /* 卡片：左图 + 右信息的横向 flex。
       右侧信息块内部再换行堆叠：书名 / 作者 / 专业·年级 / 价格+库存+加购。
       价格始终在图片右侧的信息块里，不会落到图片下方。 */
    .hp-card {
        flex-direction:row;
        /* 拉伸：信息块与卡片等高（高度由 110px 图片决定），
           购买行才能贴到信息块最底部 */
        align-items:stretch;
        gap:10px;
        padding:10px 12px;
        border-radius:10px;
    }

    /* 图片：左侧固定缩略图，与右侧书名顶部对齐 */
    .hp-card-img {
        flex:0 0 90px;
        width:90px;
        height:110px;
        min-height:0;
        border-radius:8px;
        /* V0.9.4：浅色渐变兜底 —— 缩略图未解码 / 懒加载未触发时也是「一块有质感的占位」，
           图片出来后本身会盖住底色；contain 的左右留白也融入底色。尺寸（90×110）不变。 */
        background:linear-gradient(180deg,#f5f8fc 0%,#e9eff7 100%);
        /* V0.9.4：无图占位带 1px 虚线框，content-box 下会把卡片顶高 1.3px；
           改成 border-box 后边框算在 110px 之内，无图卡片与有图卡片等高（实测均 131px） */
        box-sizing:border-box;
        object-fit:contain;
    }

    /* 无图 / 图片加载失败：图片图标 + 文案，与缩略图同尺寸同外框，
       高度由 .hp-card-img 的固定 110px 决定，图标 + 文字远小于该高度 → 卡片高度不变 */
    .hp-card-img-empty {
        flex-direction:column;
        gap:4px;
        font-size:12px;
        background:#f6f8fc;
        border:1px dashed #dde5f0;
        color:#9aa4b5;
    }

    .hp-card-img-empty::before {
        content:"";
        width:22px;
        height:22px;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4b5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E");
        background-repeat:no-repeat;
        background-position:center;
        background-size:22px 22px;
        opacity:.8;
    }

    /* V0.9.4：空结果态（搜索无结果 / 筛选无结果）加一个淡色放大镜图标，
       与「加载中」的转圈区分开；只加装饰，不改内边距和文案 */
    .hp-empty-noresult::before {
        content:"";
        display:block;
        width:38px;
        height:38px;
        margin:0 auto 10px;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab4c4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E");
        background-repeat:no-repeat;
        background-position:center;
        background-size:38px 38px;
        opacity:.9;
    }

    /* 右侧信息块：换行堆叠，内边距由 .hp-card 统一提供
       V0.9.2-G 实测说明：若改成「纵向 flex + .hp-card-footer{margin-top:auto}」，
       两个 .hp-card-meta（作者 / 专业·年级）会各自占一行、卡片反而长高约 19px，
       与"V0.9.2-D 合并同一行 + 卡片高度约 140px"的目标冲突。
       因此保持「横向 flex-wrap + align-content:space-between」：
       信息自上而下堆叠、最后一行（价格 + 加购）贴卡片底部，
       效果等价且不增加高度，也无需改 DOM。 */
    .hp-card-body {
        flex:1 1 auto;
        min-width:0;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        /* 书名 / 作者 贴顶，购买行贴底 */
        align-content:space-between;
        align-items:center;
        /* V0.9.2-H：行间距收紧到 2px（作者 ↔ 已售/浏览/库存 ↔ 价格 之间更紧凑） */
        gap:2px 4px;
        padding:0;
    }

    /* 书名 + 来源标签：图片右侧第一行，两者同行（书名两行截断、标签贴右） */
    .hp-card-title-row {
        order:1;
        flex:0 0 100%;
        /* 固定两行书名的高度（15px × 1.3 × 2 = 39px）：
           一行标题的卡片与两行标题保持一致，图片兜底产生的多余高度留在书名区，
           不会撑开「作者 ↔ 已售/浏览/库存 ↔ 价格」之间的间距（电商卡片常见做法） */
        min-height:39px;
        gap:4px;
    }

    .hp-card-title-row .hp-card-title {
        order:0;
        flex:1 1 auto;
        min-width:0;
        font-size:15px;
        /* V0.9.3-B 层级：书名颜色再深一档 + 显式 700，作为卡片第一视觉
           （字号 15px 不变；对比度 15.04 → 16.77，辅助信息仍在 3:1 以上） */
        font-weight:700;
        color:#151e2b;
        line-height:1.3;
    }

    /* 作者 / 专业·年级：V0.9.2-D 起手机端并到同一行（「作者 / 专业·年级」）
       两段各自作为整体排在信息区第二行；放不下时专业·年级自然换到下一行；
       min-width:0 保证极长文本也不会撑出横向滚动。
       （桌面端不使用这些 flex 规则，仍是各占一行，完全不受影响） */
    .hp-card-meta {
        order:2;
        flex:0 1 auto;
        min-width:0;
        font-size:12px;
        /* V0.9.3-B：作者 / 专业·年级 灰度更浅一档、行高收紧，
           与书名拉开差距，保持在辅助信息层级（对比度 3.35，仍 ≥3:1） */
        line-height:1.3;
        color:#838d9e;
    }

    /* 手机端在「作者」后补分隔符，形成「作者 / 专业·年级」 */
    .hp-card-meta-author::after {
        content:" / ";
        color:#b6c0cf;
    }

    /* V0.9.2：手机端统计信息已移入 .hp-card-stats（已售 / 库存 / 浏览 三行），
       行内热度（👀 / 🔥）只在桌面端呈现，手机端隐藏，避免同一信息出现两次。
       （下面几条图标/标签规则仅在桌面端生效，保留以便随时回退） */
    .hp-card-heat {
        display:none;
    }

    /* 图标单独放大一档提升辨识度：line-height:1 保证行盒仍由 12px 的 meta 决定，
       不会把这一行顶高 */
    .hp-card-heat-icon {
        font-size:12px;
        line-height:1;
    }

    .hp-card-heat-label {
        display:none;
    }

    .hp-card-heat-sep {
        margin:0 3px;
    }


    /* 来源/成色标签：位于书名行内，靠右且不撑满整行 */
    .hp-card-title-row .hp-card-badges {
        order:0;
        flex:0 0 auto;
        gap:4px;
        margin-top:1px;
    }

    .hp-card-source,
    .hp-card-condition {
        padding:1px 8px;
        font-size:11px;
    }


    /* V0.9.3-B：官方直售标签只微调底色层级（更浅一档），
       位置、尺寸、文字颜色与对比度全部不变（#1f4f8f 在新底色上仍 ≥8:1） */
    .hp-card-title-row .hp-card-source.is-official {
        background:#eef5fd;
    }


    .hp-card-avatar {
        width:16px;
        height:16px;
        margin-right:3px;
        font-size:10px;
    }

    /* 卖家身份：与其它 meta 同行序，但只占一行，避免把手机卡片撑高 */
    .hp-card-seller {
        order:2;
        flex:0 0 100%;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    /* ========================
       V0.9.2 卡片三层结构（手机端）
         第一层 识别：书名（最多两行）+ 来源标签 / 作者 / 专业·年级 —— 保持原样
         第二层 信任：已售 / 库存 / 浏览 纵向三行、右对齐，位于购买区上方
         第三层 转化：价格 + 加入购物车 固定在卡片底部同一水平线
         说明：结构由 app.js 卡片模板提供（.hp-card-stats / .hp-card-footer），
               桌面端由基础区的 display:contents + order 规则保持原布局。
       ======================== */

    /* 第二层（商品状态：库存）＋ 第三层（购买参考：已售 / 浏览）
       V0.9.2-H 重排：
         · .hp-card-stats 在手机端也用 display:contents 透明化 ——
           库存 / 已售 / 浏览 成为 .hp-card-body 的直接 flex 项，
           因此可以自由调整三项的先后与所在行，全程只改 CSS，
           DOM 与 app.js 都不动；
         · 统计块仍是独占一行的横向容器（flex:0 0 100%），
           内部用 order 排成「已售 → 浏览 …… 库存」；
         · 已售 / 浏览保持左对齐（左右位置不变），库存靠该行最右侧；
         · 购买区紧接其后，仍是卡片最低一行；
         · 三项合并到一行后整体少一行高度，价格行底边得以与左侧图片底边齐平。
       三项统一 10px / 行高 1.1 / 同颜色 / 同字重，属于辅助信息。 */
    .hp-card-stats {
        order:4;
        flex:0 0 100%;
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        align-items:baseline;
        gap:4px;
        font-size:10px;
        line-height:1.1;
        color:#7a8599;
    }

    /* 通用：块级 + 不换行 + 统一的辅助信息样式
       （display 覆盖基础区为桌面端设的 display:none） */
    .hp-card-stat {
        display:block;
        white-space:nowrap;
        font-size:10px;
        line-height:1.1;
        /* V0.9.3-B：标签灰度统一（三项一致），对比度 3.18，仍 ≥3:1 */
        color:#8791a3;
    }

    /* 库存：整行宽 + 右对齐；字号 / 行高 / 颜色 / 字重与已售、浏览完全一致 */
    .hp-card-stat-stock {
        order:3;
        flex:0 0 auto;
        /* 与「已售 / 浏览」同一行，并靠该行最右侧（右边缘与购买区对齐） */
        margin-left:auto;
        text-align:left;
        font-size:10px;
        line-height:1.1;
        font-weight:400;
        /* 与已售 / 浏览完全同色，三者视觉一致 */
        color:#8791a3;
    }

    /* 已售 / 浏览：紧贴购买区上方；同一行、左对齐
       （不加 margin-left:auto，两项从信息区左边缘起排，
         与下方价格行的左边缘对齐 —— V0.9.2-H 调整） */
    .hp-card-stat-sales {
        order:1;
    }

    .hp-card-stat-views {
        order:2;
    }

    /* 数值比标签略深，保证一眼能读到数字 */
    .hp-card-stat-value {
        /* V0.9.3-B：数字轻微增强（5.40 → 5.82），
           但仍是 10px 小字，远不抢 19px 红价的视觉权重 */
        color:#5a6678;
        font-weight:600;
    }

    /* V0.9.4：缺货（暂时缺货）在手机端改用「加粗暗红文字」，
       不再用 12px 药丸 —— 药丸的内边距会把 10px 的统计行顶高，
       进而撑高卡片。文字方案与「库存 99 本」保持同一行高（10px/1.1），
       卡片高度零影响；颜色仍是全站缺货红，视觉明确但不抢 19px 红价。 */
    .hp-stock-out {
        display:inline;
        padding:0;
        background:none;
        border-radius:0;
        font-size:10px;
        line-height:1.1;
        font-weight:600;
        color:#a8071a;
    }

    /* 第三层：购买区（价格 + 加购）同一行，固定在卡片底部
       （贴底由 .hp-card-body 的 align-content:space-between 实现：
        最后一行自动对齐信息区底部，不受标题行数与作者长度影响） */
    .hp-card-footer {
        order:5;
        flex:0 0 100%;
        display:flex;
        align-items:center;
        gap:8px;
    }

    .hp-card-price-row {
        order:0;
        flex:1 1 auto;
        margin-top:0;
        gap:4px;
    }

    .hp-card-price {
        /* V0.8.2-08：手机端价格同样提高权重 */
        font-size:19px;
    }

    /* V0.9.4：原价继续弱于红价，但删除线要看得清 ——
       灰度从 #b6c0cf 提到 #98a3b3（白底约 3:1，可读），
       同时显式声明 1px 删除线；字号 / 行高 / 间距都不动，价格区不增高、不换行 */
    .hp-card-old {
        font-size:11px;
        color:#98a3b3;
        text-decoration:line-through;
        text-decoration-thickness:1px;
        text-decoration-color:#98a3b3;
    }

    /* 加购按钮：与价格同一水平线、贴右下
       V0.9.2-D：视觉收到 72×30（padding 0 6px + 字号 12px），
       同时用透明 ::before 把实际触控区域扩到 44px 高，视觉不变、点击更好点 */
    .hp-card-add {
        order:0;
        flex:0 0 auto;
        margin-top:0;
        /* 与价格同一行时，auto 把按钮顶到该行最右侧 */
        margin-left:auto;
        position:relative;
        min-height:30px;
        width:auto;
        padding:0 6px;
        font-size:12px;
        border-radius:8px;
        white-space:nowrap;
    }

    /* 触控热区：向外扩 7px（30 + 7 + 7 = 44px 高），纯透明、不参与布局 */
    .hp-card-add::before {
        content:"";
        position:absolute;
        top:-7px;
        bottom:-7px;
        left:-6px;
        right:-6px;
    }

    /* V0.9.3-C：加购按钮按下反馈（按压缩放 + 底色加深）
       视觉尺寸 72×30 与 44px 热区均不变；transform 不参与布局，
       因此不会改变卡片高度，也不影响「价格 + 加购」同行结构。 */
    .hp-card-add {
        transition:transform .12s ease, background-color .12s ease;
        -webkit-tap-highlight-color:transparent;
    }

    .hp-card-add:active {
        background:#123a68;
        transform:scale(.96);
    }

}


/* 窄屏（≤375px）微调：把最后几个像素也抠出来，
   保证「价格 + 原价 + 加入购物车」在 360px 这类宽度下仍能同一行，
   避免按钮换行把卡片撑高；只改内边距与价格行间距，不动字号与结构 */
@media (max-width:375px) {

    .hp-card-price-row {
        gap:2px;
    }

    .hp-card-add {
        padding:0 6px;
    }

    /* V0.9.2：购买区改成 flex 行后，行间距也一并收紧 */
    .hp-card-footer {
        gap:4px;
    }

}


/* 手机：横向卡片整行一张 —— 两列时卡片只有 200~270px 宽，
   图片 + 价格 + 库存 + 加购挤不进同一行 */
@media (max-width:600px) {

    .hp-grid {
        grid-template-columns:minmax(0, 1fr);
    }

}


/* ========================
   商品详情页（detail-* 专属作用域）
   ======================== */

.detail-page {
    max-width:1100px;
    margin:0 auto;
}


/* 尺寸与视觉统一在「统一返回按钮」一节；这里只保留本页外边距 */
.detail-back {
    margin:0 0 12px;
}


.detail-back-icon {
    line-height:1;
}


.detail-product {
    margin-top:14px;
    padding:24px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    box-shadow:0 2px 12px rgba(20,50,95,.05);
}


.detail-product-grid {
    display:flex;
    gap:28px;
}


.detail-gallery {
    flex:0 0 380px;
    max-width:420px;
}


.detail-img {
    display:block;
    width:100%;
    aspect-ratio:3 / 4;
    object-fit:contain;
    background:#f2f5f9;
    border-radius:12px;
}


.detail-img-empty {
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9aa4b5;
    font-size:15px;
    background:#f7f9fc;
    border:1px dashed #d9e2ef;
    box-sizing:border-box;
}


.detail-info {
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:12px;
}


.detail-title {
    margin:0;
    font-size:30px;
    line-height:1.3;
    font-weight:700;
    color:#1f2733;
    word-break:break-word;
}


.detail-meta {
    margin:0;
    font-size:14px;
    color:#7a8599;
    word-break:break-word;
}


.detail-price-row {
    display:flex;
    align-items:baseline;
    gap:12px;
    flex-wrap:wrap;
}


.detail-price {
    font-size:30px;
    font-weight:700;
    color:#d4380d;
    letter-spacing:-.3px;
    line-height:1.15;
}


/* 货币符号弱化：突出数字，与首页卡片价格排版一致 */
.detail-price-symbol {
    font-size:.62em;
    font-weight:600;
    margin-right:2px;
}


.detail-old-price {
    font-size:14px;
    color:#aeb8c8;
    text-decoration:line-through;
}


.detail-stock {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:#445;
}


/* V0.8.3 详情页热度（浏览量 / 销量）：与首页卡片同一套次级信息定位，
   字号比库存小一档，不抢价格与书名 */
.detail-heat {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    margin:0;
    font-size:12px;
    color:#98a2b3;
}


.detail-heat-icon {
    margin-right:2px;
}


.detail-heat-sep {
    color:#c3cbd8;
}


.detail-tag {
    display:inline-block;
    padding:3px 10px;
    border-radius:999px;
    font-size:13px;
}


.detail-tag-ok {
    background:#f0fbf4;
    color:#237804;
}


.detail-tag-out {
    background:#fff1f0;
    color:#a8071a;
}


.detail-tag-off {
    background:#f0f0f0;
    color:#8c8c8c;
}


/* 商品属性标签（成色 / 专业 / 年级）：只改展示形式，不改数据来源 */
.detail-tags {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
}


/* 来源标签：官方直售（浅蓝）/ 学生出售（浅绿），与首页卡片配色一致 */
.detail-source {
    display:inline-block;
    max-width:100%;
    padding:2px 10px;
    border-radius:999px;
    font-size:12px;
    line-height:1.5;
    white-space:nowrap;
}


.detail-source.is-official {
    background:#eaf2fb;
    color:#1f4f8f;
}


.detail-source.is-student {
    background:#f0fbf4;
    color:#237804;
}


.detail-chip {
    display:inline-block;
    max-width:100%;
    padding:2px 10px;
    border-radius:999px;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:12px;
    line-height:1.5;
    white-space:nowrap;
}


/* 学生自主出售的卖家身份块（V0.7.5 增强版）：只在 source_type=student 的教材详情里渲染，
   官方直售不输出这段 HTML，因此官方页面完全不受影响。 */
.detail-seller {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
    padding:10px 12px;
    background:#f6faff;
    border:1px solid #e4eaf2;
    border-radius:10px;
}


/* 圆形首字头像：没有头像图片时用姓名首字代替 */
.detail-seller-avatar {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:16px;
    font-weight:700;
    line-height:1;
}


.detail-seller-main {
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:5px;
}


.detail-seller-row {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px 8px;
    min-width:0;
    font-size:13px;
    color:#445;
}


/* 卖家姓名单独占一行：窄屏下不会被压成两行或和标签挤在一起 */
.detail-seller-name {
    min-width:0;
    font-weight:600;
    color:#1f2733;
    font-size:13px;
    line-height:1.4;
    word-break:break-word;
}


/* 来源标签：与首页卡片、后台审核列表统一用浅绿 */
.detail-seller-tag {
    display:inline-block;
    padding:2px 10px;
    border-radius:999px;
    background:#f0fbf4;
    color:#237804;
    font-size:12px;
    line-height:1.5;
    white-space:nowrap;
}


.detail-seller-sub {
    font-size:12px;
    color:#5a6b80;
}


.detail-seller-college,
.detail-seller-count {
    word-break:break-word;
}


.detail-seller-count {
    color:#1f4f8f;
}


.detail-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:stretch;
    margin-top:4px;
}


.detail-qty {
    display:inline-flex;
    align-items:center;
    align-self:center;
    border:1px solid #d9e2ef;
    border-radius:10px;
    overflow:hidden;
    background:white;
}


.detail-qty-btn {
    min-width:44px;
    min-height:44px;
    margin:0;
    width:auto;
    padding:0;
    border:none;
    border-radius:0;
    background:#f0f3f8;
    color:#1f4f8f;
    font-size:20px;
    cursor:pointer;
}


.detail-qty-btn:hover {
    background:#e2e9f4;
}


.detail-qty-btn:disabled {
    background:#f5f6f8;
    color:#b8c0cc;
    cursor:default;
}


.detail-qty-value {
    min-width:48px;
    text-align:center;
    font-size:16px;
    line-height:44px;
    color:#1f2733;
}


.detail-add-btn {
    flex:1 1 180px;
    min-height:44px;
    margin:0;
    width:auto;
    padding:0 20px;
    border:none;
    border-radius:10px;
    background:#1f4f8f;
    color:white;
    font-size:16px;
    cursor:pointer;
}


.detail-add-btn:hover {
    background:#1a4379;
}


.detail-add-btn:active {
    background:#163a68;
}


.detail-add-btn:disabled {
    background:#d6dde8;
    color:#8f99a8;
    cursor:default;
}


.detail-cart-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    min-height:44px;
    padding:0 20px;
    border:1px solid #d9e2ef;
    border-radius:10px;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:15px;
    text-decoration:none;
    box-sizing:border-box;
}


.detail-cart-btn:hover {
    background:#dbe8f8;
}


/* 学生交易提示卡片（V0.7.5）：只在 source_type=student 的详情页渲染，
   官方直售不输出这段 HTML。样式沿用「图书详情」卡片的浅蓝体系。 */
.detail-notice {
    margin-top:14px;
    padding:18px 24px;
    background:#f6faff;
    border:1px solid #e4eaf2;
    border-radius:14px;
}


.detail-notice-title {
    margin:0 0 8px;
    font-size:16px;
    font-weight:700;
    color:#1f2733;
}


.detail-notice-list {
    margin:0;
    padding-left:18px;
    font-size:14px;
    line-height:1.8;
    color:#5a6b80;
}


.detail-desc {
    margin-top:14px;
    padding:20px 24px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
}


.detail-desc-title {
    margin:0 0 10px;
    font-size:18px;
    font-weight:700;
    color:#1f2733;
}


.detail-desc-text {
    margin:0;
    font-size:15px;
    line-height:1.7;
    color:#445;
    white-space:pre-wrap;
    word-break:break-word;
}


/* 「图书详情」卡片里的字段行（作者 / 专业 / 年级）与简介小标题：
   默认不显示，只在手机端展示；桌面端保持原有的「教材简介」排版。 */
.detail-facts {
    display:none;
}


.detail-desc-subtitle {
    display:none;
}


.detail-empty {
    margin-top:14px;
    padding:42px 20px;
    background:white;
    border:1px dashed #d9e2ef;
    border-radius:14px;
    text-align:center;
}


.detail-empty-title {
    margin:0 0 8px;
    font-size:20px;
    color:#1f2733;
}


.detail-empty .detail-cart-btn {
    margin-top:14px;
}


@media (max-width:900px) {

    .detail-product-grid {
        flex-direction:column;
    }

    .detail-gallery {
        flex:0 0 auto;
        width:100%;
        max-width:none;
    }

    .detail-img {
        max-width:420px;
        margin:0 auto;
    }

    /* 购买区已从信息块移到商品区下方，这里补回原来信息块内的 12px 间距 */
    .detail-actions {
        margin-top:12px;
    }

}


/* 宽屏桌面（≥901px）：商品区与购买区放回两列网格 ——
   图片在左列，信息与购买区在右列，视觉与改动前完全一致
   （购买区在 DOM 里移到了商品区下方，这里用网格把它摆回右列）。 */
@media (min-width:901px) {

    .detail-product {
        display:grid;
        grid-template-columns:380px minmax(0, 1fr);
        /* 行 1 返回按钮 / 行 2 信息块按内容高度 / 行 3 购买区，
           图片撑出的多余高度全部落到行 3，信息块与购买区之间不会出现空隙 */
        grid-template-rows:auto max-content 1fr;
        column-gap:28px;
    }

    .detail-back {
        grid-column:1 / -1;
        /* 网格项默认会被拉满整行，这里让它保持原来的小按钮宽度、靠左 */
        justify-self:start;
    }

    /* 让商品图和信息块直接成为上面网格的格子 */
    .detail-product-grid {
        display:contents;
    }

    .detail-gallery {
        grid-column:1;
        /* 跨第 2~3 行：图片高度盖住「信息 + 购买区」，
           这样购买区回到右列底部，卡片高度与改动前一致 */
        grid-row:2 / span 2;
    }

    .detail-info {
        grid-column:2;
        grid-row:2;
    }

    .detail-actions {
        grid-column:2;
        grid-row:3;
        /* 不被网格行拉高：按钮保持自身高度，紧跟在信息块下方 */
        align-self:start;
        margin-top:12px;
    }

    /* 学生自主出售的卖家身份条：放在商品卡底部整行，
       不挤占右侧信息列，也不会掉到图片下方的空位里。
       官方直售不渲染这个节点，因此官方详情页的网格完全不受影响。 */
    .detail-seller {
        grid-column:1 / -1;
        grid-row:4;
    }

}


/* 手机 / 窄平板详情页：商品图缩成小图并居中，不再占满整屏；
   文字、间距、按钮一并收紧，让书名、价格、购买按钮尽快出现在首屏。
   图片尺寸相关规则保持上一版不动，这里只调图片以外的排版。 */
@media (max-width:768px) {

    .detail-product {
        margin-top:8px;
        padding:14px 16px;
    }

    /* 顶部商品区：左图 + 右信息（覆盖 ≤900px 的纵向堆叠） */
    .detail-product-grid {
        flex-direction:row;
        align-items:flex-start;
        gap:12px;
    }

    .detail-gallery {
        flex:0 0 auto;
        width:auto;
        max-width:none;
    }

    /* 手机端封面固定 120×150，不再占满页面；
       contain 保证封面按原比例完整显示，不拉伸也不裁剪 */
    .detail-img {
        width:120px;
        height:150px;
        max-width:none;
        margin:0;
        aspect-ratio:auto;
        /* 浅色底 + 圆角沿用基础样式，这里再补一层轻微阴影 */
        box-shadow:0 2px 10px rgba(20,50,95,.12);
    }

    .detail-info {
        flex:1 1 auto;
        min-width:0;
        gap:4px;
    }

    .detail-title {
        font-size:22px;
        line-height:1.35;
    }

    .detail-meta {
        font-size:13px;
        line-height:1.45;
    }

    .detail-price-row {
        gap:8px;
    }

    .detail-price {
        font-size:24px;
    }

    .detail-old-price {
        font-size:13px;
    }

    .detail-stock {
        gap:8px;
        font-size:13px;
    }

    /* V0.8.3 详情页热度：手机端比库存再小一档 */
    .detail-heat {
        gap:4px;
        font-size:11px;
    }

    .detail-tag {
        padding:2px 8px;
        font-size:12px;
    }

    /* 购买区：独立成行放在商品区下方，不与价格同行 */
    .detail-actions {
        margin-top:12px;
        gap:8px;
    }

    /* 购买区：加入购物车 70% + 前往购物车 30%，同一行、同高 */
    /* 数量选择独占一整行，两个按钮才能在下一行按 7:3 分宽 */
    .detail-qty {
        flex:0 0 100%;
        justify-content:space-between;
    }

    .detail-add-btn,
    .detail-cart-btn {
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:auto;
        min-height:46px;
        min-width:0;
        flex-basis:0;
        white-space:nowrap;
        border-radius:10px;
    }

    .detail-add-btn {
        flex-grow:7;
        padding:0 12px;
        font-size:15px;
    }

    .detail-cart-btn {
        flex-grow:3;
        padding:0 10px;
        font-size:14px;
    }

    .detail-qty-btn {
        min-width:38px;
        min-height:38px;
        font-size:18px;
    }

    .detail-qty-value {
        min-width:42px;
        line-height:38px;
        font-size:15px;
    }

    .detail-desc {
        margin-top:10px;
        padding:14px 16px;
    }

    .detail-desc-title {
        margin:0 0 6px;
        font-size:16px;
    }

    .detail-desc-text {
        font-size:14px;
        line-height:1.6;
    }

    /* 图书详情卡片：作者 / 专业 / 年级 / 简介 */
    .detail-facts {
        display:flex;
        flex-direction:column;
        gap:8px;
        margin:0 0 12px;
    }

    .detail-fact {
        display:flex;
        gap:10px;
        font-size:13px;
        line-height:1.5;
    }

    .detail-fact dt {
        flex:0 0 52px;
        color:#7a8599;
    }

    .detail-fact dd {
        flex:1 1 auto;
        min-width:0;
        margin:0;
        color:#1f2733;
        word-break:break-word;
    }

    .detail-desc-subtitle {
        display:block;
        margin:0 0 6px;
        font-size:15px;
        font-weight:700;
        color:#1f2733;
    }

}


@media (max-width:600px) {

    .detail-product {
        padding:12px 14px;
    }

    /* 学生交易提示卡片：手机端同步收窄内边距 */
    .detail-notice {
        padding:16px;
    }

    .detail-notice-list {
        font-size:13px;
        line-height:1.7;
    }

    .detail-product-grid {
        gap:8px;
    }

    .detail-title {
        font-size:18px;
    }

    .detail-meta {
        font-size:12px;
    }

    .detail-price {
        font-size:21px;
    }

    .detail-old-price {
        font-size:12px;
    }

    .detail-stock {
        font-size:12px;
    }

    .detail-actions {
        flex-direction:row;
        align-items:center;
        gap:6px;
    }

    .detail-qty {
        align-self:center;
    }

    .detail-qty-btn {
        min-width:34px;
        min-height:34px;
        font-size:16px;
    }

    .detail-qty-value {
        min-width:38px;
        line-height:34px;
        font-size:14px;
    }

    /* 窄屏下 30% 的「前往购物车」只有约 80px，缩小字号与内边距，
       保证文字不换行、按钮不溢出 */
    .detail-cart-btn {
        padding:0 8px;
        font-size:12px;
    }

    .detail-desc {
        padding:12px 14px;
    }

    .detail-desc-title {
        font-size:15px;
    }

    .detail-desc-text {
        font-size:13px;
    }

}


/* ========================
   购物车（cart-* 专属作用域）
   ======================== */

.cart-page {
    max-width:1100px;
    margin:0 auto;
}


.cart-page-title {
    margin:18px 2px 0;
    font-size:24px;
    font-weight:700;
    color:#1f2733;
}


.cart-page-count {
    margin:6px 2px 0;
    font-size:14px;
    color:#7a8599;
}


.cart-layout {
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:14px;
    align-items:start;
    margin-top:14px;
}


.cart-list {
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
}


.cart-item {
    display:flex;
    gap:14px;
    padding:14px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(20,50,95,.04);
}


.cart-item-media {
    flex:0 0 100px;
}


.cart-item-image {
    display:block;
    width:100px;
    height:140px;
    object-fit:contain;
    background:#f2f5f9;
    border-radius:10px;
}


.cart-item-image-empty {
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9aa4b5;
    font-size:13px;
    background:#f7f9fc;
    border:1px dashed #d9e2ef;
    box-sizing:border-box;
}


.cart-item-main {
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:5px;
}


.cart-item-title {
    margin:0;
    font-size:16px;
    line-height:1.4;
    font-weight:700;
    color:#1f2733;
    word-break:break-word;
}


.cart-item-author {
    margin:0;
    font-size:13px;
    color:#7a8599;
    word-break:break-word;
}


.cart-item-meta {
    margin:0;
    font-size:13px;
    color:#9aa4b5;
    word-break:break-word;
}


.cart-item-unit {
    margin:2px 0 0;
    font-size:14px;
    color:#445;
}


.cart-item-issue {
    margin:2px 0 0;
    padding:4px 10px;
    border-radius:8px;
    background:#fff7e6;
    color:#ad6800;
    font-size:13px;
    align-self:flex-start;
}


.cart-item-actions {
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:space-between;
    gap:8px;
}


.cart-item-subtotal {
    margin:0;
    font-size:13px;
    color:#7a8599;
}


.cart-item-subtotal span {
    font-size:16px;
    font-weight:700;
    color:#d4380d;
}


.cart-qty {
    display:inline-flex;
    align-items:center;
    border:1px solid #d9e2ef;
    border-radius:10px;
    overflow:hidden;
    background:white;
}


.cart-qty-btn {
    min-width:44px;
    min-height:44px;
    margin:0;
    width:auto;
    padding:0;
    border:none;
    border-radius:0;
    background:#f0f3f8;
    color:#1f4f8f;
    font-size:20px;
    cursor:pointer;
}


.cart-qty-btn:hover {
    background:#e2e9f4;
}


.cart-qty-btn:disabled {
    background:#f5f6f8;
    color:#b8c0cc;
    cursor:default;
}


.cart-qty-value {
    min-width:40px;
    text-align:center;
    font-size:15px;
    line-height:44px;
    color:#1f2733;
}


.cart-remove-btn {
    min-height:44px;
    margin:0;
    width:auto;
    padding:0 12px;
    border:1px solid #d9e2ef;
    border-radius:10px;
    background:white;
    color:#5a6b84;
    font-size:14px;
    cursor:pointer;
}


.cart-remove-btn:hover {
    background:#f2f4f7;
    color:#a8071a;
}


.cart-item-invalid {
    align-items:center;
}


.cart-summary {
    position:sticky;
    top:90px;
    padding:18px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(20,50,95,.04);
}


.cart-summary-title {
    margin:0 0 12px;
    font-size:17px;
    font-weight:700;
    color:#1f2733;
}


.cart-summary-row {
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:6px 0;
    font-size:14px;
    color:#445;
}


.cart-summary-total {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    margin-top:8px;
    padding-top:12px;
    border-top:1px dashed #d9e2ef;
    font-size:15px;
    color:#1f2733;
}


.cart-summary-total span:last-child {
    font-size:26px;
    font-weight:700;
    color:#d4380d;
}


.cart-primary-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:44px;
    margin:14px 0 0;
    padding:0 18px;
    border:none;
    border-radius:10px;
    background:#1f4f8f;
    color:white;
    font-size:16px;
    text-decoration:none;
    cursor:pointer;
    box-sizing:border-box;
}


.cart-primary-btn:hover {
    background:#1a4379;
}


.cart-primary-btn:active {
    background:#163a68;
}


.cart-primary-btn:disabled {
    background:#d6dde8;
    color:#8f99a8;
    cursor:default;
}


.cart-secondary-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:44px;
    margin:10px 0 0;
    padding:0 18px;
    border:1px solid #d9e2ef;
    border-radius:10px;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:15px;
    text-decoration:none;
    box-sizing:border-box;
}


.cart-secondary-btn:hover {
    background:#dbe8f8;
}


.cart-hint {
    margin:12px 0 0;
    font-size:13px;
    color:#a8071a;
}


.cart-empty {
    margin-top:14px;
    padding:48px 20px;
    background:white;
    border:1px dashed #d9e2ef;
    border-radius:14px;
    text-align:center;
}


.cart-empty-title {
    margin:0 0 8px;
    font-size:20px;
    color:#1f2733;
}


.cart-empty-text {
    margin:0 0 18px;
    font-size:14px;
    color:#7a8599;
}


.cart-empty .cart-primary-btn,
.cart-empty .cart-secondary-btn {
    display:inline-flex;
    width:auto;
}


@media (max-width:900px) {

    .cart-layout {
        grid-template-columns:1fr;
    }

    .cart-summary {
        position:static;
    }

}


@media (max-width:600px) {

    .cart-page-title {
        font-size:21px;
    }

    .cart-item {
        flex-wrap:wrap;
    }

    .cart-item-media {
        flex:0 0 84px;
    }

    .cart-item-image {
        width:84px;
        height:112px;
    }

    .cart-item-main {
        flex:1 1 calc(100% - 98px);
        min-width:0;
    }

    .cart-item-actions {
        flex:1 1 100%;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
    }

    .cart-summary {
        padding:14px;
    }

}


/* ========================
   我的订单（order-* 专属作用域）
   ======================== */

/* ========================
   交付方式（买书取书方式 / 卖书交书方式）
   cart.html 与 recycle.html 共用同一套控件样式
   ======================== */

.fulfillment-block {
    margin-top:12px;
    padding:12px;
    background:#f2f7fe;
    border:1px solid #e4eaf2;
    border-radius:12px;
}


.fulfillment-block-title {
    margin:0 0 8px;
    font-size:14px;
    font-weight:700;
    color:#14325f;
}


.fulfillment-options {
    display:flex;
    flex-direction:column;
    gap:8px;
}


.fulfillment-option {
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 10px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:10px;
    font-size:14px;
    color:#1f2733;
    cursor:pointer;
}


.fulfillment-option:hover {
    background:#f7fbff;
}


.fulfillment-option input[type="radio"] {
    flex:0 0 auto;
    width:16px;
    height:16px;
    margin:0;
    accent-color:#1f4f8f;
}


/* 选中态：整行高亮 + 文字加粗（:has 不支持时仍由单选圆点与加粗文字体现） */
.fulfillment-option input[type="radio"]:checked + .fulfillment-option-text {
    font-weight:700;
    color:#1f4f8f;
}


.fulfillment-option:has(input[type="radio"]:checked) {
    background:#eaf2fb;
    border-color:#1f4f8f;
}


.fulfillment-note {
    margin:8px 0 0;
    font-size:13px;
    color:#5a6b84;
    word-break:break-word;
}


.fulfillment-delivery-fields {
    margin-top:2px;
}


.fulfillment-field {
    display:block;
    margin-top:10px;
}


.fulfillment-field-label {
    display:block;
    margin-bottom:5px;
    font-size:13px;
    color:#5a6b84;
}


.fulfillment-input {
    width:100%;
    min-height:40px;
    padding:0 12px;
    border:1px solid #d9e2ef;
    border-radius:10px;
    background:white;
    font-size:14px;
    color:#1f2733;
    box-sizing:border-box;
}


.fulfillment-input:focus {
    outline:none;
    border-color:#1f4f8f;
    box-shadow:0 0 0 3px rgba(31,79,143,.12);
}


/* 订单卡片里的取书方式：放在商品明细与合计之间，不改变原有卡片结构 */
.order-fulfillment {
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:12px 18px;
    background:#f7fbff;
    border-top:1px solid #eef1f6;
}


.order-fulfillment-row {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    font-size:13px;
    color:#7a8599;
}


.order-fulfillment-row span:last-child {
    flex:1 1 auto;
    min-width:0;
    text-align:right;
    color:#1f2733;
    word-break:break-word;
}


/* 历史订单没有履约信息时的提示行 */
.order-fulfillment-legacy {
    font-size:13px;
    color:#7a8599;
}


.orders-page {
    max-width:1100px;
    margin:0 auto;
}


/* 顶部导航行：左侧返回按钮 + 居中标题
   1fr auto 1fr：左右两列等宽，标题不会因为按钮宽度而偏移 */
.orders-topbar {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:12px;
    margin:18px 2px 0;
}


/* 尺寸与视觉统一在「统一返回按钮」一节；这里只保留本页栅格定位 */
.orders-back {
    grid-column:1;
    justify-self:start;
}


.orders-back-icon {
    line-height:1;
}


.orders-page-title {
    margin:0;
    font-size:24px;
    font-weight:700;
    text-align:center;
    white-space:nowrap;
    color:#1f2733;
}


.orders-page-count {
    margin:6px 2px 0;
    font-size:14px;
    color:#7a8599;
}


.orders-list {
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:14px;
}


.order-card {
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(20,50,95,.04);
    overflow:hidden;
}


.order-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding:14px 18px;
    border-bottom:1px solid #eef1f6;
}


.order-heading {
    min-width:0;
}


.order-number {
    font-size:15px;
    font-weight:700;
    color:#1f2733;
    overflow-wrap:anywhere;
    word-break:break-word;
}


.order-meta {
    margin-top:4px;
    font-size:13px;
    color:#7a8599;
}


.order-status {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    padding:4px 12px;
    border-radius:999px;
    font-size:13px;
    white-space:nowrap;
}


.order-status-pending {
    background:#fff7e6;
    color:#ad6800;
}


.order-status-paid {
    background:#eef4fc;
    color:#1f4f8f;
}


/* 待自取 / 待配送：已付款后的准备阶段 */
.order-status-ready {
    background:#eaf2fb;
    color:#1f4f8f;
}


/* 已取货 / 配送中：履约进行中 */
.order-status-fulfilling {
    background:#eef0fb;
    color:#2f3e9e;
}


.order-status-shipped {
    background:#eef0fb;
    color:#2f3e9e;
}


.order-status-completed {
    background:#f0fbf4;
    color:#237804;
}


.order-status-cancelled {
    background:#f0f0f0;
    color:#8c8c8c;
}


.order-status-unknown {
    background:#f5f5f5;
    color:#666;
}


.order-items {
    padding:6px 18px;
}


.order-item {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px 0;
    border-bottom:1px dashed #eef1f6;
}


.order-item:last-child {
    border-bottom:none;
}


.order-item-main {
    min-width:0;
}


.order-item-name {
    font-size:15px;
    color:#1f2733;
    word-break:break-word;
}


.order-item-meta {
    margin-top:4px;
    font-size:13px;
    color:#7a8599;
}


.order-item-subtotal {
    flex:0 0 auto;
    font-size:15px;
    font-weight:700;
    color:#d4380d;
}


.order-footer {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    padding:14px 18px;
    border-top:1px solid #eef1f6;
}


.order-footer > span:first-child {
    font-size:14px;
    color:#445;
}


.order-total {
    font-size:24px;
    font-weight:700;
    color:#d4380d;
}


.orders-empty {
    margin-top:14px;
    padding:48px 20px;
    background:white;
    border:1px dashed #d9e2ef;
    border-radius:14px;
    text-align:center;
}


.orders-empty-title {
    margin:0 0 8px;
    font-size:20px;
    color:#1f2733;
}


.orders-empty-text {
    margin:0 0 18px;
    font-size:14px;
    color:#7a8599;
}


.orders-primary-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    margin:0;
    width:auto;
    padding:0 22px;
    border:none;
    border-radius:10px;
    background:#1f4f8f;
    color:white;
    font-size:15px;
    text-decoration:none;
    cursor:pointer;
    box-sizing:border-box;
}


.orders-primary-btn:hover {
    background:#1a4379;
}


.orders-primary-btn:active {
    background:#163a68;
}


.orders-secondary-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    margin:0 0 0 10px;
    width:auto;
    padding:0 22px;
    border:1px solid #d9e2ef;
    border-radius:10px;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:15px;
    text-decoration:none;
    box-sizing:border-box;
}


.orders-secondary-btn:hover {
    background:#dbe8f8;
}


@media (max-width:600px) {

    .orders-page-title {
        font-size:21px;
    }

    .order-header {
        flex-direction:column;
    }

    .order-item {
        align-items:flex-start;
        flex-direction:column;
        gap:6px;
    }

    .order-item-subtotal {
        align-self:flex-end;
    }

    .orders-primary-btn,
    .orders-secondary-btn {
        display:flex;
        width:100%;
        margin:10px 0 0;
    }

    .orders-secondary-btn {
        margin-left:0;
    }

}


/* ========================
   个人中心（user-* 专属作用域）
   ======================== */

.user-page {
    max-width:1100px;
    margin:0 auto;
}


.user-page-title {
    margin:18px 2px 0;
    font-size:24px;
    font-weight:700;
    color:#1f2733;
}


.user-profile {
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:14px;
    padding:20px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(20,50,95,.04);
}


.user-avatar {
    flex:0 0 auto;
    width:64px;
    height:64px;
    border-radius:50%;
    background:#eef4fc;
    color:#1f4f8f;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    font-weight:700;
}


/* 头像图片：填满圆形底板；avatar 为空时仍用姓名首字占位（.user-avatar 自身样式） */
.user-avatar-img {
    display:block;
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}


.user-profile-main {
    min-width:0;
}


.user-profile-name-row {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}


.user-profile-name {
    margin:0;
    font-size:20px;
    font-weight:700;
    color:#1f2733;
    word-break:break-word;
}


.user-role-tag {
    padding:3px 10px;
    border-radius:999px;
    background:#fff7e6;
    color:#ad6800;
    font-size:12px;
}


.user-profile-phone {
    margin:8px 0 0;
    font-size:14px;
    color:#445;
    word-break:break-word;
}


.user-profile-meta {
    margin:4px 0 0;
    font-size:14px;
    color:#7a8599;
    word-break:break-word;
}


.user-profile-school {
    margin:4px 0 0;
    font-size:13px;
    color:#9aa4b5;
}


.user-entries {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:14px;
}


.user-entry {
    display:block;
    padding:16px 18px;
    background:#eaf2fb;
    border:1px solid #e4eaf2;
    border-radius:14px;
    text-decoration:none;
}


.user-entry:hover {
    background:#dbe8f8;
}


.user-entry-title {
    font-size:16px;
    font-weight:700;
    color:#1f4f8f;
}


.user-entry-desc {
    margin-top:4px;
    font-size:13px;
    color:#5a6b84;
}


/* 个人中心功能分组：标题一律放在 .user-entries 外面，
   这样标题不会参与两列 grid 布局，也就不会出现错位 */
.user-group {
    margin-top:16px;
}


.user-group-title {
    margin:0 2px 8px;
    font-size:14px;
    font-weight:700;
    color:#1f2733;
}


/* 组内网格贴着标题，组与组之间的间距由 .user-group 控制 */
.user-group .user-entries {
    margin-top:0;
}


/* 退出登录：直接复用 .user-entry 的卡片外观，
   这里只做 <button> 默认样式的必要重置，以及与普通入口的轻微区分 */
.user-entry-button {
    margin-top:0;
    width:100%;
    text-align:left;
    font-family:inherit;
    font-size:14px;
    color:#445;
    cursor:pointer;
    background:#f2f4f8;
}


.user-entry-button:hover {
    background:#e6eaf1;
}


/* <button> 里用 span 保持 HTML 合法，这里补回块级排版 */
.user-entry-button .user-entry-title,
.user-entry-button .user-entry-desc {
    display:block;
}


.user-entry-button .user-entry-title {
    color:#445;
}


.user-security {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:14px;
    padding:16px 18px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
}


.user-security-main {
    min-width:0;
}


.user-security-title {
    margin:0;
    font-size:16px;
    font-weight:700;
    color:#1f2733;
}


.user-security-desc {
    margin:4px 0 0;
    font-size:13px;
    color:#7a8599;
}


.user-security-btn {
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 18px;
    border:1px solid #d9e2ef;
    border-radius:10px;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:14px;
    text-decoration:none;
    box-sizing:border-box;
}


.user-security-btn:hover {
    background:#dbe8f8;
}


.user-empty {
    margin-top:14px;
    padding:48px 20px;
    background:white;
    border:1px dashed #d9e2ef;
    border-radius:14px;
    text-align:center;
}


.user-empty-title {
    margin:0 0 8px;
    font-size:20px;
    color:#1f2733;
}


.user-empty-text {
    margin:0 0 18px;
    font-size:14px;
    color:#7a8599;
}


.user-primary-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    margin:0;
    width:auto;
    padding:0 22px;
    border:none;
    border-radius:10px;
    background:#1f4f8f;
    color:white;
    font-size:15px;
    text-decoration:none;
    cursor:pointer;
    box-sizing:border-box;
}


.user-primary-btn:hover {
    background:#1a4379;
}


.user-primary-btn:active {
    background:#163a68;
}


.user-secondary-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    margin:0 0 0 10px;
    width:auto;
    padding:0 22px;
    border:1px solid #d9e2ef;
    border-radius:10px;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:15px;
    text-decoration:none;
    box-sizing:border-box;
}


.user-secondary-btn:hover {
    background:#dbe8f8;
}


/* 个人中心首页：整块「个人信息」区域可点击 */
.user-profile-clickable {
    cursor:pointer;
}


.user-profile-clickable:hover {
    border-color:#d9e2ef;
    box-shadow:0 4px 14px rgba(20,50,95,.08);
}


.user-profile-clickable:focus-visible {
    outline:none;
    box-shadow:0 0 0 3px rgba(31,79,143,.25);
}


.user-profile-hint {
    margin:4px 0 0;
    font-size:13px;
    color:#1f4f8f;
}


/* ========================
   V0.8.2 个人中心改版：顶部资料卡的标签 + 右侧箭头
   ======================== */

.user-profile-tags {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
}


.user-profile-tag {
    display:inline-block;
    max-width:100%;
    padding:2px 10px;
    border:1px solid #e8eef7;
    border-radius:999px;
    background:#f4f7fc;
    color:#5a6b80;
    font-size:12px;
    line-height:1.6;
    word-break:break-word;
}


.user-profile-arrow {
    flex:0 0 auto;
    align-self:center;
    margin-left:auto;
    color:#b6c1d1;
    font-size:16px;
}


/* 入口列表：单列卡片 + 行分隔线，贴近移动端交易平台的列表样式 */
.user-entries {
    display:flex;
    flex-direction:column;
    gap:0;
    margin-top:0;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(20,50,95,.04);
    overflow:hidden;
}


.user-entry {
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    background:white;
    border:none;
    border-bottom:1px solid #eef2f8;
    border-radius:0;
    text-decoration:none;
}


.user-entry:last-child {
    border-bottom:none;
}


.user-entry:hover {
    background:#f7fafd;
}


.user-entry-main {
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}


.user-entry-arrow {
    flex:0 0 auto;
    color:#b6c1d1;
    font-size:15px;
}


/* 交易数量徽标：内容为空时自动隐藏（不需要额外的 class 切换） */
.user-entry-badge {
    flex:0 0 auto;
    min-width:20px;
    padding:1px 7px;
    border-radius:999px;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:12px;
    font-weight:600;
    text-align:center;
}


.user-entry-badge:empty {
    display:none;
}


/* 交易记录为空时的引导卡片 */
.user-empty-guide {
    margin-top:12px;
    padding:16px;
    background:white;
    border:1px dashed #d9e2ef;
    border-radius:14px;
    text-align:center;
}


.user-empty-guide-title {
    margin:0;
    font-size:14px;
    font-weight:700;
    color:#1f2733;
}


.user-empty-guide-text {
    margin:6px 0 0;
    font-size:13px;
    line-height:1.6;
    color:#7a8599;
}


.user-empty-guide-actions {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin-top:12px;
}


.user-empty-guide-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:0 14px;
    border-radius:10px;
    background:#1f4f8f;
    color:white;
    font-size:13px;
    text-decoration:none;
    box-sizing:border-box;
}


.user-empty-guide-btn.is-ghost {
    background:#eaf2fb;
    color:#1f4f8f;
}


/* 平台信息：同样收进一张卡片里，与上面的分组保持一致 */
.user-page .site-footer-links {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:14px 16px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(20,50,95,.04);
}


/* 退出登录：与普通入口共用同行样式，仅把标题弱化以区别于跳转链接
   （全局 button{width:100%;margin-top:20px} 由上面的 .user-entry 规则覆盖） */
.user-entry-button {
    width:100%;
    text-align:left;
    font-family:inherit;
    cursor:pointer;
}


.user-entry-button .user-entry-title {
    color:#5a6b80;
}


/* 个人信息详情 / 编辑表单 */
.user-info-card {
    margin-top:14px;
    padding:20px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(20,50,95,.04);
}


.user-info-hint {
    margin:6px 0 0;
    font-size:13px;
    color:#9aa4b5;
}


/* 手机号只读，避免看起来可编辑 */
.user-info-card .auth-input[readonly] {
    background:#f5f7fa;
    color:#7a8599;
    cursor:default;
}


.user-info-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}


/* 覆盖 .user-primary-btn / .user-secondary-btn 的单独外边距，统一用 gap 控制 */
.user-info-actions .user-primary-btn,
.user-info-actions .user-secondary-btn {
    margin:0;
}


@media (max-width:900px) {

    .user-entries {
        grid-template-columns:1fr;
    }

}


@media (max-width:600px) {

    .user-page-title {
        font-size:21px;
    }

    .user-profile {
        align-items:flex-start;
    }

    .user-security {
        flex-direction:column;
        align-items:stretch;
    }

    .user-security-btn {
        width:100%;
    }

    .user-primary-btn,
    .user-secondary-btn {
        display:flex;
        width:100%;
        margin:10px 0 0;
    }

    .user-secondary-btn {
        margin-left:0;
    }

}


/* ========================
   我要卖书 / 教材回收（recycle-* 专属作用域）
   ======================== */

.recycle-page {
    max-width:1100px;
    margin:0 auto;
}


.recycle-page-title {
    margin:18px 2px 0;
    font-size:24px;
    font-weight:700;
    color:#1f2733;
}


.recycle-page-note {
    margin:6px 2px 0;
    font-size:14px;
    color:#7a8599;
}


.recycle-form-card {
    max-width:720px;
    margin-top:14px;
    padding:20px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(20,50,95,.04);
}


.recycle-section-title {
    margin:22px 0 12px;
    font-size:16px;
    font-weight:700;
    color:#1f2733;
}


.recycle-section-title:first-child {
    margin-top:0;
}


.recycle-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}


.recycle-field {
    margin-bottom:14px;
}


.recycle-label {
    display:block;
    margin-bottom:6px;
    font-size:14px;
    color:#445;
}


.recycle-input,
.recycle-textarea {
    width:100%;
    min-height:44px;
    padding:10px 12px;
    border:1px solid #d9e2ef;
    border-radius:10px;
    background:white;
    color:#1f2733;
    font-size:15px;
    box-sizing:border-box;
}


.recycle-textarea {
    min-height:110px;
    resize:vertical;
}


.recycle-input:focus,
.recycle-textarea:focus {
    outline:none;
    border-color:#1f4f8f;
    box-shadow:0 0 0 3px rgba(31,79,143,.12);
}


.recycle-hint {
    margin:6px 0 0;
    font-size:12px;
    color:#9aa4b5;
}


.recycle-qty {
    display:inline-flex;
    align-items:center;
    border:1px solid #d9e2ef;
    border-radius:10px;
    overflow:hidden;
    background:white;
}


.recycle-qty-btn {
    min-width:44px;
    min-height:44px;
    margin:0;
    width:auto;
    padding:0;
    border:none;
    border-radius:0;
    background:#f0f3f8;
    color:#1f4f8f;
    font-size:20px;
    cursor:pointer;
}


.recycle-qty-btn:hover {
    background:#e2e9f4;
}


.recycle-qty-btn:active {
    background:#d7e2f2;
}


.recycle-qty-value {
    min-width:48px;
    text-align:center;
    font-size:16px;
    line-height:44px;
    color:#1f2733;
}


.recycle-submit-row {
    display:flex;
    justify-content:flex-end;
    margin-top:18px;
}


.recycle-submit-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    margin:0;
    width:auto;
    padding:0 24px;
    border:none;
    border-radius:10px;
    background:#1f4f8f;
    color:white;
    font-size:15px;
    text-decoration:none;
    cursor:pointer;
    box-sizing:border-box;
}


.recycle-submit-btn:hover {
    background:#1a4379;
}


.recycle-submit-btn:active {
    background:#163a68;
}


.recycle-submit-btn:disabled {
    background:#d6dde8;
    color:#8f99a8;
    cursor:default;
}


.recycle-list-title {
    margin:22px 2px 0;
    font-size:18px;
    font-weight:700;
    color:#1f2733;
}


/* 表单模式底部的轻量入口：查看我的申请 */
.recycle-switch-row {
    margin-top:14px;
    text-align:center;
}


.recycle-switch-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 16px;
    border:1px solid #d9e2ef;
    border-radius:10px;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:14px;
    text-decoration:none;
    box-sizing:border-box;
}


.recycle-switch-link:hover {
    background:#dbe8f8;
}


/* ========================
   卖书方式选择页（V0.7.4）：官方回收 / 学生出售 两张方式卡片
   只影响 recycle.html 的默认首页，两个表单页样式不动
   ======================== */

.recycle-pick {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    margin-top:14px;
}


.recycle-pick-card {
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:20px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(20,50,95,.04);
}


/* 方式标签：沿用后台「官方直售 / 学生出售」的浅色标签配色 */
.recycle-pick-tag {
    align-self:flex-start;
    padding:2px 10px;
    border-radius:999px;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:12px;
    line-height:1.5;
    white-space:nowrap;
}


.recycle-pick-tag.is-student {
    background:#f0fbf4;
    color:#237804;
}


.recycle-pick-title {
    margin:0;
    font-size:18px;
    font-weight:700;
    color:#1f2733;
}


/* V0.9.5-B：手机端专用的「核心卖点」行。
   桌面端两张卡并排、长说明本来就读得完，所以这里默认不显示，
   只有 ≤600px 才打开（见文件末尾的 V0.9.5-B 区块）。 */
.recycle-pick-pitch {
    display:none;
}


.recycle-pick-text {
    margin:0;
    font-size:14px;
    line-height:1.7;
    color:#5a6b80;
}


.recycle-pick-list {
    margin:0;
    padding-left:18px;
    font-size:13px;
    line-height:1.8;
    color:#7a8599;
}


/* 三步流程：提交 → 审核 → 收书 / 上架，用序号胶囊表达 */
.recycle-pick-steps {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:0;
    padding:0;
    list-style:none;
    counter-reset:pick-step;
}


.recycle-pick-steps li {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:999px;
    background:#f4f7fc;
    color:#5a6b80;
    font-size:12px;
    line-height:1.5;
}


.recycle-pick-steps li::before {
    counter-increment:pick-step;
    content:counter(pick-step);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:11px;
    font-weight:600;
}


/* 学生出售卡片：序号与按钮统一用浅绿 */
.recycle-pick-card.is-student .recycle-pick-steps li::before {
    background:#f0fbf4;
    color:#237804;
}


/* 选择页底部两个入口：我的申请（回收）/ 我的出售 */
.recycle-pick-links {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-top:16px;
}


.recycle-pick-btn {
    display:block;
    margin-top:auto;
    min-height:46px;
    padding:0 16px;
    border-radius:10px;
    background:#1f4f8f;
    color:white;
    font-size:15px;
    line-height:46px;
    text-align:center;
    text-decoration:none;
    box-sizing:border-box;
}


.recycle-pick-btn:hover {
    background:#1a4379;
}


.recycle-pick-btn:active {
    background:#163a68;
}


.recycle-pick-btn.is-student {
    background:#237804;
}


.recycle-pick-btn.is-student:hover {
    background:#1d6303;
}


.recycle-pick-btn.is-student:active {
    background:#185202;
}


.recycle-request-card {
    margin-top:12px;
    padding:16px 18px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(20,50,95,.04);
}


.recycle-request-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}


.recycle-request-title {
    margin:0;
    font-size:16px;
    font-weight:700;
    color:#1f2733;
    word-break:break-word;
}


.recycle-request-meta {
    margin-top:8px;
    font-size:13px;
    color:#7a8599;
}


.recycle-request-detail {
    margin-top:6px;
}


.recycle-request-price {
    font-size:15px;
    font-weight:700;
    color:#d4380d;
}


.recycle-request-remark {
    margin-top:10px;
    padding:8px 12px;
    background:#f7f9fc;
    border-radius:8px;
}


.recycle-request-remark-label {
    font-size:12px;
    color:#9aa4b5;
}


.recycle-request-remark p {
    margin:4px 0 0;
    font-size:13px;
    color:#5a6b84;
    word-break:break-word;
}


.recycle-request-footer {
    margin-top:10px;
    font-size:12px;
    color:#9aa4b5;
}


.recycle-status {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    padding:4px 12px;
    border-radius:999px;
    font-size:13px;
    white-space:nowrap;
}


.recycle-status-pending {
    background:#fff7e6;
    color:#ad6800;
}


.recycle-status-agreed {
    background:#f6ffed;
    color:#237804;
}


.recycle-status-rejected {
    background:#fff1f0;
    color:#a8071a;
}


/* 申请卡片右上角的状态标签组：状态 + 可选的「已入库」 */
.recycle-request-tags {
    display:flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
    flex-wrap:wrap;
}


/* 入库提示：独立于 status，只表示 inventoried_at 有值 */
.recycle-inventoried-tag {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 12px;
    border-radius:999px;
    background:#eef4fc;
    color:#1f4f8f;
    font-size:13px;
    white-space:nowrap;
}


.recycle-empty {
    margin-top:14px;
    padding:32px 20px;
    background:white;
    border:1px dashed #d9e2ef;
    border-radius:14px;
    text-align:center;
}


.recycle-empty-title {
    margin:0 0 8px;
    font-size:17px;
    color:#1f2733;
}


.recycle-empty-text {
    margin:0 0 16px;
    font-size:14px;
    color:#7a8599;
}


.recycle-empty .recycle-submit-btn {
    margin-top:6px;
}


@media (max-width:600px) {

    .recycle-page-title {
        font-size:21px;
    }

    .recycle-form-card {
        padding:16px;
    }

    .recycle-row {
        grid-template-columns:1fr;
        gap:0;
    }

    /* 卖书方式选择页：手机端两张方式卡片改为上下排列 */
    .recycle-pick {
        grid-template-columns:1fr;
        gap:12px;
    }

    .recycle-pick-card {
        padding:16px;
    }

    .recycle-submit-row {
        justify-content:stretch;
    }

    .recycle-submit-btn {
        width:100%;
    }

    .recycle-request-header {
        flex-direction:column;
    }

}


/* ========================
   求书系统（V0.8.1，book-requests-* 专属作用域）
   只影响 book-requests.html 与首页入口条，不改动其它页面
   ======================== */

.book-requests-page {
    max-width:900px;
    margin:0 auto;
}


.book-requests-title {
    margin:18px 2px 0;
    font-size:24px;
    font-weight:700;
    color:#1f2733;
}


.book-requests-note {
    margin:6px 2px 0;
    font-size:14px;
    color:#7a8599;
}


/* 视图切换：求书大厅 / 我要求书 / 我的求书 */
.book-requests-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}


.book-requests-tab {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 16px;
    border:1px solid #d9e2ef;
    border-radius:999px;
    background:white;
    color:#1f4f8f;
    font-size:14px;
    text-decoration:none;
    box-sizing:border-box;
}


.book-requests-tab:hover {
    background:#f0f7ff;
}


.book-requests-tab.is-active {
    background:#1f4f8f;
    border-color:#1f4f8f;
    color:white;
}


.book-requests-list {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:14px;
}


.book-requests-card {
    margin-top:14px;
    padding:16px 18px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(20,50,95,.04);
}


/* 卡片在列表容器里由 gap 控制间距，不再叠加 margin */
.book-requests-list .book-requests-card {
    margin-top:0;
}


.book-requests-card-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}


.book-requests-card-title {
    margin:0;
    font-size:16px;
    font-weight:700;
    color:#1f2733;
    word-break:break-word;
}


.book-requests-price {
    flex:0 0 auto;
    padding:2px 10px;
    border-radius:999px;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:13px;
    line-height:1.6;
    white-space:nowrap;
}


.book-requests-price.is-negotiable {
    background:#f4f7fc;
    color:#7a8599;
}


.book-requests-meta {
    margin:8px 0 0;
    font-size:13px;
    line-height:1.6;
    color:#7a8599;
    word-break:break-word;
}


.book-requests-desc {
    margin:8px 0 0;
    padding:8px 10px;
    border-radius:8px;
    background:#f6faff;
    font-size:13px;
    line-height:1.6;
    color:#445;
    word-break:break-word;
    white-space:pre-wrap;
}


.book-requests-card-foot {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid #eef2f8;
}


.book-requests-publisher {
    display:flex;
    align-items:center;
    min-width:0;
    margin:8px 0 0;
    font-size:13px;
    color:#1f4f8f;
    word-break:break-word;
}


/* 发布者首字头像：与详情页、卡片保持同一视觉语言 */
.book-requests-avatar {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:20px;
    height:20px;
    margin-right:6px;
    border-radius:50%;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:11px;
    font-weight:700;
    line-height:1;
}


.book-requests-status {
    flex:0 0 auto;
    padding:2px 10px;
    border-radius:999px;
    font-size:12px;
    line-height:1.6;
    white-space:nowrap;
}


.book-requests-status.is-open {
    background:#eaf2fb;
    color:#1f4f8f;
}


.book-requests-status.is-closed {
    background:#f0fbf4;
    color:#237804;
}


.book-requests-status.is-removed {
    background:#f4f7fc;
    color:#7a8599;
}


.book-requests-card-actions {
    display:inline-flex;
    /* 两个操作按钮始终同一行，不换行 */
    flex-wrap:nowrap;
    gap:8px;
}


.book-requests-action {
    /* 覆盖全局 button{width:100%; margin-top:20px}：
       否则每个按钮都会被撑成整行宽度，两个按钮只能上下堆叠 */
    flex:0 0 auto;
    width:auto;
    margin-top:0;
    white-space:nowrap;
    min-height:36px;
    padding:0 14px;
    border:1px solid #1f4f8f;
    border-radius:10px;
    background:#1f4f8f;
    color:white;
    font-size:13px;
    cursor:pointer;
}


.book-requests-action:hover {
    background:#1a4379;
    border-color:#1a4379;
}


.book-requests-action.is-ghost {
    background:white;
    border-color:#d9e2ef;
    color:#1f4f8f;
}


.book-requests-action.is-ghost:hover {
    background:#f0f7ff;
}


.book-requests-action:disabled {
    opacity:.7;
    cursor:default;
}


.book-requests-time {
    margin:8px 0 0;
    font-size:12px;
    color:#9aa4b5;
}


/* 大厅卡片：时间与按钮同处一行，时间不再需要「独立成行」的上边距；
   时间过长时省略，保证右侧按钮始终完整可见且不换行 */
.book-requests-card-foot.is-inline .book-requests-time {
    flex:1 1 auto;
    min-width:0;
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


.book-requests-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    min-height:34px;
    padding:0 12px;
    border:1px solid #d9e2ef;
    border-radius:10px;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:13px;
    white-space:nowrap;
    text-decoration:none;
    box-sizing:border-box;
}


.book-requests-link:hover {
    background:#dbe8f8;
}


/* 发布表单 */
.book-requests-form .book-requests-field {
    margin-bottom:14px;
}


.book-requests-label {
    display:block;
    margin-bottom:6px;
    font-size:14px;
    color:#445;
}


.book-requests-required {
    color:#d4380d;
}


.book-requests-input,
.book-requests-textarea {
    width:100%;
    min-height:44px;
    padding:10px 12px;
    border:1px solid #d9e2ef;
    border-radius:10px;
    background:white;
    color:#1f2733;
    font-size:15px;
    box-sizing:border-box;
}


.book-requests-textarea {
    min-height:96px;
    resize:vertical;
}


.book-requests-input:focus,
.book-requests-textarea:focus {
    outline:none;
    border-color:#1f4f8f;
    box-shadow:0 0 0 3px rgba(31,79,143,.12);
}


.book-requests-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}


.book-requests-row .book-requests-field {
    margin-bottom:14px;
}


.book-requests-submit-row {
    display:flex;
    justify-content:flex-end;
}


.book-requests-submit {
    min-height:46px;
    padding:0 22px;
    border:none;
    border-radius:10px;
    background:#1f4f8f;
    color:white;
    font-size:15px;
    cursor:pointer;
}


.book-requests-submit:hover {
    background:#1a4379;
}


.book-requests-submit:disabled {
    opacity:.7;
    cursor:default;
}


/* 空态 / 登录引导 */
.book-requests-empty {
    margin-top:14px;
    padding:42px 20px;
    background:white;
    border:1px dashed #d9e2ef;
    border-radius:14px;
    text-align:center;
}


.book-requests-empty-title {
    margin:0 0 8px;
    font-size:18px;
    color:#1f2733;
}


.book-requests-empty-text {
    margin:0;
    font-size:14px;
    color:#7a8599;
}


.book-requests-empty-btn {
    display:inline-block;
    margin-top:14px;
    min-height:44px;
    padding:0 18px;
    border-radius:10px;
    background:#1f4f8f;
    color:white;
    font-size:15px;
    line-height:44px;
    text-decoration:none;
}


.book-requests-empty-btn:hover {
    background:#1a4379;
}


@media (max-width:600px) {

    .book-requests-title {
        font-size:21px;
    }

    .book-requests-card {
        padding:14px;
    }

    .book-requests-tab {
        min-height:38px;
        padding:0 14px;
        font-size:13px;
    }

    /* 手机端：发布者与按钮各占一行，避免挤在一行溢出 */
    .book-requests-card-foot {
        flex-direction:column;
        align-items:flex-start;
    }

    /* 大厅卡片例外：发布时间在左、按钮在右，保持同一行（卡片更紧凑） */
    .book-requests-card-foot.is-inline {
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
    }

    .book-requests-card-foot.is-inline .book-requests-link {
        flex:0 0 auto;
        margin-left:10px;
    }

    .book-requests-card-actions {
        width:100%;
        display:flex;
        /* 手机端也强制同一行：两个按钮等分整行宽度 */
        flex-wrap:nowrap;
    }

    .book-requests-action {
        /* basis 0 + min-width 0：等分宽度且不会被内容撑开导致换行 */
        flex:1 1 0;
        min-width:0;
        width:auto;
        margin-top:0;
        padding:0 10px;
        white-space:nowrap;
    }

    .book-requests-row {
        grid-template-columns:1fr;
        gap:0;
    }

    .book-requests-submit {
        width:100%;
    }

}


/* ========================
   我的出售（V0.7.6，my-sales-* 专属作用域）
   ======================== */

.my-sales-page {
    max-width:900px;
    margin:0 auto;
}


.my-sales-page-title {
    margin:18px 2px 0;
    font-size:24px;
    font-weight:700;
    color:#1f2733;
}


.my-sales-page-note {
    margin:6px 2px 0;
    font-size:14px;
    color:#7a8599;
}


.my-sales-group {
    margin-top:18px;
}


.my-sales-group-title {
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 2px 10px;
    font-size:16px;
    font-weight:700;
    color:#1f2733;
}


.my-sales-group-count {
    display:inline-block;
    min-width:22px;
    padding:1px 8px;
    border-radius:999px;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:12px;
    font-weight:600;
    text-align:center;
}


.my-sales-list {
    display:flex;
    flex-direction:column;
    gap:12px;
}


.my-sales-card {
    padding:16px 18px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(20,50,95,.04);
}


.my-sales-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}


.my-sales-title {
    margin:0;
    font-size:16px;
    font-weight:700;
    color:#1f2733;
    word-break:break-word;
}


/* 状态标签：审核中 / 已通过 / 已拒绝 三种色，均为浅底深字 */
.my-sales-status {
    flex:0 0 auto;
    padding:2px 10px;
    border-radius:999px;
    font-size:12px;
    line-height:1.5;
    white-space:nowrap;
}


.my-sales-status.is-pending {
    background:#fff7e6;
    color:#ad6800;
}


.my-sales-status.is-approved {
    background:#f0fbf4;
    color:#237804;
}


.my-sales-status.is-rejected {
    background:#fff1f0;
    color:#a8071a;
}


.my-sales-meta {
    margin:8px 0 0;
    font-size:13px;
    line-height:1.6;
    color:#7a8599;
    word-break:break-word;
}


.my-sales-price-row {
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:10px;
    margin:8px 0 0;
}


.my-sales-price {
    font-size:15px;
    font-weight:600;
    color:#1f4f8f;
}


.my-sales-old {
    font-size:13px;
    color:#aeb8c8;
    text-decoration:line-through;
}


/* 已通过申请对应的教材状态条 */
.my-sales-book {
    margin-top:8px;
    padding:6px 10px;
    border-radius:8px;
    background:#f6faff;
    border:1px solid #e4eaf2;
    font-size:13px;
    color:#1f4f8f;
}


.my-sales-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid #eef2f8;
}


.my-sales-time {
    font-size:12px;
    color:#9aa4b5;
}


.my-sales-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:0 14px;
    border:1px solid #d9e2ef;
    border-radius:10px;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:14px;
    text-decoration:none;
    box-sizing:border-box;
}


.my-sales-link:hover {
    background:#dbe8f8;
}


.my-sales-empty {
    margin-top:14px;
    padding:42px 20px;
    background:white;
    border:1px dashed #d9e2ef;
    border-radius:14px;
    text-align:center;
}


.my-sales-empty-title {
    margin:0 0 8px;
    font-size:18px;
    color:#1f2733;
}


.my-sales-empty-text {
    margin:0;
    font-size:14px;
    color:#7a8599;
}


.my-sales-empty-btn {
    display:inline-block;
    margin-top:14px;
    min-height:44px;
    padding:0 18px;
    border-radius:10px;
    background:#1f4f8f;
    color:white;
    font-size:15px;
    line-height:44px;
    text-decoration:none;
}


.my-sales-empty-btn:hover {
    background:#1a4379;
}


.my-sales-foot-link {
    margin-top:16px;
    text-align:center;
}


.my-sales-switch-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 16px;
    border:1px solid #d9e2ef;
    border-radius:10px;
    background:#eaf2fb;
    color:#1f4f8f;
    font-size:14px;
    text-decoration:none;
    box-sizing:border-box;
}


.my-sales-switch-link:hover {
    background:#dbe8f8;
}


@media (max-width:600px) {

    .my-sales-page-title {
        font-size:21px;
    }

    .my-sales-card {
        padding:14px;
    }

    .my-sales-header {
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }

    .my-sales-footer {
        flex-direction:column;
        align-items:flex-start;
    }

}


/* ========================
   认证页（auth-* 专属作用域）
   ======================== */

.auth-page {
    min-height:calc(100vh - 120px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 0;
}


/* ========================
   免责声明页（legal-* 专属作用域）
   与 auth-card / hp-main 同一套卡片语言，阅读宽度收窄到 820px
   ======================== */

.legal-page {
    max-width:820px;
    margin:0 auto;
}


.legal-card {
    padding:28px 24px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    box-shadow:0 2px 12px rgba(20,50,95,.05);
}


.legal-title {
    margin:0;
    font-size:24px;
    font-weight:700;
    color:#1f2733;
}


.legal-lead {
    margin:14px 0 0;
    font-size:15px;
    font-weight:700;
    color:#1f4f8f;
}


.legal-text {
    margin:12px 0 0;
    font-size:15px;
    line-height:1.8;
    color:#445;
    word-break:break-word;
}


/* 条款小标题（第一条 / 第二条 …） */
.legal-section-title {
    margin:22px 0 0;
    font-size:17px;
    font-weight:700;
    color:#1f4f8f;
}


.legal-list {
    margin:12px 0 0;
    padding-left:22px;
    font-size:15px;
    line-height:1.8;
    color:#445;
}


.legal-list li + li {
    margin-top:4px;
}


.legal-actions {
    margin-top:22px;
}


/* ========================
   首页页脚：免责声明入口
   ======================== */

.site-footer {
    max-width:1200px;
    margin:18px auto 0;
    padding:16px 4px 8px;
    display:flex;
    /* 纵向排列 + 左对齐：右下角是固定的「返回顶部 / 悬浮购物车」按钮，
       页脚内容全部靠左，任何宽度下都不会被这两个浮动按钮遮挡 */
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    border-top:1px solid #e4eaf2;
}


.site-footer-brand {
    margin:0;
    font-size:13px;
    color:#9aa4b5;
    word-break:break-word;
}


.site-footer-links {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}


.site-footer-link {
    font-size:14px;
    color:#1f4f8f;
    text-decoration:none;
}


.site-footer-link:hover {
    text-decoration:underline;
}


.site-footer-link:focus-visible {
    outline:2px solid #1f4f8f;
    outline-offset:2px;
}


.auth-shell {
    width:100%;
    max-width:420px;
}


.auth-card {
    padding:28px 24px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    box-shadow:0 2px 12px rgba(20,50,95,.05);
}


.auth-title {
    margin:0;
    font-size:24px;
    font-weight:700;
    color:#1f2733;
}


.auth-subtitle {
    margin:8px 0 0;
    font-size:14px;
    color:#7a8599;
}


.auth-step {
    margin:22px 0 0;
    font-size:14px;
    font-weight:700;
    color:#1f4f8f;
}


.auth-field {
    margin-top:16px;
}


.auth-label {
    display:block;
    margin-bottom:6px;
    font-size:14px;
    color:#445;
}


.auth-input {
    width:100%;
    min-height:44px;
    padding:10px 12px;
    border:1px solid #d9e2ef;
    border-radius:10px;
    background:white;
    color:#1f2733;
    font-size:15px;
    box-sizing:border-box;
}


.auth-input:focus {
    outline:none;
    border-color:#1f4f8f;
    box-shadow:0 0 0 3px rgba(31,79,143,.12);
}


.auth-primary-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:44px;
    margin:18px 0 0;
    padding:0 18px;
    border:none;
    border-radius:10px;
    background:#1f4f8f;
    color:white;
    font-size:16px;
    cursor:pointer;
    box-sizing:border-box;
}


.auth-primary-btn:hover {
    background:#1a4379;
}


.auth-primary-btn:active {
    background:#163a68;
}


.auth-primary-btn:disabled {
    background:#d6dde8;
    color:#8f99a8;
    cursor:default;
}


.auth-links {
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-top:14px;
    font-size:14px;
}


.auth-links a {
    color:#1f4f8f;
    text-decoration:none;
}


.auth-links a:hover {
    text-decoration:underline;
}


.auth-help {
    margin:14px 0 0;
    font-size:13px;
    color:#9aa4b5;
}


.auth-help a {
    color:#5a6b84;
    text-decoration:none;
}


.auth-help a:hover {
    text-decoration:underline;
}


#login-msg,
#register-msg,
#phone-msg,
#code-msg,
#reset-msg {
    margin-top:12px;
}


@media (max-width:600px) {

    .auth-page {
        padding:12px 0;
    }

    .auth-card {
        padding:22px 18px;
    }

    .legal-card {
        padding:22px 18px;
    }

    .legal-title {
        font-size:21px;
    }

    .legal-lead,
    .legal-text,
    .legal-list {
        font-size:14px;
    }

    .legal-section-title {
        font-size:16px;
    }

}


/* ========================
   管理员端：图书状态标签 / 删除按钮 / 确认弹窗
   ======================== */

.admin-status {
    display:inline-block;
    padding:2px 10px;
    border-radius:999px;
    font-size:13px;
}


.admin-status-on_sale {
    background:#f0fbf4;
    color:#237804;
}


.admin-status-off_sale {
    background:#f0f0f0;
    color:#8c8c8c;
}


.admin-status-deleted {
    background:#fff1f0;
    color:#a8071a;
}


.admin-status-unknown {
    background:#f5f5f5;
    color:#666;
}


.admin-danger-btn {
    background:white;
    color:#a8071a;
    border:1px solid #f0b6bd;
}


.admin-danger-btn:hover {
    background:#fff1f0;
}


.admin-checkbox {
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    padding:0 14px;
    border:1px solid #d9e2ef;
    border-radius:10px;
    background:white;
    font-size:15px;
    color:#445;
    cursor:pointer;
}


.admin-checkbox input {
    width:18px;
    height:18px;
}


.admin-modal-overlay {
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:rgba(15,23,42,0.45);
}


.admin-modal-overlay[hidden] {
    display:none;
}


.admin-modal {
    width:100%;
    max-width:400px;
    padding:24px 22px;
    background:white;
    border-radius:14px;
    box-shadow:0 10px 30px rgba(15,23,42,0.25);
    box-sizing:border-box;
}


.admin-modal-title {
    margin:0;
    font-size:18px;
    font-weight:700;
    color:#1f2733;
    word-break:break-word;
}


.admin-modal-text {
    margin:10px 0 0;
    font-size:14px;
    line-height:1.6;
    color:#7a8599;
    word-break:break-word;
}


.admin-modal-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:20px;
}


.admin-modal-actions button {
    min-width:96px;
    min-height:44px;
    margin-top:0;
}


@media (max-width:600px) {

    .admin-modal-actions {
        flex-direction:column-reverse;
    }

    .admin-modal-actions button {
        width:100%;
    }

}


/* ========================
   管理员端：新增图书的商品图片
   ======================== */

.admin-image-field {
    margin-top:12px;
}


.admin-image-label {
    margin:0 0 8px;
    font-size:14px;
    color:#555;
}


.admin-image-picker {
    display:block;
    width:100%;
    box-sizing:border-box;
    min-height:44px;
    padding:10px;
    font-size:14px;
    background:white;
    border:1px solid #d9e2ef;
    border-radius:10px;
}


.admin-image-help {
    margin:6px 0 0;
    font-size:13px;
    color:#9aa4b5;
}


.admin-image-preview {
    margin-top:10px;
}


.admin-image-preview img,
.admin-image-preview .book-thumb {
    display:block;
    width:100%;
    max-width:220px;
    height:140px;
    object-fit:contain;
    background:#f5f5f5;
    border-radius:10px;
    box-sizing:border-box;
}


@media (max-width:600px) {

    .admin-image-preview img,
    .admin-image-preview .book-thumb {
        max-width:100%;
        height:170px;
    }

}


/* ========================
   管理员端：商品搜索与空态
   ======================== */

.admin-search-input {
    flex:1 1 260px;
    min-width:0;
    min-height:44px;
    padding:10px 12px;
    font-size:15px;
    color:#1f2733;
    background:white;
    border:1px solid #d9e2ef;
    border-radius:10px;
    box-sizing:border-box;
}


.admin-search-input:focus {
    outline:none;
    border-color:#1f4f8f;
    box-shadow:0 0 0 3px rgba(31,79,143,.12);
}


.admin-book-empty {
    margin-top:15px;
    padding:32px 20px;
    background:white;
    border:1px dashed #d9e2ef;
    border-radius:10px;
    text-align:center;
}


.admin-book-empty-title {
    margin:0;
    font-size:16px;
    color:#1f2733;
}


.admin-book-empty-text {
    margin:8px 0 0;
    font-size:13px;
    color:#7a8599;
}


@media (max-width:600px) {

    .admin-search-input {
        flex:1 1 100%;
    }

}


/* ========================
   管理员端 D1：基础视觉基调（仅 .admin-page 作用域）
   ======================== */

.admin-page {
    background:#f5f7fa;
    color:#1f2733;
}


#admin-main {
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
}


/* ========================
   数据概览（第一阶段）：顶部指标卡片
   7 张卡片：>1050px 四列 / 769-1050px 三列 / ≤768px 两列
   ======================== */

.admin-page .admin-stats {
    margin-top:14px;
    padding:14px 16px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(20,50,95,.05);
}


.admin-page .admin-stats-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}


.admin-page .admin-stats-title {
    margin:0;
    font-size:16px;
    font-weight:700;
    color:#14325f;
}


/* 刷新概览：复用后台次操作按钮的浅蓝视觉，尺寸收到顶栏内 */
.admin-page .admin-stats-head .admin-btn-secondary:not(:disabled) {
    width:auto;
    min-height:40px;
    margin-top:0;
    padding:0 14px;
    font-size:14px;
    background:#eaf2fb;
    color:#1f4f8f;
    border:1px solid #d9e2ef;
}


.admin-page .admin-stats-head .admin-btn-secondary:not(:disabled):hover {
    background:#dbe8f8;
}


.admin-page .admin-stats-head .admin-btn-secondary:not(:disabled):active {
    background:#cfe0f4;
}


.admin-page .admin-stats-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
}


.admin-page .admin-stat-card:not(:disabled) {
    display:flex;
    flex-direction:column;
    gap:4px;
    width:100%;
    margin-top:0;
    padding:10px 12px;
    background:#f7fbff;
    border:1px solid #e4eaf2;
    border-radius:12px;
    color:#1f2733;
    text-align:left;
    cursor:pointer;
}


.admin-page .admin-stat-card:not(:disabled):hover {
    background:#eaf2fb;
    border-color:#d9e2ef;
}


.admin-page .admin-stat-card:not(:disabled):active {
    background:#dbe8f8;
}


.admin-page .admin-stat-card:focus-visible {
    outline:2px solid #1f4f8f;
    outline-offset:2px;
}


.admin-page .admin-stat-label {
    font-size:13px;
    color:#5a6b84;
}


.admin-page .admin-stat-value {
    font-size:22px;
    font-weight:700;
    line-height:1.1;
    color:#1f4f8f;
}


.admin-page .admin-stat-hint {
    font-size:12px;
    color:#9aa4b5;
    word-break:break-word;
}


/* 加载失败：只在数值位置提示，不改变卡片高度节奏 */
.admin-page .admin-stat-card.is-error .admin-stat-value {
    font-size:14px;
    color:#a8071a;
}


@media (max-width:1050px) {

    .admin-page .admin-stats-grid {
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

}


@media (max-width:768px) {

    .admin-page .admin-stats {
        padding:12px;
    }

    .admin-page .admin-stats-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .admin-page .admin-stat-value {
        font-size:20px;
    }

}


/* 主操作：深蓝实心（disabled 保持原样） */
.admin-page button:not(:disabled) {
    background:#1f4f8f;
    color:white;
}


.admin-page button:not(:disabled):hover {
    background:#1a4379;
}


.admin-page button:not(:disabled):active {
    background:#163a68;
}


/* 次级操作：浅蓝 / 深蓝文字 / 描边 */
.admin-page .btn-ghost:not(:disabled) {
    background:#eaf2fb;
    color:#1f4f8f;
    border:1px solid #d9e2ef;
}


.admin-page .btn-ghost:not(:disabled):hover {
    background:#dbe8f8;
}


/* 危险操作：保持弱红，不抢主操作 */
.admin-page .admin-danger-btn:not(:disabled) {
    background:white;
    color:#a8071a;
    border:1px solid #f0b6bd;
}


.admin-page .admin-danger-btn:not(:disabled):hover {
    background:#fff1f0;
}


/* 模块导航：未选中浅蓝，选中深蓝 */
.admin-page .module-btn:not(:disabled) {
    background:#eaf2fb;
    color:#1f4f8f;
}


.admin-page .module-btn:not(:disabled):hover {
    background:#dbe8f8;
}


.admin-page .module-btn.is-active:not(:disabled) {
    background:#1f4f8f;
    color:white;
}


/* 顶部导航按钮 */
.admin-page .nav-btn:not(:disabled) {
    background:#1f4f8f;
    color:white;
}


.admin-page .nav-btn:not(:disabled):hover {
    background:#1a4379;
}


/* 后台卡片 / 标题卡：14px 圆角 + 浅边框 + 轻阴影 */
.admin-page .book,
.admin-page .header {
    border-radius:14px;
    border:1px solid #e4eaf2;
    box-shadow:0 2px 10px rgba(20,50,95,.05);
}


/* 输入类控件：统一边框与主色 focus */
.admin-page input:not([type="checkbox"]):not([type="radio"]),
.admin-page select,
.admin-page textarea {
    border-color:#d9e2ef;
    color:#1f2733;
}


.admin-page input:not([type="checkbox"]):not([type="radio"]):focus,
.admin-page select:focus,
.admin-page textarea:focus {
    outline:none;
    border-color:#1f4f8f;
    box-shadow:0 0 0 3px rgba(31,79,143,.12);
}


/* 辅助文字统一为后台 muted 色 */
.admin-page .muted {
    color:#7a8599;
}


/* 状态标签保持克制三色，只统一胶囊形状 */
.admin-page .status-tag {
    border-radius:999px;
}


/* 删除确认弹窗：轻一点的阴影 + 桌面 440px */
.admin-page .admin-modal {
    max-width:440px;
    box-shadow:0 8px 24px rgba(15,23,42,.18);
}


@media (max-width:600px) {

    .admin-page .admin-modal {
        max-width:100%;
    }

}


/* ========================
   管理员端 D2a：商品管理工具栏主次 + 表单宽度 + 768 断点
   ======================== */

/* 主操作：新增图书（深蓝实心，沿用 D1 主色） */
.admin-page .toolbar .admin-btn-primary:not(:disabled) {
    background:#1f4f8f;
    color:white;
}


.admin-page .toolbar .admin-btn-primary:not(:disabled):hover {
    background:#1a4379;
}


.admin-page .toolbar .admin-btn-primary:not(:disabled):active {
    background:#163a68;
}


/* 次操作：刷新（浅蓝底 + 深蓝字 + 轻描边） */
.admin-page .toolbar .admin-btn-secondary:not(:disabled) {
    background:#eaf2fb;
    color:#1f4f8f;
    border:1px solid #d9e2ef;
}


.admin-page .toolbar .admin-btn-secondary:not(:disabled):hover {
    background:#dbe8f8;
}


.admin-page .toolbar .admin-btn-secondary:not(:disabled):active {
    background:#cfe0f4;
}


/* 搜索框：比原来更宽、更有存在感（仅商品管理页的搜索框） */
.admin-page #admin-book-search {
    flex:2 1 320px;
}


/* 新增/编辑表单：限制阅读宽度，字段节奏统一到 14px */
.admin-page #book-form-area .form-card {
    max-width:820px;
}


.admin-page #book-form-area .form-row {
    margin-top:14px;
}


/* 768 断点：工具栏整行、表单恢复全宽（600 以下行为不变） */
@media (max-width:768px) {

    .admin-page .toolbar button {
        flex:1 1 100%;
    }

    .admin-page #book-form-area .form-card {
        max-width:100%;
    }

}


/* ========================
   管理员端 D2b：商品卡片三段式结构与信息层级
   ======================== */

.admin-page .admin-book-card {
    display:flex;
    gap:14px;
    align-items:flex-start;
}


.admin-page .admin-book-media {
    flex:0 0 auto;
}


.admin-page .admin-book-main {
    flex:1 1 auto;
    min-width:0;
}


.admin-page .admin-book-title-row {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}


.admin-page .admin-book-title {
    margin:0;
    font-size:16px;
    font-weight:700;
    color:#1f4f8f;
    word-break:break-word;
}


.admin-page .admin-book-meta {
    margin:6px 0 0;
    font-size:14px;
    color:#7a8599;
    word-break:break-word;
}


.admin-page .admin-book-price-row {
    display:flex;
    align-items:baseline;
    gap:10px;
    flex-wrap:wrap;
    margin:8px 0 0;
}


.admin-page .admin-book-price {
    font-size:20px;
    font-weight:700;
    color:#d4380d;
}


.admin-page .admin-book-old-price {
    font-size:13px;
    color:#9aa4b5;
    text-decoration:line-through;
}


.admin-page .admin-book-stock-row {
    margin:6px 0 0;
    font-size:14px;
    color:#445;
}


/* 库存状态标签：沿用后台现有柔和配色（绿 / 淡琥珀 / 灰），不用刺眼颜色 */
.admin-page .admin-book-stock-tag {
    display:inline-block;
    margin:0 2px;
    padding:2px 10px;
    border-radius:999px;
    font-size:13px;
}


.admin-page .admin-stock-ok {
    background:#f0fbf4;
    color:#237804;
}


.admin-page .admin-stock-low {
    background:#fff7e6;
    color:#ad6800;
}


.admin-page .admin-stock-out {
    background:#f0f0f0;
    color:#8c8c8c;
}


.admin-page .admin-book-id {
    font-size:12px;
    color:#9aa4b5;
}


.admin-page .admin-book-actions {
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:0 0 auto;
    min-width:120px;
}


.admin-page .admin-book-actions button {
    margin-top:0;
    width:100%;
    min-height:44px;
}


@media (max-width:768px) {

    .admin-page .admin-book-card {
        flex-direction:column;
    }

    .admin-page .admin-book-actions {
        flex-direction:row;
        flex-wrap:wrap;
        width:100%;
        min-width:0;
    }

    .admin-page .admin-book-actions button {
        flex:1 1 140px;
        width:auto;
    }

}


/* ========================
   管理员端 D2c：教材竖版图片 + 预览统一
   ======================== */

.admin-page .admin-book-photo {
    display:block;
    width:120px;
    height:160px;
    flex:0 0 120px;
    max-width:100%;
    object-fit:contain;
    background:#f2f5f9;
    border-radius:10px;
    box-sizing:border-box;
}


.admin-page .admin-book-photo-empty {
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9aa4b5;
    font-size:13px;
    border:1px dashed #d9e2ef;
}


/* 新增 / 编辑表单里的本地预览：与商品卡片图片同一套规格 */
.admin-page .image-preview img,
.admin-page .image-preview .book-thumb,
.admin-page .admin-image-preview img,
.admin-page .admin-image-preview .book-thumb {
    display:block;
    width:120px;
    height:160px;
    max-width:100%;
    object-fit:contain;
    background:#f2f5f9;
    border-radius:10px;
    box-sizing:border-box;
}


.admin-page .image-preview .book-thumb-empty,
.admin-page .admin-image-preview .book-thumb-empty {
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9aa4b5;
    font-size:13px;
    border:1px dashed #d9e2ef;
}


/* ========================
   管理员端 D3a-1：订单列表搜索 / 状态标签 / 空态
   ======================== */

/* 订单搜索框：与商品搜索同一套输入样式，宽度更有存在感 */
.admin-page #admin-order-search {
    flex:2 1 320px;
}


/* 订单卡片标题行：订单号 + 状态标签同一行 */
.admin-page .admin-order-title-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}


.admin-page .admin-order-title-row h3 {
    margin:0;
    font-size:16px;
    font-weight:700;
    color:#1f4f8f;
    word-break:break-word;
}


.admin-page .admin-order-title-row .status-tag {
    flex:0 0 auto;
    white-space:nowrap;
}


/* 订单状态补充色：已付款 / 已发货（浅蓝信息态） */
.admin-page .status-info {
    background:#eaf2fb;
    color:#1f4f8f;
}


@media (max-width:768px) {

    .admin-page #admin-order-search {
        flex:1 1 100%;
    }

    .admin-page .toolbar #order-filter {
        flex:1 1 100%;
    }

    .admin-page .admin-order-title-row {
        align-items:flex-start;
    }

}


/* ========================
   管理员端 D3a-2：订单列表信息分层 + 详情信息层级
   ======================== */

/* 列表卡片：左侧信息摘要 + 右侧唯一主操作 */
.admin-page .admin-order-card {
    display:flex;
    gap:14px;
    align-items:flex-start;
}


.admin-page .admin-order-main {
    flex:1 1 auto;
    min-width:0;
}


.admin-page .admin-order-meta {
    margin:6px 0 0;
    font-size:14px;
    color:#7a8599;
    word-break:break-word;
}


.admin-page .admin-order-total-row {
    margin:8px 0 0;
}


.admin-page .admin-order-total {
    font-size:20px;
    font-weight:700;
    color:#d4380d;
}


.admin-page .admin-order-id {
    margin:6px 0 0;
    font-size:12px;
    color:#9aa4b5;
}


.admin-page .admin-order-actions {
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:0 0 auto;
    min-width:120px;
}


.admin-page .admin-order-actions button {
    margin-top:0;
    width:100%;
    min-height:44px;
}


/* 详情：标题行 + 分组区块（替代原来的 hr + h4） */
.admin-page .admin-order-detail-header {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}


.admin-page .admin-order-detail-title {
    margin:0;
    font-size:17px;
    font-weight:700;
    color:#1f4f8f;
}


.admin-page .admin-order-detail-section {
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid #e4eaf2;
}


.admin-page .admin-order-section-title {
    margin:0 0 6px;
    font-size:14px;
    font-weight:700;
    color:#1f4f8f;
}


.admin-page .admin-order-detail-meta {
    margin:4px 0;
    font-size:14px;
    color:#7a8599;
    word-break:break-word;
}


.admin-page .admin-order-detail-total {
    margin:10px 0 0;
    font-size:14px;
    color:#7a8599;
}


.admin-page .admin-order-detail-total-value {
    font-size:20px;
    font-weight:700;
    color:#d4380d;
}


/* 商品明细 */
.admin-page .admin-order-items {
    display:flex;
    flex-direction:column;
    gap:10px;
}


.admin-page .admin-order-item {
    padding:10px 12px;
    background:#f7f9fc;
    border:1px solid #e4eaf2;
    border-radius:10px;
}


.admin-page .admin-order-item-title {
    margin:0;
    font-size:15px;
    font-weight:600;
    color:#1f2733;
    word-break:break-word;
}


.admin-page .admin-order-item-meta {
    margin:6px 0 0;
    font-size:14px;
    color:#7a8599;
}


.admin-page .admin-order-item-id {
    margin:4px 0 0;
    font-size:12px;
    color:#9aa4b5;
}


.admin-page .admin-order-items-empty {
    margin:0;
    font-size:14px;
    color:#7a8599;
}


/* ========================
   订单履约进度时间线 + 订单操作按钮（Phase 2）
   ======================== */

.admin-page .admin-order-timeline {
    margin:0;
    padding:0;
    list-style:none;
}


.admin-page .admin-order-timeline-step {
    display:flex;
    align-items:baseline;
    gap:8px;
    padding:6px 0;
    font-size:14px;
    border-bottom:1px dashed #eef1f6;
}


.admin-page .admin-order-timeline-step:last-child {
    border-bottom:none;
}


.admin-page .admin-order-timeline-mark {
    flex:0 0 auto;
    width:16px;
    text-align:center;
    line-height:1.4;
}


.admin-page .admin-order-timeline-label {
    flex:0 0 auto;
    color:#445;
}


.admin-page .admin-order-timeline-time {
    flex:1 1 auto;
    min-width:0;
    text-align:right;
    font-size:12px;
    color:#9aa4b5;
    word-break:break-word;
}


/* 已完成节点 */
.admin-page .admin-order-timeline-step.is-done .admin-order-timeline-mark,
.admin-page .admin-order-timeline-step.is-done .admin-order-timeline-label {
    color:#237804;
}


/* 当前节点 */
.admin-page .admin-order-timeline-step.is-current .admin-order-timeline-mark,
.admin-page .admin-order-timeline-step.is-current .admin-order-timeline-label {
    font-weight:700;
    color:#1f4f8f;
}


/* 未到达节点 */
.admin-page .admin-order-timeline-step.is-todo .admin-order-timeline-mark,
.admin-page .admin-order-timeline-step.is-todo .admin-order-timeline-label {
    color:#9aa4b5;
}


.admin-page .admin-order-timeline-note,
.admin-page .admin-order-action-note {
    margin:0;
    font-size:14px;
    color:#7a8599;
    word-break:break-word;
}


.admin-page .admin-order-timeline-cancelled {
    margin:0;
    padding:8px 10px;
    background:#f7f9fc;
    border:1px solid #e4eaf2;
    border-radius:10px;
    font-size:14px;
    color:#8c8c8c;
}


/* 操作按钮：只渲染合法下一步，窄屏自动换行 */
.admin-page .admin-order-action-row {
    flex-wrap:wrap;
    gap:10px;
}


.admin-page .admin-order-action-row button {
    min-width:140px;
    min-height:44px;
    margin-top:0;
}


@media (max-width:768px) {

    .admin-page .admin-order-card {
        flex-direction:column;
    }

    .admin-page .admin-order-actions {
        width:100%;
        min-width:0;
    }

    .admin-page .admin-order-action-row button {
        min-width:0;
    }

}


/* ========================
   管理员端 D3b-1：回收列表搜索 / 状态标签 / 卡片信息分层
   ======================== */

/* 回收搜索框：与商品搜索、订单搜索同一套输入样式 */
.admin-page #admin-recycle-search {
    flex:2 1 320px;
}


/* 列表卡片：左侧信息摘要 + 右侧唯一主操作 */
.admin-page .admin-recycle-card {
    display:flex;
    gap:14px;
    align-items:flex-start;
}


.admin-page .admin-recycle-main {
    flex:1 1 auto;
    min-width:0;
}


/* 标题行：书名 + 状态标签同行 */
.admin-page .admin-recycle-title-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}


.admin-page .admin-recycle-title {
    margin:0;
    font-size:16px;
    font-weight:700;
    color:#1f4f8f;
    word-break:break-word;
}


.admin-page .admin-recycle-title-row .status-tag {
    flex:0 0 auto;
    white-space:nowrap;
}


/* 作者 / 专业 / 年级 / 成色 */
.admin-page .admin-recycle-meta {
    margin:6px 0 0;
    font-size:14px;
    color:#7a8599;
    word-break:break-word;
}


/* 学生 / 手机号 / 数量：比 meta 略重一点 */
.admin-page .admin-recycle-info {
    margin:6px 0 0;
    font-size:14px;
    color:#445;
    word-break:break-word;
}


/* 交书方式摘要：与管理端其它提示行同字号，但用品牌蓝便于扫读 */
.admin-page .admin-recycle-handover-note {
    margin:10px 0 0;
    padding:8px 10px;
    background:#eaf2fb;
    border:1px solid #d9e2ef;
    border-radius:10px;
    font-size:14px;
    font-weight:700;
    color:#1f4f8f;
    word-break:break-word;
}


/* 订单列表卡片里的取书方式摘要 */
.admin-page .admin-order-fulfillment {
    margin-top:6px;
    font-size:14px;
    color:#1f4f8f;
    word-break:break-word;
}


.admin-page .admin-recycle-price-row {
    margin:8px 0 0;
}


.admin-page .admin-recycle-price {
    font-size:20px;
    font-weight:700;
    color:#d4380d;
}


.admin-page .admin-recycle-id {
    margin:6px 0 0;
    font-size:12px;
    color:#9aa4b5;
}


.admin-page .admin-recycle-actions {
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:0 0 auto;
    min-width:120px;
}


.admin-page .admin-recycle-actions button {
    margin-top:0;
    width:100%;
    min-height:44px;
}


@media (max-width:768px) {

    .admin-page #admin-recycle-search {
        flex:1 1 100%;
    }

    .admin-page .toolbar #recycle-filter {
        flex:1 1 100%;
    }

    .admin-page .admin-recycle-card {
        flex-direction:column;
    }

    .admin-page .admin-recycle-actions {
        width:100%;
        min-width:0;
    }

    .admin-page .admin-recycle-title-row {
        align-items:flex-start;
    }

}


/* 来源标签：官方直售 / 学生出售（图书管理列表 + 学生出售审核共用） */
.admin-page .admin-source-tag {
    display:inline-block;
    flex:0 0 auto;
    padding:2px 8px;
    border-radius:999px;
    font-size:12px;
    line-height:1.5;
    white-space:nowrap;
}


.admin-page .admin-source-tag.is-official {
    background:#eaf2fb;
    color:#1f4f8f;
}


.admin-page .admin-source-tag.is-student {
    background:#f0fbf4;
    color:#237804;
}


/* ========================
   学生出售审核（V0.6.2）
   卡片结构与回收申请卡片保持一致，但单独成块，
   避免改动已经在跑的回收样式
   ======================== */

.admin-page .admin-sell-card {
    display:flex;
    gap:14px;
    align-items:flex-start;
}


.admin-page .admin-sell-main {
    flex:1 1 auto;
    min-width:0;
}


.admin-page .admin-sell-title-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}


.admin-page .admin-sell-title {
    margin:0;
    font-size:16px;
    font-weight:700;
    color:#1f4f8f;
    word-break:break-word;
}


.admin-page .admin-sell-title-row .status-tag {
    flex:0 0 auto;
    white-space:nowrap;
}


/* 作者 / 专业 / 年级 / 成色、图片地址、简介 */
.admin-page .admin-sell-meta {
    margin:6px 0 0;
    font-size:14px;
    color:#7a8599;
    word-break:break-word;
}


.admin-page .admin-sell-price-row {
    margin:8px 0 0;
    display:flex;
    align-items:baseline;
    gap:12px;
    flex-wrap:wrap;
}


.admin-page .admin-sell-price {
    font-size:20px;
    font-weight:700;
    color:#d4380d;
}


.admin-page .admin-sell-old {
    font-size:13px;
    color:#aeb8c8;
    text-decoration:line-through;
}


.admin-page .admin-sell-id {
    margin:6px 0 0;
    font-size:12px;
    color:#9aa4b5;
}


.admin-page .admin-sell-actions {
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:0 0 auto;
    min-width:120px;
}


.admin-page .admin-sell-actions button {
    margin-top:0;
    width:100%;
    min-height:44px;
}


@media (max-width:768px) {

    .admin-page .admin-sell-card {
        flex-direction:column;
    }

    .admin-page .admin-sell-actions {
        width:100%;
        min-width:0;
    }

    .admin-page .admin-sell-title-row {
        align-items:flex-start;
    }

}


/* ========================
   管理员端 D3b-2：回收详情分组 / 入库区块 / 备注区分
   ======================== */

/* 详情标题行：标题 + 回收状态标签 */
.admin-page .admin-recycle-detail-header {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}


.admin-page .admin-recycle-detail-title {
    margin:0;
    font-size:17px;
    font-weight:700;
    color:#1f4f8f;
}


/* 详情分组区块 */
.admin-page .admin-recycle-detail-section {
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid #e4eaf2;
}


.admin-page .admin-recycle-section-title {
    margin:0 0 8px;
    font-size:14px;
    font-weight:700;
    color:#1f4f8f;
}


/* 字段网格：标签 + 值（窄屏自动转纵向） */
.admin-page .admin-recycle-detail-grid {
    display:grid;
    grid-template-columns:120px 1fr;
    gap:6px 12px;
    margin:0;
}


.admin-page .admin-recycle-detail-label {
    margin:0;
    font-size:14px;
    color:#7a8599;
}


.admin-page .admin-recycle-detail-value {
    margin:0;
    font-size:14px;
    color:#1f2733;
    word-break:break-word;
}


.admin-page .admin-recycle-detail-meta {
    margin:8px 0 0;
    font-size:14px;
    color:#7a8599;
    word-break:break-word;
}


.admin-page .admin-recycle-detail-price {
    font-size:20px;
    font-weight:700;
    color:#d4380d;
}


/* 回收状态 / 入库状态两行 */
.admin-page .admin-recycle-status-row {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:8px;
}


.admin-page .admin-recycle-status-row:first-of-type {
    margin-top:0;
}


/* 学生备注（只读）与管理员备注（填写 / 查看）视觉区分 */
.admin-page .admin-recycle-student-note {
    margin:10px 0 0;
    padding:8px 10px;
    font-size:14px;
    color:#445;
    background:#f7f9fc;
    border:1px solid #e4eaf2;
    border-radius:10px;
    word-break:break-word;
}


.admin-page .admin-recycle-admin-note {
    margin:10px 0 0;
    padding:8px 10px;
    font-size:14px;
    color:#1f4f8f;
    background:#eaf2fb;
    border:1px solid #d9e2ef;
    border-radius:10px;
    word-break:break-word;
}


/* 入库区块：详情内的浅色独立区块，不再嵌套第二层白卡 */
.admin-page .admin-recycle-inventory-section {
    padding:12px;
    border:1px solid #e4eaf2;
    background:#f7f9fc;
    border-radius:12px;
}


.admin-page .admin-recycle-inventory-form {
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid #e4eaf2;
}


/* 详情内的操作行：不让按钮在宽屏被拉得过大 */
.admin-page .admin-recycle-action-row {
    max-width:420px;
}


@media (max-width:768px) {

    .admin-page .admin-recycle-detail-grid {
        grid-template-columns:1fr;
        gap:2px;
    }

    .admin-page .admin-recycle-detail-label {
        margin-top:8px;
    }

    .admin-page .admin-recycle-action-row {
        max-width:100%;
    }

    .admin-page .admin-recycle-inventory-form .form-row {
        max-width:100%;
    }

}


/* ========================
   管理员登录页收尾（仅 .admin-login-page 作用域，不影响其它后台页面）
   ======================== */

/* 顶部中间的页面标题：本页不再需要（元素保留但完全不占位、不显示） */
.admin-login-page .page-nav-title {
    display:none;
}


/* 右上角「⌂ 用户首页」：flex 真正居中，尺寸收敛 */
.admin-login-page .page-nav-right {
    flex:0 0 auto;
}


.admin-login-page .page-nav-right .nav-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    align-self:center;
    width:120px;
    min-width:120px;
    min-height:48px;
    padding:0 16px;
    line-height:1.2;
    text-align:center;
    box-sizing:border-box;
    border-radius:10px;
    text-decoration:none;
}


.admin-login-page .page-nav-right .nav-btn:not(:disabled) {
    background:#1f4f8f;
    color:white;
}


.admin-login-page .page-nav-right .nav-btn:not(:disabled):hover {
    background:#1a4379;
}


.admin-login-page .page-nav-right .nav-btn:not(:disabled):active {
    background:#163a68;
}


/* 删掉大标题后：导航与登录卡片的间距重新给足，卡片居中成为视觉中心 */
.admin-login-page #page-nav {
    margin-bottom:24px;
}


.admin-login-page .book {
    max-width:520px;
    margin:0 auto 40px;
}


@media (max-width:600px) {

    .admin-login-page #page-nav {
        margin-bottom:18px;
    }

}


/* 顶部左右两个按钮统一垂直居中基准（只改对齐方式，不动尺寸与纵向位置）
   根因：左「← 返回」是 inline-block，靠 padding + line-height 排版，
   min-height 多出的空间全部落在文字下方，文字中心比按钮中心高约 1.5px；
   右「⌂ 用户首页」是 flex + align-items:center，文字是真正居中。
   统一成 flex 居中后，两侧文字落在同一条水平基准线上。 */
.admin-login-page .page-nav-side {
    align-items: center;
}


.admin-login-page .page-nav-side .nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ========================
   管理员后台：顶部导航收尾（仅 .admin-page 作用域）
   ======================== */

/* 顶部中央的「管理员后台」标题不再显示。
   下方 .module-nav 里的「图书管理 / 订单管理 / 回收管理」是模块按钮，不受影响。 */
.admin-page .page-nav-title {
    display:none;
}


/* 右上角「⌂ 用户首页」：flex 真正居中 + 尺寸收敛（与登录页同一套参数） */
.admin-page .page-nav-right {
    flex:0 0 auto;
}


.admin-page .page-nav-right .nav-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    align-self:center;
    width:120px;
    min-width:120px;
    min-height:48px;
    padding:0 16px;
    line-height:1.2;
    text-align:center;
    box-sizing:border-box;
    border-radius:10px;
    text-decoration:none;
}


.admin-page .page-nav-right .nav-btn:not(:disabled) {
    background:#1f4f8f;
    color:white;
}


.admin-page .page-nav-right .nav-btn:not(:disabled):hover {
    background:#1a4379;
}


.admin-page .page-nav-right .nav-btn:not(:disabled):active {
    background:#163a68;
}


/* 左右两侧统一垂直居中基准：左侧「← 返回」原本是 inline-block，
   靠 padding + line-height 排版，文字中心会比按钮中心偏高，
   与右侧 flex 居中的按钮不在同一条水平基准线上。 */
.admin-page .page-nav-side {
    align-items:center;
}


.admin-page .page-nav-side .nav-btn {
    display:flex;
    align-items:center;
    justify-content:center;
}


/* ========================
   手机端底部双 Tab 导航（mobile-tab-* 专属作用域）
   ======================== */

/* 底栏高度：页面底部留白、返回顶部按钮、Toast 三处都引用它，保证同步 */
:root {
    --mhb-tabbar-h:52px;
}


/* 桌面端（含 601～1050 的中间布局）完全不出现 */
.mobile-tabbar {
    display:none;
}


/* 图标：全部用 CSS 绘制，颜色走 currentColor，
   因此 active 时不用额外写规则就会跟随主色 */
.mobile-tab-icon {
    position:relative;
    display:block;
    color:inherit;
}


/* 首页：小房子（下方方框 + 上方 45° 旋转出的屋顶） */
.mobile-tab-home-icon {
    width:18px;
    height:12px;
    box-sizing:border-box;
    border:2px solid currentColor;
    border-top:0;
    border-radius:0 0 3px 3px;
}


.mobile-tab-home-icon::before {
    content:"";
    position:absolute;
    left:50%;
    top:-6px;
    width:12px;
    height:12px;
    box-sizing:border-box;
    border-top:2px solid currentColor;
    border-left:2px solid currentColor;
    border-radius:2px 0 0 0;
    transform:translateX(-50%) rotate(45deg);
}


/* 我的：人形（上方圆头 + 下方半圆肩） */
.mobile-tab-user-icon {
    width:18px;
    height:18px;
}


.mobile-tab-user-icon::before {
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:8px;
    height:8px;
    box-sizing:border-box;
    border:2px solid currentColor;
    border-radius:50%;
    transform:translateX(-50%);
}


.mobile-tab-user-icon::after {
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:16px;
    height:8px;
    box-sizing:border-box;
    border:2px solid currentColor;
    border-bottom:0;
    border-radius:8px 8px 0 0;
    transform:translateX(-50%);
}


/* 卖书：一枚简洁的书本（竖版书 + 左侧书脊），无箭头、无其它符号
   纯 CSS、currentColor、2px 线条，视觉盒 15×18（与其它图标的 18px 视觉盒一致） */
.mobile-tab-sell-icon {
    width:15px;
    height:18px;
    box-sizing:border-box;
    border:2px solid currentColor;
    border-radius:2px;
}


/* 书脊：书本偏左的一条竖线，上下贯通，像封面与书脊的分界 */
.mobile-tab-sell-icon::before {
    content:"";
    position:absolute;
    left:2px;
    top:0;
    width:2px;
    height:100%;
    background:currentColor;
}


/* 购物车：篮筐 + 两个轮子（已去掉把手，更简洁）
   （与首页悬浮购物车 .hp-floating-cart-icon 使用完全相同的几何参数，
     两个图标因此属于同一套视觉语言；独立成类，互不影响） */
.mobile-tab-cart-icon {
    width:16px;
    height:10px;
    /* 无把手：上方留 1px；下方留 5px（篮底下边框之外 1px 间隙 + 3px 轮子 = 外扩 4px），
       使绘制内容在自己的 16px 布局盒内垂直居中，与其它 Tab 的视觉重心一致 */
    margin-top:1px;
    margin-bottom:5px;
    box-sizing:border-box;
    border:2px solid currentColor;
    /* 上缘微圆、下缘更圆：像篮筐而不是方盒子 */
    border-radius:3px 3px 4px 4px;
}


/* 轮子：两个等大的实心圆点（无把手），第二个用 box-shadow 复制；
   间距取 7px，使两轮相对篮筐左右完全对称，且与篮底留 1px 间隙 */
.mobile-tab-cart-icon::after {
    content:"";
    position:absolute;
    left:1px;
    bottom:-6px;
    width:3px;
    height:3px;
    border-radius:50%;
    background:currentColor;
    box-shadow:7px 0 0 0 currentColor;
}


@media (max-width:600px) {

    .mobile-tabbar {
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:850;
        display:flex;
        align-items:stretch;
        background:white;
        border-top:1px solid #e4eaf2;
        /* 配了 viewport-fit=cover 时自动避开 iPhone 底部安全区；
           当前未配置时 env() 取 0，不影响任何布局 */
        padding-bottom:env(safe-area-inset-bottom, 0px);
        box-sizing:border-box;
    }


    /* 两个 Tab 等宽、图标在上文字在下 */
    .mobile-tab {
        flex:1 1 0;
        min-width:0;
        min-height:var(--mhb-tabbar-h);
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        color:#7a8599;
        font-size:12px;
        line-height:1.2;
        text-decoration:none;
        box-sizing:border-box;
    }


    .mobile-tab.is-active {
        color:#1f4f8f;
        font-weight:700;
    }


    /* 首页图标的盒子只有 12px，而「我的」图标是 18px；
       两组的图标 + 文字都在 52px 内垂直居中，于是首页这一组会比「我的」整体偏高。
       这里只给首页这一组加上内边距做向下补偿：
       配合 box-sizing:border-box，居中后内容的下移量是该值的一半，
       8px 即累计下移 4px（在首轮 3px 基础上先 +2px、再回调 -1px），
       此时首页图标重心与「我的」基本重合；
       Tab 总高度仍是 52px（min-height 不变），点击区域与其它规则都不受影响。 */
    .mobile-tab[data-mobile-tab="home"] {
        padding-top:8px;
    }


    /* ========================
       旧顶部导航：手机端只隐藏链接区，保留品牌
       （箭头是 .site-nav-links 的子元素，会随之一起隐藏；
        旧代码与旧 CSS 全部保留，方便随时回退）
       ======================== */

    #page-nav.has-site-nav .site-nav-links {
        display:none;
    }


    /* 折叠态默认会隐藏品牌，底栏模式下必须显式恢复；
       同时把品牌块改成两行：第一行「航大书仓」，第二行副标题，
       两行都左对齐（align-items:flex-start），保持顶部品牌在左侧 */
    #page-nav.has-site-nav .site-nav-brand {
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:2px;
    }


    /* 手机端品牌字号与电脑端一致（22px）；
       手机端已无展开状态，也不做旧的 translateX(4px) 右移，
       让品牌与下方副标题严格左对齐 */
    #page-nav.has-site-nav .site-nav-logo {
        font-size:22px;
        transform:none;
    }


    /* 副标题：直接复用 common.js 已经输出的 .site-nav-tagline
       （旧手机导航里它是 display:none），这里只是恢复显示并缩小字号。
       颜色沿用基础规则的 #7a8599，不加粗 */
    #page-nav.has-site-nav .site-nav-tagline {
        display:block;
        font-size:12px;
    }


    /* 顶部只剩品牌一行：让品牌在导航条内垂直居中 */
    #page-nav.has-site-nav .site-nav {
        min-height:44px;
        justify-content:center;
    }


    /* ========================
       手机端顶部「客服」快捷入口
       绝对定位在导航条右侧，完全脱离 .site-nav 的居中排版，
       因此品牌位置、导航高度、点击区域都不受影响；
       视觉沿用项目里的浅蓝次级按钮（与返回按钮同一套配色）
       ======================== */

    #page-nav.has-site-nav .site-nav {
        position:relative;
    }


    #page-nav.has-site-nav .site-nav-support {
        --site-nav-support-bg:#eaf2fb;
        display:inline-flex;
        position:absolute;
        top:50%;
        right:0;
        transform:translateY(-50%);
        align-items:center;
        justify-content:center;
        min-height:34px;
        width:auto;
        padding:0 12px;
        border:1px solid #d9e2ef;
        border-radius:9px;
        background:var(--site-nav-support-bg);
        color:#1f4f8f;
        font-size:14px;
        line-height:1;
        text-decoration:none;
        white-space:nowrap;
        box-sizing:border-box;
    }


    #page-nav.has-site-nav .site-nav-support:hover {
        --site-nav-support-bg:#dbe8f8;
    }


    #page-nav.has-site-nav .site-nav-support:active {
        --site-nav-support-bg:#cfe0f4;
    }


    #page-nav.has-site-nav .site-nav-support:focus-visible {
        outline:2px solid #1f4f8f;
        outline-offset:2px;
    }


    /* 底栏是 fixed，页面最底部内容会被盖住：
      只补 bottom 留白，现有左右 padding 原样保留 */
    body {
        padding-bottom:calc(var(--mhb-tabbar-h) + 12px + env(safe-area-inset-bottom, 0px));
    }


    /* 返回顶部按钮抬到底栏之上（right / 外观 / 逻辑都不变） */
    .hp-back-top {
        bottom:calc(var(--mhb-tabbar-h) + 12px + env(safe-area-inset-bottom, 0px));
    }


    /* 悬浮购物车：与返回顶部同列、上下错开
       底栏 → 12px → 购物车 46px → 12px → 返回顶部 46px
       z-index 800 低于底栏 850，保证底栏任何时候都能点 */
    .hp-floating-cart {
        position:fixed;
        right:16px;
        bottom:calc(var(--mhb-tabbar-h) + 12px + env(safe-area-inset-bottom, 0px) + 46px + 12px);
        z-index:800;
        display:flex;
        align-items:center;
        justify-content:center;
        width:46px;
        height:46px;
        margin:0;
        padding:0;
        border:1px solid #e4eaf2;
        border-radius:50%;
        background:white;
        box-shadow:0 4px 14px rgba(20,50,95,.14);
        color:#8b93a1;
        text-decoration:none;
        cursor:pointer;
    }


    .hp-floating-cart:hover {
        box-shadow:0 6px 18px rgba(20,50,95,.2);
    }


    .hp-floating-cart:focus-visible {
        outline:none;
        box-shadow:0 0 0 3px rgba(31,79,143,.25);
    }


    /* 数量角标：定位在圆形底板右上角；
       用 right 锚定 + 自适应宽度，99+ 时向左伸展，不会向右溢出 */
    .hp-floating-cart-count {
        position:absolute;
        top:-4px;
        right:-4px;
        min-width:18px;
        height:18px;
        padding:0 5px;
        box-sizing:border-box;
        border-radius:9px;
        background:#1f4f8f;
        color:white;
        font-size:11px;
        line-height:18px;
        text-align:center;
        white-space:nowrap;
    }


    /* Toast 同样抬到底栏之上（样式与 z-index 均不变） */
    .app-toast {
        bottom:calc(var(--mhb-tabbar-h) + 12px + env(safe-area-inset-bottom, 0px));
    }


    /* ========================
       V0.8.3-06 手机端顶栏（在 V0.8.3-04 压缩版基础上回调一点品牌感）
         原始版 68px 偏高、V0.8.3-04 压缩版 47px 偏细，
         这里取中间值：导航条 52px + 容器上下 6px ≈ 64px，
         仍比原始版省 4px，但品牌字号、留白恢复到舒服的档位。
         客服入口沿用 V0.8.3-04 的紧凑尺寸（30px / 13px），不跟着变大。
       ======================== */

    /* 顶栏上下内边距 4px → 6px */
    #page-nav.has-site-nav {
        padding-top:6px;
        padding-bottom:6px;
    }

    /* 导航条最小高度 38px → 52px（上下内边距仍为 0，高度由内容 + min-height 决定） */
    #page-nav.has-site-nav .site-nav {
        min-height:52px;
        padding-top:0;
        padding-bottom:0;
    }

    /* 品牌块两行之间恢复 2px 呼吸感 */
    #page-nav.has-site-nav .site-nav-brand {
        gap:2px;
    }

    /* 「航大书仓」17px → 20px */
    #page-nav.has-site-nav .site-nav-logo {
        font-size:20px;
        line-height:1.25;
    }

    /* 副标题 11px → 12px */
    #page-nav.has-site-nav .site-nav-tagline {
        font-size:12px;
        line-height:1.2;
    }

    /* 客服：高度 34px → 30px、字号 14px → 13px、内边距 12px → 10px，
       配色与圆角沿用原有浅蓝次级按钮，仅整体缩小一档 */
    #page-nav.has-site-nav .site-nav-support {
        min-height:30px;
        padding:0 10px;
        border-radius:8px;
        font-size:13px;
    }

    /* 触控热区：视觉不变，向外扩 8px（30 + 8 + 8 = 46px 高、宽 +12px），
       纯透明覆盖层，不参与布局、不影响右侧其它元素 */
    #page-nav.has-site-nav .site-nav-support::before {
        content:"";
        position:absolute;
        top:-8px;
        bottom:-8px;
        left:-6px;
        right:-6px;
    }

}


/* ========================
   联系仓主（学生端聊天，chat-* 专属作用域）
   ======================== */

/* 聊天页把 body 变成整屏高度的纵向 flex：
   顶部导航自然高度，消息区自己滚动，输入条始终贴在聊天主体底部。
   这样就不需要用写死的「视口高度减某个数」来算高度。 */
.chat-body {
    margin:0;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    height:100vh;
    height:100dvh;
}


.chat-body #page-nav {
    flex:0 0 auto;
}


.chat-page {
    flex:1 1 auto;
    /* 关键：min-height:0 才允许子元素在 flex 容器内产生内部滚动 */
    min-height:0;
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:820px;
    margin:0 auto;
}


.chat-shell {
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(20,50,95,.04);
    overflow:hidden;
}


/* 消息区：独立滚动 */
.chat-list {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:16px 14px;
}


.chat-empty {
    margin:auto;
    padding:24px 12px;
    text-align:center;
}


.chat-empty-text {
    margin:0;
    font-size:14px;
    color:#9aa4b5;
}


.chat-message {
    display:flex;
    flex-direction:column;
    gap:4px;
    align-items:flex-start;
    max-width:100%;
}


.chat-message.is-me {
    align-items:flex-end;
}


.chat-bubble {
    max-width:78%;
    box-sizing:border-box;
    padding:9px 12px;
    border-radius:12px;
    font-size:15px;
    line-height:1.5;
    /* 超长英文 / 连续字符也能断行，不会撑破页面 */
    overflow-wrap:anywhere;
    word-break:break-word;
}


.chat-bubble.is-other {
    background:#eef2f7;
    color:#1f2733;
    border-bottom-left-radius:4px;
}


.chat-bubble.is-me {
    background:#1f4f8f;
    color:white;
    border-bottom-right-radius:4px;
}


.chat-meta {
    font-size:11px;
    color:#9aa4b5;
}


/* 输入条：固定在聊天主体底部（不用 position:fixed，避免遮挡消息） */
.chat-composer {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    padding:10px 12px;
    /* iPhone 等带 Home Indicator 的机型：输入条不被系统区域遮挡 */
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid #e4eaf2;
    background:white;
}


.chat-input {
    flex:1 1 auto;
    /* 允许收缩，窄屏时不会把发送按钮挤出屏幕 */
    min-width:0;
    min-height:44px;
    padding:0 14px;
    font-size:15px;
    color:#1f2733;
    background:white;
    border:1px solid #d9e2ef;
    border-radius:10px;
    box-sizing:border-box;
}


.chat-input:focus {
    outline:none;
    border-color:#1f4f8f;
    box-shadow:0 0 0 3px rgba(31,79,143,.12);
}


.chat-send {
    flex:0 0 auto;
    width:auto;
    margin:0;
    min-height:44px;
    padding:0 20px;
    border:none;
    border-radius:10px;
    background:#1f4f8f;
    color:white;
    font-size:15px;
    cursor:pointer;
    box-sizing:border-box;
}


.chat-send:hover {
    background:#1a4379;
}


.chat-send:active {
    background:#163a68;
}


.chat-send:disabled {
    background:#d6dde8;
    color:#8f99a8;
    cursor:default;
}


@media (max-width:600px) {

    .chat-page {
        max-width:none;
    }

    .chat-shell {
        border-radius:12px;
    }

    .chat-list {
        padding:12px 10px;
        gap:10px;
    }

    .chat-bubble {
        max-width:82%;
        font-size:15px;
    }

    .chat-send {
        padding:0 16px;
    }

}


/* ========================
   客服消息（后台聊天，admin-chat-* 专属作用域）
   刻意与学生端的 .chat-* 分开命名，避免选择器互相影响
   ======================== */

.admin-chat-layout {
    display:grid;
    grid-template-columns:320px minmax(0, 1fr);
    gap:12px;
    margin-top:12px;
    /* 让两栏在视口内定高，消息区才能自己滚动 */
    height:calc(100vh - 250px);
    min-height:420px;
}


/* 左侧会话列表 */
.admin-chat-list {
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:10px;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}


.admin-chat-empty {
    margin:auto;
    padding:18px 10px;
    text-align:center;
    font-size:14px;
    color:#9aa4b5;
}


/* 会话条目：覆盖全局 button 的默认样式 */
.admin-chat-item {
    display:block;
    width:100%;
    margin:0;
    padding:10px 12px;
    text-align:left;
    font-size:14px;
    color:#1f2733;
    background:#f7f9fc;
    border:1px solid #e4eaf2;
    border-radius:10px;
    cursor:pointer;
    box-sizing:border-box;
}


.admin-chat-item:hover {
    background:#eef4fc;
}


.admin-chat-item.is-active {
    background:#eaf2fb;
    border-color:#1f4f8f;
}


.admin-chat-item-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}


.admin-chat-item-name {
    min-width:0;
    font-size:14px;
    font-weight:700;
    color:#1f2733;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


.admin-chat-item-time {
    flex:0 0 auto;
    font-size:12px;
    color:#9aa4b5;
}


.admin-chat-item-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:4px;
}


.admin-chat-item-last {
    min-width:0;
    flex:1 1 auto;
    font-size:13px;
    color:#7a8599;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


/* 未读数字徽标：unread=0 时根本不渲染这个元素 */
.admin-chat-item-unread {
    flex:0 0 auto;
    min-width:18px;
    height:18px;
    padding:0 6px;
    border-radius:9px;
    background:#cf1322;
    color:white;
    font-size:11px;
    line-height:18px;
    text-align:center;
    white-space:nowrap;
    box-sizing:border-box;
}


/* 右侧聊天窗口 */
.admin-chat-main {
    display:flex;
    flex-direction:column;
    min-height:0;
    background:white;
    border:1px solid #e4eaf2;
    border-radius:14px;
    overflow:hidden;
}


.admin-chat-header {
    flex:0 0 auto;
    display:flex;
    align-items:baseline;
    gap:10px;
    flex-wrap:wrap;
    padding:12px 14px;
    border-bottom:1px solid #e4eaf2;
    background:white;
}


.admin-chat-name {
    font-size:16px;
    font-weight:700;
    color:#1f2733;
}


.admin-chat-phone {
    font-size:13px;
    color:#7a8599;
}


/* 消息区：独立滚动 */
.admin-chat-messages {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:14px;
    background:#f7f9fc;
}


.admin-chat-message {
    display:flex;
    flex-direction:column;
    gap:3px;
    align-items:flex-start;
    max-width:100%;
}


/* 后台方向与学生端相反：学生靠左，仓主靠右 */
.admin-chat-message.is-mine {
    align-items:flex-end;
}


.admin-chat-bubble {
    max-width:78%;
    box-sizing:border-box;
    padding:9px 12px;
    border-radius:12px;
    font-size:14px;
    line-height:1.5;
    /* 超长英文 / 连续字符也能断行，不会撑破布局 */
    overflow-wrap:anywhere;
    word-break:break-word;
}


.admin-chat-bubble.is-other {
    background:white;
    color:#1f2733;
    border:1px solid #e4eaf2;
    border-bottom-left-radius:4px;
}


.admin-chat-bubble.is-mine {
    background:#1f4f8f;
    color:white;
    border-bottom-right-radius:4px;
}


.admin-chat-meta {
    font-size:11px;
    color:#9aa4b5;
}


/* 输入条：贴在聊天窗口底部，输入框可收缩、按钮不被挤出 */
.admin-chat-composer {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    padding:10px 12px;
    border-top:1px solid #e4eaf2;
    background:white;
}


.admin-chat-input {
    flex:1 1 auto;
    min-width:0;
    min-height:44px;
    padding:0 14px;
    font-size:15px;
    color:#1f2733;
    background:white;
    border:1px solid #d9e2ef;
    border-radius:10px;
    box-sizing:border-box;
}


.admin-chat-input:focus {
    outline:none;
    border-color:#1f4f8f;
    box-shadow:0 0 0 3px rgba(31,79,143,.12);
}


.admin-chat-send {
    flex:0 0 auto;
    width:auto;
    margin:0;
    min-height:44px;
    padding:0 20px;
    border:none;
    border-radius:10px;
    background:#1f4f8f;
    color:white;
    font-size:15px;
    cursor:pointer;
    box-sizing:border-box;
}


.admin-chat-send:hover {
    background:#1a4379;
}


.admin-chat-send:active {
    background:#163a68;
}


.admin-chat-send:disabled {
    background:#d6dde8;
    color:#8f99a8;
    cursor:default;
}


/* 窄屏（沿用后台既有的 768 断点）：两栏变上下，各自可滚动 */
@media (max-width:768px) {

    .admin-chat-layout {
        grid-template-columns:1fr;
        height:auto;
        min-height:0;
    }

    .admin-chat-list {
        max-height:240px;
    }

    .admin-chat-main {
        height:460px;
    }

    .admin-chat-bubble {
        max-width:82%;
    }

    .admin-chat-send {
        padding:0 16px;
    }

}


/* ========================
   聊天页顶部导航（chat.html 专属）
   全部用 .chat-body 限定作用域，后台页的 .page-nav / .nav-btn 完全不受影响
   ======================== */

/* 容器：上下压缩一点，左右留出舒服的边距；
   白色背景、圆角、边框样式沿用原有 .page-nav 规则，不做额外阴影/渐变 */
.chat-body .page-nav {
    padding:6px 12px;
    gap:6px;
}


/* 左右两个容器等宽：中间标题才能真正水平居中，
   不会因为「返回」和「首页」按钮宽度不同而视觉偏移 */
.chat-body .page-nav-side {
    flex:1 1 0;
    min-width:0;
}


/* 中间标题：不再吃满剩余空间，字号与字重加强，颜色用品牌深蓝 */
.chat-body .page-nav-title {
    flex:0 1 auto;
    font-size:18px;
    font-weight:700;
    color:#14325f;
}


/* 返回 / 首页按钮：尺寸与视觉统一在「统一返回按钮」一节
   （38px 高 / 左右 13px / 字号 14px / 圆角 9px，浅蓝底 + 深蓝字，
   与 book.html / orders.html 的返回按钮完全一致）
   这里只留本页 flex 布局必需的属性 */
.chat-body .nav-btn {
    flex:0 0 auto;
    margin:0;
}


/* ========================
   V0.9.5-A 移动端视觉收紧（卖书 / 购物车 / 我的 / 首页结果提示）

   目标：同样一屏装下更多有效信息，文字层级更清楚，按钮更贴合单手操作。

   约束：
     · 全部写在 ≤600px 内 —— 桌面端（含 1366px 回归）根本不进入本区间；
     · 只改字号 / 行高 / 内边距 / 圆角 / 颜色，不改任何业务逻辑、接口与数据结构；
     · 不隐藏任何文案：卖书的「适合…」说明仍然保留，只是压小压淡；
     · 按钮视觉收到 32~36px，同时用透明 ::before 把触控热区留在 ≥44px
       （数量选择器所在的 .cart-qty 原来 overflow:hidden 会把外扩的热区裁掉，
        所以这里改成 overflow:visible 并给两端按钮补回圆角，外观不变）。
   ======================== */

@media (max-width:600px) {

    /* ---------- 一、卖书：让「两种出售方式」一屏都能看全 ---------- */

    .recycle-page-title {
        margin-top:12px;
        font-size:18px;
    }

    .recycle-page-note {
        margin-top:4px;
        font-size:13px;
        line-height:1.5;
    }

    .recycle-pick {
        gap:10px;
        margin-top:10px;
    }

    .recycle-pick-card {
        gap:6px;
        padding:12px;
        border-radius:12px;
    }

    .recycle-pick-tag {
        padding:1px 8px;
        font-size:11px;
    }

    .recycle-pick-title {
        font-size:16px;
    }

    .recycle-pick-text {
        font-size:13px;
        line-height:1.45;
        color:#6b7889;
    }

    /* 说明列表降一档：保留内容，但不再抢「模式 + 按钮」的注意力 */
    .recycle-pick-list {
        padding-left:16px;
        font-size:12px;
        line-height:1.5;
        color:#8d97a8;
    }

    .recycle-pick-steps {
        gap:4px;
    }

    .recycle-pick-steps li {
        gap:4px;
        padding:2px 8px;
        font-size:11px;
    }

    .recycle-pick-steps li::before {
        width:14px;
        height:14px;
        font-size:10px;
    }

    .recycle-pick-btn {
        min-height:34px;
        padding:0 12px;
        border-radius:8px;
        font-size:14px;
        line-height:34px;
    }

    .recycle-pick-links {
        gap:8px;
        margin-top:12px;
    }

    .recycle-switch-link {
        min-height:34px;
        padding:0 12px;
        border-radius:8px;
        font-size:13px;
    }


    /* ---------- 二、购物车：收信息密度，弱化按钮存在感 ---------- */

    .cart-page-title {
        margin-top:12px;
        font-size:18px;
    }

    .cart-page-count {
        margin-top:4px;
        font-size:13px;
    }

    .cart-layout {
        gap:10px;
        margin-top:10px;
    }

    .cart-list {
        gap:10px;
    }

    .cart-item {
        gap:10px;
        padding:10px;
        border-radius:12px;
    }

    .cart-item-media {
        flex:0 0 76px;
    }

    .cart-item-image {
        width:76px;
        height:100px;
        border-radius:8px;
    }

    .cart-item-main {
        flex:1 1 calc(100% - 86px);
        gap:3px;
    }

    .cart-item-title {
        font-size:15px;
        line-height:1.35;
    }

    .cart-item-author,
    .cart-item-meta,
    .cart-item-unit,
    .cart-item-subtotal {
        font-size:12px;
    }

    /* 价格仍是卡片里的视觉重点（红字），只是整体不再比书名抢眼 */
    .cart-item-subtotal span {
        font-size:15px;
    }

    .cart-qty {
        overflow:visible;
        border-radius:8px;
    }

    .cart-qty-btn {
        position:relative;
        min-width:34px;
        min-height:34px;
        font-size:17px;
    }

    .cart-qty-btn:first-child {
        border-radius:8px 0 0 8px;
    }

    .cart-qty-btn:last-child {
        border-radius:0 8px 8px 0;
    }

    /* 视觉 34px，热区补回 44px（外扩 5px，纯透明、不参与布局） */
    .cart-qty-btn::before {
        content:"";
        position:absolute;
        top:-5px;
        bottom:-5px;
        left:-5px;
        right:-5px;
    }

    .cart-qty-value {
        min-width:32px;
        font-size:14px;
        line-height:34px;
    }

    .cart-remove-btn {
        position:relative;
        min-height:32px;
        padding:0 10px;
        border-radius:8px;
        font-size:13px;
    }

    /* 视觉 32px，热区补回 44px */
    .cart-remove-btn::before {
        content:"";
        position:absolute;
        top:-6px;
        bottom:-6px;
        left:0;
        right:0;
    }

    .cart-summary {
        padding:12px;
        border-radius:12px;
    }

    .cart-summary-title {
        margin-bottom:8px;
        font-size:15px;
    }

    .cart-summary-row {
        padding:4px 0;
        font-size:13px;
    }

    .cart-summary-total {
        margin-top:6px;
        padding-top:10px;
        font-size:14px;
    }

    .cart-summary-total span:last-child {
        font-size:22px;
    }

    .cart-primary-btn,
    .cart-secondary-btn {
        min-height:36px;
        margin-top:10px;
        padding:0 14px;
        border-radius:8px;
        font-size:14px;
    }


    /* ---------- 三、我的：降低信息堆叠感 ---------- */

    .user-page-title {
        margin-top:12px;
        font-size:18px;
    }

    .user-profile {
        gap:12px;
        margin-top:10px;
        padding:14px;
        border-radius:12px;
    }

    .user-avatar {
        width:52px;
        height:52px;
        font-size:20px;
    }

    .user-profile-name {
        font-size:18px;
    }

    .user-role-tag {
        padding:2px 8px;
        font-size:11px;
    }

    .user-profile-phone {
        margin-top:5px;
        font-size:13px;
        color:#5a6678;
    }

    .user-profile-tags {
        gap:4px;
        margin-top:6px;
    }

    .user-profile-tag {
        padding:1px 8px;
        font-size:11px;
        line-height:1.5;
    }

    .user-profile-school {
        margin-top:4px;
        font-size:12px;
    }

    .user-profile-hint {
        margin-top:3px;
        font-size:12px;
    }

    .user-profile-arrow {
        font-size:13px;
    }

    .user-group {
        margin-top:12px;
    }

    .user-group-title {
        margin-bottom:6px;
        font-size:13px;
    }

    .user-entry {
        gap:8px;
        padding:11px 13px;
    }

    .user-entry-title {
        font-size:15px;
    }

    .user-entry-desc {
        margin-top:1px;
        font-size:12px;
        color:#7a8599;
    }

    .user-entry-arrow {
        font-size:13px;
    }

    .user-entry-badge {
        min-width:18px;
        padding:0 6px;
        font-size:11px;
    }


    /* ---------- 四、首页结果提示：「找到 N 本教材」降一级字号 ---------- */

    /* 只改字号；margin 与对齐方式保持原样，首屏商品位置（279px）不受影响 */
    .hp-count {
        font-size:13px;
    }

}


/* ========================
   V0.9.5-B 移动端「视觉层级」优化（卖书 / 购物车 / 我的）

   与 V0.9.5-A 的分工：A 解决「太高、太挤」，B 解决「先看到什么」。
   本轮不再继续压高度，而是重排信息顺序 + 统一三个页面的按钮规格。

   约束：
     · 全部在 ≤600px 内 —— 桌面端（含 1366px 回归）不进入本区间；
     · 只改 flex 顺序（order）、字号、颜色与按钮规格；
     · 不隐藏任何文案，不改接口 / 数据结构 / 核心交互。
   ======================== */

@media (max-width:600px) {

    /* ---------- 一、卖书：3 秒读懂两种模式 ----------

       卡片内阅读顺序（用 flex order 重排，DOM 结构不动）：
         方式标签 → 模式标题 → 两个核心卖点 → 主按钮 → 长说明 → 规则 → 步骤
       按钮因此上移到卖点正下方；长说明与规则降级为按钮之后的辅助信息。 */

    .recycle-pick-tag {
        order:0;
    }

    .recycle-pick-title {
        order:1;
    }

    .recycle-pick-pitch {
        order:2;
        display:flex;
        flex-direction:column;
        margin:0;
        font-size:13px;
        line-height:1.4;
        font-weight:600;
        color:#1f4f8f;
    }

    /* 学生出售沿用该卡片的绿色体系，两张卡一眼可分 */
    .recycle-pick-card.is-student .recycle-pick-pitch {
        color:#237804;
    }

    .recycle-pick-text {
        order:4;
        margin-top:2px;
        font-size:12px;
        line-height:1.5;
        color:#8d97a8;
    }

    .recycle-pick-list {
        order:5;
        padding-left:15px;
        font-size:11px;
        line-height:1.5;
        color:#9aa4b5;
    }

    .recycle-pick-steps {
        order:6;
        margin-top:2px;
    }

    .recycle-pick-steps li {
        padding:1px 8px;
        font-size:11px;
        color:#9aa4b5;
        background:#f7f9fc;
    }

    .recycle-pick-steps li::before {
        background:#eef3fa;
        color:#7f8ea3;
    }

    .recycle-pick-card.is-student .recycle-pick-steps li::before {
        background:#f2f8f2;
        color:#4f8a3f;
    }


    /* ---------- 二、按钮规格统一（三个页面同一套语言） ----------

       主要按钮：36px 高 / 14px 字
       次级按钮：32px 高 / 13px 字
       圆角统一 8px。视觉可以小，但用透明 ::before 把纵向热区补到 44px；
       只做纵向外扩，避免左右相邻的按钮互相抢点击。 */

    .recycle-pick-btn,
    .cart-primary-btn,
    .user-primary-btn,
    .user-empty-guide-btn {
        position:relative;
        min-height:36px;
        border-radius:8px;
        font-size:14px;
    }

    .recycle-pick-btn {
        order:3;
        margin:8px 0 2px;
        line-height:36px;
    }

    .recycle-pick-btn::before,
    .cart-primary-btn::before,
    .user-primary-btn::before,
    .user-empty-guide-btn::before {
        content:"";
        position:absolute;
        top:-4px;
        bottom:-4px;
        left:0;
        right:0;
    }

    .recycle-switch-link,
    .cart-secondary-btn,
    .user-secondary-btn,
    .user-security-btn {
        position:relative;
        min-height:32px;
        padding:0 14px;
        border-radius:8px;
        font-size:13px;
    }

    .recycle-switch-link::before,
    .cart-secondary-btn::before,
    .user-secondary-btn::before,
    .user-security-btn::before {
        content:"";
        position:absolute;
        top:-6px;
        bottom:-6px;
        left:0;
        right:0;
    }


    /* ---------- 三、购物车微调（不再降高度，只调层级） ---------- */

    /* 删除按钮降低存在感：淡边框 + 浅灰字，不与「提交订单」抢注意力（悬停才转红） */
    .cart-remove-btn {
        border-color:#e8eef7;
        background:#fdfefe;
        color:#9aa4b5;
    }

    /* 小计价格仍是卡片里的红色视觉重点 */
    .cart-item-subtotal span {
        font-size:15px;
        font-weight:700;
    }


    /* ---------- 四、我的：先看身份，再看功能 ---------- */

    /* 资料区辅助文字统一到 12px（身份信息靠姓名与标签承担） */
    .user-profile-phone {
        font-size:12px;
    }

    /* 资料卡用浅蓝渐变 + 稍强投影「托起来」，与下面纯白的功能列表拉开一层 */
    .user-profile {
        background:linear-gradient(180deg,#f8fbff 0%,#eef5fd 100%);
        border-color:#dbe7f6;
        box-shadow:0 2px 12px rgba(20,50,95,.07);
    }

    /* 功能列表压平一点，避免和身份区抢视觉 */
    .user-entries {
        box-shadow:0 1px 6px rgba(20,50,95,.03);
    }

    .user-group {
        margin-top:14px;
    }

}


/* ========================
   V0.9.5-D 卖书流程信息层级优化（移动端）

   目标：点提交之前先看到「流程有多简单」，提高操作信心。

   卡片内阅读顺序改为（纯 CSS order，DOM 与文案都不动）：
     方式标签 → 模式标题 → 核心卖点 → 流程步骤 → 提交按钮 → 长说明 → 规则

   同时把「三颗独立步骤胶囊」改成一整条横向流程条：
     [ ①申请 → ②估价 → ③回收 ]  浅色底 + 小圆角，不抢提交按钮。

   约束：只在 ≤600px 生效，桌面端不进入本区间。
   ======================== */

@media (max-width:600px) {

    /* ---------- 一、阅读顺序：卖点 → 流程 → 按钮 → 辅助说明 ---------- */

    .recycle-pick-tag {
        order:0;
    }

    .recycle-pick-title {
        order:1;
    }

    .recycle-pick-pitch {
        order:2;
    }

    /* 流程条提到按钮上方 */
    .recycle-pick-steps {
        order:3;
    }

    /* 提交按钮下移到流程条之后 */
    .recycle-pick-btn {
        order:4;
        margin:8px 0 2px;
    }

    /* 长说明与规则留在最后，作为辅助信息 */
    .recycle-pick-text {
        order:5;
    }

    .recycle-pick-list {
        order:6;
    }


    /* ---------- 二、流程步骤：一整条横向流程条 ----------

       原来三颗胶囊各自带底色和内边距，横向占位大、也容易换行；
       现在改成「一个浅色圆角盒子 + 内部无底色的三步 + 步骤间箭头」，
       三步因此能稳定排成一行，字号 12px，视觉重量低于提交按钮。

       注意：这里用 flex-wrap:wrap 而不是 nowrap —— 万一极端窄屏排不下，
       宁可折行也不能溢出卡片造成横向滚动。 */

    .recycle-pick-steps {
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:0;
        margin:4px 0 0;
        padding:3px 6px;
        background:#f4f7fc;
        border-radius:8px;
        counter-reset:pick-step;
    }

    .recycle-pick-steps li {
        display:inline-flex;
        align-items:center;
        gap:2px;
        padding:0;
        background:transparent;
        border-radius:0;
        font-size:12px;
        line-height:1.5;
        font-weight:400;
        color:#6b7889;
        white-space:nowrap;
    }

    /* 步骤之间的箭头：画在「非最后一项」的后面 */
    .recycle-pick-steps li:not(:last-child)::after {
        content:"→";
        margin-left:2px;
        font-size:10px;
        line-height:1;
        color:#c3cdda;
    }

    /* 序号圆点收小一号，颜色更淡，避免和按钮抢视觉 */
    .recycle-pick-steps li::before {
        width:13px;
        height:13px;
        background:#e7eefb;
        color:#5b7b9e;
        font-size:9px;
    }

}


/* ========================
   V0.9.5-E 卖书页面视觉收口（移动端）

   把一张模式卡明确收成三段，段内紧凑、段间留白：
     ① 识别段：方式标签 + 模式标题 + 两行核心卖点
     ② 决策段：一行流程条 + 提交按钮（按钮加一层淡投影，成为唯一焦点）
     ③ 参考段：长说明 + 规则（只降权重，一条都不删）

   同时把 V0.9.5-D 引入流程条时多出来的约 7px 高度收回，
   让卡片重新回到 V0.9.5-B 的高度水平（约 273px）。

   约束：只在 ≤600px 生效；不动 DOM、不动文案、不动按钮尺寸与 44px 热区。
   ======================== */

@media (max-width:600px) {

    /* 段内间距统一收到 5px */
    .recycle-pick-card {
        gap:5px;
    }

    /* ① 识别段：卖点两行收紧行高 */
    .recycle-pick-pitch {
        line-height:1.35;
    }

    /* ② 决策段：流程条再薄一点，不占高度 */
    .recycle-pick-steps {
        margin-top:3px;
        padding:2px 6px;
    }

    .recycle-pick-steps li {
        line-height:1.4;
    }

    /* 提交按钮：尺寸/热区不变，只加一层淡投影，让它成为卡片里唯一的焦点 */
    .recycle-pick-btn {
        margin:6px 0 3px;
        box-shadow:0 2px 8px rgba(31,79,143,.20);
    }

    .recycle-pick-btn.is-student {
        box-shadow:0 2px 8px rgba(35,120,4,.20);
    }

    /* ③ 参考段：说明与规则权重再降一档（内容一条不删） */
    .recycle-pick-text {
        margin-top:0;
        line-height:1.45;
        color:#98a2b2;
    }

    .recycle-pick-list {
        line-height:1.45;
        color:#a3adbd;
    }

}


/* ========================
   V0.9.6 全站移动端视觉统一（首页 / 卖书 / 购物车 / 我的）

   —— 设计规范（仅 ≤600px 生效）——
   圆角：大卡片 12px ｜ 按钮 8px ｜ 标签保持胶囊 999px ｜ 表单输入保持 10px
   阴影：L1 普通卡片  0 2px 10px rgba(20,50,95,.04)
         L2 强调卡片  0 2px 12px rgba(20,50,95,.07)   （身份卡 / 订单摘要）
         L3 平铺容器  0 1px 6px  rgba(20,50,95,.03)   （列表容器）
   主按钮：36px / 14px / 600 / 圆角 8px / 热区 44px
   次按钮：32px / 13px / 500 / 圆角 8px / 热区 44px
   字体：页面标题 18/700 ｜ 模块标题 16/700 ｜ 正文 14 ｜ 辅助 12 ｜ 价格 19/700 红

   本区块只做「视觉 token 对齐」：不动接口、数据结构、商品卡 DOM 与业务逻辑；
   尺寸/热区沿用 V0.9.5-A/B 已经定下的值，不重新引入高度变化。
   ======================== */

@media (max-width:600px) {

    /* ---------- 1. 大卡片圆角统一 12px ---------- */

    /* 首页商品卡原来是 10px、我的页几个容器是 14px，这里统一到 12px。
       只改圆角，商品卡 DOM 与列表位置（首屏 279px）不受影响。 */
    .hp-card,
    .hp-empty,
    .cart-empty,
    .recycle-empty,
    .recycle-form-card,
    .user-entries,
    .user-empty {
        border-radius:12px;
    }


    /* ---------- 2. 阴影层级统一 ---------- */

    /* L1：首页商品卡原来没有投影（其它页面的卡片都有），补上同一档 */
    .hp-card {
        box-shadow:0 2px 10px rgba(20,50,95,.04);
    }

    /* L2：订单摘要与身份卡同档「强调」，比普通卡片抬高一档 */
    .cart-summary,
    .user-profile {
        box-shadow:0 2px 12px rgba(20,50,95,.07);
    }

    /* L3：列表容器保持最平的一档 */
    .user-entries {
        box-shadow:0 1px 6px rgba(20,50,95,.03);
    }


    /* ---------- 3. 按钮语言统一 ---------- */

    /* 主按钮：字重补到 600（尺寸 / 圆角 / 热区沿用 V0.9.5-B） */
    .recycle-pick-btn,
    .cart-primary-btn,
    .user-primary-btn,
    .user-empty-guide-btn,
    .hp-empty-clear {
        font-weight:600;
    }

    /* 首页空态里的「清除搜索」也是主操作，规格对齐 36px / 14px / 8px / 热区 44px */
    .hp-empty-clear {
        position:relative;
        min-height:36px;
        padding:0 18px;
        border-radius:8px;
        font-size:14px;
    }

    .hp-empty-clear::before {
        content:"";
        position:absolute;
        top:-4px;
        bottom:-4px;
        left:0;
        right:0;
    }

    /* 次按钮：字重 500，与主按钮的 600 形成两级 */
    .recycle-switch-link,
    .cart-secondary-btn,
    .cart-remove-btn,
    .user-secondary-btn,
    .user-security-btn {
        font-weight:500;
    }

    /* 搜索框内的「清除搜索」：只统一圆角，高度必须跟着 38px 的搜索框，不能改 */
    .hp-search-clear {
        border-radius:8px;
    }


    /* ---------- 4. 字体层级统一 ---------- */

    /* 模块标题 16px/700（订单摘要原来 15px，是四个页面里唯一的偏差） */
    .cart-summary-title {
        font-size:16px;
        font-weight:700;
    }

    /* 说明：页面标题 18/700、辅助 12px、首页价格 19/700 红色、
       标签胶囊 999px 在四个页面实测已经一致，本区块不再重复声明。 */

}