/* ==========================================================
   青瓷书舍皮肤（雾白底 + 青瓷绿 + 赭金点缀 + 细边柔影 + 水平顶导航）
   ========================================================== */

:root {
    --bg: #edf2f0;
    --bg-warm: #f7f5ee;
    --card: #ffffff;
    --ink: #233029;
    --ink-soft: #54635b;
    --muted: #8b988f;
    --line: #dde5e1;
    --teal: #0e806f;
    --teal-deep: #0a5f53;
    --teal-soft: #e2f0ec;
    --gold: #cf962f;
    --gold-deep: #a97a1e;
    --gold-soft: #f7efdd;
    --shadow-sm: 0 2px 10px rgba(15, 64, 55, 0.06);
    --shadow: 0 10px 30px rgba(15, 64, 55, 0.09);
    --shadow-lg: 0 24px 60px rgba(15, 64, 55, 0.16);
    --radius: 14px;
    --radius-lg: 20px;
}

html {
    height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    color: var(--ink);
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.65;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
}

/* 全局背景：雾白青瓷底 + 两团柔和光晕 */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(700px 480px at 96% -10%, rgba(14, 128, 111, 0.1), transparent 60%),
        radial-gradient(560px 420px at -4% 4%, rgba(207, 150, 47, 0.08), transparent 60%),
        radial-gradient(900px 600px at 50% 118%, rgba(14, 128, 111, 0.07), transparent 62%),
        var(--bg);
}

::selection {
    background: rgba(14, 128, 111, 0.22);
    color: var(--teal-deep);
}

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

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

::-webkit-scrollbar-thumb {
    background: #c3d0ca;
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--teal);
}

/* ================= 整体布局：顶部水平导航 + 主内容 ================= */

.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.layout-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.page-content {
    flex: 1;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
}

.hidden {
    display: none !important;
}

/* ================= 水平顶部导航栏 ================= */

.side-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 13px 28px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 16px rgba(15, 64, 55, 0.05);
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--ink);
    min-width: 0;
}

/* CSS 画的 Logo：青瓷渐变圆角块 + 白「漫」+ 赭金小圆点 */
.brand-logo {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #13a08b 0%, var(--teal-deep) 100%);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    border-radius: 13px;
    box-shadow: 0 5px 14px rgba(14, 128, 111, 0.35);
    user-select: none;
    transition: transform 0.2s ease;
}

.brand:hover .brand-logo {
    transform: translateY(-2px) rotate(-4deg);
}

.brand-logo::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 11px;
    height: 11px;
    background: var(--gold);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(169, 122, 30, 0.5);
}

.brand-name {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.3;
    color: var(--ink);
    min-width: 0;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin-left: 22px;
}

.nav-extra {
    display: flex;
    flex-direction: row;
    gap: 2px;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.18s ease;
}

.nav-link::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.18s ease;
}

.nav-link:hover {
    color: var(--teal-deep);
    background: var(--teal-soft);
}

.nav-link:hover::before {
    background: var(--gold);
}

.side-nav > .auth-box {
    margin-left: auto;
}

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

.user-phone {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--teal-deep);
    background: var(--teal-soft);
    border-radius: 999px;
    padding: 6px 14px;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================= 按钮（细边柔影大圆角） ================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    cursor: pointer;
    text-decoration: none;
    background: var(--card);
    color: var(--ink);
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: #cad6d1;
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(135deg, #129582 0%, var(--teal-deep) 100%);
    border: none;
    color: #fff;
    box-shadow: 0 8px 20px rgba(14, 128, 111, 0.32);
}

.btn-primary:hover {
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(14, 128, 111, 0.4);
}

.btn-dark {
    background: #fff;
    border: 1.5px solid var(--teal);
    color: var(--teal-deep);
    box-shadow: none;
}

.btn-dark:hover {
    background: var(--teal-soft);
    border-color: var(--teal-deep);
    box-shadow: none;
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.btn-ghost:hover {
    background: var(--teal-soft);
    border-color: transparent;
    box-shadow: none;
}

.btn-lg {
    padding: 14px 30px;
    font-size: 15.5px;
}

.btn-block {
    width: 100%;
    box-sizing: border-box;
}

.btn-outline-accent {
    background: #fff;
    border: 1.5px solid var(--gold);
    color: var(--gold-deep);
    box-shadow: none;
}

.btn-outline-accent:hover {
    background: var(--gold-soft);
    border-color: var(--gold-deep);
    box-shadow: none;
}

/* ================= 首页 Hero ================= */

.hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(460px 300px at 88% -20%, rgba(207, 150, 47, 0.14), transparent 62%),
        radial-gradient(560px 380px at 8% 118%, rgba(14, 128, 111, 0.12), transparent 62%),
        linear-gradient(180deg, #f4f9f7 0%, #edf2f0 100%);
    padding: 80px 0;
}

.hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hero-text {
    max-width: 620px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--teal-soft);
    color: var(--teal-deep);
    border-radius: 999px;
    padding: 7px 17px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 24px;
}

.hero-badge i {
    color: var(--gold);
}

.hero-title {
    font-size: 47px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 18px;
    color: var(--ink);
}

/* 公司名：赭金色下划线强调 */
.marker {
    display: inline-block;
    color: var(--teal-deep);
    background:
        linear-gradient(var(--gold-soft), var(--gold-soft)) no-repeat,
        linear-gradient(transparent 72%, rgba(207, 150, 47, 0.45) 72%);
    background-size: 100% 100%;
    padding: 0 6px;
    border-radius: 6px;
    white-space: nowrap;
}

.hero-sub {
    font-size: 16px;
    color: var(--ink-soft);
    font-weight: 400;
    margin: 0 0 32px;
}

.hero-art {
    position: relative;
    width: 320px;
    height: 300px;
    flex-shrink: 0;
    display: none;
}

.hero-card {
    position: absolute;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-card-1 {
    width: 192px;
    height: 242px;
    top: 14px;
    left: 24px;
    transform: rotate(-5deg);
    flex-direction: column;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    animation: floaty 5s ease-in-out infinite;
}

/* 纯 CSS 的「漫」大字 */
.hero-card-1::before {
    content: '漫';
    font-size: 74px;
    font-weight: 800;
    line-height: 1;
    color: var(--teal);
}

.hero-card-1 span {
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #129582, var(--teal-deep));
    padding: 6px 18px;
    border-radius: 999px;
}

.hero-card-2 {
    width: 108px;
    height: 108px;
    bottom: 6px;
    right: 2px;
    transform: rotate(7deg);
    background: var(--gold-soft);
    border: 1px solid #ecdcb8;
    color: var(--gold-deep);
    font-size: 38px;
    box-shadow: var(--shadow);
    animation: floaty 5s ease-in-out 1.2s infinite;
}

/* 漫画对话气泡 */
.hero-bubble {
    position: absolute;
    top: -8px;
    right: 24px;
    background: #fff;
    color: var(--teal-deep);
    font-weight: 800;
    font-size: 19px;
    padding: 10px 20px;
    border-radius: 18px 18px 18px 4px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: rotate(4deg);
    animation: floaty 4s ease-in-out 0.6s infinite;
}

@keyframes floaty {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -9px; }
}

/* ================= 区块标题 ================= */

.section {
    padding: 52px 0;
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.section-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-title::before {
    content: '';
    width: 8px;
    height: 24px;
    border-radius: 99px;
    background: linear-gradient(180deg, #129582, var(--teal-deep));
}

.more-link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 0.18s ease;
}

.more-link i {
    color: var(--gold);
}

.more-link:hover {
    color: var(--teal-deep);
}

/* ================= 面包屑 ================= */

.breadcrumb-bar {
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.6);
}

.breadcrumb-bar ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
}

.breadcrumb-bar a {
    color: var(--ink-soft);
    text-decoration: none;
    padding: 4px 13px;
    border-radius: 999px;
    font-weight: 600;
    transition: all 0.18s ease;
}

.breadcrumb-bar a:hover {
    color: var(--teal-deep);
    background: var(--teal-soft);
}

.breadcrumb-bar .sep {
    color: var(--muted);
}

.breadcrumb-bar .current {
    color: #fff;
    background: linear-gradient(135deg, #129582, var(--teal-deep));
    padding: 4px 15px;
    border-radius: 999px;
    font-weight: 700;
}

/* ================= 面板 ================= */

.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

.panel-title {
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 22px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-title i {
    color: var(--teal);
}

/* ================= 表单 ================= */

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
}

.form-label i {
    color: var(--teal);
    margin-right: 5px;
}

.form-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 15px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    background: #fbfdfc;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.form-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(14, 128, 111, 0.13);
}

.form-input::placeholder {
    color: #aeb9b2;
}

.form-row {
    display: flex;
    gap: 10px;
}

.form-row .form-input {
    flex: 1;
}

.captcha-canvas {
    height: 47px;
    width: 130px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
}

/* ================= 登录/注册卡片 ================= */

.auth-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 64px 20px;
}

.auth-card {
    width: 100%;
    max-width: 450px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 26px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.auth-head {
    padding: 38px 36px 26px;
    text-align: center;
    background:
        radial-gradient(380px 150px at 50% -60%, rgba(207, 150, 47, 0.16), transparent 70%),
        linear-gradient(180deg, #f1f8f5, #ffffff);
    border-bottom: 1px solid var(--line);
}

.auth-logo {
    display: inline-grid;
    place-items: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(140deg, #13a08b 0%, var(--teal-deep) 100%);
    border-radius: 19px;
    font-size: 27px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 12px 26px rgba(14, 128, 111, 0.38);
    margin-bottom: 15px;
}

.auth-head h2 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 800;
    color: var(--ink);
}

.auth-head p {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 400;
}

.auth-form {
    padding: 30px 34px 34px;
}

.auth-switch {
    text-align: center;
    margin: 20px 0 0;
    color: var(--ink-soft);
    font-size: 13.5px;
}

.auth-switch a {
    color: var(--teal-deep);
    font-weight: 700;
    text-decoration: none;
}

.auth-switch a:hover {
    color: var(--gold-deep);
}

.agreement-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-soft);
}

.agreement-line input[type="checkbox"] {
    accent-color: var(--teal);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.agreement-line label {
    cursor: pointer;
}

.agreement-line a {
    color: var(--teal-deep);
    font-weight: 700;
    text-decoration: none;
}

/* ================= 弹窗 ================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(22, 35, 30, 0.42);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}

.modal-box {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
    padding: 28px;
    max-width: 640px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-sizing: border-box;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.modal-title {
    font-size: 19px;
    font-weight: 800;
    margin: 0;
    color: var(--ink);
}

.modal-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.18s ease;
}

.modal-close:hover {
    background: var(--teal-soft);
    color: var(--teal-deep);
    border-color: #bcd8d1;
}

/* ================= 漫画详情 ================= */

.detail-grid {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 34px;
}

.detail-cover {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: block;
}

.detail-title {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0 0 14px;
    color: var(--ink);
}

.detail-intro {
    color: var(--ink-soft);
    line-height: 1.9;
    margin: 0;
}

.tag {
    display: inline-block;
    padding: 5px 14px;
    margin: 0 8px 8px 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--teal-deep);
    background: var(--teal-soft);
    border-radius: 999px;
}

.chapter-item {
    border-bottom: 1px solid var(--line);
}

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

.chapter-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-soft);
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.18s ease;
}

.chapter-item a i {
    color: var(--gold);
    margin-right: 8px;
}

.chapter-item a:hover {
    background: var(--teal-soft);
    color: var(--teal-deep);
}

.free-tag,
.paid-tag {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 13px;
    border-radius: 999px;
    color: #fff;
    flex-shrink: 0;
}

.free-tag {
    background: var(--teal);
}

.paid-tag {
    background: var(--gold);
}

/* ================= 章节阅读 ================= */

.reader-panel {
    text-align: center;
}

.reader-title {
    font-size: 23px;
    font-weight: 800;
    margin: 0 0 26px;
    color: var(--ink);
}

.reader-image {
    max-width: 500px;
    width: 100%;
    border-radius: 16px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.status-pill {
    display: inline-block;
    padding: 6px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 22px;
}

.status-free {
    background: var(--teal);
}

.status-bought {
    background: #3d7bd9;
}

.paid-notice {
    font-size: 17px;
    font-weight: 800;
    color: var(--gold-deep);
    margin-bottom: 16px;
}

.balance-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 22px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}

.balance-line img {
    width: 20px;
    height: 20px;
}

.price-line {
    font-weight: 400;
    color: var(--ink-soft);
    margin-bottom: 24px;
}

.price-line strong {
    color: var(--teal-deep);
    font-size: 20px;
    font-weight: 800;
}

.reader-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ================= 充值（纵向单选列表，替代九宫格） ================= */

.recharge-ratio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 28px;
}

.recharge-ratio img {
    width: 24px;
    height: 24px;
}

/* 单列纵向选择列表 */
.recharge-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 600px;
    margin: 0 auto 30px;
}

.recharge-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 16px;
    padding: 16px 22px 16px 54px;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

/* 左侧圆形单选钮 */
.recharge-option::before {
    content: '';
    position: absolute;
    left: 21px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #c3d0ca;
    background: #fff;
    box-sizing: border-box;
    transition: all 0.18s ease;
}

.recharge-option:hover {
    border-color: #9fc8bf;
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.recharge-option.selected {
    background: var(--teal-soft);
    border-color: var(--teal);
    box-shadow: 0 8px 22px rgba(14, 128, 111, 0.16);
}

.recharge-option.selected::before {
    border-color: var(--teal);
    background: var(--teal);
    box-shadow: inset 0 0 0 4px #fff;
}

.recharge-option .opt-price {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    color: var(--ink);
    min-width: 92px;
}

.recharge-option.selected .opt-price {
    color: var(--teal-deep);
}

/* 右侧点券胶囊 */
.recharge-option .opt-coin {
    margin: 0 0 0 auto;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gold-deep);
    background: var(--gold-soft);
    border-radius: 999px;
    padding: 5px 14px;
    white-space: nowrap;
}

.recharge-option.selected .opt-coin {
    background: var(--gold);
    color: #fff;
}

/* 二维码弹窗 */
.qr-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(22, 35, 30, 0.45);
    backdrop-filter: blur(3px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.qr-modal {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    padding: 30px;
    text-align: center;
    max-width: 350px;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

.qr-close {
    position: absolute;
    top: 14px;
    right: 14px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    line-height: 30px;
    font-size: 20px;
    color: var(--ink-soft);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: all 0.18s ease;
}

.qr-close:hover {
    color: var(--teal-deep);
    background: var(--teal-soft);
    border-color: #bcd8d1;
}

.company-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.company-text {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
}

.company-tag {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--teal);
    padding: 3px 14px;
    border-radius: 999px;
}

.qr-price {
    font-size: 32px;
    font-weight: 800;
    margin: 14px 0;
    color: var(--teal-deep);
}

.qr-box {
    width: 210px;
    height: 210px;
    margin: 10px auto;
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--line);
    padding: 6px;
    box-sizing: border-box;
}

#qrCanvas {
    width: 100%;
    height: 100%;
}

.qr-tips {
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 600;
    margin: 10px 0 0;
}

/* ================= 用户中心 ================= */

.user-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 24px;
    align-items: start;
}

.sidebar-menu {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 14px;
    box-shadow: var(--shadow-sm);
}

.sidebar-title {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 10px;
    padding: 6px 10px 12px;
    border-bottom: 1px solid var(--line);
}

.sidebar-title i {
    color: var(--teal);
    margin-right: 6px;
}

.sidebar-item {
    padding: 11px 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.18s ease;
    margin-bottom: 4px;
}

.sidebar-item i {
    width: 22px;
    text-align: center;
    color: var(--muted);
    margin-right: 4px;
    transition: color 0.18s ease;
}

.sidebar-item:hover {
    background: var(--teal-soft);
    color: var(--teal-deep);
}

.sidebar-item.active {
    background: linear-gradient(135deg, rgba(18, 149, 130, 0.14), rgba(10, 95, 83, 0.1));
    color: var(--teal-deep);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--teal);
}

.sidebar-item.active i {
    color: var(--gold);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.user-avatar {
    width: 84px;
    height: 84px;
    border-radius: 26px;
    background: linear-gradient(140deg, #13a08b 0%, var(--teal-deep) 100%);
    box-shadow: 0 12px 26px rgba(14, 128, 111, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.user-meta h3 {
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--ink);
}

.user-meta p {
    margin: 5px 0;
    color: var(--ink-soft);
    font-size: 13.5px;
}

.user-meta .level-badge {
    background: var(--gold-soft);
    color: var(--gold-deep);
    padding: 2px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
}

.user-meta .balance-strong {
    color: var(--teal-deep);
    font-weight: 800;
    font-size: 19px;
}

.user-meta img {
    width: 20px;
    height: 20px;
    vertical-align: -4px;
    margin-right: 4px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.stat-card {
    background: #fbfdfc;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
}

.stat-card .stat-num {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--teal-deep);
}

.stat-card .stat-label {
    color: var(--muted);
    font-weight: 600;
    font-size: 13px;
    margin: 0;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}

.data-table th {
    text-align: left;
    padding: 12px 14px;
    background: var(--teal-soft);
    color: var(--teal-deep);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.03em;
}

.data-table th:first-child {
    border-radius: 12px 0 0 12px;
}

.data-table th:last-child {
    border-radius: 0 12px 12px 0;
}

.data-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--line);
    font-weight: 400;
    color: var(--ink-soft);
}

.data-table .rec-amount {
    color: var(--teal-deep);
    font-weight: 700;
}

.badge-success {
    display: inline-block;
    background: var(--teal-soft);
    color: var(--teal-deep);
    padding: 3px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
}

.logout-box {
    text-align: center;
    padding: 40px 0;
}

.logout-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--teal-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--teal-deep);
}

.logout-box p {
    font-size: 16px;
    color: var(--ink-soft);
    margin: 0 0 24px;
}

/* ================= 漫画卡片 ================= */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 22px;
}

.manhua-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.manhua-card:hover {
    transform: translateY(-5px);
    border-color: #bcd8d1;
    box-shadow: var(--shadow);
}

.manhua-card a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.manhua-card .card-cover {
    overflow: hidden;
}

.manhua-card .card-cover img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.manhua-card:hover .card-cover img {
    transform: scale(1.06);
}

.manhua-card .card-body {
    padding: 14px 15px 16px;
}

.manhua-card .card-title {
    font-weight: 800;
    font-size: 15px;
    margin: 0 0 6px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.manhua-card .card-intro {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.65;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ================= 文档页 ================= */

.doc-content {
    color: var(--ink-soft);
    line-height: 1.95;
    font-size: 14.5px;
}

.doc-content h1, .doc-content h2, .doc-content h3 {
    color: var(--ink);
    font-weight: 800;
}

.doc-content a {
    color: var(--teal-deep);
    font-weight: 600;
}

.doc-content img {
    max-width: 100%;
}

/* ================= 页脚（杂志版权页式：品牌横幅 + 横向索引分区） ================= */

.site-footer {
    position: relative;
    overflow: hidden;
    margin-top: 56px;
    border-top: 4px solid var(--gold);
    background:
        radial-gradient(700px 260px at 88% -40%, rgba(207, 150, 47, 0.12), transparent 60%),
        linear-gradient(180deg, #113c34 0%, #0c2c26 100%);
    color: #c9d7d1;
    padding: 0;
}

/* 背景大字水印 */
.site-footer::after {
    content: 'MANGA';
    position: absolute;
    right: -16px;
    bottom: 4px;
    font-size: 116px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.055);
    pointer-events: none;
    user-select: none;
}

.footer-top {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

/* —— 第一区：品牌横幅（左公司信息 / 右大口号） —— */
.footer-brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 30px;
    padding: 40px 0 32px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
}

.footer-brand .brand {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 12px;
}

.footer-brand .brand-name {
    color: #fff;
    max-width: 480px;
    font-size: 19px;
}

.footer-address {
    grid-column: 1;
    grid-row: 2;
    color: #93a89f;
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
    max-width: 540px;
}

.footer-slogan {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    margin: 0;
    text-align: right;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.06em;
    color: #e9d3a3;
    white-space: nowrap;
}

/* 把 HTML 里的换行抹掉，口号横排一行 */
.footer-slogan br {
    display: none;
}

.footer-slogan::after {
    content: '\2192';
    color: var(--gold);
    margin-left: 10px;
}

/* —— 第二、三、四区：横向索引条目行 —— */
.footer-col {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
}

.footer-col h4 {
    min-width: 88px;
    margin: 0 14px 0 0;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.footer-col h4::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px rgba(207, 150, 47, 0.18);
}

.footer-col a,
.footer-col p {
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.footer-col p {
    color: #a9bbb3;
    padding: 5px 0;
}

.footer-col p::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--gold);
    margin-right: 8px;
}

#footerPhone::before {
    content: '\f095';
}

#footerEmail::before {
    content: '\f0e0';
}

.footer-col a {
    color: #a9bbb3;
    text-decoration: none;
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    transition: all 0.18s ease;
}

.footer-col a i {
    margin-right: 7px;
    color: var(--gold);
    transition: color 0.18s ease;
}

.footer-col a:hover {
    color: #113c34;
    background: #e9d3a3;
    border-color: #e9d3a3;
}

.footer-col a:hover i {
    color: #113c34;
}

/* —— 底部文化标识条 —— */
.footer-bottom {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 0 20px;
    text-align: center;
    font-size: 12.5px;
    color: #70857c;
}

.footer-bottom p {
    margin: 4px 0;
}

.footer-bottom a {
    color: #a9bbb3;
    text-decoration: none;
}

.footer-bottom a:hover {
    color: #e9d3a3;
}

.footer-bottom img {
    vertical-align: middle;
}

/* ================= 响应式 ================= */

@media (min-width: 1024px) {
    .hero-art {
        display: flex;
    }
}

@media (max-width: 1023px) {
    .hero {
        padding: 58px 0;
    }

    .hero-title {
        font-size: 37px;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-cover {
        max-width: 280px;
        margin: 0 auto;
    }

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

    .footer-brand {
        grid-template-columns: 1fr;
        row-gap: 6px;
    }

    .footer-brand .brand,
    .footer-address {
        grid-column: 1;
    }

    .footer-slogan {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        text-align: left;
        font-size: 23px;
        margin-top: 10px;
    }
}

/* 顶部导航在窄屏时换行，菜单横滑 */
@media (max-width: 960px) {
    .side-nav {
        padding: 10px 16px;
        gap: 10px;
    }

    .brand {
        flex: 1 1 auto;
    }

    .brand-name {
        font-size: 15.5px;
        max-width: 170px;
    }

    .side-nav > .auth-box {
        margin-left: auto;
    }

    .site-nav {
        order: 5;
        flex: 1 1 100%;
        margin-left: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .site-nav::-webkit-scrollbar {
        display: none;
    }

    .nav-link {
        flex-shrink: 0;
        padding: 7px 13px;
    }
}

@media (max-width: 640px) {
    .container {
        padding: 0 16px;
    }

    .hero {
        padding: 48px 0;
    }

    .hero-title {
        font-size: 31px;
    }

    .hero-sub {
        font-size: 14.5px;
    }

    .section {
        padding: 38px 0;
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .manhua-card .card-body {
        padding: 10px 12px 13px;
    }

    .manhua-card .card-title {
        font-size: 14px;
    }

    .footer-brand {
        padding-top: 30px;
    }

    .footer-slogan {
        font-size: 20px;
        white-space: normal;
    }

    .footer-col h4 {
        min-width: 100%;
        margin-bottom: 2px;
    }

    .site-footer::after {
        display: none;
    }

    .auth-head {
        padding: 30px 22px 22px;
    }

    .auth-form {
        padding: 26px 22px 28px;
    }

    .panel {
        padding: 20px;
    }

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

    .user-avatar {
        width: 68px;
        height: 68px;
        border-radius: 20px;
        font-size: 27px;
    }

    .recharge-option {
        padding: 14px 16px 14px 48px;
    }

    .recharge-option::before {
        left: 17px;
        width: 18px;
        height: 18px;
    }

    .recharge-option .opt-price {
        min-width: 78px;
        font-size: 18px;
    }
}

/* ================= SweetAlert2 微调 ================= */

.swal2-popup {
    width: 280px !important;
    padding: 12px !important;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--ink) !important;
}

.swal2-title {
    font-size: 16px !important;
    color: var(--ink) !important;
}

.swal2-html-container {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
    color: var(--ink-soft) !important;
}

.swal2-actions button {
    padding: 8px 22px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
}

.swal2-confirm {
    background: linear-gradient(135deg, #129582, var(--teal-deep)) !important;
    color: #fff !important;
}

.swal2-cancel {
    background: #eef3f1 !important;
    color: var(--ink) !important;
}