/* BechDe skin: warm and solid (property). Wave-edged header, docked bottom bar with a raised
   Sell button, photo-first cards, Plus Jakarta Sans. Layered after theme.css. */
:root { --bg: #fbf7f4; --radius: 16px; font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* header: square top, wave bottom edge in the page colour */
.topbar { border-radius: 0; padding-bottom: 54px; background: linear-gradient(120deg, var(--g1) 0%, var(--g2) 100%); }
.topbar.tall { padding-bottom: 74px; }
.topbar::before { width: 180px; height: 180px; right: -40px; top: -60px; background: rgba(255,255,255,.08); border-radius: 40px; transform: rotate(25deg); }
.topbar::after { left: 0; right: 0; bottom: -1px; width: auto; height: 34px; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 20 C 70 0 130 34 200 18 S 330 2 400 16 L400 34 L0 34 Z' fill='%23fbf7f4'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; }
.topbar h1 { font-size: 28px; }
.tb-av, .topbar .back { border-radius: 50%; }

/* cards: tighter radius, warm shadow, photo first */
.card, .stat, .lcard, .list a, .dlist a { box-shadow: 0 3px 14px rgba(120, 53, 15, .08); }
.lcard .img { aspect-ratio: 5 / 4; }
.lcard .price { color: var(--g1); font-size: 17.5px; }
.lcard .body { padding: 10px 12px 12px; }

/* solid buttons and chips (no gradient) */
.btn { background: var(--g1); box-shadow: 0 6px 14px -6px var(--g1); border-radius: 12px; }
.btn.ghost { background: #ffedd5; color: #c2410c; }
.chip { box-shadow: none; border: 1.5px solid #f1e4da; background: #fff; }
.chip.on { background: var(--g1); border-color: var(--g1); }
.search input { border-radius: 12px; box-shadow: none; border: 1.5px solid #f1e4da; }

/* docked bottom bar with a raised Sell button and a dot indicator */
.nav { left: 0; right: 0; bottom: 0; border-radius: 22px 22px 0 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -6px 24px rgba(120, 53, 15, .10); max-width: none; }
:root { --float: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom, 0px)); }
.nav a.on::after { bottom: auto; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--g1); }
.nav a.sell .ic { background: var(--g1); border-color: #fff; width: 54px; height: 54px; margin-top: -30px; font-size: 28px; }

/* login tiles in warm tones */
.auth .demo-logins .btn { background: linear-gradient(135deg, #ea580c, #f59e0b); }
.auth .demo-logins .btn:nth-child(4n+2) { background: linear-gradient(135deg, #e11d48, #f43f5e); }
.auth .demo-logins .btn:nth-child(4n+3) { background: linear-gradient(135deg, #92400e, #c2410c); }
.auth .demo-logins .btn:nth-child(4n+4) { background: linear-gradient(135deg, #9d174d, #db2777); }
.auth .hero .mark { border-radius: 50%; }