:root{
  --text:#111;--muted:#666;--border:#eaeaea;--bg:#fff;--card:#fff;
  --radius:16px;--shadow:0 8px 30px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  color:var(--text);background:var(--bg);
}
a{color:inherit;text-decoration:none}
.container{max-width:430px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.header{padding:16px 16px 10px}
.brand{font-size:18px;font-weight:650;letter-spacing:.2px}
.sub{font-size:12px;color:var(--muted);margin-top:4px}
.main{flex:1;padding:0 16px 110px}
.card{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.card.p{padding:14px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.img{width:100%;aspect-ratio:1/1;border-radius:14px;background:#f3f4f6;border:1px solid var(--border)}
.h2{font-size:14px;font-weight:650;margin:0}
.p{font-size:12px;color:var(--muted);margin:8px 0 0}
.price{margin-top:6px;font-size:13px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;padding:10px 12px;border:1px solid var(--border);
  background:#111;color:#fff;font-size:13px;font-weight:600;cursor:pointer;
}
.btn.secondary{background:#fff;color:#111}
.btn.danger{background:#fff;color:#b00020;border-color:#f1c3c8}
.input{width:100%;padding:12px;border:1px solid var(--border);border-radius:14px;font-size:14px}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between}
.small{font-size:12px;color:var(--muted)}
.nav{position:fixed;left:0;right:0;bottom:0;max-width:430px;margin:0 auto;background:#fff;border-top:1px solid var(--border)}
.nav .tabs{display:grid;grid-template-columns:repeat(4,1fr)}
.nav a{padding:12px 0;text-align:center;font-size:12px;color:#333}
.hr{height:1px;background:var(--border);margin:12px 0}
.notice{font-size:12px;color:var(--muted)}
.tag{display:inline-flex;font-size:11px;padding:3px 8px;border:1px solid var(--border);border-radius:999px;color:#333;background:#fff}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;font-size:12px;padding:8px 10px;border:1px solid var(--border);border-radius:999px}
.pill.active{background:#111;color:#fff}
.timeline{margin-top:8px}
.ti{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.dot{width:8px;height:8px;border-radius:999px;background:#111;margin-top:4px}
.tit{font-size:12px;font-weight:650}
.tmd{font-size:11px;color:var(--muted);margin-top:2px}