:root { --accent:#ff5000; --bg:#f4f4f6; --card:#fff; --text:#1a1a1a; --sub:#9a9a9a; --line:#eee; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; }
body { background:#dcdee3; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
       display:flex; justify-content:center; min-height:100vh; }
.phone { width:390px; height:100vh; max-height:900px; background:var(--bg); position:relative; box-shadow:0 12px 48px rgba(0,0,0,.18);
         display:flex; flex-direction:column; overflow:hidden; }
.statusbar { height:44px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:space-between;
             padding:0 18px; font-size:14px; font-weight:600; flex:0 0 auto; }
.statusbar .icons { font-size:12px; letter-spacing:1px; }
.topbar { background:var(--accent); color:#fff; padding:6px 0 0; flex:0 0 auto; }
.brand { display:flex; align-items:baseline; gap:8px; padding:2px 16px 8px; }
.brand b { font-size:22px; letter-spacing:1px; }
.brand span { font-size:12px; opacity:.85; }
.loginbtn { margin-left:auto; align-self:center; border:1px solid rgba(255,255,255,.7); background:rgba(255,255,255,.16); color:#fff; font-size:12px; font-weight:600; padding:8px 14px; min-height:32px; border-radius:16px; cursor:pointer; }
.loginbtn.on { border-color:transparent; background:rgba(255,255,255,.9); color:var(--accent); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.atitle { font-size:17px; font-weight:700; margin:14px 0 8px; }
.adesc { font-size:13px; color:#666; line-height:1.7; }
.adesc b { color:#e1251b; }
.ainput { width:100%; margin-top:14px; border:1px solid var(--line); background:#fafafa; border-radius:10px; padding:12px 14px; font-size:15px; outline:none; color:var(--text); }
.abtn { width:100%; margin-top:12px; border:0; background:linear-gradient(90deg,#07c160,#06ad56); color:#fff; padding:13px; border-radius:24px; font-size:15px; font-weight:700; cursor:pointer; }
.abtn.ghost { background:#f0f0f2; color:#555; font-weight:600; margin-top:10px; }
.atip { margin-top:10px; font-size:12px; color:var(--sub); text-align:center; min-height:16px; }
.mine { padding:16px 16px 8px; }
.minecard { background:#fff; border-radius:14px; padding:16px; }
.minecard .who { display:flex; align-items:center; gap:12px; }
.minecard .who .av { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#ff9a6c,#ff6a00); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; }
.minecard .who .nm { font-size:16px; font-weight:600; }
.minecard .who .sub { font-size:12px; color:var(--sub); }
.minecard .kv { display:flex; justify-content:space-between; font-size:13px; color:#555; padding:8px 0; border-top:1px dashed var(--line); margin-top:10px; }
.minecard .kv b { color:var(--text); font-weight:600; }
.minecard .mbtn { margin-top:14px; display:flex; gap:10px; }
.minecard .mbtn button { flex:1; border:0; padding:12px; border-radius:22px; font-size:14px; font-weight:600; cursor:pointer; }
.minecard .mbtn .p { background:linear-gradient(90deg,#ff6a00,#ff3d00); color:#fff; }
.minecard .mbtn .g { background:#f0f0f2; color:#333; }
.minecard .note { margin-top:12px; font-size:12px; color:var(--sub); line-height:1.6; }
/* 钱包：金额概览 + 流水 */
.wgrid { display:flex; gap:8px; margin-top:12px; }
.wgrid .wbox { flex:1; background:#fafafa; border-radius:10px; padding:10px 6px; text-align:center; }
.wgrid .wbox b { display:block; font-size:16px; color:var(--text); }
.wgrid .wbox b.hl { color:#e1251b; }
.wgrid .wbox span { font-size:11px; color:var(--sub); }
.wlist { margin-top:14px; border-top:1px dashed var(--line); padding-top:10px; }
.wlist .wt { font-size:13px; color:var(--sub); margin-bottom:6px; }
.witem { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#555; padding:7px 0; border-bottom:1px solid #f6f6f8; }
.witem:last-child { border-bottom:0; }
.witem .amt { font-weight:700; color:#e1251b; }
.witem .st { font-size:11px; color:var(--sub); margin-left:6px; }
.wempty { font-size:12px; color:var(--sub); padding:6px 0; }
.wrow { display:flex; gap:8px; margin-top:12px; }
.wrow input { flex:1; border:1px solid var(--line); background:#fafafa; border-radius:10px; padding:10px 12px; font-size:14px; outline:none; }
.wrow button { flex:0 0 96px; border:0; border-radius:10px; background:linear-gradient(90deg,#ff6a00,#ff3d00); color:#fff; font-size:14px; font-weight:600; cursor:pointer; }
.wrow button[disabled] { background:#d8d8dc; color:#fff; cursor:not-allowed; }
.tabs { display:flex; overflow-x:auto; padding:0 10px 8px; -ms-overflow-style:none; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { flex:0 0 auto; padding:10px 14px; min-height:36px; display:flex; align-items:center; font-size:15px; color:rgba(255,255,255,.75); position:relative; cursor:pointer; white-space:nowrap; transition:color .15s; }
.tab.active { color:#fff; font-weight:700; font-size:16px; }
.tab.active::after { content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:22px; height:3px; border-radius:3px; background:#fff; }
.search { background:#fff; padding:8px 12px 10px; flex:0 0 auto; }
.search .row { display:flex; align-items:center; background:#f1f1f3; border-radius:20px; padding:8px 8px 8px 14px; }
.search input { flex:1; border:0; background:transparent; font-size:15px; outline:none; color:var(--text); }
.search button { border:0; background:var(--accent); color:#fff; font-size:14px; padding:8px 18px; min-height:34px; border-radius:17px; font-weight:600; cursor:pointer; }
.connbar { font-size:12px; padding:6px 14px; display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.connbar .dot { width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.connbar.live { background:#e8f8ee; color:#1a9e4b; }
.connbar.warn { background:#fff4e5; color:#c8761a; }
.connbar.gray { background:#f0f0f2; color:#888; }
.scroll { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:64px; }
.banner { margin:10px 12px; height:96px; border-radius:12px; display:flex; align-items:center; padding:0 18px; color:#fff; font-size:18px; font-weight:700; background:linear-gradient(120deg,var(--accent),#ff8a3d); }
.grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px 0; background:#fff; margin:0 12px 10px; padding:14px 4px; border-radius:12px; }
.cell { display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; }
.cell .ic { width:44px; height:44px; border-radius:50%; background:#f6f6f8; display:flex; align-items:center; justify-content:center; font-size:22px; }
.cell .ic-avatar { color:#fff; font-weight:700; font-size:18px; }
.cell span { font-size:11px; color:#555; }
.sec { display:flex; align-items:center; justify-content:space-between; padding:4px 16px 8px; }
.sec h3 { margin:0; font-size:16px; }
.sec a { font-size:12px; color:var(--sub); text-decoration:none; }
.feed { padding:0 12px; display:flex; flex-direction:column; gap:10px; }
/* 骨架占位：请求期间撑出结构，避免整屏空白 */
.skl-card { background:#fff; border-radius:12px; padding:10px; display:flex; gap:10px; }
.skl-thumb { width:96px; height:96px; border-radius:10px; flex:0 0 auto; }
.skl-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; padding-top:2px; }
.skl-line { height:12px; border-radius:6px; }
.skl-line.w80 { width:80%; } .skl-line.w60 { width:60%; } .skl-line.w40 { width:40%; } .skl-line.w30 { width:30%; }
.skl-line.tall { height:18px; margin-top:auto; }
.skl-thumb, .skl-line { background:linear-gradient(90deg,#f0f0f2 25%,#e6e6ea 37%,#f0f0f2 63%); background-size:400% 100%; animation:skl 1.3s ease-in-out infinite; }
@keyframes skl { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }
.card { background:#fff; border-radius:12px; padding:10px; display:flex; gap:10px; cursor:pointer; align-items:stretch; }
.thumb { position:relative; overflow:hidden; width:96px; height:96px; border-radius:10px; flex:0 0 auto; background:#f2f2f4; display:flex; align-items:center; justify-content:center; font-size:40px; color:#fff; }
.thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.thumb .emoji { position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center; font-size:40px; color:#fff; background:linear-gradient(135deg,#ff9a6c,#ffd27a); }
.info { flex:1; min-width:0; display:flex; flex-direction:column; }
.title { font-size:14px; line-height:1.35; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tags { margin-top:4px; display:flex; gap:5px; flex-wrap:wrap; }
.pill { font-size:11px; padding:1px 6px; border-radius:4px; }
.pill.coupon { color:#e1251b; background:#ffece8; border:1px solid #ffd2c8; }
.pill.plat { color:#fff; }
.price { margin-top:auto; display:flex; align-items:baseline; gap:8px; }
.price .now { color:#e1251b; font-weight:700; font-size:18px; }
.price .now small { font-size:12px; font-weight:600; }
.price .old { color:var(--sub); font-size:12px; text-decoration:line-through; }
.meta { margin-top:4px; display:flex; align-items:center; justify-content:space-between; }
.meta .sold { font-size:11px; color:var(--sub); }
.copy { border:0; background:linear-gradient(90deg,#ff6a00,#ff3d00); color:#fff; font-size:12px; font-weight:600; padding:8px 14px; min-height:32px; border-radius:16px; cursor:pointer; }
.reshead { display:flex; align-items:center; gap:10px; padding:10px 14px; background:#fff; position:sticky; top:0; z-index:2; }
.reshead .back { font-size:20px; cursor:pointer; color:var(--text); }
.reshead .q { font-size:15px; font-weight:600; }
.reshead .q small { color:var(--sub); font-weight:400; margin-left:6px; }
.sheetmask { position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:5; display:none; }
.sheet { position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:18px 18px 0 0; z-index:6; transform:translateY(100%); transition:transform .25s; max-height:78%; display:flex; flex-direction:column; }
.sheet.show { transform:translateY(0); }
.sheet .grip { width:36px; height:4px; background:#ddd; border-radius:3px; margin:8px auto; }
.sheet .sbody { flex:1 1 auto; overflow-y:auto; padding:0 16px 16px; }
.sheet .simg { height:200px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:90px; color:#fff; }
.sheet .dimg { position:relative; height:240px; border-radius:14px; overflow:hidden; background:#f2f2f4; margin-bottom:4px; display:flex; align-items:center; justify-content:center; font-size:90px; color:#fff; }
.sheet .dimg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.sheet .dimg .emoji { position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center; font-size:90px; color:#fff; background:linear-gradient(135deg,#ff9a6c,#ffd27a); }
.sheet .sprice .now small { font-size:14px; font-weight:600; }
.sheet .couponbar { background:linear-gradient(90deg,#fff1ec,#ffe3d6); border:1px solid #ffd2c8; color:#e1251b; border-radius:10px; padding:10px 12px; font-size:13px; margin-top:8px; }
.sheet .couponbar b { font-size:15px; }
.sheet .sfoot { flex:0 0 auto; display:flex; gap:10px; padding:12px 16px; border-top:1px solid var(--line); background:#fff; }
.sheet .sfoot .close { flex:0 0 84px; border:0; background:#f0f0f2; color:#333; padding:13px; border-radius:24px; font-size:15px; font-weight:600; cursor:pointer; }
.sheet .sfoot .link { flex:1; border:0; background:linear-gradient(90deg,#ff6a00,#ff3d00); color:#fff; padding:13px; border-radius:24px; font-size:15px; font-weight:700; cursor:pointer; }
.sheet .stitle { font-size:17px; margin:12px 0 8px; line-height:1.4; }
.sheet .sprice { display:flex; align-items:baseline; gap:10px; }
.sheet .sprice .now { color:#e1251b; font-weight:700; font-size:24px; }
.sheet .sprice .old { color:var(--sub); text-decoration:line-through; }
.sheet .srow { display:flex; gap:10px; margin-top:12px; }
.sheet .srow .box { flex:1; background:#fafafa; border-radius:10px; padding:10px; text-align:center; }
.sheet .srow .box b { display:block; font-size:16px; }
.sheet .srow .box span { font-size:11px; color:var(--sub); }
.sheet .desc { margin-top:14px; font-size:13px; color:#666; line-height:1.7; }
.sheet .hint { margin-top:10px; font-size:12.5px; line-height:1.6; border-radius:10px; padding:10px 12px; }
.sheet .hint.ok { background:#eafaf0; color:#1a7f45; }
.sheet .hint.warn { background:#fff4e5; color:#a35c00; }
.sheet .acts { display:flex; gap:10px; margin-top:16px; }
.sheet .acts button { flex:1; border:0; padding:13px; border-radius:24px; font-size:15px; font-weight:700; cursor:pointer; }
.sheet .acts .link { background:linear-gradient(90deg,#ff6a00,#ff3d00); color:#fff; }
.sheet .acts .close { background:#f0f0f2; color:#333; }
.bottom { position:absolute; left:0; right:0; bottom:0; height:56px; background:#fff; border-top:1px solid var(--line); display:flex; z-index:3; }
.bottom .nav { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; color:var(--sub); cursor:pointer; }
.bottom .nav.on { color:var(--accent); font-weight:600; }
.bottom .nav .ni { font-size:20px; }
.toast { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,.8); color:#fff; padding:11px 18px; border-radius:10px; font-size:14px; z-index:20; opacity:0; transition:opacity .2s; pointer-events:none; max-width:80%; text-align:center; }
.toast.show { opacity:1; }
.feedfoot { padding:18px 0 12px; text-align:center; min-height:20px; }
.feedfoot .footmsg { font-size:13px; color:var(--sub); }
.woolbanner { margin:0 12px 10px; background:linear-gradient(90deg,#fff7e6,#ffe9d6); border:1px solid #ffd9b3; color:#a85a00; border-radius:12px; padding:12px 14px; font-size:14px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
.woolbanner .arr { font-size:18px; }
.empty { text-align:center; color:var(--sub); padding:40px 0; font-size:14px; }

/* 关键词没真正命中时的诚实提示（避免把推荐流伪装成搜索结果） */
.weaknotice { margin:0 12px 10px; background:#fff8e8; border:1px solid #ffe0a8; color:#8a5a00; border-radius:10px; padding:10px 12px; font-size:13px; line-height:1.5; }
/* 接口故障态：给一个明确可点的重试入口 */
.errbox { display:flex; flex-direction:column; align-items:center; gap:10px; padding:10px 0 4px; }
.errbox .errmsg { font-size:13px; color:var(--sub); }
.errstate { display:flex; flex-direction:column; align-items:center; gap:8px; padding:64px 20px; text-align:center; }
.errstate .erricon { font-size:40px; }
.errstate .errtitle { font-size:16px; font-weight:700; color:var(--text); }
.errstate .errmsg { font-size:13px; color:var(--sub); line-height:1.6; }
.retrybtn { border:1px solid var(--accent); background:#fff; color:var(--accent); font-size:14px; font-weight:600; padding:9px 22px; min-height:36px; border-radius:18px; cursor:pointer; margin-top:6px; }
.retrybtn:active { background:var(--accent); color:#fff; }

/* 全部分类页（底部导航「分类」） */
.catpage { padding:12px 12px 20px; }
.catsearch { background:#f1f1f3; border-radius:20px; padding:8px 8px 8px 14px; }
.catsearch input { width:100%; border:0; background:transparent; font-size:15px; outline:none; color:var(--text); }
.catcount { font-size:12px; color:var(--sub); padding:12px 2px 8px; }
.catall { display:flex; flex-wrap:wrap; gap:8px; }
.cchip { display:flex; align-items:center; gap:5px; background:#fff; border:1px solid #ececf0; border-radius:16px; padding:9px 13px; min-height:36px; font-size:13px; color:var(--text); cursor:pointer; }
.cchip:active { background:#fff3ec; border-color:var(--accent); }
.cchip .cic { font-size:15px; }
.catempty { text-align:center; color:var(--sub); padding:40px 0; font-size:14px; }

/* 幸运抽奖卡片（积分消耗场景） */
.drawcard { margin-top:10px; }
.drawcard .wt em { font-style:normal; font-size:11px; color:var(--sub); margin-left:6px; font-weight:400; }
.prizes { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 6px; }
.prizes .prize { font-size:11px; color:var(--sub); background:#f6f6f8; border-radius:8px; padding:3px 8px; }
.drawresult { min-height:20px; font-size:13px; text-align:center; margin:4px 0 6px; }
.drawresult .good { color:#e1251b; font-weight:700; }
.drawresult .bad { color:#d48806; }