body.qrm{background:#f7efed;padding-bottom:132px;max-width:640px;margin:0 auto;box-shadow:0 0 60px rgba(60,10,16,.12)}
html{scroll-padding-top:132px}
.qtop{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:linear-gradient(135deg,#6e1420,#430b12);color:#fff}
.qbrand{display:flex;align-items:center;gap:11px;min-width:0}
.qbrand .seal{flex:none;width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;padding:5px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.qbrand .seal img{width:100%}
.qbrand b{display:block;font-size:15px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qbrand small{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.85}
.qbrand .dot{width:8px;height:8px;border-radius:50%;background:#7be0b0;box-shadow:0 0 0 0 rgba(123,224,176,.7);animation:qp 1.8s infinite}
.qbrand .dot.off{background:#ffb27a;animation:none}
@keyframes qp{70%{box-shadow:0 0 0 8px rgba(123,224,176,0)}100%{box-shadow:0 0 0 0 rgba(123,224,176,0)}}
.qacct{flex:none;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:9px 14px;border-radius:99px;font-weight:700;font-size:13.5px;color:#fff;transition:.2s}
.qacct svg{width:18px;height:18px}
.qacct:active{transform:scale(.96)}
.qtabs{position:sticky;top:66px;z-index:55;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 12px;background:#f7efed;border-bottom:1px solid var(--line)}
.qtabs::-webkit-scrollbar{display:none}
.qtabs .chip{padding:9px 15px;border-radius:14px;font-size:14px;background:#fff}
.qtabs .chip.on{background:linear-gradient(135deg,#a3202f,#7a1623);border-color:transparent;color:#fff}

.qjoin{margin:14px 12px 0;display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;border-radius:20px;color:#fff;background:radial-gradient(120% 140% at 100% 120%,#d9532f 0%,rgba(217,83,47,0) 55%),linear-gradient(135deg,#8f1f2b,#4d0d16);box-shadow:0 14px 30px rgba(110,20,32,.28);position:relative;overflow:hidden}
.qjoin b{display:block;font-size:16px;line-height:1.2}
.qjoin small{display:block;margin-top:4px;font-size:12.5px;opacity:.85;line-height:1.35}
.qjoin>div{flex:1;min-width:0}
.qbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:12px 18px;font-weight:800;font-size:14.5px;background:#fff;color:#8f1f2b;white-space:nowrap;transition:.2s;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.qbtn:active{transform:scale(.96)}
.qbtn.big{width:100%;padding:16px 18px;font-size:16px;background:linear-gradient(135deg,#ff7a3c,#e0431f);color:#fff;box-shadow:0 12px 26px rgba(224,67,31,.35)}
.qbtn.ghost{background:#fff;border:1.5px solid #e3cdca;color:#6e1420;box-shadow:none;width:100%;margin-top:10px}
.qbtn.light{background:#fff;color:#8f1f2b}
.qbtn:disabled{opacity:.6}

.qsearch{display:flex;align-items:center;gap:10px;margin:12px 12px 0;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:0 14px;height:48px}
.qsearch svg{width:18px;height:18px;color:var(--mut);flex:none}
.qsearch input{flex:1;border:0;outline:0;background:none;height:100%;font-size:15px}
.qsearch:focus-within{border-color:var(--red);box-shadow:0 0 0 4px rgba(143,31,43,.1)}

.sec{padding:20px 0 0}
.qhero{position:relative;margin:0 12px;min-height:126px;border-radius:22px 22px 0 0;display:flex;align-items:flex-end;justify-content:space-between;padding:16px 18px;color:#fff;overflow:hidden;background:linear-gradient(135deg,#6e1420,#2b0910)}
.qhero:before{content:"";position:absolute;inset:0;background:var(--hero) center/cover no-repeat;opacity:.55}
.qhero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,9,16,.15),rgba(43,9,16,.82))}
.qhero>*{position:relative;z-index:2}
.qhero h3{font-family:var(--serif);font-size:28px;line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.qhero small{display:block;opacity:.85;margin-top:4px;font-size:13px}
.qh-ic svg{width:46px;height:46px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.qlist{margin:0 12px;background:#fff;border-radius:0 0 22px 22px;box-shadow:0 10px 26px rgba(110,20,32,.08);overflow:hidden}
.qlist .card{display:flex;gap:13px;align-items:stretch;width:100%;padding:14px;border:0;border-radius:0;border-bottom:1px solid #f2e7e4;background:#fff;box-shadow:none;transform:none;position:relative;text-align:left;transition:background .15s}
.qlist .card:last-child{border-bottom:0}
.qlist .card:hover{transform:none;box-shadow:none;border-color:#f2e7e4;background:#fff8f6}
.qlist .card:active{background:#fdeeea}
.qlist .card .pic{width:92px;height:92px;border-radius:16px;overflow:hidden;flex:none;background:linear-gradient(135deg,#fbe3dc,#fff);display:grid;place-items:center}
.qlist .card .pic img{width:100%;height:100%;object-fit:cover}
.qlist .card .pic svg{width:56px;height:56px}
.qlist .card:hover .pic svg{transform:none}
.qlist .card .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.qlist .card .r1{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.qlist .card h4{font-size:16px;font-weight:700;line-height:1.25}
.qlist .card .pr{margin:0;font-size:16px;font-weight:800;color:#8f1f2b;white-space:nowrap}
.qlist .card p{margin:0;font-size:13px;color:#8a7478;-webkit-line-clamp:2}
.qlist .card .meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}
.qlist .card .meta em{font-style:normal;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;background:#f4e7e3;color:#7a1623}
.qlist .card .meta em.al{background:#fff1d6;color:#8a5a06}
.qlist .card .add{right:12px;bottom:12px;width:32px;height:32px;font-size:20px}
.qlist .card:hover .add{transform:none}

.qapp{margin:16px 12px 0;position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:16px;border-radius:20px;color:#fff;background:radial-gradient(100% 120% at 0% 120%,#ff7a3c 0%,rgba(255,122,60,0) 60%),linear-gradient(135deg,#2b0910,#5c1019)}
.qa-t{flex:1;min-width:0;position:relative;z-index:2}
.qa-t b{display:block;font-size:17px}
.qa-t small{display:block;margin-top:4px;font-size:12.5px;opacity:.85;line-height:1.35}
.qapp .qbtn{position:relative;z-index:2}
.qa-fire{position:absolute;inset:0;pointer-events:none;opacity:.22}
.qa-fire .float{position:absolute;width:44px;animation:qf 5s ease-in-out infinite}
.qa-fire .float.a{right:80px;top:6px}.qa-fire .float.b{right:20px;bottom:4px;animation-delay:-1.5s}.qa-fire .float.c{left:12px;bottom:2px;animation-delay:-3s}.qa-fire .float.d{display:none}
@keyframes qf{50%{transform:translateY(-8px) rotate(6deg)}}

.qend{margin:26px 12px 0;text-align:center;color:#8a7478;font-size:13px;display:flex;flex-direction:column;gap:4px}
.qend b{color:#6e1420;font-size:14px}
.qend img{height:20px;vertical-align:middle;margin-left:6px;filter:invert(1) brightness(.4)}

.qbag{position:fixed;left:50%;transform:translateX(-50%);bottom:76px;z-index:70;padding:14px 22px;font-size:15px;box-shadow:0 14px 34px rgba(110,20,32,.45);min-width:200px;justify-content:center}
.qbag:hover{transform:translateX(-50%)}
.qbag.bump{animation:qbump .5s}
@keyframes qbump{40%{transform:translateX(-50%) scale(1.1)}}
.qnav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(640px,100%);z-index:65;display:grid;grid-template-columns:repeat(3,1fr);background:linear-gradient(180deg,#5c1019,#3a0a11);padding:8px 8px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(43,9,16,.35)}
.qnav button{display:flex;flex-direction:column;align-items:center;gap:3px;color:rgba(255,255,255,.7);font-size:12px;font-weight:700;padding:6px;border-radius:12px}
.qnav button svg{width:22px;height:22px}
.qnav button.on{color:#fff}
.qnav button.on svg{color:#ff9a5c}

.sheet.cart{right:0;top:0;bottom:0;width:min(440px,100vw)}
#acct{background:#fff}
#acct .qa-head{position:relative;padding:26px 22px 18px;color:#fff;background:radial-gradient(120% 120% at 100% 120%,#d9532f 0%,rgba(217,83,47,0) 55%),linear-gradient(150deg,#6e1420,#2b0910)}
#acct .qa-head h3{font-family:var(--serif);font-size:24px;line-height:1.15;margin-top:12px;padding-right:30px}
#acct .qa-head p{margin-top:8px;font-size:13.5px;opacity:.85;line-height:1.45}
#acct .x{position:absolute;right:14px;top:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:22px}
.qa-star{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#ff9a5c,#e0431f);display:grid;place-items:center;box-shadow:0 8px 20px rgba(224,67,31,.4)}
.qa-star svg{width:26px;height:26px;color:#fff}
.qa-head.me small{font-size:13px;opacity:.8;letter-spacing:.08em;text-transform:uppercase}
.qa-pts{font-size:15px;margin-top:6px;opacity:.95}
.qa-pts b{font-size:56px;font-family:var(--serif);line-height:1;color:#ffb27a;margin-right:6px}
.qa-head .gift{color:#ffd9a8;font-weight:700;opacity:1}
.qa-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#f4e7e3;padding:5px;border-radius:14px;margin-bottom:16px}
.qa-tabs button{padding:11px;border-radius:10px;font-weight:700;font-size:14.5px;color:#7a1623}
.qa-tabs button.on{background:#fff;box-shadow:0 4px 12px rgba(110,20,32,.12)}
.chk{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:#6b5458;margin:4px 0 12px}
.chk input{margin-top:3px;accent-color:#8f1f2b}
#am{min-height:20px;color:#b3202f;font-size:13.5px;margin-bottom:8px}
.qa-how{display:grid;gap:10px;margin-bottom:18px}
.qa-how div{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#fbf3f1}
.qa-how i{flex:none;width:28px;height:28px;border-radius:50%;background:#8f1f2b;color:#fff;font-style:normal;font-weight:800;display:grid;place-items:center;font-size:13px}
.qa-app{padding:16px;border-radius:18px;background:linear-gradient(135deg,#2b0910,#5c1019);color:#fff;margin-bottom:12px}
.qa-app b{display:block;font-size:16px}
.qa-app small{display:block;opacity:.8;margin:5px 0 12px;font-size:13px}
.qa-app .qbtn.big{margin:0}
.qbtn.out{margin-top:6px}
.qi{padding:14px 0;border-bottom:1px solid #f2e7e4}
.qi b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8a7478;margin-bottom:5px}
.qi span{display:block;font-size:15px}
.qi .qbtn{margin-top:8px}
.earned{margin-top:14px;padding:12px 14px;border-radius:14px;background:#e9f7f0;color:#176b48;font-weight:700;font-size:14px}
.earned.join{background:#fff1d6;color:#8a5a06;font-weight:500}

.qpop{position:fixed;inset:0;z-index:100;background:rgba(30,10,14,.6);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px;animation:qpf .3s}
.qpop[hidden]{display:none}
@keyframes qpf{from{opacity:0}to{opacity:1}}
.qpop-box{position:relative;width:min(380px,100%);border-radius:28px;padding:22px 22px 24px;text-align:center;color:#fff;overflow:hidden;background:radial-gradient(110% 80% at 50% 115%,#d9532f 0%,rgba(217,83,47,0) 60%),linear-gradient(165deg,#6e1420,#2b0910);box-shadow:0 30px 80px rgba(0,0,0,.5);animation:qpu .45s cubic-bezier(.2,.8,.2,1)}
@keyframes qpu{from{transform:translateY(30px) scale(.95);opacity:0}to{transform:none;opacity:1}}
.qpop-box .x{position:absolute;right:12px;top:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:22px;z-index:3}
.qpop-art{height:170px;margin:-6px auto 6px;display:grid;place-items:center}
.qpop-art svg{height:100%;width:auto;filter:drop-shadow(0 12px 22px rgba(0,0,0,.4))}
.qpop-box h2{font-family:var(--serif);font-size:24px;line-height:1.15}
.qpop-box p{margin:10px 0 18px;font-size:14px;opacity:.85;line-height:1.45}
.qpop-box .qbtn.ghost{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.3);color:#fff}

@media (min-width:700px){body.qrm{margin:0 auto}}

.qbrand>span:last-child{min-width:0}
.qbrand b{font-size:13.5px;letter-spacing:.04em}
.qbag{display:none}
.qbag.has{display:flex}