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;
}


.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;
}


.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;
}


/* 返回顶部悬浮按钮（仅首页 .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) {

    /* ---- 搜索区 ---- */
    .hp-search-section {
        margin-top:6px;
        padding:9px 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;
    }


    /* ---- 筛选栏 ---- */
    .hp-filter-bar {
        margin-top:8px;
        padding:10px 12px;
        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;
        /* 行间距略小于列间距：展开后的筛选项更紧凑 */
        gap:5px 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;
    }

    /* 「筛选 + 排序」整组：靠右显示，且永远不会被拆到两行 */
    .hp-filter-quick {
        display:flex;
        flex:0 0 auto;
        align-items:center;
        gap:6px;
        margin-left:auto;
    }

    /* 来源按钮：完整文案，宽 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;
    }


}


@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;
        background:#f2f5f9;
        object-fit:contain;
    }

    /* 无图占位与缩略图保持同一尺寸和外框 */
    .hp-card-img-empty {
        font-size:12px;
        border:1px dashed #e2e8f2;
    }

    /* 右侧信息块：换行堆叠，内边距由 .hp-card 统一提供 */
    .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;
        gap:3px 4px;
        padding:0;
    }

    /* 书名 + 来源标签：图片右侧第一行，两者同行（书名两行截断、标签贴右） */
    .hp-card-title-row {
        order:1;
        flex:0 0 100%;
        gap:4px;
    }

    .hp-card-title-row .hp-card-title {
        order:0;
        flex:1 1 auto;
        min-width:0;
        font-size:15px;
        font-weight:bold;
        line-height:1.3;
    }

    /* 作者 / 专业·年级：各占一行 */
    .hp-card-meta {
        order:2;
        flex:0 0 100%;
        font-size:12px;
        line-height:1.35;
    }

    /* V0.8.3 热度：手机端进一步压缩为「👀128 · 🔥15」，
       只留图标 + 数字，避免在窄屏把 meta 行挤成两行、撑高卡片 */
    .hp-card-heat {
        font-size:10px;
    }

    /* 图标单独放大一档提升辨识度：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;
    }

    .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;
    }

    /* 购买区：售价+原价在左；价格行占满剩余宽度，
       把「库存 + 加入购物车」一起顶到最右侧，库存紧挨按钮左侧 */
    .hp-card-price-row {
        order:3;
        flex:1 1 auto;
        margin-top:0;
        gap:4px;
    }

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

    .hp-card-old {
        font-size:11px;
    }

    .hp-card-stock {
        order:4;
        flex:0 0 auto;
        font-size:11px;
    }

    /* 加购按钮：紧挨库存右侧；自动宽度不撑满卡片，高度 34px，文字不换行 */
    .hp-card-add {
        order:5;
        flex:0 0 auto;
        margin-top:0;
        /* 同行时价格行已把空间占满，auto 不起作用（库存因此紧贴按钮）；
           按钮被迫换行时，auto 让它靠右对齐，不会甩到左下角 */
        margin-left:auto;
        /* V0.8.2-09-R：恢复手机端紧凑按钮尺寸 */
        min-height:34px;
        width:auto;
        padding:0 8px;
        font-size:13px;
        border-radius:8px;
        white-space:nowrap;
    }

}


/* 手机：横向卡片整行一张 —— 两列时卡片只有 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;
}


.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));
    }

}


/* ========================
   联系仓主（学生端聊天，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;
}