:root {
  --ink: #18231f;
  --muted: #6f7b76;
  --brand: #174438;
  --brand-2: #285e4d;
  --gold: #b28b4b;
  --cream: #f4f0e7;
  --paper: #fff;
  --line: #e7e9e5;
  --danger: #b64734;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: #e9ecea;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.preview-toolbar {
  height: 68px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between;
  background: #101a17; color: #fff; position: sticky; top: 0; z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.16);
}
.preview-toolbar > div:first-child { display: flex; align-items: baseline; gap: 18px; }
.preview-toolbar strong { font-size: 18px; letter-spacing: .08em; }
.preview-toolbar span { font-size: 12px; color: #aebbb6; }
.toolbar-actions { display: flex; gap: 8px; }
.toolbar-btn { border: 1px solid #3a4b45; color: #cbd5d1; background: transparent; border-radius: 10px; padding: 9px 15px; }
.toolbar-btn.active { color: #10231c; background: #d8c399; border-color: #d8c399; font-weight: 700; }
.toolbar-btn.subtle { margin-left: 10px; color: #91a19b; }

.customer-workspace { min-height: calc(100vh - 68px); display: grid; grid-template-columns: minmax(390px, 430px) minmax(320px, 560px); gap: 70px; justify-content: center; align-items: start; padding: 38px 40px 70px; background: radial-gradient(circle at 28% 20%, #fff 0, #e9ecea 44%, #dfe5e1 100%); }
.phone-shell { width: 410px; height: calc(100vh - 118px); min-height: 720px; max-height: 900px; background: #f5f1e9; border-radius: 36px; border: 8px solid #16211d; overflow: hidden; box-shadow: 0 30px 65px rgba(22,37,31,.28); display: flex; flex-direction: column; position: sticky; top: 93px; }
.phone-status { height: 34px; padding: 0 20px; background: #fff; display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; position:relative; }
.phone-status #phoneBrand { font-size:12px; margin:0 auto; }
.screen { flex: 1; overflow: auto; scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }
.tabbar { height: 66px; background: rgba(255,255,255,.98); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5,1fr); flex: 0 0 auto; }
.tab { border: 0; background: transparent; color: #82908b; font-size: var(--tab-text-size,11px); display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; position: relative; min-width: 0; }
.tab > span { font-size: var(--tab-icon-size,20px); line-height: 18px; }
.tab > img { width:var(--tab-icon-size,20px); height:var(--tab-icon-size,20px); object-fit:contain; }
.tab.active { color: var(--brand); font-weight: 700; }
.tab i { position: absolute; top: 6px; right: 22px; background: #c94f3a; color: #fff; font-style: normal; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; font-size: 10px; line-height: 17px; }
.floating-service { position: absolute; z-index: 30; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--brand); line-height: 1; cursor: grab; touch-action: none; user-select: none; filter: drop-shadow(0 4px 7px rgba(0,0,0,.25)); }
.floating-service img { width:100%; height:100%; object-fit:contain; display:block; }
.floating-service:active { cursor: grabbing; }

.preview-notes { padding-top: 92px; }
.preview-notes .eyebrow { color: var(--brand-2); letter-spacing: .18em; font-weight: 700; font-size: 12px; }
.preview-notes h1 { margin: 14px 0 20px; font-family: Georgia, "Songti SC", serif; font-size: clamp(42px,5vw,70px); line-height: 1.08; font-weight: 500; }
.preview-notes > p:not(.eyebrow) { color: #59645f; line-height: 1.8; font-size: 16px; max-width: 520px; }
.note-list { margin-top: 36px; border-top: 1px solid #bbc4c0; }
.note-list > div { padding: 18px 0; border-bottom: 1px solid #cbd2cf; display: grid; grid-template-columns: 88px 1fr; gap: 20px; }
.note-list b { color: var(--brand); }
.note-list span { color: #68736e; line-height: 1.55; }

.mini-page { min-height: 100%; padding-bottom: 22px; background: #f5f1e9; }
.sticky-head { position: sticky; top: 0; z-index: 10; }
.search-row { display: flex; gap: 9px; align-items: center; padding: 12px 14px; background: rgba(255,255,255,.95); backdrop-filter: blur(12px); }
.search-box, .search-input { flex: 1; height: 42px; border: 0; border-radius: 22px; background: #eff1ee; color: #76817c; display: flex; align-items: center; gap: 9px; padding: 0 15px; text-align: left; }
.search-input input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 13px; }
.home-search-box { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 15px; background: #eff1ee; color: #76817c; }
.home-search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.home-search-box input::placeholder,.search-input input::placeholder { color: var(--placeholder-color,#9aa39f); opacity: var(--placeholder-opacity,.72); }
.inline-scan { width: 32px; height: 32px; flex: 0 0 32px; border: 0; border-left: 1px solid #d8ddda; background: transparent; color: var(--brand); font-size: 18px; }
.inline-scan img { margin:auto; object-fit:contain; display:block; }
.home-search-results { display: none; position: absolute; z-index: 20; top: 88px; left: 22px; right: 22px; max-height: 300px; overflow: auto; padding: 7px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 16px 35px rgba(17,48,38,.2); }
.home-search-results.show { display: block; }
.home-search-results button { width: 100%; border: 0; border-bottom: 1px solid #eff1ee; padding: 9px; background: #fff; display: flex; align-items: center; gap: 10px; text-align: left; }
.home-search-results button:last-child { border-bottom: 0; }
.home-search-results button > span { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 10px; }
.home-search-results button > div { display: flex; flex-direction: column; gap: 4px; }
.home-search-results small { color: #a84631; }
.home-search-results p { margin: 18px; color: var(--muted); text-align: center; font-size: 11px; }
.scan-btn { width: 48px; height: 44px; border: 0; background: transparent; color: var(--brand); font-size: 21px; line-height: 15px; display: flex; flex-direction: column; align-items: center; }
.scan-btn small { font-size: 9px; font-weight: 700; margin-top: 4px; }
.hero { margin: 6px 14px 14px; color: #fff; background-size: cover; overflow: hidden; position: relative; display: flex; align-items: end; transition: .2s; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(4,22,16,.78),rgba(4,22,16,.04)); }
.hero > div { z-index: 1; padding: 22px; }
.hero small { letter-spacing: .16em; opacity: .8; }
.hero h2 { margin: 8px 0 6px; font-family: Georgia,"Songti SC",serif; font-size: 25px; line-height: 1.25; font-weight: 500; max-width: 300px; }
.hero p { margin: 0; font-size: 12px; opacity: .82; }
.quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 0 14px; }
.quick-links button { min-height: var(--quick-height,66px); border: 0; border-radius: var(--quick-radius,14px); background: #fff; padding: 13px; display: flex; align-items: center; gap: 10px; text-align: left; box-shadow: 0 4px 16px rgba(23,68,56,.05); }
.ui-image { position: relative; isolation: isolate; overflow: hidden; }
.ui-bg-image { position:absolute !important; inset:0; z-index:0 !important; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.ui-image > :not(.ui-bg-image) { position:relative; z-index:1; }
.quick-links button > b { width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center; background: #e9e0cd; color: #775b32; font-family: serif; }
.quick-links button > b img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.quick-links span { display: flex; flex-direction: column; gap: 3px; }
.quick-links strong { font-size: 13px; }
.quick-links small { color: var(--muted); font-size: 9px; }
.live-card { margin: 10px 14px 0; padding: 15px; color: #fff; background: linear-gradient(135deg,#77383b,#b35647); border-radius: 15px; display: flex; align-items: center; justify-content: space-between; }
.live-card div { display: flex; flex-direction: column; gap: 4px; }
.live-card span { align-self: flex-start; background: #fff; color: #a43c37; border-radius: 8px; padding: 2px 6px; font-size: 8px; font-weight: 700; }
.live-card strong { font-size: 13px; }
.live-card small { opacity: .72; font-size: 9px; }
.live-card button { border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.12); color: #fff; border-radius: 12px; padding: 8px 10px; font-size: 11px; }
.section-block { padding: 20px 14px 0; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 11px; }
.section-heading small { color: var(--gold); font-size: 9px; letter-spacing: .15em; }
.section-heading h3 { margin: 2px 0 0; font-size: 18px; }
.section-heading button { border: 0; color: var(--muted); background: transparent; font-size: 11px; }
.category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.category-grid button { min-height: 78px; border: 0; border-radius: var(--radius); padding: 14px; color: #fff; text-align: left; position: relative; overflow: hidden; background: var(--category); }
.category-grid button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(18,32,27,.08),rgba(18,32,27,.6)); opacity: var(--opacity); }
.category-grid b,.category-grid small { position: relative; z-index: 1; display: block; }
.category-grid b { font-family: Georgia,"Songti SC",serif; font-size: 17px; }
.category-grid small { opacity: .78; margin-top: 4px; font-size: 9px; }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.product-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 18px rgba(39,52,47,.06); }
.media-button { width: 100%; border: 0; padding: 0; background: none; display: block; }
.product-media { width: 100%; aspect-ratio: 4/3; background-size: cover !important; background-position: center; display: flex; align-items: center; justify-content: center; padding: 14px; color: rgba(31,35,28,.7); font-family: Georgia,"Songti SC",serif; text-align: center; position: relative; overflow: hidden; }
.product-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%,rgba(255,255,255,.3),transparent 55%); }
.detail-gallery { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; }
.detail-gallery .detail-original { min-width:100%; aspect-ratio:4/3; object-fit:cover; scroll-snap-align:start; }
.product-media > span { position: relative; z-index: 1; font-size: 13px; }
.sold-stamp { position: absolute; right: 8px; top: 8px; z-index: 2; width: 43px; height: 43px; border: 3px double #a44234; color: #a44234; border-radius: 50%; display: grid; place-items: center; transform: rotate(-13deg); font-family: serif; font-style: normal; font-weight: 800; background: rgba(255,255,255,.68); }
.sold-image { position:absolute; right:8px; top:8px; z-index:2; object-fit:contain; }
.product-copy { padding: 10px; }
.product-copy > strong { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-copy > p { height: 28px; margin: 5px 0 9px; color: var(--muted); font-size: 9px; line-height: 1.45; overflow: hidden; }
.product-copy > div { display: flex; justify-content: space-between; align-items: center; }
.product-copy span,.list-product > div > div span,.detail-price { color: #a84631; font-weight: 800; }
.round-add { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: var(--brand); }

.category-page .search-row select { max-width: 105px; border: 0; outline: 0; background: transparent; color: var(--brand); font-size: 11px; font-weight: 700; }
.filter-note { padding: 0 15px 9px; background: #fff; color: #8a948f; font-size: 9px; }
.category-layout { display: grid; grid-template-columns: 92px 1fr; min-height: calc(100% - 74px); }
.category-layout > aside { background: #ece8df; padding: 10px 0; }
.category-layout > aside button { width: 100%; min-height: 47px; padding: 7px; border: 0; background: transparent; color: #68736f; font-size: 11px; position: relative; }
.category-layout > aside button.active { color: var(--brand); background: #f5f1e9; font-weight: 800; }
.category-layout > aside button.active::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--gold); }
.category-layout > section { padding: 10px; }
.result-count { color: var(--muted); font-size: 9px; margin: 0 0 8px; }
.list-product { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 11px; align-items:stretch; background: #fff; padding: 9px; border:1px solid rgba(23,68,56,.06); border-radius: 12px; margin-bottom: 10px; box-shadow:0 7px 20px rgba(28,58,47,.06); }
.list-product > button { height:100%; min-height:96px; border: 0; padding: 0; background: #f5f5f2; border-radius:9px; overflow:hidden; }
.list-media { width:100%; height:100%; min-height:96px; border-radius: 9px; }
.list-media img { width:100%; height:100%; object-fit:contain; background:#f8f8f5; }
.list-product > div { min-width: 0; min-height:100%; padding: 3px 0 2px; display:flex; flex-direction:column; }
.list-product > div > strong { min-height:30px; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size: 11px; line-height:1.4; overflow: hidden; }
.list-product > div > p { margin: 5px 0 8px; color: var(--muted); font-size: 9px; line-height: 1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.list-product > div > div { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.list-product > div > div { margin-top:auto; }
.list-product > div > div button { border: 0; background: var(--brand); color: #fff; border-radius: 10px; padding: 5px 8px; font-size: 9px; }
.empty-state { padding: 60px 20px; color: var(--muted); text-align: center; line-height: 2; }
.empty-state.tall { padding-top: 180px; }
.empty-state button { border: 0; border-radius: 16px; background: var(--brand); color: #fff; padding: 8px 18px; }

.back-button { margin: 10px 12px; border: 0; background: rgba(255,255,255,.88); color: var(--brand); border-radius: 14px; padding: 7px 12px; }
.detail-media { aspect-ratio: 4/3; margin: 0 12px; width: calc(100% - 24px); border-radius: 18px; }
.detail-media > span { font-size: 20px; }
.detail-summary { margin: 12px; padding: 16px; border-radius: 16px; background: #fff; }
.detail-price { font-size: 22px; }
.detail-price del { margin-left: 7px; color: #9aa29f; font-size: 11px; font-weight: 400; }
.detail-summary h2 { margin: 8px 0 4px; font-size: 19px; }
.detail-summary > p { margin: 0; color: var(--muted); font-size: 11px; }
.tag-row { display: flex; gap: 5px; flex-wrap: wrap; margin: 12px 0; }
.tag-row span { color: #705632; background: #f1eadc; padding: 3px 7px; border-radius: 9px; font-size: 9px; }
.identity-price { border-top: 1px solid var(--line); padding-top: 10px; display: flex; justify-content: space-between; font-size: 11px; }
.identity-price strong { color: #a84631; }
.detail-services,.detail-tabs,.channel-share,.video-preview { margin: 10px 12px; background: #fff; border-radius: 15px; padding: 14px; }
.detail-services > div { display: grid; grid-template-columns: 54px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eff0ed; font-size: 10px; }
.detail-services > div:last-child { border-bottom: 0; }
.detail-services span { color: var(--muted); }
.video-preview { min-height: 76px; display: grid; place-items: center; background: #243a32; color: #fff; font-size: 11px; }
.video-preview.muted { background: #e7e4dc; color: #7c847f; }
.detail-tabs > div:first-child { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.detail-tabs > div:first-child button { padding: 9px; border: 0; background: transparent; color: var(--muted); }
.detail-tabs > div:first-child button.active { color: var(--brand); font-weight: 800; border-bottom: 2px solid var(--brand); }
.detail-tabs dl { margin: 8px 0 0; }
.detail-tabs dl > div { display: grid; grid-template-columns: 90px 1fr; padding: 9px 0; border-bottom: 1px solid #eff0ed; font-size: 10px; }
.detail-tabs dt { color: var(--muted); }
.detail-tabs dd { margin: 0; }
.detail-text { font-size: 11px; color: #5f6964; line-height: 1.8; }
.detail-text h3 { color: var(--ink); }
.detail-text img,.detail-original { display: block; width: 100%; height: auto; object-fit: contain; }
.detail-original { margin: 0; background: #fff; }
.original-media { margin: 10px 12px; padding: 0; overflow: hidden; border-radius: 15px; background: #fff; }
.original-media video { display: block; width: 100%; height: auto; background: #000; }
.original-media small { display: block; padding: 8px 12px; color: var(--muted); }
.channel-share { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.channel-share button { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 9px; color: var(--brand); font-size: 10px; }
.channel-share button:disabled { color: #aaa; }
.detail-actions { position: sticky; bottom: 0; z-index: 4; display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; padding: 10px 12px; background: #fff; }
.detail-actions button { border: 1px solid var(--brand); background: #fff; color: var(--brand); border-radius: 18px; padding: 11px; font-size: 11px; }
.detail-actions .primary { background: var(--brand); color: #fff; }
.detail-actions button:disabled { opacity: .5; }

.page-title { padding: 22px 16px 14px; }
.page-title small { color: var(--gold); letter-spacing: .13em; }
.page-title h2 { margin: 4px 0 0; font-size: 24px; }
.cart-list { padding: 0 12px; }
.cart-list article { background: #fff; border-radius: 14px; padding: 9px; display: grid; grid-template-columns: 105px 1fr; gap: 12px; margin-bottom: 9px; }
.cart-media { border-radius: 9px; }
.cart-list article > div { display: flex; flex-direction: column; align-items: start; gap: 9px; padding-top: 4px; }
.cart-list article strong { font-size: 11px; }
.cart-list article span { color: #a84631; font-weight: 800; }
.stepper { margin-top: auto; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; align-items: center; }
.stepper button { width: 27px; height: 25px; border: 0; background: #f1f2ef; }
.stepper b { min-width: 28px; text-align: center; font-size: 10px; }
.cart-total,.submit-order { position: sticky; bottom: 0; padding: 11px 13px; background: #fff; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 -8px 20px rgba(0,0,0,.05); }
.cart-total span,.submit-order span { display: flex; align-items: baseline; gap: 5px; font-size: 10px; }
.cart-total span b,.submit-order span b { color: #a84631; font-size: 18px; }
.cart-total small { color: var(--muted); }
.cart-total button,.submit-order button { border: 0; border-radius: 20px; color: #fff; background: var(--brand); padding: 11px 22px; }
.checkout-card { margin: 0 12px 10px; padding: 14px; background: #fff; border-radius: 15px; }
.checkout-card h3 { margin: 0 0 10px; font-size: 13px; }
.delivery-option { width: 100%; border: 1px solid var(--line); border-radius: 11px; background: #fff; padding: 10px; margin: 5px 0; text-align: left; display: flex; justify-content: space-between; }
.delivery-option b { font-size: 11px; }
.delivery-option span { color: var(--muted); font-size: 9px; }
.delivery-option.active { border-color: var(--brand); background: #eef4f0; color: var(--brand); }
.checkout-card select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 10px; }
.checkout-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eff0ed; font-size: 10px; }
.address-card p { margin:7px 0 12px; color:var(--muted); font-size:10px; line-height:1.6; }
.address-card button { border:1px solid var(--brand); border-radius:12px; padding:8px 12px; background:#fff; color:var(--brand); font-size:10px; }

.mine-header { padding: 30px 20px 24px; background: radial-gradient(circle at 84% 15%,rgba(216,195,153,.2),transparent 32%),linear-gradient(135deg,#174438,#41695a); color: #fff; display: flex; align-items: center; gap: 14px; box-shadow:0 12px 26px rgba(23,68,56,.16); }
.mine-user-line { display: flex; align-items: center; gap: 9px; }
.mine-user-line button { border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.12); color: #fff; padding: 5px 9px; font-size: 9px; display:flex; align-items:center; gap:5px; }
.mine-user-line .join-button { width:max-content; max-width:calc(100% - 12px); margin-left:auto; padding:5px 10px; white-space:nowrap; overflow:hidden; border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.06); }
.mine-user-line button img { width:14px; height:14px; object-fit:contain; }
.mine-profile { min-width:0; }
.mine-header.join-right .join-button { margin-left:auto; }
.mine-header.join-below .join-button { margin-top:9px; }
.avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #d8c399; color: var(--brand); font-family: Georgia,serif; font-size: 23px; }
.mine-header small { opacity: .7; }
.mine-identity-line { margin-top:7px; display:flex; align-items:center; gap:7px; color:rgba(255,255,255,.7); font-size:10px; }
.mine-identity-line b { color:#fff; font-size:11px; }
.mine-identity-line button { border:1px solid rgba(255,255,255,.38); border-radius:10px; padding:3px 7px; background:rgba(255,255,255,.09); color:#fff; font-size:8px; }
.mine-card,.menu-card { margin: 12px; padding: 14px; border:1px solid rgba(23,68,56,.055); border-radius: 15px; background: #fff; box-shadow:0 7px 20px rgba(27,57,46,.055); }
.identity-card { display: flex; justify-content: space-between; align-items: center; }
.identity-card div { display: flex; align-items: baseline; gap: 13px; }
.identity-card span { color: var(--muted); font-size: 10px; }
.identity-card button { border: 1px solid var(--brand); background: #fff; color: var(--brand); border-radius: 12px; padding: 7px 10px; font-size: 10px; }
.order-icons { display: grid; grid-template-columns: repeat(4,1fr); }
.order-icons button { border: 0; background: transparent; display: flex; flex-direction: column; gap: 6px; color: #58635e; font-size: 9px; }
.order-icons img { align-self:center; object-fit:contain; display:block; }
.order-icons b { color: var(--brand); font-size: 19px; }
.menu-card { padding: 0 14px; }
.menu-card button { width: 100%; border: 0; border-bottom: 1px solid #eff0ed; background: #fff; padding: 13px 0; display: flex; justify-content: space-between; font-size: 11px; }
.support-phone { display: block; text-align: center; color: var(--muted); text-decoration: none; font-size: 9px; }
.trace-page { min-height: 100%; padding-bottom: 28px; background: linear-gradient(180deg,#f4f0e7 0%,#eef2ed 48%,#f5f3ed 100%); }
.trace-head { min-height: 78px; padding: 17px 16px 13px; display:flex; align-items:center; gap:11px; color:#fff; background:linear-gradient(135deg,#173f34,#2c5b49); }
.trace-head > div { flex:1; }.trace-head small { color:#c8d7c6; font-size:9px; letter-spacing:.1em; }.trace-head h2 { margin:4px 0 0; font:500 22px Georgia,"Songti SC",serif; }.trace-back { width:30px; height:30px; border:1px solid rgba(255,255,255,.42); border-radius:50%; color:#fff; background:rgba(255,255,255,.1); font-size:23px; line-height:20px; }.trace-mark { width:32px; height:32px; display:grid; place-items:center; border:1px solid rgba(220,198,153,.7); border-radius:50%; color:#e1ca98; font:18px Georgia,serif; }
.trace-intro { padding:25px 23px 20px; text-align:center; }.trace-seal { width:54px; height:54px; margin:0 auto 12px; display:grid; place-items:center; border:1px solid #b99456; border-radius:50%; color:#997338; background:#f9f4e8; font:27px Georgia,serif; box-shadow:0 0 0 7px rgba(185,148,86,.09); }.trace-intro h3 { margin:0 0 7px; font:500 20px Georgia,"Songti SC",serif; color:#223a30; }.trace-intro p { margin:0 auto; max-width:280px; color:#748079; font-size:10px; line-height:1.8; }
.trace-query-card { margin:0 14px 13px; padding:16px; border:1px solid rgba(23,68,56,.08); border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(31,62,48,.08); }.trace-query-card > label { display:block; margin-bottom:8px; color:#3c554a; font-weight:700; font-size:11px; }.trace-input-wrap { display:flex; align-items:center; border:1px solid #d9e0db; border-radius:11px; background:#fbfcfa; overflow:hidden; }.trace-input-wrap:focus-within { border-color:#5d8b75; box-shadow:0 0 0 3px rgba(40,94,77,.09); }.trace-input-wrap input { min-width:0; flex:1; border:0; outline:0; padding:12px 11px; background:transparent; color:#203c31; font-size:11px; letter-spacing:.06em; }.trace-input-wrap input::placeholder { color:#a0aaa5; letter-spacing:0; }.trace-input-wrap button { width:43px; align-self:stretch; border:0; border-left:1px solid #e4e9e5; background:#f2f6f2; color:#2b614d; font-size:18px; }.trace-submit { width:100%; margin-top:12px; padding:11px; border:0; border-radius:12px; color:#fff; background:#1d503f; font-size:11px; font-weight:700; }.trace-demo { display:block; margin:10px auto 0; padding:0; border:0; background:transparent; color:#9a7840; font-size:9px; }
.trace-empty { margin:0 14px 13px; padding:20px 16px; border:1px dashed #cfd9d2; border-radius:15px; text-align:center; background:rgba(255,255,255,.55); }.trace-empty-icon { width:42px; height:42px; margin:0 auto 9px; display:grid; place-items:center; border-radius:50%; color:#789085; background:#e7efe9; font-size:22px; }.trace-empty strong { display:block; color:#395547; font-size:11px; }.trace-empty p { margin:6px 0 0; color:#8b9891; font-size:9px; line-height:1.7; }
.trace-result-card { margin:0 14px 13px; padding:16px; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(31,62,48,.1); }.trace-result-title { display:flex; align-items:center; gap:9px; padding-bottom:13px; border-bottom:1px solid #edf0ed; }.trace-ok { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#3c8a62; font-size:17px; font-weight:800; }.trace-result-title div { flex:1; display:flex; flex-direction:column; gap:3px; }.trace-result-title strong { color:#226346; font-size:13px; }.trace-result-title small { color:#87948d; font-size:9px; }.trace-result-title > b { padding:4px 7px; border-radius:7px; color:#26704a; background:#e6f4eb; font-size:9px; }.trace-product { display:grid; grid-template-columns:58px 1fr; gap:11px; align-items:center; padding:14px 0; }.trace-product-art { width:58px; height:58px; display:grid; place-items:center; border-radius:10px; color:#f5e9c8; background:linear-gradient(145deg,#1b493a,#95713b); font:12px Georgia,serif; line-height:1.25; text-align:center; }.trace-product div:last-child { min-width:0; display:flex; flex-direction:column; gap:3px; }.trace-product small { color:#8b9891; font-size:9px; }.trace-product strong { color:#293f35; font-size:11px; line-height:1.45; }.trace-product p { margin:0; color:#87938d; font-size:9px; }.trace-details { margin:0; padding:11px 0 3px; border-top:1px solid #edf0ed; display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }.trace-details div { display:flex; flex-direction:column; gap:3px; }.trace-details dt { color:#89958f; font-size:9px; }.trace-details dd { margin:0; color:#394f45; font-size:10px; }.trace-timeline { margin-top:13px; padding-top:12px; border-top:1px solid #edf0ed; }.trace-timeline > div { display:flex; gap:8px; padding:5px 0; }.trace-timeline i { width:17px; height:17px; display:grid; place-items:center; border-radius:50%; color:#2f7954; background:#e6f3eb; font-style:normal; font-size:10px; }.trace-timeline span { display:flex; flex-direction:column; gap:2px; }.trace-timeline b { color:#4d6258; font-size:9px; }.trace-timeline small { color:#98a39e; font-size:8px; }.trace-tip { margin:11px 0 0; padding:8px 9px; border-radius:8px; color:#92723e; background:#fbf5e7; font-size:8px; line-height:1.6; }.trace-help { margin:0 14px; padding:13px 15px; border-radius:13px; background:rgba(255,255,255,.7); }.trace-help strong { color:#53655b; font-size:10px; }.trace-help p { margin:5px 0 0; color:#8b9690; font-size:9px; line-height:1.65; }.trace-footer { margin:17px 0 0; color:#9ca7a1; text-align:center; font-size:8px; line-height:1.7; letter-spacing:.08em; }
.pickup-code { display:flex; flex-direction:column; align-items:center; gap:7px; }
.pickup-code strong,.verification-code { color:var(--brand); font-size:30px; letter-spacing:.18em; font-weight:800; }
.pickup-code small { color:var(--muted); }
.staff-verify { width:100%; border:0; background:#fff; color:var(--brand); display:flex; justify-content:center; align-items:center; gap:10px; padding:10px; }
.partner-manage article { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:10px 0; border-bottom:1px solid #edf0ee; }.partner-manage article small { grid-column:1/-1; color:#7a8580; }
.performance-mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.performance-mini-grid div { padding:10px; border-radius:9px; background:#f1f5f3; display:flex; flex-direction:column; gap:4px; }.performance-mini-grid span { color:#7a8580; font-size:9px; }.performance-mini-grid b { color:var(--brand); font-size:13px; }
.withdraw-balance { margin-top:12px; padding-top:12px; border-top:1px solid #edf0ee; display:flex; align-items:center; justify-content:space-between; }.withdraw-balance > span { display:flex; flex-direction:column; gap:3px; }.withdraw-balance small { color:#89948f; font-size:8px; }.withdraw-balance button { border:0; border-radius:8px; padding:8px 10px; color:#fff; background:var(--brand); }
.store-list { display: grid; gap: 12px; padding: 0 12px 18px; }
.store-card { padding: 20px; color: #fff; background: linear-gradient(135deg,#174438,#6d5437); display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 24px rgba(23,68,56,.16); }
.store-card small { color: #dbc9a5; letter-spacing: .12em; }
.store-card h3 { margin: 7px 0; font-size: 20px; }
.store-card p { margin: 0; color: rgba(255,255,255,.72); font-size: 10px; }
.store-card > div:last-child { display: flex; gap: 8px; margin-top: 16px; }
.store-card button { flex: 1; border: 1px solid rgba(255,255,255,.5); padding: 9px; background: rgba(255,255,255,.12); color: #fff; }

.admin-workspace { min-height: calc(100vh - 68px); display: grid; grid-template-columns: 226px 1fr; background: linear-gradient(145deg,#f5f7f6,#eef2f0); }
.admin-sidebar { background: #17211e; color: #fff; min-height: calc(100vh - 68px); padding: 24px 14px; position: sticky; top: 68px; height: calc(100vh - 68px); display: flex; flex-direction: column; }
.admin-brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 25px; border-bottom: 1px solid #33413c; }
.admin-brand > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #d8c399; color: var(--brand); font-family: serif; font-size: 19px; }
.admin-brand div { display: flex; flex-direction: column; }
.admin-brand small { color: #8fa099; margin-top: 3px; }
.admin-sidebar nav { padding-top: 17px; }
.admin-sidebar nav button { width: 100%; border: 0; border-radius: 9px; background: transparent; color: #a9b6b1; text-align: left; padding: 11px 14px; margin: 3px 0; }
.admin-sidebar nav button.active { color: #fff; background: #2b3b35; box-shadow: inset 3px 0 #d8c399; }
.admin-sidebar > p { margin: auto 10px 0; color: #72837c; font-size: 11px; line-height: 1.7; }
.admin-main { padding: 32px clamp(22px,3.2vw,52px); min-width: 0; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.admin-header small { color: #8b9893; letter-spacing: .13em; }
.admin-header h1 { margin: 5px 0 0; font-size: 26px; }
.admin-primary { border: 0; border-radius: 9px; background: var(--brand); color: #fff; padding: 10px 16px; }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 18px; }
.metric-grid article { min-height: 124px; padding: 20px; background: #fff; border: 1px solid #e7ebe8; border-radius: 13px; display: flex; flex-direction: column; }
.metric-grid article span { color: #6e7a75; font-size: 12px; }
.metric-grid article b { margin: 13px 0 5px; font-size: 28px; }
.metric-grid article small { color: #9aa39f; }
.metric-grid article.warning { border-color: #e7c8bd; background: #fffaf8; }
.metric-grid article.warning b { color: var(--danger); }
.metric-grid.compact article { min-height: 96px; }
.admin-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.admin-panel { background: #fff; border: 1px solid #e5e9e6; border-radius: 13px; padding: 20px; box-shadow: 0 3px 16px rgba(25,50,41,.03); }
.panel-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.panel-title h3 { margin: 0; font-size: 15px; }
.todo-list { margin: 0; padding: 0; list-style: none; }
.todo-list li { display: grid; grid-template-columns: 32px 1fr; align-items: center; padding: 12px 0; border-bottom: 1px solid #eef0ee; }
.todo-list b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: #f2e8e2; color: var(--danger); }
.todo-list span { color: #59645f; font-size: 13px; }
.status-list > div { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid #eef0ee; color: #66716c; font-size: 13px; }
.status-list b { color: #a36c3a; }
.status-list b.ok { color: #2d7956; }
.table-tools { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.table-tools input { width: 330px; border: 1px solid #dfe4e1; border-radius: 9px; padding: 10px 12px; }
.table-tools span { color: #919c97; font-size: 11px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-table th { color: #76827d; background: #f6f8f7; font-weight: 600; text-align: left; white-space: nowrap; }
.admin-table th,.admin-table td { padding: 12px 10px; border-bottom: 1px solid #ebeeec; vertical-align: middle; }
.admin-table td > small { display: block; color: #929d98; margin-top: 4px; }
.product-cell { display: flex; align-items: center; gap: 9px; min-width: 180px; }
.product-cell > span { width: 42px; height: 42px; border-radius: 6px; display: grid; place-items: center; overflow:hidden; font-size: 8px; color: rgba(0,0,0,.5); }
.product-list-thumb img { width:100%; height:100%; object-fit:contain; background:#f5f6f5; }
.product-cell div { display: flex; flex-direction: column; }
.product-cell small { color: #929d98; margin-top: 3px; }
.product-inline-table { width: 100%; min-width: 920px; table-layout: fixed; }
.product-inline-table th:nth-child(1),.product-inline-table td:nth-child(1) { width: 25%; }
.product-inline-table th:nth-child(2),.product-inline-table td:nth-child(2) { width: 21%; }
.product-inline-table th:nth-child(3),.product-inline-table td:nth-child(3) { width: 13%; }
.product-inline-table th:nth-child(4),.product-inline-table td:nth-child(4) { width: 11%; }
.product-inline-table th:nth-child(5),.product-inline-table td:nth-child(5) { width: 11%; }
.product-inline-table th:nth-child(6),.product-inline-table td:nth-child(6) { width: 12%; }
.product-inline-table th:nth-child(7),.product-inline-table td:nth-child(7) { width: 7%; }
.product-inline-input,.product-inline-status { width: 100%; min-width: 88px; box-sizing: border-box; border: 1px solid #dfe4e1; border-radius: 7px; padding: 8px 9px; background: #fff; color: #30463d; outline: none; }
.product-inline-table .product-inline-input,.product-inline-table .product-inline-status { max-width: 280px; }
.product-inline-input:focus,.product-inline-status:focus { border-color: #5a826f; box-shadow: 0 0 0 3px rgba(40,94,77,.08); }
.product-inline-input.number { min-width: 78px; max-width: 160px; }
.product-inline-name { min-width: 0; max-width: 390px !important; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-inline-group { max-width: 280px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-inline-status { max-width: 180px !important; }
.product-inline-table .product-inline-status { width:150px; min-width:150px; max-width:150px !important; height:36.5px; box-sizing:border-box; border-radius:8px; padding:8px 9px; appearance:auto; }
.product-inline-table .product-cell { min-width: 0; }
.product-inline-table .product-cell .product-inline-name { flex: 1 1 auto; }
.product-inline-table .product-list-row td { height: 66px; }
.product-inline-table .product-cell { display:flex; align-items:center; gap:10px; min-width:0; }
.product-list-placeholder { width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center; border-radius:9px; color:#fff; font-size:10px; }
.product-list-name,.product-list-group { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.product-inline-table .product-cell > .product-list-thumb,.product-inline-table .product-cell > .product-list-placeholder { width:52px; height:52px; flex:0 0 52px; }
.product-inline-table .product-cell > .product-list-name { width:auto; height:auto; display:block; flex:1 1 auto; border-radius:0; color:#30463d; font-size:15px; line-height:1.35; font-weight:650; }
.product-list-group { color:#66736d; }
.product-metric-cell { display:inline-flex; align-items:center; gap:6px; min-width:0; white-space:nowrap; }
.product-metric-value { color:#30463d; font-weight:600; }
.product-hover-edit { width:auto; min-width:36px; height:24px; padding:0 7px; border:1px solid transparent; border-radius:6px; background:#edf5f1; color:#2f705a; font-size:11px; line-height:22px; cursor:pointer; opacity:0; pointer-events:none; transform:translateX(-4px); transition:opacity .16s ease,transform .16s ease,background .16s ease; }
.product-metric-cell:hover .product-hover-edit,.product-metric-cell:focus-within .product-hover-edit { opacity:1; pointer-events:auto; transform:translateX(0); }
.product-hover-edit:hover,.product-hover-edit:focus-visible { border-color:#9fc5b5; background:#dceee6; outline:none; }
.product-status-cell { min-width:0; }
.inline-product-editor-modal { width:min(500px,94vw); padding:0; overflow:hidden; border-radius:16px; }
.inline-product-editor { padding:25px 27px 23px; background:#fff; }
.inline-editor-heading { margin-bottom:18px; }
.inline-editor-heading small { color:#a07b4f; letter-spacing:.08em; }
.inline-editor-heading h2 { margin:6px 0 5px; font-size:20px; color:#203f35; }
.inline-editor-heading p { margin:0; color:#8a9590; font-size:12px; }
.inline-product-editor .form-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.inline-product-editor .form-actions { margin-top:22px; }
.inline-stock-note { display: block; margin-top: 5px; color: #b34d3f; font-size: 10px; white-space: nowrap; }
.status { font-style: normal; padding: 4px 8px; border-radius: 9px; font-size: 10px; white-space: nowrap; }
.status.on_sale { color: #23734f; background: #e8f3ed; }
.status.out_of_stock { color: #a64232; background: #f7eae6; }
.status.off_sale { color: #777; background: #eee; }
.link-button { border: 0; color: #276c55; background: transparent; padding: 5px; }
.table-footnote { margin: 15px 0 0; color: #8b9691; font-size: 11px; line-height: 1.7; }

.admin-form .form-intro,.form-section > p { color: #86918c; font-size: 12px; margin: 0 0 18px; }
.form-section { padding:20px; margin-bottom:16px; border:1px solid #e5eae7; border-radius:14px; background:linear-gradient(180deg,#fff,#fbfcfb); box-shadow:0 5px 16px rgba(26,54,44,.035); }
.form-section h3 { margin: 0 0 7px; font-size: 15px; color:#24473b; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 18px; }
.form-grid label,.category-admin-grid label { display: flex; flex-direction: column; gap: 7px; color: #59645f; font-size: 12px; }
.form-grid label.wide { grid-column: 1/-1; }
.form-grid input:not([type="checkbox"]):not([type="range"]),.form-grid select,.form-grid textarea,.category-admin-grid input:not([type="range"]):not([type="color"]) { width: 100%; border: 1px solid #dfe4e1; border-radius: 8px; padding: 9px 10px; background: #fff; outline: none; }
.form-grid textarea { min-height: 90px; resize: vertical; line-height: 1.6; }
.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus { border-color: #5a826f; box-shadow: 0 0 0 3px rgba(40,94,77,.08); }
.form-grid label.check { flex-direction: row; align-items: center; padding-top: 23px; }
.form-grid label span { color: #99a29e; font-size: 10px; }
.upload-field { padding: 14px; background: #f7f8f7; border: 1px dashed #cfd7d3; border-radius: 10px; }
.upload-field input[type="file"]::file-selector-button { margin-right:10px; border:0; border-radius:8px; padding:8px 12px; background:var(--brand); color:#fff; cursor:pointer; }
.media-upload { padding:12px 14px; border:1px solid #e6e9e7; border-radius:12px; background:#fbfcfb; }
.media-upload-title { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.media-upload-title b { color:#48534e; font-size:12px; }
.media-upload-title small { color:#98a19d; font-size:10px; }
.media-tile-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.media-tile,.media-add-tile { width:88px; height:88px; flex:0 0 88px; border-radius:10px; overflow:hidden; box-sizing:border-box; }
.media-tile { position:relative; display:grid; place-items:center; background:#f0f2f1; color:#a2aaa6; }
.media-tile img { width:100%; height:100%; object-fit:contain; display:block; background:#fff; }
.empty-picture { font-size:25px; }
.media-add-tile { border:1px dashed #cbd2ce; display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:7px !important; color:#8d9692 !important; background:#fff; cursor:pointer; }
.media-add-tile > span { font-size:23px !important; color:#9aa29e !important; }
.media-add-tile > b { font-size:11px; font-weight:500; }
.tile-actions { position:absolute; left:4px; right:4px; bottom:4px; display:flex; gap:3px; z-index:2; }
.tile-actions button { flex:1; border:0; border-radius:5px; padding:4px 2px; font-size:9px; color:#fff; background:rgba(17,37,30,.78); cursor:pointer; }
.media-upload.compact { grid-column:auto; }
.media-upload.compact .media-tile,.media-upload.compact .media-add-tile { width:72px; height:72px; flex-basis:72px; }
.product-media-section { padding:14px; border:1px solid #e5e8e6; border-radius:12px; background:#fbfcfb; }
.media-manager-note { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-bottom:11px; font-size:11px; }
.media-manager-note b { color:#e96d19; background:#fff4eb; padding:5px 8px; border-radius:7px; }
.media-manager-note span { color:#7f8984; }
.media-manager-note em { color:#6f8bb7; font-style:normal; }
.sortable-media-row { display:flex; flex-wrap:wrap; gap:10px; }
.sortable-media-tile,.sortable-add-tile { width:96px; height:96px; flex:0 0 96px; border-radius:10px; box-sizing:border-box; overflow:hidden; }
.sortable-media-tile { position:relative; background:#eef1ef; cursor:grab; }
.sortable-media-tile > img { width:100%; height:100%; object-fit:contain; display:block; background:#fff; }
.sortable-media-tile > i { position:absolute; left:5px; top:5px; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; color:#fff; background:rgba(13,35,27,.76); font-style:normal; font-size:10px; }
.sortable-media-tile > div { position:absolute; left:4px; right:4px; bottom:4px; display:flex; gap:3px; }
.sortable-media-tile button { flex:1; border:0; border-radius:5px; padding:4px 1px; color:#fff; background:rgba(18,45,36,.8); font-size:9px; }
.sortable-add-tile { border:1px dashed #cbd2ce; display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:7px !important; color:#8f9894 !important; cursor:pointer; }
.sortable-add-tile > span { font-size:25px !important; color:#99a19d !important; }
.sortable-add-tile > b { font-size:11px; font-weight:500; }
.compact-video-upload { display:grid !important; grid-template-columns:140px 1fr; align-items:center; gap:10px !important; padding:12px 14px; border:1px solid #e5e8e6; border-radius:12px; background:#fbfcfb; }
.compact-video-upload input { font-size:11px; }
.compact-video-upload span { grid-column:2; }
.crop-backdrop { position:fixed; inset:0; z-index:240; display:grid; place-items:center; padding:24px; background:rgba(8,19,15,.72); }
.crop-dialog { width:min(560px,94vw); max-height:92vh; overflow:auto; padding:24px; border-radius:18px; background:#fff; box-shadow:0 28px 80px rgba(0,0,0,.35); }
.crop-dialog h2 { margin:0 0 7px; }.crop-dialog > p { margin:0 0 16px; color:#7a8580; font-size:12px; }
.crop-preview { width:min(100%,480px); margin:auto; overflow:hidden; border-radius:12px; background:#edf0ee; cursor:grab; touch-action:none; }
.crop-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.crop-zoom-control { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin:14px 0 0; color:#74807b; font-size:11px; }
.crop-zoom-control input { width:100%; accent-color:var(--brand); }
.crop-dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.crop-dialog-actions button { border:1px solid #dbe1de; border-radius:8px; padding:9px 18px; background:#fff; color:#53605a; }
.crop-dialog-actions button.primary { border-color:var(--brand); background:var(--brand); color:#fff; }
.store-decor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.store-decor-grid fieldset { border:1px solid #e1e5e3; border-radius:12px; padding:14px; }.store-decor-grid legend { color:var(--brand); font-weight:700; padding:0 7px; }
.upload-input { position:fixed; left:-10000px; top:0; width:1px !important; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.form-actions button { border: 1px solid #d6dcd8; background: #fff; color: #606b66; border-radius: 9px; padding: 9px 18px; }
.form-actions button.primary { border-color: var(--brand); background: var(--brand); color: #fff; }
.category-admin-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; }
.category-admin-grid fieldset { border: 1px solid #e0e5e2; border-radius: 11px; padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.category-admin-grid legend { color: var(--brand); font-weight: 700; padding: 0 7px; }
.category-management-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.category-admin-card { min-width:0; padding:18px; border:1px solid #e0e5e2; border-radius:13px; background:linear-gradient(180deg,#fff,#fbfcfb); box-shadow:0 4px 14px rgba(25,50,41,.035); }
.category-admin-heading { display:flex; align-items:flex-start; gap:11px; min-width:0; }
.category-color-dot { width:34px; height:34px; flex:0 0 34px; border-radius:10px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.category-admin-heading div { min-width:0; }
.category-admin-heading small { color:#9a8060; letter-spacing:.1em; font-size:10px; }
.category-admin-heading h3 { margin:4px 0 4px; color:#24473b; font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.category-admin-heading p { margin:0; color:#87928d; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.category-admin-count { display:flex; align-items:center; justify-content:space-between; margin:17px 0 8px; padding:10px 12px; border-radius:9px; background:#f2f5f3; color:#7c8983; font-size:11px; }
.category-admin-count b { color:var(--brand); font-size:18px; }
.category-admin-actions { display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.category-admin-actions .link-button { padding:0; font-size:12px; }
.category-admin-card .media-upload { margin-top:12px; }
.product-category-picker { position:relative; min-width:0; z-index:1; --category-dropdown-width:150px; }
.product-category-picker summary { display:flex; align-items:center; gap:7px; min-width:0; padding:8px 9px; border:1px solid transparent; border-radius:8px; color:#4d6258; cursor:pointer; list-style:none; white-space:nowrap; }
.product-category-picker summary::-webkit-details-marker { display:none; }
.product-category-picker summary span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.product-category-picker summary b { margin-left:auto; color:#8b9891; font-size:13px; font-weight:500; }
.product-category-picker[open] { z-index:30; }
.product-category-picker[open] summary { border-color:#bcd4c9; background:#f5faf7; color:var(--brand); }
.product-category-picker.compact { width:150px; }
.product-category-picker.compact summary { width:150px; max-width:150px; box-sizing:border-box; }
.category-picker-menu { position:absolute; top:calc(100% + 4px); left:0; width:var(--category-dropdown-width); min-width:var(--category-dropdown-width); max-width:calc(100vw - 24px); box-sizing:border-box; padding:7px; border:1px solid #dce5e0; border-radius:10px; background:#fff; box-shadow:0 12px 28px rgba(23,52,41,.16); }
.category-picker-menu label { display:flex; flex-direction:row !important; align-items:center; gap:7px !important; padding:8px 7px; border-radius:7px; color:#4e6259; font-size:11px; white-space:nowrap; cursor:pointer; }
.category-picker-menu label:hover { background:#f1f6f3; }
.category-picker-menu input[type="checkbox"] { width:auto !important; flex:0 0 auto; }
.category-picker-menu > small { display:block; padding:8px; color:#98a39e; font-size:11px; }
.category-product-list { display:grid; gap:7px; max-height:420px; overflow:auto; margin:14px 0; }
.category-product-option { display:flex; align-items:center; gap:10px; padding:10px 11px; border:1px solid #e2e8e4; border-radius:9px; background:#fbfcfb; cursor:pointer; }
.category-product-option:hover { border-color:#bcd4c9; background:#f5faf7; }
.category-product-option input { flex:0 0 auto; }
.category-product-option span { display:flex; flex-direction:column; min-width:0; gap:3px; }
.category-product-option b { color:#3d554a; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.category-product-option small { color:#929d98; font-size:10px; }
.decorate-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.decorate-tabs button { border: 1px solid #dce2df; border-radius: 10px; padding: 9px 15px; background: #fff; color: #66716c; }
.decorate-tabs button.active { border-color: var(--brand); background: var(--brand); color: #fff; }
.inline-fields { display: grid; grid-template-columns: 70px 1fr; gap: 8px; }
.role-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid #edf0ee; }
.role-row span { display: flex; flex-direction: column; gap: 4px; }
.role-row small,.member-card small { color: #929c98; }
.role-row strong { color: var(--brand); }
.role-create { display:grid; grid-template-columns:1.3fr 1fr 1fr auto auto; gap:10px; align-items:center; margin:14px 0; }.role-create input,.role-create select { border:1px solid #dfe4e1; border-radius:8px; padding:9px; }
.role-edit-row { display:grid; grid-template-columns:1.2fr 110px 82px 105px 60px; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid #edf0ee; }.role-edit-row input { min-width:0; border:1px solid #e0e4e2; border-radius:7px; padding:7px; }.role-edit-row label,.role-edit-row span { color:#7b8580; font-size:11px; }.role-edit-row button { border:0; color:var(--brand); background:transparent; }
.role-permission-check { display:flex; align-items:center; gap:5px; white-space:nowrap; color:#59645f; font-size:11px; }
.store-admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.store-admin-card { padding:0; overflow:hidden; display:grid; grid-template-columns:150px 1fr; min-height:260px; }
.store-admin-card > img,.store-card-placeholder { width:100%; height:100%; object-fit:cover; background:linear-gradient(145deg,#1d4a3c,#80623e); display:grid; place-items:center; color:#dec99f; font:52px Georgia,serif; }
.store-admin-copy { padding:22px; display:flex; flex-direction:column; align-items:flex-start; }
.store-admin-copy > small { color:#9a8060; letter-spacing:.13em; }.store-admin-copy h3 { margin:6px 0 4px; font-size:20px; }.store-admin-copy p { margin:0; color:#7b8781; font-size:12px; line-height:1.6; }
.store-admin-copy dl { width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:18px 0; }.store-admin-copy dl div { padding:9px 6px; border-radius:9px; background:#f2f5f3; text-align:center; }.store-admin-copy dt { color:#84908a; font-size:9px; }.store-admin-copy dd { margin:4px 0 0; color:var(--brand); font-weight:800; }
.store-people-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.store-people-grid fieldset { border:1px solid #e1e6e3; border-radius:11px; padding:12px; }.store-people-grid legend { color:var(--brand); font-weight:700; }.store-people-grid label { display:block; padding:6px 0; color:#5e6a64; font-size:12px; }
.store-permission-list { display:grid; gap:7px; }.store-person-row { display:flex !important; flex-direction:row !important; align-items:center; gap:10px !important; padding:9px 10px; border-radius:9px; background:#f4f6f5; }.store-person-row span { margin-right:auto; display:flex; flex-direction:column; }.store-person-row small { color:#929c97; }.store-moved-note { text-align:center; padding:34px; }.form-hint { color:#87928d; font-size:11px; line-height:1.65; }
.member-phone-search { width:100%; margin:10px 0 4px; border:1px solid #dfe4e1; border-radius:9px; padding:10px 12px; }
.member-info-preview { grid-column:1/-1; padding:14px; border-radius:10px; background:#f2f5f3; color:#244b3d; }
.performance-filters { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:10px; margin-bottom:14px; }.performance-filters input,.performance-filters select { border:1px solid #dfe4e1; border-radius:8px; padding:9px; background:#fff; }
.member-card { display: flex; gap: 12px; align-items: center; }
.avatar.small { width: 42px; height: 42px; font-size: 18px; }
.member-card > div:last-child { display: flex; flex-direction: column; gap: 4px; }
.member-table { margin-top: 18px; }
.member-admin-row { display: grid; grid-template-columns: minmax(190px,1.2fr) minmax(280px,1.5fr) minmax(150px,.8fr) 70px; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid #edf0ee; }
.role-checks { display: flex; gap: 12px; flex-wrap: wrap; }
.role-checks label,.grant-check { color: #59645f; font-size: 12px; white-space: nowrap; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 30px; background: rgba(8,19,15,.66); backdrop-filter: blur(5px); }
.modal { width: min(440px,94vw); max-height: 88vh; overflow: auto; background: #fff; border-radius: 18px; padding: 28px; position: relative; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.modal-close { position: absolute; right: 13px; top: 11px; border: 0; background: transparent; color: #7e8984; font-size: 24px; }
.modal h2 { margin-top: 0; }
.modal-note { color: var(--muted); font-size: 12px; line-height: 1.7; }
.scan-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.scan-options.three { grid-template-columns: repeat(3,1fr); }
.scan-options button { min-height: 130px; border: 1px solid #dfe4e1; border-radius: 13px; background: #f7f9f8; color: var(--brand); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.scan-options b { font-size: 33px; }
.scan-options span { font-size: 12px; }
.modal-phone { display: block; margin-top: 18px; border-radius: 14px; padding: 12px; background: var(--brand); color: #fff; text-align: center; text-decoration: none; }
.mobile-preview-modal { text-align:center; }
.mobile-preview-modal code { display:block; margin:10px 0; color:var(--brand); }
.mobile-preview-modal img { width:240px; max-width:82%; border:8px solid #fff; box-shadow:0 8px 28px rgba(20,55,43,.14); }
.save-success { text-align:center; }.save-success > b { width:58px; height:58px; margin:0 auto 12px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#2f7b5d; font-size:30px; }.save-success h2 { margin:0 0 8px; }.save-success p { color:#7a8580; font-size:12px; }
.login-authorize { display:flex; flex-direction:column; gap:12px; }
.login-authorize small { color:var(--gold); letter-spacing:.15em; }
.login-authorize h2,.login-authorize p { margin:0; }
.login-authorize p { color:var(--muted); font-size:12px; line-height:1.7; }
.login-authorize button { border:1px solid #dce3df; border-radius:13px; padding:12px; background:#fff; color:var(--brand); }
.login-authorize button.primary { border-color:var(--brand); background:var(--brand); color:#fff; }
.login-authorize button:disabled { opacity:.45; }
.startup-modal { padding: 0; overflow: hidden; }
.startup-modal .modal-close { z-index: 2; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; background: rgba(8,19,15,.84); color: #fff; font-size: 28px; line-height: 40px; right: calc(6% + 12px); top: 12px; }
.startup-ad { min-height: 0; max-height: 82vh; margin: 0 auto; padding: 58px 32px 40px; color: #fff; background: radial-gradient(circle at 70% 20%,rgba(219,195,143,.55),transparent 30%),linear-gradient(145deg,#183f34,#71502e); display: flex; flex-direction: column; justify-content: end; box-sizing:border-box; }
.startup-ad small { color: #ddc89f; letter-spacing: .12em; }
.startup-ad h2 { margin: 13px 0 10px; font-family: Georgia,"Songti SC",serif; font-size: 34px; font-weight: 500; }
.startup-ad p { line-height: 1.7; opacity: .8; }
.startup-ad button { align-self: start; margin-top: 20px; border: 0; border-radius: 20px; background: #dec69a; color: #173d32; padding: 10px 24px; font-weight: 700; }
.admin-modal { width: min(1180px,96vw); }
.pc-editor-modal { height:min(900px,94vh); max-height:94vh; padding:0; overflow:hidden; border-radius:14px; }
.pc-editor { height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:#f5f7f6; }
.pc-editor-head { position:relative; z-index:3; margin:0; padding:20px 26px; border-bottom:1px solid #e3e8e5; background:#fff; align-items:center; }
.pc-editor-head h2 { font-size:22px; }.pc-editor-head small { letter-spacing:.08em; }
.pc-editor-body { min-height:0; overflow-y:auto; padding:20px 24px 30px; }
.pc-editor-actions { position:relative; z-index:3; margin:0; padding:14px 24px; border-top:1px solid #e1e6e3; background:#fff; box-shadow:0 -8px 24px rgba(21,48,38,.05); }
.pc-form-section { margin-bottom:16px; padding:20px; border:1px solid #e3e8e5; border-radius:12px; background:#fff; box-shadow:0 4px 14px rgba(25,50,41,.035); }
.pc-section-title { display:flex; align-items:center; gap:10px; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid #edf0ee; }
.pc-section-title b { color:#203f35; font-size:15px; }.pc-section-title span { color:#8a9590; font-size:11px; }.pc-section-title .admin-primary { margin-left:auto; }
.pc-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }.pc-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.product-media-pc-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:16px; align-items:start; }
.product-media-pc-grid .product-media-section { min-height:176px; }
.square-image-manager .sortable-media-row { flex-wrap:nowrap; }.square-preview > span { margin:auto; color:#9aa39f; font-size:11px; }
.pc-table-toolbar { display:flex; margin-bottom:12px; }.pc-table-toolbar input { width:min(420px,100%); border:1px solid #dce3df; border-radius:8px; padding:10px 12px; outline:none; }.pc-table-toolbar input:focus { border-color:#5a826f; box-shadow:0 0 0 3px rgba(40,94,77,.08); }
.store-person-table td:last-child { white-space:nowrap; }.link-button.danger { color:#b34d3f; }
.store-role-checks { display:flex; flex-wrap:wrap; gap:12px; }.store-role-checks label { min-width:150px; padding:13px 15px; border:1px solid #dde4e0; border-radius:9px; background:#f8faf9; color:#52615b; font-size:12px; }
.save-success-modal { width:min(360px,90vw); }.save-success small { display:block; margin-top:10px; color:#98a29d; }
.form-title { display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px; }
.form-title small { color: #87938e; }
.form-title h2 { margin: 3px 0 0; }
.form-title > span { color: #23734f; background: #e8f3ed; padding: 5px 9px; border-radius: 10px; font-size: 11px; }
.notice-card { margin: 14px 0 18px; padding: 14px 16px; border: 1px solid #dce9e1; border-radius: 10px; background: #f4faf6; color: #52615b; font-size: 13px; line-height: 1.7; }
.notice-card p { margin: 5px 0; }
.access-table { border: 1px solid #e3e8e5; border-radius: 10px; overflow: hidden; background: #fff; }
.access-head,.access-row { display: grid; grid-template-columns: minmax(220px,1.6fr) 150px 150px 130px; gap: 16px; align-items: center; padding: 13px 16px; }
.access-head { background: #f6f8f7; color: #7c8882; font-size: 12px; }
.access-row { border-top: 1px solid #edf0ee; color: #263d34; font-size: 13px; }
.access-row small { display: block; margin-top: 4px; color: #8b9691; font-size: 11px; }
.access-row select { border: 1px solid #dce3df; border-radius: 7px; padding: 8px; background: #fff; color: #30463d; }
.pending-badge { justify-self: start; padding: 4px 8px; border-radius: 8px; background: #fff3dc; color: #a66b1f; font-size: 11px; }
.request-row > div:last-child { display: flex; gap: 8px; justify-content: end; }
#toast { position: fixed; z-index: 120; left: 50%; bottom: 28px; transform: translate(-50%,18px); opacity: 0; pointer-events: none; background: #14221d; color: #fff; border-radius: 20px; padding: 10px 20px; font-size: 12px; transition: .2s; box-shadow: 0 10px 30px rgba(0,0,0,.24); }
#toast.show { opacity: 1; transform: translate(-50%,0); }
#sharedAuthRoot { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 24px; background: rgba(17,33,27,.58); }
#sharedAuthRoot[hidden] { display: none; }
.shared-auth-card { position: relative; width: min(420px,100%); padding: 30px; border-radius: 18px; background: #fff; color: #203d33; box-shadow: 0 20px 60px rgba(0,0,0,.22); }
.shared-auth-card h2 { margin: 6px 0 12px; font-size: 24px; }
.shared-auth-card p:not(.eyebrow) { color: #718079; line-height: 1.7; font-size: 13px; }
.shared-auth-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #f2f5f3; color: #5d6d65; font-size: 20px; }
.shared-auth-primary,.shared-auth-secondary { width: 100%; margin-top: 16px; padding: 12px 16px; border-radius: 10px; font-weight: 700; }
.shared-auth-primary { border: 1px solid #164b3d; background: #164b3d; color: #fff; }
.shared-auth-secondary { border: 1px solid #d8e1dc; background: #fff; color: #31584b; }

@media (max-width: 920px) {
  .preview-toolbar { height: auto; min-height: 68px; padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
  .preview-toolbar > div:first-child span { display: none; }
  .customer-workspace { grid-template-columns: 1fr; padding: 20px 12px 40px; }
  .phone-shell { position: static; width: min(410px,100%); height: 790px; margin: 0 auto; }
  .preview-notes { padding: 10px 10px 0; max-width: 540px; margin: 0 auto; }
  .preview-notes h1 { font-size: 40px; }
  .admin-workspace { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; min-height: auto; height: auto; }
  .admin-sidebar nav { display: flex; overflow-x: auto; }
  .admin-sidebar nav button { min-width: 110px; }
  .admin-sidebar > p { display: none; }
  .admin-main { padding: 18px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .admin-grid,.category-admin-grid { grid-template-columns: 1fr; }
  .store-admin-grid { grid-template-columns:1fr; }
  .role-create,.role-edit-row { grid-template-columns:1fr 1fr; }
  .member-admin-row { grid-template-columns: 1fr; }
  .pc-grid-3,.pc-grid-4,.product-media-pc-grid { grid-template-columns:1fr 1fr; }
  .access-head,.access-row { grid-template-columns: 1.4fr 1fr 1fr; }
  .access-head span:last-child,.access-row > button,.request-row > div:last-child { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 560px) {
  .toolbar-btn.subtle { display: none; }
  .toolbar-actions { width: 100%; }
  .toolbar-btn { flex: 1; padding: 8px; }
  .phone-shell { border-radius: 0; border: 0; height: calc(100vh - 120px); max-height: none; min-height: 650px; }
  .preview-notes { display: none; }
  .metric-grid,.form-grid { grid-template-columns: 1fr; }
  .form-grid label.wide { grid-column: auto; }
  .category-admin-grid fieldset { grid-template-columns: 1fr; }
  .admin-header { align-items: start; gap: 10px; }
  .admin-header h1 { font-size: 21px; }
  .modal-backdrop { padding: 12px; }
  .scan-options.three { grid-template-columns: 1fr; }
  .scan-options button { min-height: 82px; }
  .store-admin-card { grid-template-columns:1fr; }.store-admin-card > img,.store-card-placeholder { height:150px; }
  .store-people-grid { grid-template-columns:1fr; }
  .pc-grid-3,.pc-grid-4,.product-media-pc-grid { grid-template-columns:1fr; }
}