:root { --primary:#FF5722; --bg:#F5F5F5; --text:#333; --muted:#999; --card:#FFF; --nav:46px; --tab:calc(64px + env(safe-area-inset-bottom)); }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; width:100%; overflow:hidden; }
body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--text);
  position:fixed; inset:0;
  padding-bottom:var(--tab);
  touch-action: pan-y;
}
#app { height:100%; }
.page { height:100%; display:flex; flex-direction:column; overflow:hidden; }
.scroll {
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:none;
  cursor:grab;
  user-select:none;
  padding-bottom:24px;
}
.scroll.dragging { cursor:grabbing; }
.scroll input, .scroll textarea { user-select:text; cursor:text; touch-action:auto; }
.sticky { position:sticky; top:0; z-index:20; background:var(--bg); }
.cats { display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px; max-height:110px; overflow:hidden; }
.cat { padding:6px 14px; background:#FFF; border-radius:16px; font-size:13px; color:#666; border:none; }
.cat.active { background:linear-gradient(135deg,#FF7043,#FF5722); color:#FFF; font-weight:600; }
.search-bar { padding:8px 12px 12px; }
.search-fake, .search-box { display:flex; align-items:center; gap:8px; background:#FFF; border-radius:24px; padding:0 16px; height:36px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.search-fake { color:#BBB; font-size:14px; }
.search-box input { border:none; outline:none; flex:1; height:36px; font-size:15px; background:transparent; }
.sort-bar { display:flex; gap:16px; padding:8px 16px 12px; font-size:13px; color:#999; }
.sort-bar span.active { color:var(--primary); font-weight:600; }
.waterfall { display:flex; justify-content:space-between; padding:0 10px; gap:8px; }
.col { flex:1; min-width:0; }
.card { background:#FFF; border-radius:10px; overflow:hidden; margin-bottom:8px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.wf-img { width:100%; display:block; background:#FAFAFA; min-height:120px; object-fit:cover; }
.wf-emoji { height:140px; display:flex; align-items:center; justify-content:center; font-size:48px; background:#FAFAFA; }
.wf-body { padding:8px 10px 12px; }
.wf-name { font-size:13px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:2.8em; }
.price { display:flex; align-items:flex-start; color:var(--primary); }
.price-symbol { font-size:12px; line-height:1; margin-top:2px; }
.price-int { font-size:18px; font-weight:700; line-height:1; }
.price-dec { font-size:11px; line-height:1; margin-left:1px; }
.empty { text-align:center; padding:60px 20px; color:#999; }
.msg { padding:16px; color:#666; font-size:14px; line-height:1.6; }
.msg.error { color:#C62828; }
.btn { display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:8px; padding:10px 16px; font-size:14px; background:var(--primary); color:#FFF; }
.btn[disabled] { opacity:.5; }
.btn-outline { background:#FFF; color:var(--primary); border:1px solid var(--primary); }
.btn-ghost { background:#FFF; color:#666; border:1px solid #EEE; }
.hot { display:flex; flex-wrap:wrap; gap:8px; padding:12px; }
.hot span { background:#FFF; padding:6px 12px; border-radius:14px; font-size:13px; }
.list-item { display:flex; gap:12px; background:#FFF; margin:0 12px 8px; padding:12px; border-radius:10px; }
.list-item img, .thumb { width:72px; height:72px; border-radius:8px; object-fit:cover; background:#FAFAFA; flex-shrink:0; }
.list-name { font-size:14px; font-weight:500; }
.muted { color:var(--muted); font-size:12px; margin-top:4px; }
.gallery { position:relative; background:#FFF; }
.gallery img { width:100%; max-height:360px; object-fit:contain; background:#FAFAFA; display:block; }
.dots { position:absolute; right:12px; bottom:12px; background:rgba(0,0,0,.45); color:#FFF; font-size:12px; padding:2px 8px; border-radius:10px; }
.detail-main { background:#FFF; padding:16px; margin-bottom:8px; }
.detail-name { font-size:18px; font-weight:600; }
.detail-desc { padding:16px; background:#FFF; color:#666; font-size:14px; line-height:1.7; }
.detail-desc img { max-width:100%; border-radius:8px; }
.attrs { padding:12px 16px; background:#FFF; }
.attr-name { font-size:13px; color:#666; margin:8px 0; }
.opts { display:flex; flex-wrap:wrap; gap:8px; }
.opt { border:1px solid #EEE; background:#FAFAFA; border-radius:6px; padding:6px 12px; font-size:13px; }
.opt.active { border-color:var(--primary); color:var(--primary); background:#FFF3E0; }
.detail-bar { flex-shrink:0; background:#FFF; display:flex; align-items:center; gap:10px; padding:8px 12px; border-top:1px solid #EEE; }
.detail-bar .btn { flex:1; height:42px; }
.hint { font-size:12px; color:#999; padding:8px 16px 16px; }
.wl-group { background:#FFF; margin:12px; border-radius:12px; overflow:hidden; }
.wl-head { padding:14px 16px; background:#FFF8F5; }
.wl-title { font-size:16px; font-weight:700; }
.section { padding:8px 16px; font-size:13px; color:#999; }
.catalog { display:grid; grid-template-columns:repeat(var(--cols, 2), minmax(0, 1fr)); gap:8px; padding:0 12px 16px; }
.catalog-card { background:#FAFAFA; border-radius:8px; overflow:hidden; }
.catalog-card img { width:100%; height:110px; object-fit:cover; }
.catalog-card .pad { padding:8px; }
.inactive { opacity:.55; }
.item-row { display:flex; gap:10px; padding:12px 16px; border-top:1px solid #F5F5F5; }
.item-row .grow { flex:1; min-width:0; }
.profile-head { display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,#FF7043,#FF5722); color:#FFF; padding:28px 16px 24px; }
.avatar { width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:22px; overflow:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.nick { width:160px; border:none; background:transparent; color:#FFF; font-size:18px; font-weight:600; outline:none; }
.nick::placeholder { color:rgba(255,255,255,.7); }
.menu { background:#FFF; margin:12px; border-radius:12px; }
.menu-item { display:flex; align-items:center; padding:16px; border-bottom:1px solid #F5F5F5; }
.menu-item:last-child { border:none; }
.grow { flex:1; }
.tabbar { position:fixed; left:0; right:0; bottom:0; height:calc(64px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:#FFF; display:flex; border-top:1px solid #EEE; z-index:30; }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; color:#999; position:relative; text-decoration:none; }
.tab.active { color:var(--primary); }
.tab .icon { font-size:20px; }
.badge { position:absolute; top:4px; right:22%; min-width:16px; height:16px; background:var(--primary); color:#FFF; border-radius:8px; font-size:10px; line-height:16px; text-align:center; padding:0 4px; }
.toast { position:fixed; left:50%; top:40%; transform:translate(-50%,-50%); background:rgba(0,0,0,.75); color:#FFF; padding:10px 16px; border-radius:8px; z-index:50; font-size:14px; }
.nav { display:flex; align-items:center; height:var(--nav); flex-shrink:0; padding:0 8px; background:var(--primary); color:#FFF; }
.nav button { background:none; border:none; color:#FFF; font-size:16px; padding:8px; }
.nav h1 { flex:1; text-align:center; font-size:16px; font-weight:600; }
.small { font-size:12px; }
.auth-page { background:#FFF; }
.auth-tabs { display:flex; margin:16px 16px 0; background:#F5F5F5; border-radius:8px; padding:4px; }
.auth-tab { flex:1; border:none; background:transparent; height:36px; border-radius:6px; color:#666; }
.auth-tab.active { background:#FFF; color:var(--primary); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.auth-form { padding:16px; display:flex; flex-direction:column; gap:8px; }
.auth-form label { font-size:13px; color:#666; }
.auth-form .req { color:var(--primary); margin-left:2px; }
.auth-form input, .auth-form textarea { border:1px solid #EEE; border-radius:8px; padding:10px 12px; font-size:15px; width:100%; box-sizing:border-box; background:#FAFAFA; }
.auth-form textarea { resize:vertical; min-height:72px; }
.auth-form .btn { margin-top:8px; height:44px; }
.nick-text { font-size:18px; font-weight:700; }