:root {
            --read-bg: #F4EFE9;
            --read-text: #3E2F21;
            --active-orange: #FF9800;
            --active-light: #FFF3E0;
            --border-color: #EAE3D9;
        }

        body {
            margin: 0;
            background-color: var(--read-bg);
            font-family: "PingFang SC", "STHeiti", sans-serif;
            color: var(--read-text);
            line-height: 1.8;
            padding-top: 50px; /* 为常驻的顶部栏留出空间 */
        }

        .app-wrapper {
            max-width: 500px;
            margin: 0 auto;
            min-height: 100vh;
        }

        /* 常驻顶部返回菜单 */
        .menu-top {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 50px;
            background: #fff;
            display: flex;
            align-items: center;
            padding: 0 10px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            z-index: 100;
        }

        .back-btn {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            text-decoration: none;
            color: #333;
        }

        .top-chapter-name {
            flex: 1;
            text-align: center;
            font-size: 15px;
            font-weight: bold;
            margin-right: 44px;
            color: #555;
        }

        /* 阅读正文区 */
        .read-content {
            padding: 20px 20px 10px;
        }

        .chapter-title {
            font-size: 22px;
            font-weight: bold;
            margin: 15px 0 25px;
            color: #222;
        }

        .text-p {
            font-size: 18px;
            margin-bottom: 22px;
            text-indent: 2em;
            text-align: justify;
        }

        /* 底部导航 */
        .read-nav {
            padding: 20px;
            display: flex;
            gap: 10px;
        }

        .nav-btn {
            flex: 1;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #EAE3D9;
            border-radius: 4px;
            text-decoration: none;
            color: var(--read-text);
            font-size: 14px;
            border: 1px solid #DED6CA;
        }

        /* 推荐板块 */
        .recommend-section {
            margin-top: 30px;
            padding: 20px;
            background: rgba(234, 227, 217, 0.5);
            border-top: 1px solid var(--border-color);
        }

        .section-header {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #8D6E63;
            display: flex;
            align-items: center;
        }

        .section-header::before {
            content: "";
            width: 4px;
            height: 16px;
            background: var(--active-orange);
            margin-right: 8px;
            border-radius: 2px;
        }

        .rec-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            text-decoration: none;
            color: var(--read-text);
            border-bottom: 1px solid #E4DCD2;
        }

        .rec-tag {
            font-size: 11px;
            color: var(--active-orange);
            background: var(--active-light);
            padding: 1px 5px;
            border-radius: 2px;
        }

        /* --- 目录弹窗 --- */
        .modal-mask {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 200;
        }

        .modal-mask.active {
            display: block;
        }

        .catalog-panel {
            position: fixed;
            bottom: -70%;
            left: 0;
            right: 0;
            height: 70%;
            background: #fff;
            border-radius: 12px 12px 0 0;
            z-index: 201;
            transition: transform 0.3s ease-out;
            display: flex;
            flex-direction: column;
        }

        .catalog-panel.active {
            transform: translateY(-100%);
        }

        .catalog-header {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f9f9f9;
            border-radius: 12px 12px 0 0;
        }

        .close-catalog {
            font-size: 14px;
            color: var(--active-orange);
            font-weight: bold;
            cursor: pointer;
        }

        /* 目录列表 - 改为数字章节 */
        .catalog-list {
            flex: 1;
            overflow-y: auto;
            padding: 10px 15px;
        }

        .chapter-item {
            padding: 15px 0;
            border-bottom: 1px solid #f5f5f5;
            display: flex;
            justify-content: space-between;
            text-decoration: none;
            color: #666;
            font-size: 15px;
        }

        .chapter-item.current {
            color: var(--active-orange);
            font-weight: bold;
        }

        .chapter-num {
            font-family: Georgia, serif;
        }

        .footer-info {
            text-align: center;
            padding: 20px 0 50px;
            color: #A19385;
            font-size: 12px;
        }

        .read-content {
            font-size: 18px;
        }

        .read-content p {
            margin: 2rem 0;
            line-height: 150%;
            text-indent: 2em;
            margin-block-start: 0.7em !important;
            margin-block-end: 0.7em !important;
            font-family: Helvetica, Droidsansfallback, Droid Sans, Retina, arial, PingFangTC, "Microsoft JhengHei", Arial, sans-serif, "PingFangTC", "Microsoft JhengHei", Arial, sans-serif !important;
        }