:root {
  --forest: #0f2d27;
  --forest-2: #16483a;
  --lime: #8ee800;
  --green: #1eaa39;
  --sand: #c8b29b;
  --ink: #10221e;
  --muted: #6f7d79;
  --paper: #f2f3ef;
  --white: #ffffff;
  --line: #dfe5df;
  --danger: #c94c42;
}

* { box-sizing: border-box; }
html { background: #dfe5df; color: var(--ink); font-family: MiSans, "PingFang SC", "Microsoft YaHei", sans-serif; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% 0%, #f7f8f5 0, #d7ded8 55%, #bdc9c1 100%); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.phone-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.app-panel { position: relative; width: min(100%, 430px); height: min(920px, calc(100vh - 48px)); overflow: hidden; background: var(--paper); border: 8px solid #071713; border-radius: 34px; box-shadow: 0 30px 70px rgba(15, 45, 39, .3); }
.app-header { height: 74px; padding: 18px 20px 12px; display: flex; align-items: center; justify-content: space-between; background: var(--paper); }
.brand-mark { display: flex; align-items: center; gap: 9px; color: var(--forest); }
.brand-mark__glyph { position: relative; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; background: var(--lime); color: var(--forest); font-size: 12px; font-weight: 900; border-radius: 0; clip-path: polygon(0 0,100% 0,100% 75%,75% 100%,0 100%); }
.brand-mark__glyph::after { content:""; position:absolute; width:18px; height:18px; left:3px; bottom:3px; border:2px solid var(--forest); border-right-color:transparent; border-radius:50%; transform:rotate(-28deg); }
.brand-mark__glyph i { position:absolute; width:9px; height:9px; right:5px; top:5px; border-radius:50%; background:var(--forest); box-shadow:-7px 3px 0 -3px var(--lime); }
.brand-mark__glyph b { position:relative; z-index:2; margin:0 0 0 7px; font-size:10px; }
.brand-mark strong, .brand-mark small { display: block; }
.brand-mark strong { font-size: 15px; letter-spacing: .06em; }
.brand-mark small { font-size: 8px; margin-top: 1px; letter-spacing: .16em; }
.ghost-icon { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid #d7dfd8; border-radius: 999px; padding: 7px 11px; background: #fff; color: var(--forest); font-size: 11px; }

.screen { display: none; height: calc(100% - 136px); overflow-y: auto; padding: 0 16px 28px; scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }
.screen--active { display: block; }

.hero-card { position: relative; min-height: 232px; overflow: hidden; border-radius: 0; padding: 38px 24px 26px; color: white; background: radial-gradient(circle at 82% 36%, rgba(142,232,0,.14), transparent 25%), linear-gradient(145deg, #061814, var(--forest) 58%, #184934); clip-path: polygon(0 0,100% 0,100% 86%,88% 100%,0 100%); }
.hero-card::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(110deg,transparent 0 24px,rgba(255,255,255,.018) 25px 26px); }
.hero-card::after { content: ""; position: absolute; z-index:1; left:0; bottom:0; width:118px; height:7px; background:var(--sand); box-shadow:118px 0 0 var(--lime); }
.hero-card__serial { position:absolute; z-index:3; right:18px; top:15px; color:rgba(255,255,255,.5); font-size:7px; letter-spacing:.16em; }
.hero-card__copy { position: relative; z-index: 3; max-width:225px; }
.hero-card p, .simple-hero p, .section-heading p, .dialog-header p { margin: 0 0 8px; color: var(--lime); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.hero-card h1 { margin: 0 0 15px; font-size: 34px; line-height: 1.08; letter-spacing: .02em; }
.hero-card__copy > span { display: inline-block; padding: 7px 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 0; color: #eff6ed; font-size: 10px; }
.lumo-art { position:absolute; z-index:2; right:-10px; bottom:5px; width:154px; height:154px; border:3px solid #071713; border-radius:48% 52% 50% 46%; background:linear-gradient(145deg,#c5ff70,var(--lime) 65%,#61b842); transform:rotate(-7deg); box-shadow:12px 14px 0 rgba(0,0,0,.16); }
.lumo-art::before,.lumo-art::after{content:"";position:absolute;top:28px;width:45px;height:61px;border:3px solid #071713;border-radius:50%;background:#f9fff0}.lumo-art::before{left:19px}.lumo-art::after{right:19px}.lumo-eye{position:absolute;z-index:1;right:33px;top:47px;width:8px;height:13px;border-radius:50%;background:#071713}.lumo-tail{position:absolute;right:-28px;bottom:-3px;width:62px;height:50px;border:12px solid var(--lime);border-left-color:transparent;border-radius:50%;transform:rotate(32deg)}.lumo-art b,.lumo-art small{position:absolute;z-index:3;left:50%;transform:translateX(-50%);color:var(--forest)}.lumo-art b{bottom:25px;font-size:16px}.lumo-art small{bottom:13px;font-size:7px;font-weight:800;letter-spacing:.16em}.forest-rays{position:absolute;z-index:1;right:63px;bottom:63px;width:120px;height:120px;border-radius:50%;background:repeating-conic-gradient(from 4deg,var(--sand) 0 1deg,transparent 1deg 10deg);opacity:.42}

.catalog-tools { position: sticky; z-index: 5; top: -1px; padding: 15px 0 9px; background: linear-gradient(var(--paper) 82%, rgba(244,246,242,0)); }
.search-box { height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: white; border: 1px solid var(--line); border-radius: 0; box-shadow: 0 5px 18px rgba(14,45,39,.05); clip-path:polygon(0 0,100% 0,100% 76%,96% 100%,0 100%); }
.search-box span { color: var(--green); font-size: 22px; }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 13px; }
.category-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 11px 1px 2px; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs button { flex: none; border: 1px solid var(--line); border-radius: 0; padding: 7px 12px; background: white; color: #68756f; font-size: 11px; }
.category-tabs button.active { border-color: var(--forest); background: var(--forest); color: white; box-shadow: inset 0 -2px 0 var(--lime); }

.section-heading { display: flex; align-items: end; justify-content: space-between; padding: 14px 2px 12px; }
.section-heading p { color: var(--green); margin-bottom: 3px; }
.section-heading h2 { margin: 0; font-size: 20px; }
.section-heading > span { color: var(--muted); font-size: 11px; }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.product-card { min-width: 0; overflow: hidden; border: 1px solid #cfd8d1; border-radius: 0; background: white; box-shadow: 0 8px 25px rgba(14,45,39,.07); clip-path:polygon(0 0,100% 0,100% 92%,92% 100%,0 100%); }
.product-art { position: relative; height: 112px; overflow: hidden; padding: 18px 13px 12px; color: white; background: linear-gradient(140deg, #071a16, #174637); }
.product-art > small::before{content:"WANDER PLANET\A";white-space:pre;color:var(--lime);font-weight:800}
.product-card[data-category="parrot"] .product-art { background: radial-gradient(circle at 75% 20%, #b5f45b, transparent 23%), linear-gradient(140deg, #123729, #2a8f3c); }
.product-card[data-category="small-pet"] .product-art { background: radial-gradient(circle at 72% 25%, #dec68c, transparent 20%), linear-gradient(140deg, #453f23, #778843); }
.product-card[data-category="food"] .product-art { background: radial-gradient(circle at 75% 20%, #f3de9e, transparent 20%), linear-gradient(140deg, #29453d, #617640); }
.product-card[data-category="supplies"] .product-art { background: radial-gradient(circle at 75% 20%, #d7eef0, transparent 20%), linear-gradient(140deg, #1b3c3d, #3c7774); }
.product-art::before, .product-art::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.23); }
.product-art::before { width: 90px; height: 90px; right: -22px; bottom: -38px; background:repeating-conic-gradient(var(--sand) 0 1deg,transparent 1deg 12deg);opacity:.35; }
.product-art::after { width: 50px; height: 50px; right: 10px; bottom: -20px; background: rgba(139,228,0,.16); }
.product-art small { position: relative; z-index: 1; font-size: 8px; letter-spacing: .15em; opacity: .76; }
.product-art strong { position: absolute; right: 13px; bottom: 4px; z-index: 1; font-size: 42px; color: var(--lime); line-height: 1; opacity: .93; }
.product-card__body { padding: 12px; }
.product-card h3 { height: 39px; margin: 0 0 8px; overflow: hidden; font-size: 13px; line-height: 1.45; }
.product-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.product-price { color: var(--forest); font-size: 17px; font-weight: 900; }
.product-price small { color: var(--muted); font-size: 9px; font-weight: 500; }
.add-button { width: 31px; height: 31px; border: 0; border-radius: 0; background: var(--lime); color: var(--forest); font-size: 21px; font-weight: 700; box-shadow: 0 5px 10px rgba(142,232,0,.28); clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%); }

.simple-hero { position:relative;overflow:hidden;margin: 0 -16px 15px; padding: 28px 22px 26px; color: white; background: linear-gradient(135deg, var(--forest), #17613d); }
.simple-hero::after{content:"";position:absolute;right:-28px;top:-45px;width:150px;height:150px;border-radius:50%;background:repeating-conic-gradient(var(--sand) 0 1deg,transparent 1deg 12deg);opacity:.34}
.simple-hero h1 { margin: 0 0 6px; font-size: 27px; }
.simple-hero span { color: #d6e4dc; font-size: 11px; }
.cart-list, .orders-list { display: grid; gap: 10px; }
.cart-line, .order-card { border: 1px solid var(--line); border-radius: 18px 7px 18px 7px; background: white; }
.cart-line { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 10px; padding: 11px; }
.cart-line__art { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 13px 4px 13px 4px; background: var(--forest); color: var(--lime); font-weight: 900; }
.cart-line h3 { margin: 0 0 4px; font-size: 13px; }
.cart-line p { margin: 0; color: var(--muted); font-size: 10px; }
.quantity-stepper { display: flex; align-items: center; gap: 8px; }
.quantity-stepper button { width: 25px; height: 25px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--forest); }
.quantity-stepper strong { min-width: 18px; text-align: center; font-size: 12px; }
.cart-summary { margin-top: 12px; padding: 16px; border-radius: 18px 7px 18px 7px; background: var(--forest); color: white; }
.cart-summary__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cart-summary span { color: #c5d4cd; font-size: 11px; }
.cart-summary strong { color: var(--lime); font-size: 23px; }
.primary-button { width: 100%; border: 0; border-radius: 13px 4px 13px 4px; padding: 13px; background: var(--lime); color: var(--forest); font-weight: 800; }
.empty-state { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; margin-bottom: 7px; color: var(--forest); font-size: 18px; }

.order-card { padding: 15px; }
.order-card__head, .order-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.order-card__head { padding-bottom: 11px; border-bottom: 1px solid #edf0ec; }
.order-card__head strong { font-size: 12px; }
.status-pill { border-radius: 999px; padding: 5px 8px; color: #806400; background: #fff2bd; font-size: 9px; font-weight: 700; }
.status-pill[data-status="verified"] { color: #176b2a; background: #daf3df; }
.status-pill[data-status="paid"] { color: #08773a; background: #dcf7e8; }
.status-pill[data-status="rejected"] { color: #a23830; background: #fde1de; }
.order-card p { margin: 11px 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.order-card__footer span { color: var(--muted); font-size: 10px; }
.order-card__footer strong { color: var(--forest); font-size: 16px; }

.bottom-nav { position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; height: 62px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #dfe5df; background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.nav-item { position: relative; border: 0; background: transparent; color: #77837e; font-size: 10px; }
.nav-item > span { display: block; margin-bottom: 3px; font-size: 17px; }
.nav-item--active { color: var(--forest); font-weight: 700; }
.nav-item--active::after { content: ""; position: absolute; top: 0; left: calc(50% - 12px); width: 24px; height: 3px; border-radius: 0 0 4px 4px; background: var(--lime); }
.nav-item em { position: absolute; top: 8px; left: calc(50% + 9px); min-width: 16px; height: 16px; border-radius: 999px; padding: 0 4px; background: var(--lime); color: var(--forest); font-size: 9px; font-style: normal; line-height: 16px; }

.checkout-dialog { width: min(100%, 430px); height: min(920px, 100vh); max-width: none; max-height: none; margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 32px; background: var(--paper); box-shadow: 0 30px 100px rgba(0,0,0,.4); }
.checkout-dialog::backdrop { background: rgba(4,18,15,.65); backdrop-filter: blur(8px); }
.checkout-dialog form { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.dialog-header { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 17px 16px; background: white; border-bottom: 1px solid var(--line); text-align: center; }
.dialog-header p { color: var(--green); margin-bottom: 1px; }
.dialog-header h2 { margin: 0; font-size: 17px; }
.back-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--forest); }
.dialog-content { overflow-y: auto; padding: 13px 14px 22px; }
.form-card { margin-bottom: 11px; padding: 15px; border: 1px solid var(--line); border-radius: 20px 7px 20px 7px; background: white; }
.form-card h3 { margin: 0 0 13px; font-size: 14px; }
.form-card h3 b { margin-left: 4px; border-radius: 4px; padding: 2px 5px; background: #e9f9cc; color: #4d8100; font-size: 9px; }
.form-card label { display: block; margin-bottom: 11px; color: var(--muted); font-size: 10px; }
.form-card input, .form-card textarea { width: 100%; margin-top: 5px; border: 1px solid #dce3dd; border-radius: 10px; padding: 10px 11px; outline: 0; background: #fafbf9; color: var(--ink); font-size: 12px; }
.form-card input:focus, .form-card textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(30,166,56,.1); }
.form-card textarea { min-height: 68px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.form-card__title { display: flex; justify-content: space-between; gap: 10px; }
.form-card__title p { margin: -7px 0 12px; color: var(--muted); font-size: 10px; }
.form-card__title > span { color: #a9b3ae; font-size: 8px; letter-spacing: .16em; }
.receipt-uploader { position: relative; min-height: 144px; display: grid !important; place-items: center; overflow: hidden; margin: 0 !important; border: 1px dashed #aab9af; border-radius: 15px; background: linear-gradient(135deg, #f8faf7, #eef4ec); text-align: center; }
.receipt-uploader input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#receiptEmpty strong, #receiptEmpty span, #receiptEmpty small { display: block; }
#receiptEmpty strong { color: var(--green); font-size: 27px; font-weight: 400; }
#receiptEmpty span { margin: 4px 0; color: var(--forest); font-size: 12px; font-weight: 700; }
#receiptEmpty small { color: var(--muted); font-size: 9px; }
#receiptPreview { display: none; width: 100%; height: 190px; object-fit: contain; background: #eef1ed; }
#removeReceipt { display: none; position: absolute; right: 8px; bottom: 8px; border: 0; border-radius: 999px; padding: 6px 9px; background: rgba(14,45,39,.88); color: white; font-size: 9px; }
.receipt-uploader.has-file #receiptEmpty { display: none; }
.receipt-uploader.has-file #receiptPreview, .receipt-uploader.has-file #removeReceipt { display: block; }
.checkout-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #edf0ec; font-size: 11px; }
.checkout-item:last-child { border-bottom: 0; }
.checkout-item span { color: var(--muted); }
.checkout-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px 18px; border-top: 1px solid var(--line); background: white; }
.checkout-footer div span, .checkout-footer div strong { display: block; }
.checkout-footer div span { color: var(--muted); font-size: 9px; }
.checkout-footer div strong { color: var(--forest); font-size: 20px; }
.checkout-footer button { flex: 1; border: 0; border-radius: 14px 5px 14px 5px; padding: 13px; background: var(--lime); color: var(--forest); font-weight: 800; }
.checkout-footer button:disabled { background: #d9dfd8; color: #89938e; cursor: not-allowed; }
.toast { position: fixed; z-index: 99; left: 50%; bottom: 34px; transform: translate(-50%, 20px); padding: 10px 15px; border-radius: 999px; background: rgba(14,45,39,.95); color: white; font-size: 11px; opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 520px) {
  body { background: var(--paper); }
  .phone-shell { display: block; padding: 0; }
  .app-panel { width: 100%; height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
  .checkout-dialog { width: 100%; height: 100vh; border-radius: 0; }
}

/* Runtime-customizable media */
.brand-logo-image{display:none;width:38px;height:38px;object-fit:contain}.brand-mark.has-custom-logo .brand-logo-image{display:block}.brand-mark.has-custom-logo .brand-mark__glyph{display:none}
.hero-background-image{display:none;position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover}.hero-card.has-background .hero-background-image{display:block}.hero-card.has-background::before{z-index:1;background:linear-gradient(90deg,rgba(5,24,19,.92),rgba(15,45,39,.28))}.hero-mascot-image{display:none;position:absolute;z-index:3;right:4px;bottom:3px;width:158px;height:180px;object-fit:contain}.hero-card.has-custom-mascot .hero-mascot-image{display:block}.hero-card.has-custom-mascot .lumo-art{display:none}
.product-art__image{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover}.product-art.has-image::after{content:"";position:absolute;z-index:1;inset:0;width:auto;height:auto;right:0;bottom:0;border:0;border-radius:0;background:linear-gradient(180deg,rgba(5,24,19,.06),rgba(5,24,19,.72));opacity:1}.product-art.has-image>small,.product-art.has-image>strong{z-index:2}.product-art.has-image>strong{font-size:24px}
.embedded .phone-shell{padding:0}.embedded .app-panel{width:100%;height:100vh;border:0;border-radius:0;box-shadow:none}
.identity-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.identity-switch label{margin:0!important}.identity-switch input{position:absolute;width:1px;height:1px;opacity:0}.identity-switch span{min-height:66px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--line);padding:10px;background:#fafbf9;color:var(--muted)}.identity-switch b,.identity-switch small{display:block}.identity-switch b{margin-bottom:4px;color:var(--forest);font-size:11px}.identity-switch small{font-size:8px}.identity-switch input:checked+span{border-color:var(--forest);background:var(--forest);box-shadow:inset 0 -4px 0 var(--lime)}.identity-switch input:checked+span b{color:white}.identity-switch input:checked+span small{color:#bdd0c7}.payment-info-card{background:linear-gradient(145deg,#0f2d27,#174837);color:white}.payment-info-card h3{color:white}.payment-info-card .form-card__title p{color:#b8cbc1}.payment-info-card .form-card__title>span{color:var(--lime)}.payment-info-grid{display:grid;gap:8px}.payment-info-grid>div{display:grid;grid-template-columns:70px 1fr;gap:8px;align-items:center;padding:8px 10px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.12)}.payment-info-grid small{color:#a8bdb3;font-size:8px}.payment-info-grid strong{font-size:10px;word-break:break-all}.payment-info-grid .account-row{grid-template-columns:70px 1fr auto}.payment-info-grid button{border:0;padding:5px 7px;background:var(--lime);color:var(--forest);font-size:8px;font-weight:800}.payment-note{margin:10px 0 0;padding-left:9px;border-left:3px solid var(--sand);color:#d8e4de;font-size:9px;line-height:1.55}.wechat-payment-card{display:flex;align-items:center;gap:13px}.wechat-payment-card[hidden]{display:none}.wechat-pay-icon{width:44px;height:44px;display:grid;place-items:center;flex:none;border-radius:50%;background:#07c160;color:white;font-size:22px;font-weight:900}.wechat-payment-card h3{margin:0 0 4px}.wechat-payment-card p{margin:0 0 5px;color:var(--muted);font-size:10px}.wechat-payment-card small{color:#9aa59f;font-size:8px}
.locked-identity{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;padding:11px 12px;border-left:4px solid var(--lime);background:var(--forest);color:white}.locked-identity b{font-size:10px}.locked-identity small{color:#bdd0c7;font-size:8px;text-align:right}.account-dialog{width:min(360px,calc(100vw - 28px));padding:0;border:0;background:transparent}.account-dialog::backdrop{background:rgba(5,20,16,.68);backdrop-filter:blur(4px)}.account-dialog__body{position:relative;padding:24px;background:#f4f6f1;border-top:6px solid var(--lime);box-shadow:0 24px 80px rgba(0,0,0,.35)}.account-dialog__body>p{margin:0;color:#6a7a72;font-size:8px;font-weight:900;letter-spacing:1.5px}.account-dialog__body h2{margin:5px 0 7px;color:var(--forest)}.account-dialog__body>span{display:block;margin-bottom:16px;color:var(--muted);font-size:9px;line-height:1.6}.account-dialog__body>[data-preview-role]{width:100%;display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:13px;border:1px solid var(--line);background:white;color:var(--forest);text-align:left}.account-dialog__body>[data-preview-role] small{color:var(--muted);font-size:8px}.account-dialog__close{position:absolute;right:14px;top:12px;border:0;background:transparent;color:var(--forest);font-size:22px}
.customer-type-badge{display:inline-block;margin-right:5px;padding:3px 6px;background:#eaf7d8;color:#4d7600;font-size:8px;font-weight:800}.customer-type-badge.retail{background:#dcf7e8;color:#08773a}