/* ============================================================
   前台样式 —— 与后台 admin/css/admin.css 共用同一套设计 token
   ============================================================ */

:root{
    --bg:#f3f1ec; --panel:#ffffff; --line:#e4e0d6; --text:#20242b; --muted:#797469;
    --accent:#3f8f8f; --accent2:#d98c2b;
    --tabbar-h:58px; --topbar-h:52px;
}
[data-theme="dark"]{
    --bg:#12161c; --panel:#1b212b; --line:#2a313d; --text:#e7e5df; --muted:#8b93a1;
    --accent:#4fa8a8; --accent2:#e8a33d;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; height:100%; overscroll-behavior:none;}
body{background:var(--bg); color:var(--text); font-family:-apple-system,'PingFang SC','Microsoft YaHei',sans-serif; overflow:hidden;}

/* 启动页 */
#splash{position:fixed; inset:0; z-index:999; background:#000; display:flex; align-items:flex-end; justify-content:center;}
#splash .bar-wrap{position:relative; width:70%; height:3px; background:rgba(255,255,255,.25); margin-bottom:60px; border-radius:2px; overflow:hidden;}
#splash .bar{position:absolute; left:0; top:0; height:100%; width:0%; background:var(--accent2); transition:width .1s linear;}
#splash .splash-title{position:absolute; top:40%; left:0; right:0; text-align:center; color:#fff; font-size:20px; font-weight:700;}

/* 顶部标题栏 */
#topbar{position:fixed; top:0; left:0; right:0; height:var(--topbar-h); z-index:50; background:var(--panel); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 14px;}
#topbar .icon-btn{font-size:18px; color:var(--muted); cursor:pointer; padding:6px; width:20px; text-align:center;}
#topbar #pT{font-size:16px; font-weight:600;}

/* 页面容器 */
#pv{position:fixed; top:var(--topbar-h); bottom:var(--tabbar-h); left:0; right:0; overflow:hidden;}
.pg{position:absolute; top:0; left:0; width:100%; height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; transform:translate3d(100%,0,0); padding-bottom:24px;}

/* 轮播 */
.carousel{position:relative; width:100%; aspect-ratio:16/7; overflow:hidden; border-radius:0 0 12px 12px; background:var(--line);}
.carousel-track{display:flex; height:100%; transition:transform .35s ease;}
.carousel-track img{width:100%; height:100%; object-fit:cover; flex-shrink:0;}
.carousel-dots{position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:6px;}
.carousel-dots span{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5);}
.carousel-dots span.active{background:#fff; width:16px; border-radius:4px;}

/* 跑马灯 */
.marquee{height:32px; display:flex; align-items:center; overflow:hidden; white-space:nowrap; background:var(--panel); border-bottom:1px solid var(--line); font-size:12.5px; color:var(--muted);}
.marquee span{padding-left:100%; animation:marquee-scroll 18s linear infinite; display:inline-block;}
@keyframes marquee-scroll{ from{transform:translateX(0);} to{transform:translateX(-100%);} }

/* 分类标签栏 */
.tagb{display:flex; gap:8px; padding:12px 14px; overflow-x:auto;}
.tagb .tag{flex-shrink:0; padding:6px 14px; border-radius:99px; font-size:13px; background:var(--panel); border:1px solid var(--line); color:var(--muted); cursor:pointer;}
.tagb .tag.active{background:var(--text); color:var(--bg); border-color:var(--text);}

/* 搜索框 */
.ssl{display:flex; gap:8px; padding:0 14px 12px;}
.ssl input{flex:1; padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); font-size:13.5px;}
.ssl button{padding:0 16px; border:none; border-radius:8px; background:var(--text); color:var(--bg); font-size:13.5px;}

/* 卡片列表 */
.section-title{padding:14px 14px 4px; font-size:13px; font-weight:600; color:var(--muted);}
.card-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 14px 14px;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer;}
.card .thumb{width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--line);}
.card .body{padding:9px 10px;}
.card .card-type{font-size:10px; color:var(--accent); text-transform:uppercase; letter-spacing:.05em;}
.card .card-title{font-size:13px; font-weight:600; margin:4px 0 6px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.card .tagbar{display:flex; justify-content:space-between; font-size:11px; color:var(--muted);}
.card .top-flag{display:inline-block; background:rgba(217,140,43,.15); color:var(--accent2); font-size:9.5px; padding:1px 6px; border-radius:99px; margin-left:4px;}
.card .nav-flag{font-size:12px; color:var(--muted);}

/* 底部Tab栏 */
#tb{position:fixed; bottom:0; left:0; right:0; height:var(--tabbar-h); z-index:50; background:var(--panel); border-top:1px solid var(--line); display:flex;}
#tb .ti{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--muted); font-size:10.5px; cursor:pointer;}
#tb .ti i{font-size:18px;}
#tb .ti.active{color:var(--accent);}

/* 抽屉 */
#mask{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:60; opacity:0; pointer-events:none; transition:opacity .25s;}
#mask.active{opacity:1; pointer-events:auto;}
#drawer{position:fixed; top:0; bottom:0; left:0; width:78%; max-width:300px; z-index:61; background:var(--panel); transform:translateX(-100%); transition:transform .28s cubic-bezier(.25,.1,.25,1); overflow-y:auto; padding:20px 16px;}
#drawer.active{transform:translateX(0);}
#drawer .drawer-group{margin-bottom:6px;}
#drawer .drawer-head{padding:11px 4px; font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;}
#drawer a{display:block; padding:9px 12px; font-size:13.5px; color:var(--text); text-decoration:none; border-radius:6px;}
#drawer a:hover{background:var(--bg);}

/* 通用模态层 */
.modal-layer{position:fixed; inset:0; z-index:70; background:var(--bg); transform:translateX(100%); transition:transform .28s cubic-bezier(.25,.1,.25,1); display:flex; flex-direction:column;}
.modal-layer.active{transform:translateX(0);}
.modal-layer .modal-head{height:var(--topbar-h); flex-shrink:0; display:flex; align-items:center; gap:12px; padding:0 14px; background:var(--panel); border-bottom:1px solid var(--line);}
.modal-layer .modal-head .back{font-size:18px; cursor:pointer; color:var(--muted);}
.modal-layer .modal-head h3{font-size:15px; margin:0; font-weight:600;}
.modal-layer .modal-body{flex:1; overflow-y:auto; padding:14px;}

/* Toast / Loading */
#toast{position:fixed; left:50%; bottom:90px; transform:translateX(-50%) translateY(20px); background:rgba(0,0,0,.78); color:#fff; padding:9px 18px; border-radius:8px; font-size:13px; opacity:0; pointer-events:none; transition:all .25s; z-index:200;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
#lov{position:fixed; inset:0; z-index:150; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center;}
#lov.active{display:flex;}
#lov .spinner{width:32px; height:32px; border:3px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.empty-tip{padding:60px 0; text-align:center; color:var(--muted); font-size:13px;}