:root{
	--brand:#88b68f;           /* 主绿色 */
	--brand-strong:#6aa373;
	--brand-tint:#a7c8ad;
	--bg:#f6f7f8;              /* 页面背景 */
	--card:#ffffff;            /* 卡片色 */
	--line:#dfdfdf;            /* 分割线 */
	--text:#2b2b2b;            /* 主要文字 */
	--text-2:#7a7a7a;          /* 次要文字 */
	--danger:#d67173;          /* 强调/危险 */
	--radius:18px;
	--tabbar-h:64px;
	--safe-bottom:env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html,body{height:100%; background:var(--bg); color:var(--text); font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;}
body{margin:0}

/* 顶部品牌条 */
.topbar{position:sticky; top:0; z-index:10; height:56px; display:flex; align-items:center; justify-content:center; background:var(--brand); color:#fff; letter-spacing:1px; font-weight:800; font-size:20px; box-shadow:0 2px 6px rgba(0,0,0,.06)}
.topbar .subtitle{position:absolute; bottom:6px; left:0; right:0; text-align:center; font-size:11px; font-weight:600; opacity:.9}
.topbar .right{position:absolute; right:10px; top:0; bottom:0; display:flex; align-items:center; gap:6px}
.icon-btn{appearance:none; border:0; background:transparent; color:#fff; font-size:18px; padding:8px; border-radius:10px}
.icon-btn:active{transform:scale(.9)}

/* 页面容器与切换动画 */
.pages{position:relative; height:calc(100dvh - var(--tabbar-h) - var(--safe-bottom)); overflow:hidden;}
.page{position:absolute; inset:0; overflow:auto; -webkit-overflow-scrolling:touch; padding:14px 14px 18px; background:var(--bg); display:none; will-change:transform,opacity}
.page.active{display:block}
/* 进入/离开动画使用 Web Animations API 驱动，此处仅做初始状态兜底 */

/* 底部导航 */
.tabbar{position:fixed; left:0; right:0; bottom:0; height:calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom:var(--safe-bottom); background:var(--brand); display:grid; grid-template-columns:repeat(5,1fr); align-items:center; box-shadow:0 -4px 12px rgba(0,0,0,.08); z-index:20}
.tabbar button{appearance:none; -webkit-tap-highlight-color:transparent; background:transparent; border:0; color:#eaf2ec; display:flex; gap:6px; align-items:center; justify-content:center; flex-direction:column; padding:10px 0 8px; font-size:11px; position:relative; overflow:hidden}
.tabbar button.active{color:#fff}
.tabbar svg{width:24px; height:24px; fill:currentColor; transition:transform .15s ease}
.tabbar button:active svg{transform:scale(.9)}

/* 通用组件 */
.card{background:var(--card); border-radius:16px; box-shadow:0 2px 10px rgba(0,0,0,.06); padding:14px}
.panel{background:var(--card); border-radius:16px; box-shadow:0 1px 6px rgba(0,0,0,.05);}
.shadow-soft{box-shadow:0 6px 26px rgba(0,0,0,.08)}
.muted{color:var(--text-2)}
.section-title{font-weight:800; font-size:18px; margin:12px 8px}
.chips{display:flex; gap:10px; padding:8px 2px 10px; flex-wrap:wrap}
.chip{padding:8px 14px; background:#eef1ef; color:#556; border-radius:999px; border:1px solid #e0e5e1; font-weight:700}
.chip.active{background:#ffe38c; border-color:#f5d56e; color:#66510a}

.search{position:relative;}
.search input{width:100%; padding:12px 44px 12px 14px; border-radius:999px; border:1px solid #d5dfd7; outline:none; background:#fff; font-size:14px}
.search .icon{position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#99a;}

.banner{height:140px; border-radius:16px; background:linear-gradient(135deg,#cddbd1, #fff); display:flex; align-items:center; justify-content:center; color:#757575; font-weight:800; letter-spacing:1px}
/* 屏幕阅读器隐藏工具 */
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
/* 活动卡片滚动展示 */
.banner-carousel{position:relative; border-radius:16px; overflow:hidden}
.banner-track{display:flex; width:100%; will-change:transform; transition:transform .4s ease}
.banner-slide{min-width:100%; height:140px; display:flex; align-items:center; justify-content:center; font-weight:900; letter-spacing:1px}
.banner-dots{position:absolute; left:50%; transform:translateX(-50%); bottom:8px; display:flex; gap:6px}
.banner-dot{width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.6)}
.banner-dot.active{background:#fff; width:18px}

.h-scroll{display:flex; gap:14px; overflow:auto; padding:4px 2px 8px}
.cover{width:120px; min-width:120px; height:150px; border-radius:18px; background:linear-gradient(135deg,#3e4d5b,#a3b2bf); position:relative; overflow:hidden}
.cover .cover-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cover .title{position:absolute; left:10px; bottom:10px; color:#fff; font-weight:800; text-shadow:0 2px 8px rgba(0,0,0,.4)}
.rating{position:absolute; right:10px; bottom:10px; color:#ffd45f; font-weight:900; text-shadow:0 1px 2px rgba(0,0,0,.3)}

.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.grid .cover{width:100%; min-width:initial; height:180px}

/* 首页推荐 3列更紧凑 */
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-3 .cover{height:150px}

/* 消息列表 */
.msg-item{display:flex; align-items:center; gap:12px; padding:14px; border-radius:16px; border:1px solid #c9cfc9; background:#fff; position:relative}
.msg-item + .msg-item{margin-top:12px}
.avatar{width:48px; height:48px; border-radius:50%; background:#e6e6e6; display:grid; place-items:center; color:#bcbcbc; font-size:24px; overflow:hidden}
.avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%}
.dot{position:absolute; right:12px; width:12px; height:12px; border-radius:50%; background:#e99090}

/* 二创帖子卡片 */
.post{padding:14px; border-radius:18px; background:#fff; border:1px solid #dbe0db}
.post + .post{margin-top:16px}
.post .head{display:flex; align-items:center; gap:10px}
.post .head .avatar{width:36px;height:36px; font-size:18px}
.follow{margin-left:auto; padding:6px 12px; border-radius:999px; background:var(--brand); color:#fff; font-weight:700; border:0}
.post .img{height:180px; border-radius:14px; background:linear-gradient(135deg,#9aa9cf,#f2b7b7); margin-top:10px}
.post-img{width:100%; height:180px; border-radius:14px; object-fit:cover; margin-top:10px; display:block}
.post .actions{display:flex; gap:18px; align-items:center; color:#798; margin-top:8px}

/* 个人中心 */
.menu-item{display:flex; align-items:center; gap:10px; padding:14px; border-radius:14px; border:1px solid #d9ddd9; background:#fff}
.menu-item + .menu-item{margin-top:10px}

/* 登录页 */
.login-card{background:#fff; border-radius:24px; border:2px solid #cfd8cf; padding:18px 16px; box-shadow:0 8px 26px rgba(0,0,0,.08)}
.brand{font-weight:900; font-size:28px; color:var(--brand-strong); letter-spacing:4px; text-align:center}
.slogan{text-align:center; color:#9aa39a; margin:8px 0 16px; font-weight:700}
.field{margin:12px 0}
.field input{width:100%; border-radius:14px; border:2px solid #b8c2b8; padding:12px 14px; font-size:15px; outline:none}
.btn{width:100%; padding:12px 14px; border-radius:18px; background:var(--brand); color:white; font-weight:900; letter-spacing:2px; border:0}
.btn:disabled{opacity:.6}
.link{color:#8b8f8d; font-size:12px; text-align:right}
.logout{background:var(--danger)}

/* 启动页 */
.splash{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0}
.splash .art{height:58%; width:100%; background:linear-gradient(180deg,#b5bec7,#ffffff 48%, #ffffff 70%); position:relative; display:flex; align-items:flex-end; justify-content:center}
.splash .logo{position:absolute; top:42%; transform:translateY(-50%); font-weight:900; font-size:34px; color:#7aa483; letter-spacing:6px; text-shadow:0 2px 4px rgba(0,0,0,.05)}
.splash .foot{height:42%; display:grid; place-items:center;}
.splash .foot small{color:#a3aaa6}

/* Ripple 通用涟漪效果 */
[data-ripple]{position:relative; overflow:hidden}
.ripple{position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,.35); animation:ripple .6s linear; pointer-events:none}
@keyframes ripple{to{transform:scale(4); opacity:0}}

/* 广告页 */
.ad-wrap{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px}
.ad-box{width:86%; height:58%; border-radius:16px; background:linear-gradient(135deg,#ffe8b5,#ffd1d1); box-shadow:0 10px 26px rgba(0,0,0,.15)}
.ad-actions{display:flex; gap:10px}
.btn-secondary{padding:10px 14px; border-radius:999px; background:#fff; border:1px solid #d8d8d8; font-weight:700}

/* Chat 页面 */
.chat-head{position:sticky; top:0; background:var(--bg); padding:8px 6px; display:flex; align-items:center; gap:8px; z-index:5}
.chat-head .back{border:0; background:transparent; font-size:20px}
.chat-messages{display:flex; flex-direction:column; gap:8px; padding:8px 4px 80px}
.bubble{max-width:78%; padding:10px 12px; border-radius:14px; background:#e9f0ea}
.bubble.me{margin-left:auto; background:#cfe6d5}
.chat-input{position:sticky; bottom:0; background:var(--bg); padding:10px 6px; display:flex; gap:8px}
.chat-input input{flex:1; padding:12px 12px; border-radius:999px; border:1px solid #cfd8cf; outline:none; background:#fff}
.chat-input button{padding:10px 14px; border-radius:999px; border:0; background:var(--brand); color:#fff; font-weight:800}
.msg-row{display:flex; flex-direction:column; align-items:flex-start}
.msg-row.me{align-items:flex-end}
.chat-time{font-size:11px; color:var(--text-2); margin:2px 6px}
#chat-more{ text-align:center; padding:6px 0; }

/* 虚拟键盘 */
.vkboard{position:fixed; left:0; right:0; bottom:0; height:240px; background:var(--card); border-top-left-radius:16px; border-top-right-radius:16px; box-shadow:0 -8px 24px rgba(0,0,0,.2); transform:translateY(100%); transition:transform .25s ease; z-index:50; display:flex; flex-direction:column}
.vkboard.active{transform:translateY(0)}
.vk-head{display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-bottom:1px solid var(--line)}
.vk-title{font-weight:800}
.vk-grid{flex:1; display:grid; grid-template-columns:repeat(10,1fr); gap:8px; padding:10px}
.vk-key{padding:10px 0; border-radius:10px; background:#eef1ef; border:1px solid #dde3de; font-weight:800; text-align:center}
.vk-key.wide{grid-column:span 2}
.vk-actions{display:flex; gap:8px}
/* 键盘展开时，抬升聊天输入条并给消息区留白 */
#page-chat.vk-active .chat-input{bottom:240px}
#page-chat.vk-active .chat-messages{padding-bottom:calc(80px + 240px)}

/* Modal 通用 */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:flex-end; z-index:30}
.modal.active{display:flex}
.sheet{width:100%; max-height:85vh; background:var(--card); border-top-left-radius:18px; border-top-right-radius:18px; box-shadow:0 -10px 26px rgba(0,0,0,.18); overflow:auto; padding:14px}
.modal{backdrop-filter:blur(6px)}
.sheet .title{font-weight:900; font-size:18px; margin:6px 4px 10px}
.sheet .close{position:sticky; top:0; float:right; border:0; background:transparent; font-size:20px}
.settings-list{display:flex; flex-direction:column; gap:10px}
.settings-item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 12px; border-radius:12px; border:1px solid #d9ddd9; background:#fff}
.settings-item .desc{font-size:12px; color:var(--text-2)}
.switch{position:relative; width:44px; height:26px}
.switch input{appearance:none; width:100%; height:100%; background:#c7c7c7; border-radius:999px; outline:none; transition:background .2s}
.switch input:checked{background:var(--brand)}
.switch input::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:left .2s}
.switch input:checked::after{left:21px}

/* 交互可见焦点 */
button:focus-visible, .chip:focus-visible, [data-ripple]:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:12px}

/* Skeleton 闪动占位 */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{position:relative}
.skeleton::after{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.18), rgba(255,255,255,.04)); background-size:200% 100%; animation:shimmer 1.2s infinite}

/* 减少动效支持 */
@media (prefers-reduced-motion: reduce){
	*{scroll-behavior:auto !important}
}

/* 书籍详情 */
/* 书籍详情页顶栏改为随内容滚动（非固定） */
.book-head{position:relative; display:flex; align-items:center; justify-content:space-between; padding:8px; z-index:1; background:var(--bg)}
/* 顶栏按钮使用主题绿色，提升可见性 */
.book-head .icon-btn{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--brand); color:#fff; border:0; box-shadow:0 6px 16px rgba(0,0,0,.15)}
.book-head .icon-btn svg{width:20px; height:20px; display:block}
.book-hero{height:180px; border-radius:16px; background:linear-gradient(135deg,#b8c6d1,#e7eef4)}
.book-title{font-weight:900; font-size:20px; margin:12px 4px 6px}
.book-meta{color:var(--text-2); margin:0 6px 12px}
.book-actions{display:flex; gap:10px}
.pill{padding:8px 14px; border-radius:999px; border:1px solid #cfd8cf; background:#fff}

/* 收藏列表 */
.fav-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}

/* 章节与进度 */
.chapter-list{list-style:none; padding:0; margin:12px 0; display:flex; flex-direction:column; gap:8px}
.chapter-list li{padding:10px 12px; border-radius:12px; border:1px solid #d9ddd9; background:#fff}
.progress{height:8px; background:#e6ece6; border-radius:999px; overflow:hidden}
.progress > i{display:block; height:100%; width:0; background:linear-gradient(90deg, var(--brand), var(--brand-tint))}

/* 阅读器 */
/* 阅读器背景预设与细体偏好 */
:root.thin-font body{ font-weight:350 }
:root.thin-font #page-reader .reader-content{ font-weight:300 }
#page-reader[data-bg="paper"]{ background:#f7f3e8; color:#2f2b24 }
#page-reader[data-bg="paper"] .reader-head{ background:#f7f3e8 }
#page-reader[data-bg="paper"] .reader-content{ background:transparent }
#page-reader[data-bg="green"]{ background:#e8f5e4; color:#233a28 }
#page-reader[data-bg="green"] .reader-head{ background:#e8f5e4 }
#page-reader[data-bg="green"] .reader-content{ background:transparent }

/* 短视频 */
.video-card{height:220px !important; position:relative}
.video-card .play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; background:rgba(0,0,0,.4); display:grid; place-items:center; color:#fff; font-size:24px}
.page-video{background:#000; color:#fff; padding:0}
.video-wrap{position:relative; height:calc(100dvh - var(--safe-bottom)); background:#000; overflow:hidden}
.video-el{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:linear-gradient(180deg,#222,#000)}
.video-title{position:absolute; left:12px; right:80px; bottom:90px; font-weight:800}
.video-ui{position:absolute; right:12px; bottom:120px; display:flex; flex-direction:column; gap:14px; align-items:center}
.video-back{position:absolute; top:12px; left:12px; background:var(--brand); color:#fff; border:0; padding:10px 12px; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,.35); opacity:.95; touch-action:manipulation}
.video-back:active{transform:scale(.95)}
.reader-head{position:sticky; top:0; z-index:8; display:flex; align-items:center; gap:10px; padding:8px; background:var(--bg)}
.reader-head .back{border:0; background:transparent; font-size:20px}
.reader-content{min-height:60vh; font-size:1.1em; line-height:1.8; padding:8px 2px}
.reader-pager{position:fixed; left:0; right:0; bottom:calc(var(--tabbar-h) + var(--safe-bottom)); display:flex; height:60px}
.reader-pager .zone{flex:1}
.reader-progress{position:fixed; left:0; right:0; bottom:calc(var(--tabbar-h) + var(--safe-bottom)); height:3px; background:#0000}
.reader-progress i{display:block; height:100%; background:var(--brand); width:0}

			/* Dark Theme 变量覆盖 */
			:root[data-theme="dark"]{
				--brand:#5a8a62;
				--brand-strong:#4a7b53;
				--brand-tint:#7eb18a;
				--bg:#0f1416;
				--card:#151b1e;
				--line:#223038;
				--text:#e7ecef;
				--text-2:#96a3a8;
				--danger:#b85f62;
				color-scheme:dark;
			}

			/* 小屏微调 */
@media (min-width:480px){
	.pages{max-width:420px; margin:0 auto}
	.tabbar{max-width:420px; margin:0 auto; left:0; right:0}
}