:root{
  --red:#e8463c; --red-d:#d3382e; --red-l:#fff0ee;
  --ink:#222733; --ink2:#5b6272; --ink3:#9aa1af;
  --line:#e9ebf2; --bg:#f7f8fc; --card:#ffffff;
  --shadow:0 6px 22px rgba(30,40,70,.07);
  --radius:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:#eef0f6;color:var(--ink);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;padding:0}
input,textarea{outline:none}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.sm{width:17px;height:17px}
.ic.fill{fill:currentColor;stroke:none}
#app{
  position:relative;display:flex;flex-direction:column;width:100%;max-width:480px;height:100dvh;
  margin:0 auto;background:var(--bg);overflow:hidden;
}
@media(min-width:721px){
  body{background:radial-gradient(circle at 20% 10%,#e6ecff 0%,#eef0f6 45%,#e8eaf2 100%)}
  #app{height:min(900px,94dvh);margin:3dvh auto;border-radius:26px;box-shadow:0 24px 70px rgba(30,45,90,.18)}
}
.view{display:none;flex:1;min-height:0;flex-direction:column;overflow:hidden}
.view.on{display:flex}
.scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:26px}
.scroll::-webkit-scrollbar{width:0}

/* ---------- 通用头部 ---------- */
.head{flex:none;padding:14px 18px 10px;background:rgba(247,248,252,.94);backdrop-filter:blur(10px);z-index:5}
.brand{display:flex;align-items:center;gap:9px}
.brand-logo{width:32px;height:32px;border-radius:10px;background:linear-gradient(140deg,#ff6a58,#e8463c);display:grid;place-items:center;color:#fff;box-shadow:0 5px 12px rgba(232,70,60,.28)}
.brand-logo .ic{width:19px;height:19px;stroke-width:2.1}
.brand-t{font-size:19px;font-weight:800;letter-spacing:.5px}
.brand-s{font-size:11px;color:var(--ink3);margin-left:2px;font-weight:500}
.head-plus{margin-left:auto;width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 5px 12px rgba(232,70,60,.28)}
.head-plus .ic{width:21px;height:21px;stroke-width:2.4}
.search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:9px 12px;margin-top:13px;box-shadow:0 2px 10px rgba(30,40,70,.035)}
.search .ic{color:var(--ink3);width:18px;height:18px}
.search input{border:0;flex:1;min-width:0;background:transparent;font-size:14px}
.search input::placeholder{color:#aab0bd}
.search-x{color:var(--ink3);display:none}
.search-x.on{display:block}
.cats{display:flex;gap:20px;overflow-x:auto;padding:12px 18px 8px;flex:none;scrollbar-width:none;background:var(--bg)}
.cats::-webkit-scrollbar{display:none}
.cat{position:relative;white-space:nowrap;color:var(--ink3);font-size:15px;padding:3px 0 9px;font-weight:600}
.cat.on{color:var(--ink);font-weight:800;font-size:16px}
.cat.on:after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:2px;width:20px;height:3px;border-radius:3px;background:var(--red)}

/* ---------- 首页 ---------- */
.hero{margin:6px 18px 14px;border-radius:20px;padding:18px 18px 17px;color:#fff;background:linear-gradient(120deg,#f0554a 0%,#e8463c 55%,#d5366f 100%);box-shadow:0 10px 24px rgba(226,62,58,.22);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-30px;top:-45px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.09)}
.hero:before{content:"";position:absolute;right:35px;bottom:-65px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.07)}
.hero h2{margin:0;font-size:20px;font-weight:800;letter-spacing:1px}
.hero p{margin:4px 0 14px;font-size:12.5px;opacity:.88}
.hero-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--red);font-weight:800;font-size:13px;padding:8px 15px;border-radius:999px}
.hero-btn .ic{width:15px;height:15px;stroke-width:2.4}
.sec-t{display:flex;align-items:baseline;justify-content:space-between;margin:18px 18px 11px}
.sec-t b{font-size:16.5px;font-weight:800}
.sec-t span{font-size:12px;color:var(--ink3)}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 18px}
.mcard{background:var(--card);border-radius:var(--radius);padding:11px;box-shadow:var(--shadow);border:1px solid rgba(233,235,242,.8);position:relative;transition:transform .15s}
.mcard:active{transform:scale(.98)}
.mcover{height:96px;border-radius:13px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;color:#fff}
.mcover i{font-style:normal;font-size:35px;font-weight:800;letter-spacing:3px;text-shadow:0 3px 10px rgba(0,0,0,.12);opacity:.95}
.mcover:after{content:"";position:absolute;right:-18px;bottom:-32px;width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.14)}
.mcover em{position:absolute;left:9px;top:8px;font-style:normal;font-size:10px;background:rgba(255,255,255,.22);padding:2px 7px;border-radius:99px;letter-spacing:.5px}
.mtitle{font-weight:800;font-size:14px;margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mauthor{font-size:11.5px;color:var(--ink3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mmeta{display:flex;align-items:center;justify-content:space-between;margin-top:9px}
.mmeta span{font-size:11px;color:var(--ink3)}
.mgo{font-size:11.5px;color:var(--red);font-weight:800;display:flex;align-items:center;gap:2px}
.mgo .ic{width:13px;height:13px;stroke-width:2.6}
.empty{text-align:center;padding:52px 20px;color:var(--ink3)}
.empty .ic{width:40px;height:40px;stroke-width:1.4;color:#c9cedb;margin-bottom:8px}
.empty p{margin:4px 0;font-size:13px}

/* ---------- 底部导航 ---------- */
.tabbar{flex:none;height:66px;display:flex;align-items:center;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);position:relative;z-index:9}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#a2a8b6;font-size:10.5px;height:100%}
.tab.on{color:var(--red);font-weight:700}
.tab .ic{width:23px;height:23px}
.tab.mid{position:relative;flex:0 0 92px;color:var(--ink2)}
.mic-btn{position:absolute;top:-24px;width:58px;height:58px;border-radius:50%;background:linear-gradient(145deg,#ff6253,#e8463c);color:#fff;display:grid;place-items:center;box-shadow:0 8px 18px rgba(232,70,60,.4);border:4px solid #fff}
.mic-btn .ic{width:26px;height:26px;stroke-width:2.1}
.tab.mid span{position:absolute;bottom:8px;font-size:10.5px}

/* ---------- 录制页 ---------- */
.rhead{flex:none;display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border-bottom:1px solid var(--line)}
.rhead .back{width:34px;height:34px;display:grid;place-items:center;color:var(--ink)}
.rhead .rt{flex:1;min-width:0;text-align:center;font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rhead .rsub{text-align:center;font-size:11px;color:var(--ink3);font-weight:500;margin-top:-2px}
.rhead .setting{width:34px;height:34px;display:grid;place-items:center;color:var(--ink2)}
.notice{margin:10px 16px 0;background:#fff7ed;border:1px solid #ffe4bd;color:#9a6212;border-radius:12px;padding:9px 12px;font-size:12px;display:flex;gap:8px;align-items:center}
.notice .ic{width:16px;height:16px}
.notice b{color:#c47a08;cursor:pointer;text-decoration:underline}
.tele-wrap{flex:1;min-height:150px;display:flex;flex-direction:column;margin:12px 16px 0;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;border:1px solid rgba(233,235,242,.8)}
#rec-scroll{display:flex;flex-direction:column}
#rec-scroll .tele-wrap{flex:1 1 auto;min-height:190px}
#rec-scroll.done .tele-wrap{flex:0 0 170px;min-height:0}
#rec-scroll.done #finish-slot{flex:none}
#rec-scroll.done .bgm-box,#rec-scroll.done .ctrl,#rec-scroll.done .clabel{display:none}
.tele-h{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--ink3)}
.tele-h b{color:var(--ink2);font-weight:700;font-size:12px;letter-spacing:.5px}
.tele{flex:1;min-height:0;overflow-y:auto;padding:18px 16px 40px;scroll-behavior:smooth;scrollbar-width:none}
.tele::-webkit-scrollbar{display:none}
.sent{display:block;padding:7px 10px;margin:2px 0;border-radius:9px;color:#a9afbd;transition:all .25s;cursor:pointer;border-left:3px solid transparent;line-height:1.9}
.sent.done{color:#c7cbd6}
.sent.cur{color:var(--ink);font-weight:700;background:var(--red-l);border-left-color:var(--red)}
.sent.f1{font-size:16px}.sent.f2{font-size:19px}.sent.f3{font-size:23px}.sent.f4{font-size:27px}
.tele-tools{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:1px solid var(--line);flex:none}
.tbtn{display:flex;align-items:center;gap:3px;color:var(--ink2);font-size:12px;padding:5px 8px;border-radius:8px}
.tbtn.on{color:var(--red);background:var(--red-l);font-weight:700}
.tbtn .ic{width:15px;height:15px}
.wave-box{flex:none;margin:12px 16px 0;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 14px 12px;border:1px solid rgba(233,235,242,.8)}
.wave-top{display:flex;align-items:center;justify-content:space-between}
.wave-top .lb{font-size:11.5px;color:var(--ink3);display:flex;align-items:center;gap:5px}
.dot{width:7px;height:7px;border-radius:50%;background:#c9ced9}
.dot.live{background:var(--red);box-shadow:0 0 0 4px rgba(232,70,60,.14);animation:pulse 1.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(232,70,60,0)}}
.timer{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:1px}
canvas#wave{display:block;width:100%;height:54px;margin-top:2px}
.bgm-box{flex:none;margin:12px 16px 0}
.bgm-t{font-size:11.5px;color:var(--ink3);display:flex;align-items:center;gap:5px;margin-bottom:7px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;font-size:12.5px;color:var(--ink2)}
.chip.on{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.vol{display:flex;align-items:center;gap:9px;margin-top:10px;color:var(--ink3);font-size:11px}
.vol input[type=range]{flex:1;accent-color:var(--red);height:4px}
.ctrl{flex:none;display:flex;align-items:center;justify-content:center;gap:22px;padding:16px 16px 20px}
.cbtn{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--ink2);box-shadow:var(--shadow)}
.cbtn .ic{width:23px;height:23px}
.cbtn.main{width:76px;height:76px;background:linear-gradient(145deg,#ff6253,#e8463c);color:#fff;border:0;box-shadow:0 10px 24px rgba(232,70,60,.36)}
.cbtn.main .ic{width:31px;height:31px}
.cbtn.main.recording{background:#fff;color:var(--red);border:2px solid var(--red)}
.cbtn[disabled]{opacity:.35;pointer-events:none}
.clabel{font-size:11px;color:var(--ink3);text-align:center;margin-top:-14px;padding-bottom:12px}

/* ---------- 完成面板 ---------- */
.finish{flex:none;margin:12px 16px 0;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;border:1px solid rgba(233,235,242,.8)}
.finish h3{margin:0 0 3px;font-size:16px;font-weight:800}
.finish p{margin:0 0 12px;font-size:12px;color:var(--ink3)}
.player{display:flex;align-items:center;gap:11px;background:var(--bg);border-radius:13px;padding:10px 12px}
.pbtn{width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;flex:none}
.pbtn .ic{width:17px;height:17px}
.pbar{flex:1;height:5px;border-radius:5px;background:#dfe3ec;overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:var(--red);border-radius:5px;transition:width .2s}
.ptime{font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums;min-width:36px;text-align:right}
.fbtns{display:flex;gap:10px;margin-top:13px}
.fbtn{flex:1;border-radius:12px;padding:11px 0;font-size:13.5px;font-weight:700;text-align:center;border:1px solid var(--line);background:#fff;color:var(--ink2)}
.fbtn.primary{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- 我的 ---------- */
.mhead{flex:none;padding:18px 18px 6px}
.mhead h1{margin:0;font-size:22px;font-weight:800}
.mhead p{margin:2px 0 0;font-size:12px;color:var(--ink3)}
.stats{display:flex;gap:10px;margin:14px 18px 4px}
.stat{flex:1;background:#fff;border-radius:16px;padding:13px 8px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;font-size:21px;font-weight:800;color:var(--red)}
.stat span{font-size:11px;color:var(--ink3)}
.mtabs{display:flex;gap:8px;padding:16px 18px 10px}
.mtab{border-radius:999px;padding:7px 16px;font-size:13px;background:#fff;border:1px solid var(--line);color:var(--ink2);font-weight:600}
.mtab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.witem{background:#fff;border-radius:var(--radius);margin:0 18px 12px;padding:13px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:flex-start}
.wcover{width:46px;height:46px;border-radius:12px;flex:none;display:grid;place-items:center;color:#fff;font-size:19px;font-weight:800;background:linear-gradient(140deg,#ff7a63,#e8463c)}
.wmain{flex:1;min-width:0}
.wtitle{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsub{font-size:11.5px;color:var(--ink3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wplayer{display:flex;align-items:center;gap:9px;margin-top:10px}
.wplayer .pbtn{width:30px;height:30px}
.wplayer .pbtn .ic{width:14px;height:14px}
.wacts{display:flex;gap:14px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.wact{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--ink2)}
.wact .ic{width:14px;height:14px}
.wact.danger{color:#d9534f}
.tip{margin:16px 18px 0;font-size:11.5px;color:var(--ink3);line-height:1.7;background:#fff;border-radius:12px;padding:11px 13px;border:1px solid var(--line)}

/* ---------- 弹层 ---------- */
.mask{position:absolute;inset:0;background:rgba(20,26,40,.42);z-index:20;display:none;opacity:0;transition:opacity .2s}
.mask.on{display:block;opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:22px 22px 0 0;padding:8px 0 calc(18px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .26s cubic-bezier(.2,.8,.3,1);z-index:21}
.sheet.on{transform:translateY(0)}
.bar{width:38px;height:4px;border-radius:4px;background:#dfe3ec;margin:6px auto 14px}
.sheet h3{margin:0 18px 12px;font-size:16px;font-weight:800}
.sitem{display:flex;align-items:center;gap:13px;padding:14px 20px;border-top:1px solid #f2f3f7}
.sitem:active{background:#f8f9fc}
.sico{width:38px;height:38px;border-radius:12px;background:var(--red-l);color:var(--red);display:grid;place-items:center;flex:none}
.sitem b{display:block;font-size:14px;font-weight:700}
.sitem span{display:block;font-size:11.5px;color:var(--ink3)}
.sclose{margin:10px 18px 0;width:calc(100% - 36px);border-radius:12px;background:var(--bg);padding:12px;font-weight:700;color:var(--ink2)}
.dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.96);width:calc(100% - 56px);max-width:360px;background:#fff;border-radius:20px;padding:20px;z-index:22;display:none;opacity:0;transition:all .2s}
.dialog.on{display:block;opacity:1;transform:translate(-50%,-50%) scale(1)}
.dialog h3{margin:0 0 6px;font-size:17px;font-weight:800}
.dialog p{margin:0 0 14px;font-size:13px;color:var(--ink2);line-height:1.7}
.field{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:11px 12px;font-size:14px;margin-bottom:10px}
textarea.field{height:170px;resize:none;line-height:1.7}
.dbtns{display:flex;gap:10px;margin-top:4px}
.dbtns button{flex:1;border-radius:12px;padding:11px;font-weight:700;font-size:14px}
.dcancel{background:var(--bg);color:var(--ink2)}
.dok{background:var(--red);color:#fff}
.opt-row{display:flex;gap:8px;margin-bottom:14px}
.opt{flex:1;text-align:center;border:1px solid var(--line);border-radius:11px;padding:8px 0;font-size:13px;color:var(--ink2)}
.opt.on{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.opt-label{font-size:12px;color:var(--ink3);margin:2px 0 7px}
#toast{position:absolute;left:50%;bottom:96px;transform:translate(-50%,10px);background:rgba(30,36,50,.92);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;z-index:40;opacity:0;pointer-events:none;transition:all .25s;max-width:86%;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
.hidden{display:none !important}

/* ============ 双端适配与新增组件样式（追加在原有移动端样式之后） ============ */
.sidebar{display:none}
.appmain{flex:1;min-height:0;display:flex;flex-direction:column}
.side-brand{display:flex;align-items:center;gap:10px;padding:0 10px 22px}
.side-brand .brand-logo{width:38px;height:38px;border-radius:12px}
.side-brand b{font-size:18px;font-weight:800;display:block;line-height:1.2}
.side-brand em{font-style:normal;font-size:11px;color:var(--ink3)}
.side-nav{display:flex;flex-direction:column;gap:4px}
.side-item{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;color:var(--ink2);font-size:14px;font-weight:600;text-align:left}
.side-item.on{background:var(--red-l);color:var(--red);font-weight:800}
.side-item .ic{width:19px;height:19px}
.side-foot{margin-top:auto;padding:12px 10px;font-size:11px;color:var(--ink3);line-height:1.7;border-top:1px solid var(--line)}
.side-user{display:flex;align-items:center;gap:9px;margin:0 8px 12px;padding:10px;border-radius:12px;background:var(--bg)}
.side-user .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,#ff7a63,#e8463c);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.side-user div{min-width:0}
.side-user b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user span{font-size:11px;color:var(--ink3)}

/* 防止长标题把手机端两列网格撑出屏幕 */
.mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.mcard{min-width:0}
.mcard>*{min-width:0}

/* 素材分页 / 加载态 */
.loadmore{display:block;margin:18px auto 4px;padding:11px 26px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink2);font-size:13px;font-weight:700;box-shadow:var(--shadow)}
.loadmore[disabled]{opacity:.5}
.loading{display:flex;align-items:center;justify-content:center;gap:9px;padding:44px 20px;color:var(--ink3);font-size:13px}
.spin{width:16px;height:16px;border:2px solid #dfe3ec;border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.total-pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:11.5px;color:var(--ink2);font-weight:600}
.total-pill b{color:var(--red);font-size:13px}

/* 账号卡 */
.acct{background:linear-gradient(125deg,#ff6a58,#e8463c 60%,#d5366f);border-radius:20px;margin:16px 18px 4px;padding:17px;color:#fff;box-shadow:0 10px 24px rgba(226,62,58,.2)}
.acct-top{display:flex;align-items:center;gap:12px}
.acct-av{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:21px;font-weight:800;flex:none}
.acct-name{font-size:17px;font-weight:800}
.acct-meta{font-size:11.5px;opacity:.86;margin-top:2px}
.badge{display:inline-block;background:rgba(255,255,255,.24);border-radius:99px;padding:1px 8px;font-size:10.5px;margin-left:6px;vertical-align:2px}
.acct-btns{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.acct-btn{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:10px;padding:7px 12px;font-size:12px;font-weight:700}
.acct-btn.solid{background:#fff;color:var(--red);border-color:#fff}
.acct-guest{text-align:center;padding:6px 0 2px}
.acct-guest h3{margin:0 0 3px;font-size:16px;font-weight:800}
.acct-guest p{margin:0 0 12px;font-size:12px;opacity:.88}

/* 登录 / 注册表单 */
.auth-tabs{display:flex;gap:6px;background:var(--bg);border-radius:11px;padding:4px;margin-bottom:14px}
.auth-tab{flex:1;text-align:center;padding:7px;border-radius:8px;font-size:13px;color:var(--ink2);font-weight:700}
.auth-tab.on{background:#fff;color:var(--red);box-shadow:0 2px 8px rgba(30,40,70,.07)}
.auth-hint{font-size:11.5px;color:var(--ink3);line-height:1.6;margin:-2px 0 10px}
.auth-err{font-size:12px;color:#d3382e;min-height:17px;margin:-4px 0 4px}

/* 后台入口提示 */
.admin-entry{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;margin:12px 18px 0;padding:12px 14px;box-shadow:var(--shadow)}
.admin-entry .ic{color:var(--red)}
.admin-entry b{font-size:13px}
.admin-entry span{display:block;font-size:11px;color:var(--ink3)}

/* ---------- PC / 宽屏 ---------- */
@media(min-width:900px){
  body{background:#eef1f7}
  #app{max-width:none;width:100%;height:100dvh;margin:0;border-radius:0;box-shadow:none;flex-direction:row}
  .sidebar{display:flex;flex-direction:column;width:226px;flex:none;background:#fff;border-right:1px solid var(--line);padding:22px 12px 14px}
  .appmain{flex:1;min-width:0}
  .tabbar{display:none}
  .head{padding:20px 30px 6px;background:transparent}
  .search{max-width:560px;margin-top:12px}
  .cats{padding:8px 30px 10px;gap:26px}
  .hero{margin:6px 30px 18px;max-width:none;display:flex;align-items:center;justify-content:space-between;padding:20px 26px}
  .hero p{margin-bottom:0}
  .hero-btn{margin-left:20px;flex:none;padding:10px 20px}
  .sec-t{margin:20px 30px 12px}
  .mgrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;padding:0 30px}
  .mcover{height:112px}
  .mcover i{font-size:38px}
  .scroll{padding-bottom:34px}
  .rhead{padding:15px 30px}
  #rec-scroll{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.85fr);gap:18px;padding:18px 30px 30px;align-content:start}
  #rec-scroll .tele-wrap{margin:0;min-height:calc(100dvh - 170px)}
  #rec-side{display:flex;flex-direction:column;gap:14px}
  .wave-box,.bgm-box{margin:0}
  .ctrl{padding:2px 0 0}
  .clabel{margin-top:-6px}
  #rec-scroll.done .tele-wrap{min-height:calc(100dvh - 170px)}
  .witem{margin:0}
  #mine-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 30px}
  .stats{margin:14px 30px 4px}
  .mtabs{padding:16px 30px 12px}
  .mhead{padding:20px 30px 4px}
  .acct{margin:16px 30px 4px}
  .admin-entry{margin:12px 30px 0}
  .tip{margin:16px 30px 0}
  .sheet{left:50%;right:auto;bottom:auto;top:50%;width:440px;border-radius:20px;padding:8px 0 18px;display:none;transform:translate(-50%,-50%)}
  .sheet.on{display:block;transform:translate(-50%,-50%)}
  .dialog{width:420px}
  #toast{bottom:38px}
  .head-plus{width:38px;height:38px}
}
@media(min-width:1400px){
  .mgrid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
  #mine-list{grid-template-columns:repeat(3,1fr)}
}

/* 忘记密码 / 手机号找回入口 */
.auth-forgot{text-align:right;margin:-4px 0 8px}
.auth-forgot button{font-size:12px;color:var(--red);font-weight:700;padding:2px 0}
.auth-forgot button:hover{opacity:.8}