*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#0A0A0C;--card:#14151A;--card2:#191A20;--line:#23252C;
  --txt:#F3F4F6;--dim:#8A8F99;--dim2:#5F646E;
  --blue:#4C8DFF;--heart:#FF4D6A;
}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);
  font-family:-apple-system,"PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;
  max-width:720px;margin:0 auto;padding:0 0 48px;font-size:15px;line-height:1.5;
  background-image:radial-gradient(600px 260px at 50% -80px,rgba(76,141,255,.13),transparent 70%);
  background-repeat:no-repeat}

/* 顶部 */
header{padding:28px 18px 4px}
.brand{font-size:27px;font-weight:800;letter-spacing:.5px}
.brand span{color:var(--heart)}
.sub{margin-top:7px;color:var(--dim);font-size:13px}
.stats{margin-top:12px;color:var(--dim2);font-size:12px;letter-spacing:.2px}
.stats b{color:#C9CED8;font-weight:600}

/* 主 CTA：随机打分 */
.cta{padding:14px 18px 2px}
.cta button{width:100%;background:linear-gradient(135deg,#2F6BFF,#4C8DFF);border:none;color:#fff;
  font-size:15px;font-weight:700;padding:14px;border-radius:14px;letter-spacing:.4px;
  box-shadow:0 8px 24px -12px rgba(76,141,255,.9)}
.cta button:active{transform:scale(.988)}

.search{padding:12px 18px 2px}
.search input{width:100%;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;color:var(--txt);font-size:15px;outline:none}
.search input:focus{border-color:var(--blue)}

.chips{display:flex;gap:8px;padding:9px 18px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;background:var(--card);border:1px solid var(--line);color:var(--dim);
  padding:7px 15px;border-radius:20px;font-size:13px;white-space:nowrap}
.chips button.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.chips.small button{padding:5px 12px;font-size:12px;border-radius:8px}
.chips.small button.on{background:rgba(76,141,255,.16);border-color:rgba(76,141,255,.42);color:#C9DDFF;font-weight:600}

/* 卡片 */
main{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:10px 18px}
@media(min-width:560px){main{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border-radius:13px;overflow:hidden;border:1px solid var(--line);
  position:relative;transition:transform .15s,border-color .15s}
.card:active{transform:scale(.977);border-color:#343844}
.card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:#1C1E24}
.card .n{font-size:12.5px;line-height:1.42;padding:8px 8px 5px;height:36px;overflow:hidden;color:#E3E5EA;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .hrow{display:flex;align-items:center;gap:5px;padding:2px 8px 10px;height:26px;overflow:hidden}
.card .cnt{font-size:10.5px;color:#767C87}
.badge{position:absolute;top:7px;right:7px;background:rgba(8,8,10,.66);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);border-radius:7px;padding:2px 7px;font-size:10.5px;
  font-weight:500;color:#9AA1AC}
.badge b{color:#D9DEE7;font-weight:600}

/* 心 */
.hearts{display:inline-flex;align-items:center;gap:2px;line-height:0}
.hearts svg{width:14px;height:14px;display:block}
.hearts .bg{fill:none;stroke:#3B404B;stroke-width:1.7}
.hearts.muted .bg{fill:none;stroke:#343943}
.hearts.muted svg{width:12px;height:12px}
.hearts .fg{fill:var(--heart)}
.hearts.lg svg{width:36px;height:36px}
.hearts.md svg{width:20px;height:20px}

.more{text-align:center;color:var(--dim2);font-size:13px;padding:18px}
footer{padding:28px 18px 0;color:#4E535D;font-size:11.5px;line-height:1.75}

/* 详情 */
.sheet{position:fixed;inset:0;display:none;z-index:50}
.sheet.open{display:block}
.mask{position:absolute;inset:0;background:rgba(0,0,0,.75)}
.panel{position:absolute;left:0;right:0;bottom:0;background:#111216;border-radius:22px 22px 0 0;
  padding:22px 18px 28px;max-height:92vh;overflow:auto;animation:up .22s ease;
  border-top:1px solid #23252C}
@keyframes up{from{transform:translateY(28px);opacity:.5}to{transform:none;opacity:1}}
.head{display:flex;gap:14px;align-items:flex-start}
.head img{width:96px;aspect-ratio:3/4;object-fit:cover;border-radius:11px;background:#1C1E24;flex:0 0 auto}
.headtxt{min-width:0}
.head h2{font-size:19px;line-height:1.32;margin-bottom:7px;letter-spacing:.2px}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.tags i{font-style:normal;background:#1D1F26;color:#A8ADB7;font-size:11px;padding:2px 7px;border-radius:5px}
.bigscore{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bigscore .num{font-size:15px;color:#E7E9EE;font-weight:700}
.bigscore .num small{font-size:12px;color:var(--dim);font-weight:400}
.bigscore .none{color:var(--dim);font-size:12.5px}

/* 打分条 */
.rate{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.rate-t{font-size:13.5px;color:#E0E3E9;margin-bottom:12px;font-weight:700;letter-spacing:.2px}
.rate-t span{color:var(--dim2);font-weight:400;font-size:11.5px;margin-left:8px}
.ratebar{display:flex;gap:8px}
.ratebar button{background:#191C23;border:1px solid #262A33;padding:6px;border-radius:13px;line-height:0}
.ratebar button:active{background:#22262F;border-color:#3A4150}
.ratebar button svg{width:46px;height:46px;display:block}
.ratebar .bg{fill:none;stroke:#6E4652;stroke-width:1.5}
.ratebar .fg{fill:var(--heart);transition:clip-path .08s}
.rate-done{margin-top:10px;font-size:12.5px;color:#5FD08A;min-height:18px}
.rate-done.tip{color:#6E7480}

/* 点评 */
.cmt{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.sec-t{font-size:13.5px;color:#E0E3E9;font-weight:700;margin-bottom:10px;letter-spacing:.2px;display:flex;align-items:center;gap:6px}
.sec-t span{color:var(--dim2);font-weight:400;font-size:11.5px;margin-left:6px}
.cmt-list{margin-bottom:12px}
.c-item{padding:11px 0;border-bottom:1px solid #1B1D23}
.c-h{font-size:12px;color:#8F959F;margin-bottom:5px}
.c-h span{color:#565B65;margin-left:7px}
.c-t{font-size:14px;line-height:1.68;color:#DCDFE5;word-break:break-word}
.c-empty{color:#5A5F69;font-size:12.5px;padding:6px 0 10px}
.cmt-form{display:flex;flex-direction:column;gap:8px}
.cmt-form textarea{width:100%;background:#191B21;border:1px solid #282B34;border-radius:11px;
  padding:11px 13px;color:var(--txt);font-size:14px;font-family:inherit;outline:none;resize:vertical}
.cmt-form textarea:focus{border-color:var(--blue)}
.cmt-row{display:flex;gap:8px}
.cmt-row input{flex:1;background:#191B21;border:1px solid #282B34;border-radius:11px;
  padding:11px 13px;color:var(--txt);font-size:13.5px;outline:none;font-family:inherit}
.cmt-row input:focus{border-color:var(--blue)}
.cmt-row button{background:var(--blue);border:none;border-radius:11px;padding:0 22px;color:#fff;
  font-size:14px;font-weight:600;min-width:86px}
.cmt-row button:disabled{background:#24405F;color:#8FA6C4}
.cmt-row button:disabled{opacity:.55}

/* 详情下方次要信息 */
.moreinfo{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.moreinfo p{color:#B4B9C2;font-size:13.5px;line-height:1.8;margin-bottom:10px}
.statline{color:#8A8F98;font-size:12.5px;margin-bottom:6px}
.wordline{color:#A9AEB8;font-size:12.5px;line-height:1.65;margin-bottom:8px}
.plats{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.pt-row{display:flex;align-items:center;gap:8px;text-decoration:none;background:#191B21;
  border:1px solid #282B34;border-radius:10px;padding:7px 12px}
.pt-row i{font-style:normal;font-size:12px;color:var(--dim)}
.pt-row span{font-size:13px;color:var(--txt);font-weight:600}
.srcline{margin-top:8px;color:#6A7078;font-size:11.5px}

.watch{display:inline-flex;align-items:center;justify-content:center;margin-top:18px;
  padding:11px 18px;border-radius:11px;background:transparent;border:1px solid #2E323B;
  color:#9BA1AC;font-size:13.5px;text-decoration:none}
.watch:active{background:#191B21}

.close{display:block;width:100%;margin-top:16px;background:none;border:none;color:var(--dim2);
  font-size:13px;padding:12px}

.empty{grid-column:1/-1;text-align:center;color:#6E7480;font-size:14px;line-height:2;padding:60px 20px}
.empty span{font-size:12px;color:#4E545E}

/* 简介（头部两行折叠） */
.intro{color:#9BA1AC;font-size:12.5px;line-height:1.65;margin-top:8px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cta-mini{margin-left:auto;font-style:normal;font-weight:500;font-size:12px;color:var(--blue)}
.lbl{font-style:normal;font-size:11.5px;color:var(--dim2);margin-right:2px}

.stats small{display:block;margin-top:5px;color:#4E535D;font-size:11px}