:root { --primary:#FF5722; --bg:#F5F5F5; --text:#333; --muted:#888; --card:#FFF; --nav:52px; --tab:calc(70px + 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); font-size:16px;
  position:fixed; inset:0;
  height:100%; height:100dvh;
  padding-bottom:var(--tab);
  touch-action: pan-y;
}
body.auth-open { padding-bottom:0; }
#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:pan-y;
  cursor:grab;
  user-select:none;
  padding-bottom:24px;
}
.scroll.dragging { cursor:grabbing; touch-action:none; }
.scroll input, .scroll textarea { user-select:text; cursor:text; touch-action:auto; }
img { -webkit-user-drag:none; user-drag:none; -webkit-user-select:none; user-select:none; }
.card img, .row-img, .list-item img, .item-row img, .thumb { pointer-events:none; }
.sticky { position:sticky; top:0; z-index:20; background:var(--bg); }
.cats { display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px; max-height:120px; overflow:hidden; }
.cat { padding:8px 16px; background:#FFF; border-radius:18px; font-size:15px; 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:40px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.search-fake { color:#BBB; font-size:16px; }
.search-box input { border:none; outline:none; flex:1; height:40px; font-size:16px; background:transparent; }
.sort-bar { display:flex; align-items:center; gap:8px; padding:8px 12px 12px; font-size:15px; color:#999; }
.sort-left { display:flex; align-items:center; gap:18px; }
.sort-item { display:inline-flex; align-items:center; gap:4px; cursor:pointer; user-select:none; border:none; background:none; padding:6px 4px; font-size:15px; color:#999; }
.sort-item.active, .sort-item.active .sort-dir { color:var(--primary); font-weight:700; }
.sort-dir { font-size:14px; line-height:1; padding:2px 4px; }
.view-switch { margin-left:auto; display:flex; gap:6px; }
.view-btn {
  width:40px; height:36px; border:1px solid #E0E0E0; background:#FFF; border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:#999; padding:0;
}
.view-btn.active { border-color:var(--primary); color:var(--primary); background:#FFF3E0; }
.view-btn svg { display:block; }
.waterfall { display:flex; justify-content:space-between; padding:0 10px; gap:8px; }
.col { flex:1; min-width:0; }
.card { position:relative; background:#FFF; border-radius:10px; overflow:hidden; margin-bottom:8px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.card .add-plus { position:absolute; right:8px; bottom:8px; }
.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 52px 12px 10px; }
.wf-name { font-size:15px; font-weight:700; color:#111; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.item-desc { font-size:13px; color:#888; line-height:1.45; margin-top:4px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.price-row { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:4px; }
.price { display:flex; align-items:flex-start; color:var(--primary); }
.price-symbol { font-size:13px; line-height:1; margin-top:3px; }
.price-int { font-size:20px; font-weight:700; line-height:1; }
.price-dec { font-size:13px; line-height:1; margin-left:1px; }
.price-original { color:#AAA; font-size:14px; text-decoration:line-through; }
.empty { text-align:center; padding:60px 20px; color:#999; font-size:16px; }
.msg { padding:16px; color:#666; font-size:16px; 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:16px; background:var(--primary); color:#FFF; font-weight:600; }
.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; }
.btn-logout { background:#FFF; color:var(--primary); border:none; height:38px; padding:0 16px; flex-shrink:0; }
.btn-remove { background:var(--primary); color:#FFF; border:none; height:36px; padding:0 14px; font-size:15px; }
.hot { display:flex; flex-wrap:wrap; gap:8px; padding:12px; }
.hot span { background:#FFF; padding:8px 14px; border-radius:14px; font-size:15px; }
.list-item { display:flex; gap:12px; background:#FFF; margin:0 12px 8px; padding:12px; border-radius:10px; }
.list-item img, .thumb { width:80px; height:80px; border-radius:8px; object-fit:cover; background:#FAFAFA; flex-shrink:0; }
.list-name { font-size:16px; font-weight:500; }
.muted { color:var(--muted); font-size:14px; margin-top:4px; }
.gallery { background:#111; }
.gallery-stage {
  position:relative; overflow:hidden; height:280px; background:#111;
  touch-action:pan-y;
}
.gallery-track {
  display:flex; height:100%; will-change:transform; user-select:none;
}
.g-slide {
  height:100%; object-fit:contain; background:#111; pointer-events:none;
  -webkit-user-drag:none; flex-shrink:0;
}
.gallery-thumbs {
  position:absolute; left:0; right:0; top:0; z-index:3;
  display:flex; gap:8px; overflow-x:auto; overflow-y:hidden;
  padding:8px 12px; touch-action:pan-x;
  background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.12) 70%, transparent);
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.gallery-thumbs::-webkit-scrollbar { display:none; }
.gallery-thumbs img {
  width:48px; height:48px; min-width:48px; object-fit:cover; border-radius:8px;
  border:2px solid rgba(255,255,255,.35); flex-shrink:0; pointer-events:auto;
  opacity:.78; background:rgba(255,255,255,.12);
}
.gallery-thumbs img.active { border-color:#FFF; opacity:1; box-shadow:0 0 0 2px var(--primary); }
.gallery-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:none; border-radius:18px;
  background:rgba(0,0,0,.45); color:#FFF; font-size:26px; line-height:36px;
  display:flex; align-items:center; justify-content:center; z-index:4; padding:0;
}
.gallery-nav.prev { left:8px; }
.gallery-nav.next { right:8px; }
.dots { position:absolute; right:12px; bottom:12px; background:rgba(0,0,0,.45); color:#FFF; font-size:13px; padding:2px 8px; border-radius:10px; }
.detail-main { background:#FFF; padding:16px; margin-bottom:8px; }
.detail-name { font-size:20px; font-weight:600; }
.detail-desc { padding:16px; background:#FFF; color:#666; font-size:16px; line-height:1.7; }
.detail-desc img { max-width:100%; border-radius:8px; }
.attrs { padding:12px 16px; background:#FFF; }
.attr-name { font-size:15px; color:#666; margin:8px 0; }
.opts { display:flex; flex-wrap:wrap; gap:8px; }
.opt { border:1px solid #EEE; background:#FAFAFA; border-radius:6px; padding:8px 14px; font-size:15px; }
.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:46px; font-size:17px; }
.qty-stepper { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.qty-btn {
  width:32px; height:32px; border-radius:16px; border:1.5px solid var(--primary);
  background:#FFF; color:var(--primary); font-size:20px; font-weight:600; line-height:1;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.qty-btn[disabled] { opacity:.32; }
.qty-num { min-width:22px; text-align:center; font-size:16px; font-weight:700; color:#333; }
.icon-btn {
  width:36px; height:36px; min-width:36px; border:none; border-radius:18px;
  display:flex; align-items:center; justify-content:center; padding:0; flex-shrink:0;
  position:relative; z-index:4; pointer-events:auto;
}
.icon-x { background:var(--primary); color:#FFF; font-size:22px; font-weight:500; line-height:1; }
.icon-restore { background:var(--primary); color:#FFF; }
.icon-restore svg { width:20px; height:20px; display:block; }
.thumb-wrap { position:relative; width:80px; height:80px; flex-shrink:0; }
.thumb-wrap .thumb { width:80px; height:80px; }
.qty-badge {
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px;
  background:#E53935; color:#FFF; border-radius:10px; font-size:12px; font-weight:700;
  line-height:20px; text-align:center; z-index:2; box-shadow:0 0 0 2px #FFF;
}
.hint { font-size:14px; 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:18px; font-weight:700; }
.section { padding:8px 16px; font-size:15px; 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; }
.inactive .list-name { text-decoration:line-through; }
.item-row { display:flex; gap:10px; padding:12px 16px; border-top:1px solid #F5F5F5; align-items:center; }
.item-row .grow { flex:1; min-width:0; }
.item-row .qty-stepper { margin-right:2px; }
.row-list { padding:0 10px 8px; }
.row-card {
  display:flex; align-items:flex-start; gap:12px; background:#FFF; border-radius:10px;
  padding:12px 10px; margin-bottom:8px; box-shadow:0 1px 4px rgba(0,0,0,.06);
  min-height:136px;
}
.row-card .row-img, .row-card .row-emoji {
  width:112px; height:112px; min-width:112px; min-height:112px; border-radius:8px; flex-shrink:0; object-fit:cover; background:#FAFAFA;
}
.row-card .row-emoji { display:flex; align-items:center; justify-content:center; font-size:40px; }
.row-main { flex:1; min-width:0; padding-top:2px; }
.row-name { font-size:16px; font-weight:700; color:#111; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.row-card .item-desc { font-size:14px; }
.row-card .add-plus { margin-top:36px; }
.add-plus {
  flex-shrink:0; width:40px; height:40px; border:none; border-radius:20px;
  background:var(--primary); color:#FFF; font-size:18px; font-weight:500; line-height:40px;
  display:flex; align-items:center; justify-content:center; padding:0;
  position:relative; z-index:4; pointer-events:auto;
}
.item-row .btn { position:relative; z-index:4; pointer-events:auto; flex-shrink:0; }
.profile-head { display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,#FF7043,#FF5722); color:#FFF; padding:28px 16px 24px; }
.avatar {
  width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
}
.avatar svg { width:36px; height:36px; display:block; }
.nick { width:160px; border:none; background:transparent; color:#FFF; font-size:20px; 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; font-size:16px; }
.menu-item:last-child { border:none; }
.grow { flex:1; }
.tabbar { position:fixed; left:0; right:0; bottom:0; height:calc(70px + 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:13px; color:#999; position:relative; text-decoration:none; }
.tab.active { color:var(--primary); }
.tab .icon { font-size:22px; }
.badge { position:absolute; top:4px; right:22%; min-width:18px; height:18px; background:var(--primary); color:#FFF; border-radius:9px; font-size:11px; line-height:18px; 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:16px; }
.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; line-height:1; padding:8px 6px; }
.nav-back { display:inline-flex; align-items:center; gap:0; min-width:72px; font-weight:600; z-index:5; }
.nav-back-icon { font-size:26px; line-height:1; margin-top:-2px; }
.nav-side { min-width:72px; flex-shrink:0; }
.nav h1 { flex:1; text-align:center; font-size:18px; font-weight:600; }
.small { font-size:14px; }
.auth-page { background:#FFF; }
.auth-page .scroll { display:flex; flex-direction:column; }
.auth-tabs-bar { flex-shrink:0; padding:10px 16px 8px; background:#FFF; }
.auth-center {
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:12px 24px 28px; max-width:440px; width:100%; margin:0 auto; box-sizing:border-box;
}
.auth-tabs { display:flex; background:#F5F5F5; border-radius:8px; padding:4px; }
.auth-tab { flex:1; border:none; background:transparent; height:40px; border-radius:6px; color:#666; font-size:16px; }
.auth-tab.active { background:#FFF; color:var(--primary); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.auth-form { display:flex; flex-direction:column; }
.auth-fields { display:flex; flex-direction:column; gap:8px; }
.auth-actions { margin-top:36px; }
.auth-form label { font-size:15px; 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:12px; font-size:16px; width:100%; box-sizing:border-box; background:#FAFAFA; }
.auth-form textarea { resize:vertical; min-height:72px; }
.auth-form .btn, .btn-block { height:48px; width:100%; }
.btn-block { display:flex; margin-top:10px; }
.btn-text { border:none; background:none; color:#888; font-size:15px; padding:12px; }
.nick-text { font-size:20px; font-weight:700; }
.pin-screen {
  flex:1; min-height:0; display:flex; flex-direction:column;
  padding-bottom:0; background:#FFF;
}
.pin-stage {
  flex:1; display:flex; flex-direction:column; justify-content:center;
  width:100%; max-width:420px; margin:0 auto; padding:8px 16px;
  box-sizing:border-box;
}
.pin-footer {
  flex-shrink:0; display:flex; justify-content:center;
  padding:8px 16px calc(36px + env(safe-area-inset-bottom));
}
.pin-footer[hidden] { display:none; }
.pin-footer .btn-text { color:var(--primary); font-size:16px; font-weight:600; }
.pin-box { width:min(360px, 100%); margin:0 auto; }
.pin-title { text-align:center; font-size:18px; font-weight:600; margin-bottom:8px; }
.pin-sub { text-align:center; font-size:14px; color:#999; min-height:22px; }
.pin-sub.error { color:#C62828; }
.pin-dots { display:flex; justify-content:center; gap:18px; margin:12px 0 20px; }
.pin-dots span { width:14px; height:14px; border-radius:50%; border:2px solid #CCC; background:transparent; }
.pin-dots span.on { background:var(--primary); border-color:var(--primary); }
.pin-pad {
  display:grid; grid-template-columns:repeat(3, 1fr);
  width:100%; margin:0 auto;
}
.pin-key, .pin-spacer {
  aspect-ratio:1; width:100%; margin:0; padding:0; border:none; border-radius:0;
  background:transparent; color:#222; font-size:36px; font-weight:500;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid rgba(0,0,0,.08);
  border-right:1px solid rgba(0,0,0,.08);
}
.pin-pad > :nth-child(3n) { border-right:none; }
.pin-pad > :nth-last-child(-n+3) { border-bottom:none; }
.pin-key.flash { animation:pinFlash .42s ease-out; }
@keyframes pinFlash {
  0% { background:rgba(255,87,34,.32); }
  100% { background:transparent; }
}
.pin-clear-key { font-size:16px; font-weight:600; color:#666; }
.pin-spacer { visibility:hidden; }
.profile-page { display:flex; flex-direction:column; box-sizing:border-box; padding-bottom:8px; }
.profile-center {
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:16px 20px 12px; max-width:480px; width:100%; margin:0 auto; box-sizing:border-box;
}
.profile-bottom {
  flex-shrink:0; max-width:480px; width:100%; margin:0 auto;
  padding:8px 20px 16px; box-sizing:border-box; background:var(--bg);
}
.profile-center .avatar { margin:0 auto 16px; width:72px; height:72px; background:var(--primary); }
.profile-center .avatar svg { width:42px; height:42px; }
.info-card { background:#FFF; border-radius:12px; padding:8px 4px; margin-bottom:16px; }
.info-row { display:flex; gap:12px; padding:12px 12px; border-bottom:1px solid #F5F5F5; font-size:16px; }
.info-row:last-child { border:none; }
.info-row span { color:#888; width:72px; flex-shrink:0; }
.info-row b { font-weight:600; flex:1; word-break:break-word; }
.modal {
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:60;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.modal-card { background:#FFF; border-radius:12px; padding:24px 20px; max-width:320px; width:100%; text-align:center; }
.modal-card p { font-size:16px; margin-bottom:16px; line-height:1.5; }