:root {
    --ink: #17211f;
    --muted: #70807c;
    --line: #e5ece9;
    --paper: #ffffff;
    --canvas: #f4f7f6;
    --primary: #0f766e;
    --primary-dark: #0a514c;
    --primary-soft: #e6f4f1;
    --gold: #b7791f;
    --gold-soft: #fff4da;
    --danger: #b42318;
    --shadow: 0 14px 38px rgba(22, 58, 52, .09);
}

* { box-sizing: border-box; }
.ui-icon { display: inline-block; flex: 0 0 auto; width: 24px; height: 24px; overflow: visible; vertical-align: middle; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif; background: var(--canvas); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.flash-message { margin-bottom: 13px; padding: 11px 14px; color: #0a5d48; font-size: 11px; font-weight: 700; background: #e4f6ef; border: 1px solid #bde8d8; border-radius: 12px; }
.error-message { color: var(--danger); background: #fff0ed; border-color: #f3cbc4; }
.connection-notice[hidden] { display: none !important; }
.connection-notice { font-size: 15px; line-height: 1.65; }
.connection-notice p { margin: 0 0 10px; }
.connection-notice button { min-height: 44px; font-size: 15px; }
.eyebrow { margin: 0 0 5px; color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: 1.8px; }
.muted { color: var(--muted); }
.success { color: var(--primary) !important; }
.warning { color: #c15e10 !important; }

/* Mobile storefront */
.mobile-body { min-height: 100vh; background: linear-gradient(135deg, #e4eeeb 0, #f7f8f6 55%, #eee8dd 100%); }
.phone-shell { position: relative; width: min(100%, 460px); min-height: 100vh; margin: 0 auto; background: #f8faf9; box-shadow: 0 0 70px rgba(25, 53, 48, .16); }
.mobile-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 13px; background: rgba(248, 250, 249, .94); border-bottom: 1px solid rgba(222, 231, 228, .9); backdrop-filter: blur(14px); }
.mobile-header h1 { margin: 0; font-family: SimSun, serif; font-size: 24px; letter-spacing: 1px; }
.header-action { padding: 8px 11px; color: var(--primary); font-size: 12px; font-weight: 700; background: var(--primary-soft); border-radius: 999px; }
.mobile-main { min-height: calc(100vh - 130px); padding: 16px 16px 104px; }
.mobile-nav { position: fixed; z-index: 30; bottom: 0; left: 50%; display: grid; grid-template-columns: repeat(4, 1fr); width: min(100%, 460px); padding: 10px 10px calc(9px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line); transform: translateX(-50%); backdrop-filter: blur(16px); }
.mobile-nav a { display: flex; flex-direction: column; gap: 4px; align-items: center; color: #8a9693; font-size: 11px; }
.mobile-nav a span { font-size: 19px; line-height: 20px; }
.mobile-nav a.active { color: var(--primary); font-weight: 800; }
.hero-card { overflow: hidden; padding: 22px; color: #fff; background: radial-gradient(circle at 86% 8%, rgba(231, 190, 105, .52), transparent 28%), linear-gradient(135deg, #0b3e3a, #126b63); border-radius: 24px; box-shadow: var(--shadow); }
.soft-badge { display: inline-block; padding: 5px 9px; color: #6c440d; font-size: 11px; font-weight: 800; background: #f9dda3; border-radius: 999px; }
.hero-copy h2 { margin: 13px 0 6px; font-size: 29px; font-family: SimSun, serif; }
.hero-copy p { max-width: 300px; margin: 0; color: #d7ebe7; font-size: 13px; line-height: 1.7; }
.countdown { display: flex; gap: 8px; align-items: center; margin-top: 20px; }
.countdown span { display: flex; align-items: baseline; gap: 4px; color: #cae0dc; font-size: 10px; }
.countdown b { display: inline-grid; place-items: center; min-width: 39px; height: 38px; color: #fff; font-size: 19px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; }
.countdown i { opacity: .6; font-style: normal; }
.notice-strip { display: flex; gap: 10px; align-items: center; margin: 13px 1px 16px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.notice-strip span { flex: 0 0 auto; color: var(--gold); font-size: 11px; font-weight: 800; }
.notice-strip p { margin: 0; color: #66736f; font-size: 11px; line-height: 1.5; }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quick-grid a { display: flex; flex-direction: column; gap: 5px; padding: 15px; background: #fff; border: 1px solid var(--line); border-radius: 15px; }
.quick-grid b { font-size: 14px; }
.quick-grid small { color: var(--muted); font-size: 11px; }
.section-block { margin-top: 25px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 13px; }
.section-heading span, .panel-title span, .form-preview > div > span, .architecture-banner span { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
.section-heading h2, .panel-title h2, .form-preview h2, .architecture-banner h2 { margin: 4px 0 0; font-size: 20px; }
.text-button { padding: 0; color: var(--muted); font-size: 12px; background: transparent; border: 0; }
.market-zone { scroll-margin-top: 76px; }
.market-zone .section-heading { margin-bottom: 8px; }
.zone-description { margin: 0 0 13px; padding: 11px 13px; color: #64716e; font-size: 11px; line-height: 1.65; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 11px; }
.resale-market .zone-description { border-left-color: var(--primary); }
.resale-market .section-heading > div > span { color: var(--gold); }
.empty-zone { padding: 24px 16px; color: var(--muted); font-size: 12px; text-align: center; background: #fff; border: 1px dashed #cad7d3; border-radius: 16px; }
.product-list { display: grid; gap: 12px; }
.product-card { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 11px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 7px 22px rgba(20, 54, 48, .05); }
.product-visual, .detail-visual, .asset-icon, .table-product > span { position: relative; overflow: hidden; display: grid; place-items: center; color: #fff; background: #52675f; }
.product-visual { min-height: 132px; border-radius: 13px; }
.product-visual::after, .detail-visual::after { position: absolute; width: 96px; height: 96px; content: ""; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; }
.tone-amber { background: linear-gradient(145deg, #3c3020, #b8802f) !important; }
.tone-jade { background: linear-gradient(145deg, #153e39, #4f9282) !important; }
.tone-blue { background: linear-gradient(145deg, #263d58, #7594ae) !important; }
.product-visual > span { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 4px 6px; font-size: 9px; background: rgba(0,0,0,.22); border-radius: 5px; }
.product-visual > strong { z-index: 1; font-family: SimSun, serif; font-size: 28px; letter-spacing: 4px; }
.product-info { min-width: 0; }
.product-meta { display: flex; gap: 8px; justify-content: space-between; color: var(--primary); font-size: 10px; font-weight: 800; }
.product-info h3 { margin: 9px 0 5px; font-size: 16px; }
.product-info > p { overflow: hidden; margin: 0; color: var(--muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.advance-line { display: flex; gap: 5px; align-items: center; margin-top: 9px; font-size: 10px; }
.advance-line span { color: #7e551a; font-weight: 700; }
.advance-line em { padding: 3px 5px; color: var(--primary); font-style: normal; background: var(--primary-soft); border-radius: 5px; }
.price-row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 9px; }
.price-row > div { display: flex; flex-direction: column; }
.price-row small { color: var(--muted); font-size: 9px; }
.price-row strong { color: #b24c1d; font-size: 17px; }
.primary-pill { padding: 6px 9px; color: #fff; font-size: 10px; font-weight: 700; background: var(--primary); border-radius: 999px; }
.back-link { display: inline-block; margin: 1px 0 13px; color: var(--muted); font-size: 12px; }
.detail-visual { height: 265px; border-radius: 23px; box-shadow: var(--shadow); }
.detail-visual > strong { z-index: 1; font-family: SimSun, serif; font-size: 56px; letter-spacing: 10px; }
.detail-visual > span { position: absolute; top: 18px; left: 18px; font-size: 11px; letter-spacing: 1px; }
.detail-visual > small { position: absolute; right: 18px; bottom: 18px; padding: 6px 9px; background: rgba(0,0,0,.22); border-radius: 999px; }
.detail-panel { margin-top: 13px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.detail-panel h2 { margin: 11px 0 5px; font-size: 22px; }
.detail-panel > p { margin: 0; font-size: 12px; line-height: 1.7; }
.amount-summary { margin-top: 18px; padding-top: 15px; border-top: 1px dashed #dce5e1; }
.amount-main { display: flex; align-items: baseline; justify-content: space-between; }
.amount-main span { color: var(--muted); font-size: 12px; }
.amount-main strong { font-size: 21px; }
.advance-banner { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.advance-banner > div { display: flex; flex-direction: column; gap: 7px; padding: 12px; background: var(--primary-soft); border-radius: 12px; }
.advance-banner > div:last-child { background: var(--gold-soft); }
.advance-banner span { color: var(--muted); font-size: 10px; }
.advance-banner strong { font-size: 16px; }
.plain-notice { margin-top: 11px !important; padding-left: 10px; color: #687470; border-left: 3px solid #d6a24c; }
.rule-list h3 { margin: 0 0 13px; }
.rule-list p { display: flex; gap: 10px; margin: 10px 0 !important; color: #5e6c68; }
.rule-list p span { display: inline-grid; flex: 0 0 25px; place-items: center; height: 25px; color: var(--primary); background: var(--primary-soft); border-radius: 50%; }
.sticky-purchase { position: fixed; z-index: 25; bottom: 62px; left: 50%; display: flex; align-items: center; justify-content: space-between; width: min(calc(100% - 24px), 436px); padding: 12px 13px 12px 18px; background: rgba(21, 35, 32, .96); border-radius: 17px; transform: translateX(-50%); box-shadow: 0 12px 35px rgba(0,0,0,.26); }
.sticky-purchase > div { display: flex; flex-direction: column; color: #fff; }
.sticky-purchase small { color: #afc3be; font-size: 10px; }
.sticky-purchase strong { font-size: 19px; }
.sticky-purchase button, .sticky-purchase > a { padding: 11px 22px; color: #14322e; font-weight: 800; background: #e8bd6d; border: 0; border-radius: 11px; }
.sticky-purchase button:disabled { opacity: .7; }
.warehouse-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 17px; }
.warehouse-summary div { display: flex; flex-direction: column; gap: 7px; padding: 18px 10px; text-align: center; background: #fff; }
.warehouse-summary span { color: var(--muted); font-size: 11px; }
.warehouse-summary strong { color: var(--primary); font-size: 24px; }
.tab-row { display: flex; gap: 7px; margin: 16px 0 12px; }
.tab-row button, .tab-row a { padding: 7px 11px; color: var(--muted); font-size: 11px; background: #fff; border: 1px solid var(--line); border-radius: 999px; }
.tab-row button.active, .tab-row a.active { color: #fff; background: var(--primary); border-color: var(--primary); }
.asset-card { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; margin-bottom: 10px; padding: 13px; background: #fff; border: 1px solid var(--line); border-radius: 15px; }
.asset-icon { width: 54px; height: 54px; font-family: SimSun, serif; font-size: 19px; border-radius: 12px; }
.asset-content span { color: var(--primary); font-size: 10px; font-weight: 800; }
.asset-content h3 { margin: 4px 0; font-size: 14px; }
.asset-content p { margin: 0; color: var(--muted); font-size: 10px; }
.asset-card button, .asset-card > a { padding: 7px 9px; color: var(--primary); font-size: 10px; font-weight: 800; background: var(--primary-soft); border: 0; border-radius: 8px; }
.page-tip { margin: 16px 8px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.profile-card { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 20px; color: #fff; background: linear-gradient(135deg, #113f3a, #176f66); border-radius: 20px; }
.avatar { display: grid; place-items: center; width: 54px; height: 54px; color: #73500e; font-family: SimSun, serif; font-size: 23px; background: #f3d897; border-radius: 50%; }
.profile-card h2 { margin: 0 0 5px; font-size: 19px; }
.profile-card p { margin: 0; color: #c7dcd8; font-size: 10px; }
.profile-card > span { padding: 5px 7px; color: #6e4a09; font-size: 9px; font-weight: 800; background: #f6d58f; border-radius: 999px; }
.wallet-card, .status-card { margin-top: 12px; padding: 17px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.wallet-card { display: flex; align-items: center; justify-content: space-between; }
.wallet-card div { display: grid; grid-template-columns: auto auto; gap: 3px 10px; align-items: baseline; }
.wallet-card span, .status-card span { color: var(--muted); font-size: 11px; }
.wallet-card strong { color: var(--primary); font-size: 27px; }
.wallet-card small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }
.wallet-card a { color: var(--primary); font-size: 11px; font-weight: 800; }
.status-card > div { display: flex; justify-content: space-between; }
.status-card p { margin: 8px 0 0; color: var(--muted); font-size: 10px; }
.status-card-link { display: block; }
.menu-list { overflow: hidden; margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.menu-list a { display: flex; justify-content: space-between; padding: 15px 16px; font-size: 13px; border-bottom: 1px solid var(--line); }
.menu-list a:last-child { border: 0; }
.menu-list b { color: var(--muted); font-size: 10px; font-weight: 600; }
.order-overview { padding: 18px 16px 15px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 25px rgba(20, 54, 48, .05); }
.profile-orders { margin-top: 12px; }
.order-overview-title { display: flex; align-items: flex-end; justify-content: space-between; }
.order-overview-title span { color: var(--primary); font-size: 9px; font-weight: 800; letter-spacing: 1.5px; }
.order-overview-title h2 { margin: 4px 0 0; font-size: 18px; }
.order-overview-title > a { color: var(--muted); font-size: 10px; }
.order-overview-title > a.active { color: var(--primary); font-weight: 800; }
.order-status-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 20px; }
.order-status-grid a { display: flex; flex-direction: column; gap: 7px; align-items: center; padding: 5px 0 7px; color: #65736f; border-radius: 11px; }
.order-status-grid a.active { color: var(--primary); background: var(--primary-soft); }
.order-status-icon { position: relative; display: grid; place-items: center; width: 35px; height: 35px; color: var(--primary); font-size: 17px; font-weight: 700; background: #eff7f5; border-radius: 12px; }
.order-status-icon b { position: absolute; top: -6px; right: -7px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; color: #fff; font-size: 8px; background: #d65c2a; border: 2px solid #fff; border-radius: 999px; }
.order-status-grid small { font-size: 9px; white-space: nowrap; }
.order-filter-bar { overflow-x: auto; margin: 12px -16px; padding: 0 16px; scrollbar-width: none; }
.order-filter-bar::-webkit-scrollbar { display: none; }
.order-filter-bar > div { display: flex; gap: 8px; min-width: max-content; }
.order-filter-bar a { padding: 7px 11px; color: var(--muted); font-size: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; }
.order-filter-bar a.active { color: #fff; font-weight: 800; background: var(--primary); border-color: var(--primary); }
.order-list { display: grid; gap: 11px; }
.order-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 7px 20px rgba(20, 54, 48, .04); }
.order-card > header { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px 11px; border-bottom: 1px solid #edf1ef; }
.order-card > header > div { display: flex; gap: 8px; align-items: center; }
.order-card > header span { font-size: 11px; font-weight: 800; }
.order-card > header small { padding: 3px 6px; color: var(--muted); font-size: 8px; background: #f1f4f3; border-radius: 5px; }
.order-state { color: #c15e10; font-size: 10px; }
.state-completed { color: var(--primary); }
.state-after_sale { color: var(--danger); }
.order-product-row { display: grid; grid-template-columns: 62px 1fr auto; gap: 11px; align-items: center; padding: 13px 14px; }
.order-product-visual { display: grid; place-items: center; width: 62px; height: 62px; color: #fff; font-family: SimSun, serif; font-size: 23px; border-radius: 12px; }
.order-product-copy { min-width: 0; }
.order-product-copy h3 { overflow: hidden; margin: 0 0 5px; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.order-product-copy p { margin: 0 0 5px; color: var(--muted); font-size: 8px; }
.order-product-copy small { display: block; color: #a65a24; font-size: 9px; }
.order-price { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.order-price strong { font-size: 12px; }
.order-price small { color: var(--muted); font-size: 9px; }
.order-amount-row { display: flex; gap: 13px; justify-content: flex-end; padding: 9px 14px; color: var(--muted); font-size: 9px; background: #f8faf9; border-top: 1px solid #edf1ef; }
.order-amount-row b { color: var(--ink); }
.order-card > footer { display: flex; gap: 7px; justify-content: flex-end; padding: 11px 14px 13px; }
.order-card > footer button, .order-card > footer a { padding: 7px 11px; font-size: 9px; border-radius: 999px; }
.order-card > footer .secondary { color: #5e6b68; background: #fff; border: 1px solid #dce4e1; }
.order-card > footer .primary { color: #fff; font-weight: 800; background: var(--primary); border: 1px solid var(--primary); }
.empty-orders { padding: 48px 20px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 17px; }
.empty-orders > span { display: inline-grid; place-items: center; width: 52px; height: 52px; color: var(--primary); font-size: 23px; background: var(--primary-soft); border-radius: 18px; }
.empty-orders h3 { margin: 13px 0 6px; font-size: 15px; }
.empty-orders p { margin: 0 0 14px; color: var(--muted); font-size: 10px; }
.empty-orders a { display: inline-block; padding: 8px 13px; color: #fff; font-size: 10px; background: var(--primary); border-radius: 999px; }
.payment-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.payment-product { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 17px; border-bottom: 1px solid var(--line); }
.payment-product h2 { margin: 0 0 6px; font-size: 15px; }
.payment-product p { margin: 0; color: var(--muted); font-size: 10px; }
.payment-product > strong { font-size: 14px; }
.payment-summary { padding: 17px; }
.payment-summary > div { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; color: var(--muted); font-size: 12px; }
.purchase-quantity-control { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; padding-bottom: 15px; color: var(--muted); border-bottom: 1px solid var(--line); }
.purchase-quantity-control > span { display: flex; flex-direction: column; gap: 3px; }
.purchase-quantity-control small { color: var(--primary); }
.purchase-quantity-control select { min-width: 92px; height: 38px; padding: 0 10px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.payment-summary > div strong { color: var(--ink); }
.payment-summary .personal-payment { margin: 16px -17px -17px; padding: 17px; color: var(--ink); background: var(--primary-soft); }
.payment-summary .personal-payment span { display: flex; flex-direction: column; gap: 4px; }
.payment-summary .personal-payment small { color: var(--primary); font-size: 9px; }
.payment-summary .personal-payment strong { color: var(--primary-dark); font-size: 24px; }
.payment-notice { margin-top: 12px; padding: 14px 15px; color: #765016; font-size: 11px; line-height: 1.7; background: var(--gold-soft); border-radius: 14px; }
.payment-action { display: block; width: 100%; margin-top: 18px; padding: 13px; color: #fff; font-weight: 800; text-align: center; background: var(--primary); border: 0; border-radius: 13px; }
.compact-card { margin-bottom: 12px; }
.workflow-status { margin-bottom: 12px; padding: 19px; color: #fff; background: linear-gradient(135deg, #123f3a, #167167); border-radius: 18px; }
.workflow-status > span { color: #f1cf87; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; }
.workflow-status h2 { margin: 8px 0 6px; font-size: 18px; }
.workflow-status p { margin: 0; color: #cae1dc; font-size: 10px; }
.process-panel { margin-top: 12px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.process-panel h2 { margin: 0 0 9px; font-size: 17px; }
.plain-copy, .process-panel > p { color: var(--muted); font-size: 11px; line-height: 1.8; }
.center-panel { text-align: center; }
.state-symbol { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 13px; color: #a85a18; font-size: 24px; font-weight: 800; background: var(--gold-soft); border-radius: 18px; }
.success-symbol { color: var(--primary); background: var(--primary-soft); }
.qr-placeholder { display: grid; place-items: center; min-height: 150px; margin-bottom: 14px; color: #fff; text-align: center; background: repeating-linear-gradient(45deg, #174e48, #174e48 10px, #1c5b54 10px, #1c5b54 20px); border-radius: 14px; }
.qr-placeholder strong { font-size: 20px; }
.qr-placeholder span { margin-top: -45px; color: #c8dfda; font-size: 10px; }
.simple-summary { padding: 14px 0 0; }
.simple-summary .personal-payment { margin: 12px 0 0; border-radius: 12px; }
.stack-form { display: grid; gap: 13px; }
.stack-form label { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 10px; }
.stack-form input, .stack-form select { width: 100%; min-height: 42px; padding: 0 12px; color: var(--ink); background: #fff; border: 1px solid #dce5e2; border-radius: 9px; outline: none; }
.stack-form input[type="file"] { padding: 10px; }
.stack-form label small { color: var(--muted); line-height: 1.6; }
.stack-form .payment-action { margin-top: 2px; }
.receipt-image-field { display: grid; gap: 9px; color: var(--muted); font-size: 13px; }
.stack-form .receipt-image-upload { display: grid; place-items: center; width: min(176px, 100%); aspect-ratio: 1; overflow: hidden; cursor: pointer; background: #f8fbfa; border: 1.5px dashed #b8ccc6; border-radius: 12px; }
.receipt-image-upload:hover, .receipt-image-upload:focus-within { border-color: var(--primary); outline: 2px solid var(--primary-soft); outline-offset: 3px; }
.receipt-image-input { min-height: 0 !important; }
.receipt-upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.receipt-upload-placeholder > span { color: #71a497; font-size: 38px; font-weight: 300; line-height: 1; }
.receipt-upload-placeholder strong { color: #477669; font-size: 14px; font-weight: 500; }
.receipt-upload-placeholder small { color: #91a29c; }
.receipt-image-preview { display: block; width: 100%; height: 100%; min-height: 0; padding: 8px; object-fit: contain; background: #fff; }
.receipt-image-upload [hidden] { display: none; }
.receipt-image-field > small { line-height: 1.65; }
.receipt-image-status { color: #3b8976; font-size: 12px; }
.receipt-image-status:empty { display: none; }
.receipt-image-error { color: #b42318; font-size: 12px; }
.admin-receipt-image { display: block; width: 76px; height: 76px; padding: 4px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.invite-reward-settings-panel { max-width: 1040px; }
.invite-reward-settings-panel > .plain-copy { font-size: 13px; line-height: 1.8; }
.admin-invite-reward-form { display: grid; gap: 22px; margin-top: 24px; }
.reward-config-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.reward-config-section { display: grid; align-content: start; gap: 18px; min-width: 0; padding: 18px; background: #fafcfb; border: 1px solid var(--line); border-radius: 8px; }
.reward-config-section h3 { margin: 0; font-size: 16px; }
.metric-grid.points-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wallet-card.points-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wallet-card.points-hero > div { display: flex; flex-direction: column; gap: 6px; }
.points-hero .points-total-balance { grid-column: 1 / -1; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.points-hero > div > span { font-size: 13px; }
.points-hero .points-frozen-balance strong { color: #b7791f; }
.points-freeze-notice { padding: 10px 12px; background: var(--gold-soft); border-radius: 8px; }
.reward-state-chip { display: inline-block; padding: 3px 7px; color: #28745e; font-size: 12px; line-height: 1.4; white-space: nowrap; background: #e8f5ef; border-radius: 5px; }
.reward-state-chip.is-frozen { color: #93621a; background: #fff1d7; }
.points-reward-detail { display: block; margin-top: 5px; color: var(--muted); font-weight: 400; }
.admin-invite-reward-form label { display: grid; gap: 9px; color: #59635f; font-size: 14px; }
.admin-invite-reward-form input, .admin-invite-reward-form select { width: 100%; min-height: 42px; padding: 0 12px; color: var(--ink); background: #fff; border: 1px solid #dce5e2; border-radius: 6px; }
.admin-invite-reward-form small { color: var(--muted); font-size: 12px; }
.admin-invite-reward-form .input-suffix input { flex: 1 1 auto; min-width: 0; }
.admin-invite-reward-form .input-suffix b { flex: 0 0 auto; min-height: 42px; white-space: nowrap; }
.invite-reward-rule-note { padding: 16px; color: #51756b; background: #eef8f4; border-radius: 8px; }
.invite-reward-rule-note p { margin: 8px 0 0; font-size: 13px; line-height: 1.8; }
.deadline-notice { padding: 11px 12px; color: #8c511e !important; background: var(--gold-soft); border-radius: 10px; }
.fee-summary, .result-list { overflow: hidden; background: #f6f9f8; border-radius: 12px; }
.fee-summary > div, .result-list > div { display: flex; justify-content: space-between; padding: 11px 12px; color: var(--muted); font-size: 10px; border-bottom: 1px solid var(--line); }
.fee-summary > div:last-child, .result-list > div:last-child { border: 0; }
.fee-summary b, .result-list b { color: var(--ink); }
.invite-card { padding: 26px 20px; color: #fff; text-align: center; background: linear-gradient(135deg, #123e39, #176e65); border-radius: 20px; box-shadow: var(--shadow); }
.invite-card span { display: block; color: #c8ded9; font-size: 10px; }
.invite-card strong { display: block; margin: 9px 0; color: #f2d18d; font-size: 30px; letter-spacing: 3px; }
.invite-card p { margin: 0 auto 16px; max-width: 300px; color: #c8ded9; font-size: 10px; line-height: 1.7; }
.invite-card a { display: inline-block; padding: 10px 15px; color: #153d38; font-size: 11px; font-weight: 800; background: #f2d18d; border-radius: 999px; }
.invite-card-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.invite-card-actions button { padding: 10px 15px; color: #eaf6f3; font-size: 11px; font-weight: 800; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.34); border-radius: 999px; cursor: pointer; }
.invite-card .invite-action-status { min-height: 20px; margin-top: 12px; color: #c8ded9; }
.invite-action-status { min-height: 22px; margin: 12px 0 0; color: #287367; font-size: 12px; text-align: center; }
.invite-action-status.is-error { color: #a94d3f; }
.poster-preview-panel { padding: 17px; background: #fff; border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow); }
.poster-section-heading { align-items: flex-end; }
.poster-section-heading small { color: var(--muted); }
.poster-canvas-wrap { width: min(100%, 360px); margin: 16px auto 0; overflow: hidden; line-height: 0; background: #0d554f; border-radius: 18px; box-shadow: 0 14px 30px rgba(10, 59, 54, .2); }
.poster-canvas-wrap canvas { display: block; width: 100%; height: auto; }
.poster-help { margin: 17px 2px 0; color: var(--muted); font-size: 12px; line-height: 1.7; text-align: center; }
.poster-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.poster-actions button { min-height: 44px; cursor: pointer; }
.poster-actions button:disabled { cursor: wait; opacity: .55; }
.poster-secondary-button { color: var(--primary); font-weight: 800; background: var(--primary-soft); border: 1px solid #bcdad4; border-radius: 8px; }
.poster-link-button { grid-column: 1 / -1; color: #665128; font-weight: 800; background: var(--gold-soft); border: 1px solid #ead5a6; border-radius: 8px; }
.poster-notice-panel { margin-top: 14px; }
.poster-canvas-wrap canvas:not(.poster-ready) { display: none; }
.poster-qr-fallback { display: block; width: 210px; height: 210px; margin: 24px auto; padding: 10px; background: white; }
.poster-qr-fallback[hidden] { display: none; }
.poster-settings-editor { display: grid; grid-template-columns: minmax(400px, 1fr) 420px; gap: 24px; align-items: start; }
.poster-settings-editor .panel { padding: 24px; }
.poster-settings-editor h2 { margin-top: 0; }
.poster-settings-editor p { line-height: 1.7; color: var(--muted); }
.poster-settings-fields > label { display: grid; gap: 8px; margin: 16px 0; }
.poster-settings-fields .poster-background-reset { display: flex; gap: 8px; align-items: center; }
.poster-settings-fields fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; padding: 18px; border: 1px solid #dbe4e5; border-radius: 10px; }
.poster-settings-fields legend { padding: 0 8px; font-weight: 700; }
.poster-settings-fields fieldset label { display: grid; gap: 8px; }
.poster-settings-fields input[type="number"] { min-width: 0; width: 100%; }
.poster-settings-fields input[type="number"], .poster-settings-fields input[type="file"] { padding: 10px; border: 1px solid #dbe4e5; border-radius: 8px; background: #fff; font: inherit; }
.poster-settings-fields input[type="color"] { width: 100%; height: 42px; border: 1px solid #dbe4e5; }
.poster-settings-fields small { line-height: 1.6; color: var(--muted); }
.poster-editor-preview { position: sticky; top: 20px; }
.poster-editor-preview canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: move; border-radius: 10px; }

/* Admin */
.admin-body { min-width: 1080px; background: #f5f7f6; }
.admin-sidebar { position: fixed; z-index: 10; inset: 0 auto 0 0; width: 232px; padding: 24px 17px; color: #d9e7e3; background: #122b28; }
.brand-mark { display: flex; gap: 11px; align-items: center; padding: 0 8px 25px; border-bottom: 1px solid rgba(255,255,255,.09); }
.brand-mark > span { display: grid; place-items: center; width: 42px; height: 42px; color: #1b3a35; font-family: SimSun, serif; font-size: 22px; font-weight: 800; background: #d9b46b; border-radius: 12px; }
.brand-mark div { display: flex; flex-direction: column; gap: 3px; }
.brand-mark strong { color: #fff; font-size: 16px; }
.brand-mark small { color: #8da8a2; font-size: 10px; }
.admin-sidebar nav { display: grid; gap: 4px; margin-top: 23px; }
.admin-sidebar nav a { padding: 11px 13px; color: #a9bfba; font-size: 13px; border-radius: 9px; }
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { color: #fff; background: #1d4540; }
.admin-sidebar nav a.active { box-shadow: inset 3px 0 #e1b960; }
.admin-shell { margin-left: 232px; }
.admin-header { display: flex; align-items: center; justify-content: space-between; height: 78px; padding: 0 30px; background: #fff; border-bottom: 1px solid var(--line); }
.admin-header h1 { margin: 0; font-size: 23px; }
.admin-user { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 11px; }
.admin-user b { color: var(--ink); font-size: 12px; }
.status-dot { width: 8px; height: 8px; background: #2ba77b; border-radius: 50%; box-shadow: 0 0 0 4px #e1f4ec; }
.admin-main { padding: 24px 28px 45px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.metric-card span { color: var(--muted); font-size: 11px; }
.metric-card strong { font-size: 25px; }
.metric-card small { color: #558078; font-size: 10px; }
.admin-grid { display: grid; gap: 14px; margin-top: 14px; }
.two-columns { grid-template-columns: 1.45fr 1fr; }
.panel { margin-top: 14px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.admin-grid .panel { margin-top: 0; }
.panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.panel-title h2 { font-size: 17px; }
.panel-title a { color: var(--primary); font-size: 11px; font-weight: 700; }
.queue-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.queue-overview > div { display: flex; flex-direction: column; gap: 7px; padding: 13px; background: #f6f9f8; border-radius: 9px; }
.queue-overview span { color: var(--muted); font-size: 10px; }
.queue-overview strong { font-size: 18px; }
.health-line { display: flex; gap: 8px; align-items: center; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.health-line > span { width: 7px; height: 7px; background: #2ba77b; border-radius: 50%; }
.health-line p { flex: 1; margin: 0; color: var(--muted); font-size: 10px; }
.health-line b { color: var(--primary); font-size: 10px; }
.todo-list { display: grid; gap: 1px; background: var(--line); }
.todo-list a { display: flex; justify-content: space-between; padding: 12px 0; font-size: 12px; background: #fff; }
.todo-list b { color: #b15821; }
.flow-strip { display: flex; align-items: center; justify-content: space-between; }
.flow-strip > div { display: flex; flex: 1; flex-direction: column; gap: 5px; align-items: center; padding: 13px 8px; text-align: center; background: #f5f9f7; border-radius: 10px; }
.flow-strip b { display: grid; place-items: center; width: 25px; height: 25px; color: #fff; font-size: 10px; background: var(--primary); border-radius: 50%; }
.flow-strip span { font-size: 11px; font-weight: 700; }
.flow-strip small { color: var(--muted); font-size: 9px; }
.flow-strip i { padding: 0 8px; color: #9aaba7; font-style: normal; }
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 13px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.filter-group { display: flex; gap: 8px; }
.filter-group input, .filter-group select, .form-preview input, .form-preview select { height: 37px; padding: 0 11px; color: #4a5b57; background: #fff; border: 1px solid #dce5e2; border-radius: 7px; outline: none; }
.filter-group input { width: 230px; }
.filter-group button, .action-group button { color: var(--primary); font-weight: 700; background: var(--primary-soft); border: 0; border-radius: 7px; }
.filter-group button { padding: 0 17px; }
.primary-button { padding: 10px 17px; color: #fff; font-size: 11px; font-weight: 800; background: var(--primary); border: 0; border-radius: 8px; }
.table-panel { overflow: hidden; padding: 0; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 13px 15px; color: #61706d; font-size: 10px; text-align: left; background: #f2f6f4; border-bottom: 1px solid var(--line); }
.data-table td { padding: 14px 15px; color: #465652; font-size: 11px; vertical-align: middle; border-bottom: 1px solid var(--line); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td > strong, .data-table td > small { display: block; }
.data-table td > strong { color: var(--ink); font-size: 12px; }
.data-table td > small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.table-product { display: flex; gap: 10px; align-items: center; min-width: 230px; }
.table-product > span { flex: 0 0 40px; width: 40px; height: 40px; font-family: SimSun, serif; border-radius: 9px; }
.table-product div { display: flex; flex-direction: column; gap: 5px; }
.table-product small { color: var(--muted); font-size: 9px; }
.status-tag { display: inline-block; padding: 5px 8px; color: var(--primary); font-size: 9px; font-weight: 800; background: var(--primary-soft); border-radius: 999px; }
.status-tag.pending { color: #a14e17; background: #fff0df; }
.action-group { display: flex; gap: 5px; flex-wrap: wrap; min-width: 145px; }
.action-group button, .action-group a { padding: 6px 8px; color: var(--primary); font-size: 9px; font-weight: 700; background: var(--primary-soft); border: 0; border-radius: 7px; }
.action-group span { color: var(--muted); font-size: 9px; }
.admin-empty { padding: 28px; color: var(--muted); text-align: center; }
.form-preview { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; margin-top: 14px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.form-preview h2 { font-size: 18px; }
.form-preview > div p, .architecture-banner p { max-width: 480px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.form-preview form { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 12px; align-items: end; }
.product-create-form form { grid-template-columns: repeat(4, 1fr); }
.form-preview label { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 10px; }
.input-suffix { display: flex; align-items: center; }
.input-suffix input { width: 100%; border-radius: 7px 0 0 7px; }
.input-suffix b { display: grid; place-items: center; height: 37px; padding: 0 9px; color: var(--muted); background: #f3f6f5; border: 1px solid #dce5e2; border-left: 0; border-radius: 0 7px 7px 0; }
.amount-preview { display: flex; flex-direction: column; gap: 5px; min-height: 37px; padding: 7px 10px; color: var(--primary); background: var(--primary-soft); border-radius: 7px; }
.amount-preview b { font-size: 9px; }
.architecture-banner { display: flex; align-items: center; justify-content: space-between; padding: 24px; color: #fff; background: linear-gradient(135deg, #123c37, #1b6159); border-radius: 14px; }
.architecture-banner span { color: #e4be73; }
.architecture-banner p { color: #c2d9d5; }
.architecture-banner > strong { padding: 9px 12px; color: #5f430f; font-size: 10px; background: #f1d28f; border-radius: 999px; }
.technical > div { min-height: 96px; }

@media (max-width: 720px) {
    .mobile-body { background: #f8faf9; }
    .phone-shell { box-shadow: none; }
}

/* Reference storefront layout */
.mobile-body {
    background: #eef2f1;
}

.phone-shell {
    width: min(100%, 450px);
    background: #f5f5f5;
    box-shadow: 0 0 36px rgba(28, 50, 46, .12);
}

.mobile-header {
    padding: 12px 15px 10px;
    background: rgba(255, 255, 255, .96);
    border-bottom-color: #eeeeee;
}

.mobile-header h1 {
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    font-size: 18px;
    letter-spacing: 0;
}

.mobile-header .eyebrow {
    display: none;
}

.header-action {
    padding: 6px 10px;
    font-size: 11px;
    background: #edf7f5;
    border-radius: 5px;
}

.mobile-main {
    min-height: calc(100vh - 118px);
    padding: 12px 10px 88px;
}

.screen-home .mobile-header {
    display: none;
}

.screen-home .mobile-main {
    padding-top: 10px;
}

.home-product-search {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto auto;
    gap: 7px;
    align-items: center;
    min-height: 46px;
    margin-bottom: 10px;
    padding: 5px 6px 5px 13px;
    background: #fff;
    border: 1px solid #e3e8e6;
    border-radius: 23px;
    box-shadow: 0 3px 12px rgba(31, 83, 71, .07);
}

.home-search-icon {
    display: block;
    width: 22px;
    height: 22px;
    color: #63b9a2;
}

.home-product-search input {
    min-width: 0;
    height: 34px;
    padding: 0;
    color: #39413f;
    font-size: 14px;
    background: transparent;
    border: 0;
    outline: 0;
}

.home-product-search input::placeholder { color: #9da5a2; }
.home-product-search > a { display: grid; place-items: center; width: 25px; height: 25px; color: #9ba19f; font-size: 19px; background: #f2f4f3; border-radius: 50%; }
.home-product-search button { height: 34px; padding: 0 15px; color: #fff; font-size: 14px; font-weight: 700; background: #55bea3; border: 0; border-radius: 17px; cursor: pointer; }
.home-search-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -1px 2px 10px; padding: 8px 10px; color: #777f7d; font-size: 12px; background: #edf7f4; border-radius: 5px; }
.home-search-result span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-search-result strong { flex: 0 0 auto; color: #43aa90; }

.market-banner {
    position: relative;
    overflow: hidden;
    height: 150px;
    background: #173c36;
    border-radius: 6px;
}

.market-banner > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.market-banner-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 11px;
    color: #fff;
    background: linear-gradient(90deg, rgba(10, 31, 28, .82), rgba(10, 31, 28, .46));
}

.market-banner-caption > div {
    display: flex;
    gap: 8px;
    align-items: center;
}

.market-banner-caption span {
    padding: 3px 6px;
    color: #62400c;
    font-size: 9px;
    font-weight: 800;
    background: #f5d78d;
    border-radius: 3px;
}

.market-banner-caption strong {
    font-size: 13px;
}

.market-banner-caption small {
    color: #e5efed;
    font-size: 10px;
}

.screen-home .notice-strip {
    gap: 8px;
    margin: 9px 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 3px;
}

.screen-home .notice-strip span {
    padding-right: 8px;
    color: #0c8177;
    border-right: 1px solid #d8e4e2;
}

.screen-home .notice-strip p {
    overflow: hidden;
    font-size: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.screen-home .quick-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    overflow: hidden;
    margin-bottom: 9px;
    background: #eeeeee;
    border-radius: 4px;
}

.screen-home .quick-grid a {
    gap: 3px;
    min-width: 0;
    padding: 11px 4px 10px;
    text-align: center;
    border: 0;
    border-radius: 0;
}

.screen-home .quick-grid b {
    font-size: 12px;
    white-space: nowrap;
}

.screen-home .quick-grid small {
    overflow: hidden;
    font-size: 9px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.market-section {
    margin: 0 -10px 10px;
    background: #fff;
}

.market-banner + .market-section {
    margin-top: 9px;
}

.market-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 0 10px;
    border-bottom: 1px solid #f1f1f1;
}

.market-section-heading h2 {
    margin: 0;
    padding-left: 9px;
    font-size: 16px;
    line-height: 18px;
    border-left: 3px solid #15978b;
}
.market-section-heading h2 small { margin-left: 5px; color: #7f8785; font-size: 9px; font-weight: 500; }

.market-section-heading .text-button {
    font-size: 10px;
}

.screen-home .zone-description {
    margin: 0;
    padding: 8px 10px;
    color: #8a9290;
    font-size: 10px;
    line-height: 1.55;
    background: #fbfbfb;
    border: 0;
    border-radius: 0;
}

.featured-product-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 10px 13px;
    scrollbar-width: none;
}

.featured-product-scroll::-webkit-scrollbar {
    display: none;
}

.featured-product-card {
    flex: 0 0 132px;
    overflow: hidden;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 9px rgba(30, 56, 52, .12);
}

.featured-product-card > img {
    display: block;
    width: 132px;
    height: 130px;
    object-fit: cover;
}

.featured-product-card > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 46px;
    padding: 7px 8px;
}

.featured-product-card strong {
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.featured-product-card small { color: var(--primary); }

.featured-product-card b,
.market-product-info > strong {
    color: #e45624;
    font-size: 15px;
}

.market-product-list {
    padding: 0 10px;
}

.market-product-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    min-height: 141px;
    padding: 10px 0;
    border-bottom: 1px solid #eeeeee;
}

.market-product-row:last-child {
    border-bottom: 0;
}

.market-product-row > img {
    display: block;
    width: 90px;
    height: 120px;
    object-fit: cover;
    border-radius: 3px;
}

.market-product-info {
    min-width: 0;
    padding: 2px 0;
}

.market-product-info .product-meta {
    font-size: 9px;
}

.market-product-info h3 {
    margin: 11px 0 7px;
    font-size: 15px;
}

.market-product-info p {
    display: flex;
    gap: 6px;
    margin: 0 0 16px;
}

.market-product-info p span {
    padding: 3px 5px;
    color: #7c8784;
    font-size: 9px;
    background: #f4f6f5;
    border-radius: 2px;
}

.screen-home > .phone-shell,
.screen-home .phone-shell {
    background: #f5f5f5;
}

.screen-home .detail-panel {
    margin: 0 -10px;
    padding: 16px 14px;
    border: 0;
    border-radius: 0;
}

.mobile-nav {
    width: min(100%, 450px);
    min-height: 61px;
    padding: 7px 10px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .98);
    border-top-color: #ededed;
    backdrop-filter: none;
}

.mobile-nav a {
    gap: 3px;
    font-size: 10px;
}

.mobile-nav a .ui-icon {
    width: 25px;
    height: 25px;
    color: #8b9592;
}

.mobile-nav a.active .ui-icon {
    color: #39ad90;
    stroke-width: 1.9;
}

.detail-visual.product-photo-detail {
    display: block;
    background: #fff;
}

.detail-visual.product-photo-detail::after {
    content: none;
}

.product-photo-detail > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-photo-detail > span,
.product-photo-detail > small {
    z-index: 2;
    padding: 5px 8px;
    background: rgba(16, 34, 31, .66);
    border-radius: 4px;
}

.asset-icon,
.order-product-visual {
    display: block;
    object-fit: cover;
}

@media (max-width: 380px) {
    .screen-home .quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .market-banner {
        height: 136px;
    }
}

/* Faithful reference shell and workflow surfaces */
.reference-mobile-body {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: #f0f4fb;
}

.mobile-preview-stage {
    flex: 0 0 auto;
    width: calc(418px * var(--phone-preview-scale, 1));
    height: calc(872px * var(--phone-preview-scale, 1));
}

.reference-mobile-body .phone-shell {
    display: flex;
    flex-direction: column;
    width: 418px;
    max-width: none;
    height: 872px;
    min-height: 0;
    margin: 0;
    transform: scale(var(--phone-preview-scale, 1));
    transform-origin: top left;
    overflow: hidden;
    background: #f5f5f5;
    border: 14px solid #1c1d1f;
    border-radius: 45px;
    box-shadow: 0 22px 60px rgba(44, 54, 71, .2);
}

.reference-mobile-body .mobile-header {
    position: relative;
    flex: 0 0 44px;
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    background: #fff;
    border: 0;
}

.reference-mobile-body .mobile-header h1 {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.mobile-header-side { display: flex; align-items: center; min-width: 0; }
.mobile-header-side.right { justify-content: flex-end; }
.header-back { color: #303534; font-size: 30px; font-weight: 300; line-height: 1; }
.header-refresh { color: #777f7d; font-size: 11px; }

.reference-mobile-body .mobile-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 10px 18px;
}

.reference-mobile-body .mobile-nav {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    flex: 0 0 auto;
    width: 100%;
    min-height: 61px;
    transform: none;
}

.reference-mobile-body.screen-home .mobile-main { padding-top: 10px; }
.reference-mobile-body.screen-home .market-banner { margin-top: 0; }

.screen-profile .mobile-main { padding: 0 10px 18px; }
.reference-profile-head {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 72px;
    margin: 0 -2px;
    padding: 6px 4px 7px;
    background: #fff;
}
.reference-avatar { display: grid; place-items: center; width: 58px; height: 58px; color: #939c99; background: #f0f2f1; border: 3px solid #f7f8f7; border-radius: 50%; }
.reference-avatar .ui-icon { width: 38px; height: 38px; }
.reference-member-copy h2 { margin: 0 0 5px; font-size: 14px; }
.reference-member-copy span { display: inline-block; padding: 2px 6px; color: #fff; font-size: 9px; background: #72b6f4; border-radius: 3px; }
.reference-member-copy p { margin: 4px 0 0; color: #41aa8e; font-size: 9px; }
.reference-profile-shortcuts { display: flex; gap: 14px; }
.reference-profile-shortcuts a { display: flex; flex-direction: column; gap: 4px; align-items: center; color: #616967; }
.reference-profile-shortcuts .ui-icon { display: block; width: 24px; height: 24px; }
.reference-profile-shortcuts small { font-size: 9px; }
.reference-wallet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 9px 0; }
.reference-wallet-grid a { position: relative; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: 1fr 1fr; align-items: center; min-height: 67px; padding: 10px; color: #fff; background: linear-gradient(135deg, #52c9ad, #72d6bd); border-radius: 8px; }
.reference-wallet-grid a.gold { background: linear-gradient(135deg, #d4b763, #efdc99); }
.reference-wallet-grid span { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; background: rgba(255,255,255,.15); border-radius: 50%; }
.reference-wallet-grid .ui-icon { width: 26px; height: 26px; }
.reference-wallet-grid strong { font-size: 15px; }
.reference-wallet-grid small { font-size: 8px; opacity: .9; }
.reference-order-panel { overflow: hidden; margin-bottom: 10px; background: #fff; border: 1px solid #ebeeee; border-radius: 8px; box-shadow: 0 2px 7px rgba(25,45,40,.04); }
.reference-order-panel header { display: flex; align-items: center; justify-content: space-between; padding: 13px 11px 8px; }
.reference-order-panel h2 { margin: 0; font-size: 14px; }
.reference-order-panel header a { color: #55bda4; font-size: 10px; }
.reference-order-panel > div { display: grid; grid-template-columns: repeat(5, 1fr); padding: 12px 5px 15px; }
.reference-order-panel > div a { display: flex; flex-direction: column; gap: 8px; align-items: center; color: #4b5351; }
.reference-order-panel > div span { position: relative; display: grid; place-items: center; width: 30px; height: 30px; }
.reference-order-panel > div span b { position: absolute; top: -8px; right: -11px; display: flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; color: #fff; font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1; text-align: center; background: #ef6756; border: 2px solid #fff; border-radius: 999px; box-shadow: 0 1px 2px rgba(185, 53, 39, .18); }
.reference-order-panel > div small { font-size: 9px; }
.reference-profile-menu { overflow: hidden; background: #fff; border: 1px solid #ebeeee; border-radius: 8px; }
.reference-profile-menu a { display: grid; grid-template-columns: 1fr auto 10px; gap: 7px; align-items: center; min-height: 54px; padding: 0 12px; color: #404745; border-bottom: 1px solid #f0f1f1; }
.reference-profile-menu a:last-child { border-bottom: 0; }
.reference-profile-menu span { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.reference-order-panel .ui-icon { width: 28px; height: 28px; color: #606b67; }
.reference-profile-menu .ui-icon { width: 24px; height: 24px; color: #747d7b; }
.reference-profile-menu small { color: #5dbba4; font-size: 9px; }
.reference-profile-menu b { color: #c5c9c8; font-size: 16px; font-weight: 400; }

.reference-tool-card { overflow: hidden; margin-top: 2px; background: #fff; border: 1px solid #ebeeee; border-radius: 8px; }
.reference-tool-card h2 { margin: 0; padding: 17px 15px 7px; font-size: 17px; }
.reference-tool-card > p { margin: 0; padding: 0 15px 14px; color: #89908e; font-size: 11px; }
.reference-tool-card > div { padding: 14px 15px; font-size: 12px; border-top: 1px solid #eef0ef; }

.warehouse-tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin: -10px -10px 10px; background: #fff; border-bottom: 1px solid #eceeee; }
.warehouse-tabs a { position: relative; padding: 12px 3px; color: #737b79; font-size: 11px; text-align: center; }
.warehouse-tabs a.active { color: #43ae93; font-weight: 700; }
.warehouse-tabs a.active::after { position: absolute; right: 28%; bottom: 0; left: 28%; height: 2px; content: ""; background: #4db99e; }
.reference-warehouse-list { display: grid; gap: 10px; }
.reference-warehouse-list article { overflow: hidden; background: #fff; border: 1px solid #e9eceb; border-radius: 7px; }
.reference-warehouse-list article > header { display: flex; justify-content: space-between; padding: 10px 12px; font-size: 10px; border-bottom: 1px solid #f0f2f1; }
.reference-warehouse-list article > header span { color: #49ae94; }
.reference-warehouse-list article > div { display: grid; grid-template-columns: 76px 1fr; gap: 11px; padding: 11px 12px; }
.reference-warehouse-list img { width: 76px; height: 76px; object-fit: cover; border-radius: 3px; }
.reference-warehouse-list section h3 { margin: 0 0 9px; font-size: 13px; }
.reference-warehouse-list section p { margin: 0 0 6px; color: #707775; font-size: 10px; }
.reference-warehouse-list section p b { color: #e65b43; }
.reference-warehouse-list section small, .reference-warehouse-list section em { display: block; margin-top: 6px; color: #8e9593; font-size: 9px; font-style: normal; }
.reference-warehouse-list article > footer { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; color: #9a9f9e; font-size: 9px; background: #fafafa; border-top: 1px solid #f0f1f1; }
.reference-warehouse-list footer a { padding: 7px 11px; color: #fff; font-weight: 700; background: #56bea4; border-radius: 3px; }
.reference-empty { padding: 55px 20px; color: #9aa09e; text-align: center; }
.reference-empty > span { display: inline-grid; place-items: center; width: 44px; height: 44px; color: #b8bdba; font-size: 22px; border: 1px solid #cfd3d1; border-radius: 50%; }
.reference-empty h3 { margin: 12px 0 5px; color: #7e8582; font-size: 14px; }
.reference-empty p { margin: 0 0 13px; font-size: 10px; }
.reference-empty > a { display: inline-block; padding: 7px 12px; color: #fff; font-size: 10px; background: #55bca3; border-radius: 3px; }

.flash-privilege-strip { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; padding: 10px 12px; color: #746127; font-size: 10px; background: #fff6d9; border: 1px solid #f1e2ae; border-radius: 5px; }
.flash-privilege-strip span { padding: 3px 6px; color: #fff; background: #d6b454; border-radius: 3px; }
.flash-session-card { overflow: hidden; margin-bottom: 10px; background: #fff; border: 1px solid #e8ecea; border-radius: 7px; }
.flash-session-card > header { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid #eef0ef; }
.flash-session-card > header > div { display: flex; gap: 8px; align-items: center; }
.flash-session-card > header span { padding: 3px 6px; color: #fff; font-size: 8px; background: #54bca1; border-radius: 3px; }
.flash-session-card.upcoming > header span { color: #80621f; background: #f3dea3; }
.flash-session-card h2 { margin: 0; font-size: 14px; }
.flash-session-card > header > strong { color: #7d8582; font-size: 10px; }
.session-note { margin: 0; padding: 8px 12px; color: #8f9694; font-size: 9px; background: #fafbfb; }
.flash-product-list > a { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: center; padding: 11px 12px; border-top: 1px solid #eef0ef; }
.flash-product-list img { width: 74px; height: 74px; object-fit: cover; border-radius: 3px; }
.flash-product-list h3 { margin: 0 0 8px; font-size: 13px; }
.flash-product-list p { margin: 0 0 8px; color: #929896; font-size: 9px; }
.flash-product-list div > strong { color: #e35640; font-size: 14px; }
.flash-product-list a > span { padding: 7px 9px; color: #fff; font-size: 9px; background: #52b99f; border-radius: 3px; }
.flash-session-card.upcoming .flash-product-list a > span { color: #777e7b; background: #edf0ef; }

.home-flash-section { margin: 11px 0; padding: 12px; background: #fff; border: 1px solid #e9eceb; border-radius: 8px; }
.home-flash-section .market-section-heading { margin-bottom: 10px; }
.flash-session-preview-list { display: grid; gap: 10px; }
.flash-session-preview { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-height: 104px; padding: 11px; overflow: hidden; color: #303936; background: #fff; border: 1px solid #e5ebe9; border-radius: 9px; box-shadow: 0 3px 12px rgba(27, 60, 52, .05); }
.flash-session-preview::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; content: ""; background: #55bea3; }
.flash-session-preview.upcoming::before { background: #d5b25b; }
.flash-session-preview.ended::before { background: #adb4b1; }
.flash-session-preview > img { width: 72px; height: 78px; object-fit: cover; border-radius: 6px; }
.flash-session-preview-copy { min-width: 0; }
.flash-time-state { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; color: #fff; font-size: 11px; font-weight: 700; background: #55bca2; border-radius: 10px; }
.upcoming .flash-time-state { color: #765b1f; background: #f4dfa4; }
.ended .flash-time-state { color: #747c79; background: #e7eae9; }
.flash-session-preview h3 { margin: 6px 0 4px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.flash-session-preview p { margin: 0; color: #727a77; font-size: 12px; }
.flash-session-preview-copy small { display: block; margin-top: 5px; color: #9a7a2f; font-size: 11px; }
.flash-session-preview-time { display: flex; flex-direction: column; gap: 11px; align-items: flex-end; min-width: 112px; }
.flash-session-preview-time strong { color: #268e75; font-size: 12px; white-space: nowrap; }
.upcoming .flash-session-preview-time strong { color: #a07927; }
.ended .flash-session-preview-time strong { color: #909693; }
.flash-session-preview-time span { color: #52af98; font-size: 12px; }
.flash-session-preview-list.compact .flash-session-preview { grid-template-columns: 58px minmax(0, 1fr); min-height: 91px; padding: 9px; }
.flash-session-preview-list.compact .flash-session-preview > img { width: 58px; height: 66px; }
.flash-session-preview-list.compact .flash-session-preview-time { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; padding: 7px 4px 0; border-top: 1px solid #f0f2f1; }
.flash-session-overview-copy { margin-bottom: 10px; padding: 18px 16px; color: #fff; background: linear-gradient(135deg, #217f6a, #59bca2); border-radius: 9px; }
.flash-session-overview-copy > span { font-size: 10px; letter-spacing: 1.5px; opacity: .78; }
.flash-session-overview-copy h2 { margin: 5px 0; font-size: 21px; }
.flash-session-overview-copy p { margin: 0; font-size: 12px; line-height: 1.6; opacity: .88; }
.flash-session-detail-hero { display: flex; flex-direction: column; align-items: flex-start; padding: 21px 18px; color: #fff; background: linear-gradient(135deg, #1d6f5e, #54baa0); border-radius: 9px; box-shadow: 0 8px 22px rgba(30, 112, 92, .16); }
.flash-session-detail-hero.upcoming { background: linear-gradient(135deg, #8a6a2c, #d7b65f); }
.flash-session-detail-hero.ended { background: linear-gradient(135deg, #626c68, #929a97); }
.flash-session-detail-hero .flash-time-state { color: #21755f; background: rgba(255, 255, 255, .9); }
.flash-session-detail-hero h2 { margin: 10px 0 4px; font-size: 23px; }
.flash-session-detail-hero p { margin: 0; font-size: 13px; opacity: .85; }
.flash-session-detail-hero > strong { margin-top: 18px; padding: 10px 13px; font-size: 18px; background: rgba(21, 61, 52, .22); border: 1px solid rgba(255, 255, 255, .2); border-radius: 7px; }
.flash-session-detail-hero > small { margin-top: 11px; font-size: 12px; opacity: .86; }
.flash-session-products { margin-top: 11px; overflow: hidden; background: #fff; border: 1px solid #e8ecea; border-radius: 8px; }
.flash-session-products > header { display: flex; align-items: center; justify-content: space-between; padding: 13px 12px; border-bottom: 1px solid #edf0ef; }
.flash-session-products > header span { color: #58af99; font-size: 9px; letter-spacing: 1.2px; }
.flash-session-products > header h2 { margin: 2px 0 0; font-size: 17px; }
.flash-session-products > header > strong { color: #5ab69f; font-size: 13px; }
@media (max-width: 390px) {
    .flash-session-preview:not(.compact) { grid-template-columns: 62px minmax(0, 1fr); }
    .flash-session-preview:not(.compact) > img { width: 62px; height: 70px; }
    .flash-session-preview:not(.compact) .flash-session-preview-time { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
}

.reference-order-search { display: grid; grid-template-columns: 1fr 52px; gap: 7px; padding: 0 0 10px; }
.reference-order-search input { min-width: 0; height: 35px; padding: 0 12px; font-size: 11px; background: #fff; border: 1px solid #e4e7e6; border-radius: 17px; outline: none; }
.reference-order-search button { color: #fff; font-size: 10px; background: #52b99f; border: 0; border-radius: 17px; }
.reference-order-tabs { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 -10px 10px; background: #fff; border-bottom: 1px solid #eceeee; }
.reference-order-tabs a { position: relative; padding: 12px 2px; color: #737a78; font-size: 10px; text-align: center; }
.reference-order-tabs a.active { color: #49b397; font-weight: 700; }
.reference-order-tabs a.active::after { position: absolute; right: 23%; bottom: 0; left: 23%; height: 2px; content: ""; background: #49b397; }
.reference-order-list { display: grid; gap: 10px; }
.reference-order-list > article { overflow: hidden; background: #fff; border: 1px solid #e9eceb; border-radius: 7px; }
.reference-order-list > article > header { display: flex; justify-content: space-between; padding: 10px 12px; color: #747b79; font-size: 9px; border-bottom: 1px solid #eff1f0; }
.reference-order-list > article > header strong { color: #d16640; }
.reference-order-product { display: grid; grid-template-columns: 68px 1fr auto; gap: 10px; align-items: center; padding: 11px 12px; background: #fafafa; }
.reference-order-product img { width: 68px; height: 68px; object-fit: cover; border-radius: 3px; }
.reference-order-product h3 { margin: 0 0 7px; font-size: 12px; }
.reference-order-product p { margin: 0 0 6px; color: #969c9a; font-size: 8px; }
.reference-order-product div small { color: #b47a40; font-size: 9px; }
.reference-order-product > section { align-self: start; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.reference-order-product > section strong { font-size: 11px; }
.reference-order-product > section small { color: #999f9d; font-size: 8px; }
.reference-order-list > article > footer { display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding: 9px 12px; }
.reference-order-list > article > footer > span { margin-right: auto; color: #808785; font-size: 9px; }
.reference-order-list > article > footer > span strong { color: #222; }
.reference-order-list footer a { padding: 6px 10px; font-size: 9px; border: 1px solid #dfe3e2; border-radius: 14px; }
.reference-order-list footer a.primary { color: #fff; background: #54baa1; border-color: #54baa1; }

/* Faithful reference admin shell */
.admin-reference-body { color: #303536; background: #f5f6f8; }
.reference-sidebar { width: 220px; padding: 0 12px 30px; overflow-y: auto; color: #353b3a; background: #fff; border-right: 1px solid #edf0ef; }
.admin-brand { position: sticky; top: 0; z-index: 2; display: flex; gap: 10px; align-items: center; height: 62px; padding: 0 7px; background: #fff; border-bottom: 1px solid #f0f2f1; }
.admin-brand-symbol { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; font-family: SimSun, serif; font-size: 18px; font-weight: 700; background: linear-gradient(135deg, #59c7aa, #2ca78b); border-radius: 9px; }
.admin-brand > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.admin-brand strong { color: #29302f; font-size: 15px; }
.admin-brand small { color: #9ca3a1; font-size: 7px; letter-spacing: .8px; }
.reference-menu { display: block !important; margin-top: 10px !important; }
.reference-menu-group { margin: 0 0 5px; }
.reference-menu-group summary { display: grid; grid-template-columns: 20px 1fr auto; gap: 9px; align-items: center; margin: 0; padding: 9px 10px; color: #333a38; font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; }
.reference-menu-group summary::-webkit-details-marker { display: none; }
.reference-menu-group summary i { color: #8d9693; font-style: normal; transition: transform .15s ease; }
.reference-menu-group[open] summary i { transform: rotate(180deg); }
.menu-group-icon { display: block; width: 20px; height: 20px; }
.reference-menu .reference-menu-group a { position: relative; display: flex; gap: 10px; align-items: center; min-height: 34px; margin: 1px 0; padding: 7px 10px 7px 39px; color: #6c7472; font-size: 11px; border-radius: 5px; }
.reference-menu .single-menu-group a.top-level { gap: 9px; padding: 8px 10px; color: #333a38; font-size: 12px; font-weight: 700; }
.reference-menu .single-menu-group a.top-level > span { width: 20px; height: 20px; background-color: transparent; border-radius: 0; }
.reference-menu .reference-menu-group a > span { width: 4px; height: 4px; background: #c4cac8; border-radius: 50%; }
.reference-menu .reference-menu-group a:hover, .reference-menu .reference-menu-group a.active { color: #2cad8e; background: #eaf8f4; box-shadow: none; }
.reference-menu .reference-menu-group a.active::after { position: absolute; top: 8px; right: 0; bottom: 8px; width: 3px; content: ""; background: #4fc2a5; border-radius: 2px 0 0 2px; }
.reference-admin-shell { margin-left: 220px; }
.reference-admin-header { position: sticky; top: 0; z-index: 9; display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 22px; color: #fff; background: linear-gradient(90deg, #59c6a9, #47bda0); box-shadow: 0 2px 8px rgba(40, 140, 116, .15); }
.reference-admin-header .header-left, .reference-admin-header .header-right { display: flex; gap: 14px; align-items: center; }
.reference-admin-header .header-left strong { font-size: 14px; }
.header-menu-button { padding: 0; color: #fff; font-size: 20px; background: transparent; border: 0; }
.reference-admin-header .header-right { gap: 12px; font-size: 11px; }
.reference-admin-header .header-right a { padding-right: 13px; border-right: 1px solid rgba(255,255,255,.35); }
.header-notice { color: #fff; font-size: 8px; }
.header-avatar { display: grid; place-items: center; width: 30px; height: 30px; color: #32a98c; background: #fff; border-radius: 50%; }
.reference-admin-header .header-right strong { font-size: 11px; }
.admin-tabbar { display: flex; gap: 2px; align-items: flex-end; height: 39px; padding: 6px 12px 0; background: #fff; border-bottom: 1px solid #e9eceb; }
.admin-tabbar a, .admin-tabbar span { padding: 7px 12px; color: #777f7d; font-size: 10px; background: #f5f6f7; border-radius: 4px 4px 0 0; }
.admin-tabbar span { color: #30aa8c; background: #eaf8f4; }
.admin-tabbar b { margin-left: 12px; color: #91a09c; font-weight: 400; }
.reference-admin-main { padding: 16px 18px 40px; }
.admin-filter-card, .admin-table-card { background: #fff; border: 1px solid #eef0ef; border-radius: 9px; box-shadow: 0 2px 7px rgba(31,58,52,.035); }
.admin-filter-card { margin-bottom: 14px; padding: 17px 18px; }
.admin-filter-grid { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.admin-filter-grid label { display: flex; flex-direction: column; gap: 7px; color: #59615f; font-size: 10px; }
.admin-filter-grid input, .admin-filter-grid select { width: 190px; height: 35px; padding: 0 10px; color: #717876; background: #fff; border: 1px solid #dfe3e2; border-radius: 5px; outline: none; }
.admin-filter-actions { display: flex; gap: 8px; }
.admin-button { min-height: 35px; padding: 0 15px; color: #6e7573; font-size: 10px; background: #fff; border: 1px solid #dfe3e2; border-radius: 5px; }
.admin-button { display: inline-flex; align-items: center; justify-content: center; }
.admin-button.primary { color: #fff; background: #55bea3; border-color: #55bea3; }
.admin-table-toolbar { display: flex; justify-content: space-between; padding: 14px 15px; border-bottom: 1px solid #edf0ef; }
.admin-table-toolbar > div { display: flex; gap: 8px; }
.icon-button { width: 34px; height: 34px; color: #5dbda5; background: #fff; border: 1px solid #dce3e1; border-radius: 5px; }
.icon-button { display: inline-grid; place-items: center; }
.admin-table-scroll { overflow-x: auto; }
.reference-table { width: 100%; min-width: 850px; border-collapse: collapse; }
.reference-table th { padding: 12px 14px; color: #626a68; font-size: 10px; font-weight: 600; text-align: left; white-space: nowrap; background: #f7f8f9; border-bottom: 1px solid #ebeeee; }
.reference-table td { padding: 13px 14px; color: #555d5b; font-size: 10px; white-space: nowrap; border-bottom: 1px solid #f0f2f1; }
.table-status { display: inline-block; }
.table-status.success { padding: 3px 7px; color: #2eaa8c !important; background: #eaf8f4; border-radius: 3px; }
.table-status.warning { padding: 3px 7px; color: #d18a35 !important; background: #fff6e8; border-radius: 3px; }
.table-actions { min-width: 132px; }
.table-actions button, .table-actions a { display: inline; margin-right: 8px; padding: 0; color: #2fae90; font-size: 10px; background: none; border: 0; }
.table-actions button.danger, .table-actions a.danger { color: #e05e55; }
.table-actions form { display: inline; }
.admin-pagination { display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding: 12px 15px; color: #838a88; font-size: 9px; }
.admin-pagination button, .admin-pagination select { height: 28px; min-width: 28px; padding: 0 8px; color: #747c79; background: #fff; border: 1px solid #dfe3e2; border-radius: 4px; }
.admin-pagination button.active { color: #fff; background: #56bea3; border-color: #56bea3; }
.admin-pagination button:disabled { cursor: not-allowed; opacity: .45; }
.admin-empty { padding: 38px !important; color: #9aa19f !important; text-align: center !important; }
.module-form-preview form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.module-form-preview form > button { justify-self: start; }
.form-error { grid-column: 1 / -1; margin: 0; color: #d85850; font-size: 10px; }
.success-message { margin-bottom: 14px; padding: 11px 14px; color: #278c73; font-size: 11px; background: #eaf8f4; border: 1px solid #ccece3; border-radius: 6px; }
.admin-record-card, .admin-confirm-card { margin-top: 14px; padding: 22px; background: #fff; border: 1px solid #eef0ef; border-radius: 9px; box-shadow: 0 2px 7px rgba(31,58,52,.035); }
.admin-record-card header, .admin-record-card footer, .admin-confirm-card > div { display: flex; gap: 9px; align-items: center; justify-content: space-between; }
.admin-record-card header span, .admin-confirm-card > span { color: #42af93; font-size: 9px; font-weight: 800; letter-spacing: 1.3px; }
.admin-record-card h2, .admin-confirm-card h2 { margin: 5px 0 0; color: #3f4946; font-size: 18px; }
.admin-record-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 20px 0; overflow: hidden; background: #edf0ef; border: 1px solid #edf0ef; border-radius: 7px; }
.admin-record-card dl div { padding: 15px; background: #fff; }
.admin-record-card dt { margin-bottom: 7px; color: #929997; font-size: 9px; }
.admin-record-card dd { margin: 0; color: #4f5856; font-size: 11px; }
.admin-confirm-card { max-width: 680px; }
.admin-confirm-card p { margin: 11px 0 22px; color: #7c8582; font-size: 11px; line-height: 1.7; }
.admin-confirm-card > div { justify-content: flex-start; }
.admin-confirm-card form { margin: 0; }
.admin-button.danger-outline { color: #dd5b53; border-color: #efc6c3; }
.admin-button.danger-solid { color: #fff; background: #dc6058; border-color: #dc6058; }
.danger-card { border-top: 3px solid #dc6058; }

.admin-reference-body .toolbar { padding: 16px 18px; border-color: #eef0ef; border-radius: 9px; box-shadow: 0 2px 7px rgba(31,58,52,.035); }
.admin-reference-body .filter-group input, .admin-reference-body .filter-group select { height: 35px; border-color: #dfe3e2; border-radius: 5px; }
.admin-reference-body .filter-group button, .admin-reference-body .primary-button { color: #fff; background: #55bea3; border-radius: 5px; }
.admin-reference-body .panel { border-color: #eef0ef; border-radius: 9px; box-shadow: 0 2px 7px rgba(31,58,52,.035); }
.admin-reference-body .data-table th { background: #f7f8f9; }
.admin-reference-body .status-tag { color: #2eaa8c; background: #eaf8f4; border-radius: 3px; }
.admin-reference-body .action-group a, .admin-reference-body .action-group button { color: #2fae90; background: transparent; }
.admin-reference-body .metric-card { border-color: #eef0ef; border-radius: 9px; box-shadow: 0 2px 7px rgba(31,58,52,.035); }
.admin-reference-body .metric-card strong { color: #3cb194; }
.dashboard-session-note { margin: 12px 0 0; padding: 10px 13px; color: #57736c; font-size: 10px; background: #edf8f5; border-left: 3px solid #55bea3; border-radius: 4px; }
.admin-product-image { display: block; width: 52px; height: 52px; object-fit: cover; border-radius: 4px; }
.product-scope-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 760px; margin-bottom: 14px; }
.product-scope-tabs a { position: relative; display: grid; gap: 4px; min-height: 72px; padding: 14px 54px 12px 16px; color: #6f7875; background: #fff; border: 1px solid #e3e8e6; border-radius: 9px; box-shadow: 0 2px 7px rgba(31,58,52,.035); }
.product-scope-tabs a span { color: #424b48; font-size: 14px; font-weight: 700; }
.product-scope-tabs a small { color: #8d9592; }
.product-scope-tabs a b { position: absolute; top: 17px; right: 16px; display: grid; width: 29px; height: 29px; place-items: center; color: #73817d; background: #f1f4f3; border-radius: 50%; }
.product-scope-tabs a.active { border-color: #55bea3; box-shadow: inset 4px 0 #55bea3, 0 4px 14px rgba(53,170,141,.1); }
.product-scope-tabs a.active span, .product-scope-tabs a.active b { color: #299d81; }
.product-scope-tabs a.active b { background: #e8f8f3; }
.product-table-toolbar > div > div { display: flex; flex-direction: column; gap: 4px; }
.product-table-toolbar > div > div small { color: #8a9390; }
.configure-link { font-weight: 700; }
.product-settings-layer { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 28px; }
.product-settings-backdrop { position: absolute; inset: 0; background: rgba(22,35,32,.56); backdrop-filter: blur(3px); }
.product-settings-card { position: relative; display: flex; flex-direction: column; width: min(960px, calc(100vw - 56px)); max-height: calc(100vh - 56px); overflow: hidden; background: #fff; border-radius: 12px; box-shadow: 0 28px 90px rgba(20,37,33,.3); }
.product-settings-card > header { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; padding: 20px 24px 17px; border-bottom: 1px solid #edf0ef; }
.product-settings-card > header span { color: #36a78b; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
.product-settings-card > header h2 { margin: 4px 0; color: #313936; font-size: 19px; }
.product-settings-card > header p { margin: 0; color: #8b9391; font-size: 11px; }
.product-settings-close { display: grid; width: 34px; height: 34px; place-items: center; color: #7f8885; font-size: 25px; background: #f4f6f5; border-radius: 50%; }
.product-settings-card > form { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; }
.product-settings-body { display: grid; gap: 15px; padding: 18px 24px 24px; overflow-y: auto; }
.product-settings-body > section { padding: 15px 17px 17px; background: #fafbfb; border: 1px solid #edf0ef; border-radius: 8px; }
.product-settings-body h3 { margin: 0 0 13px; color: #44504c; font-size: 13px; }
.product-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.product-settings-grid label { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: #69726f; font-size: 11px; }
.product-settings-grid input, .product-settings-grid select { width: 100%; height: 38px; padding: 0 11px; color: #48514e; background: #fff; border: 1px solid #dce3e1; border-radius: 6px; outline: none; }
.product-settings-grid input:focus, .product-settings-grid select:focus { border-color: #55bea3; box-shadow: 0 0 0 3px rgba(85,190,163,.12); }
.product-settings-grid .input-suffix input { border-radius: 6px 0 0 6px; }
.product-settings-grid .input-suffix b { height: 38px; }
.product-settings-grid .wide-setting { grid-column: span 2; }
.settings-help { margin: 11px 0 0; color: #8a9390; font-size: 10px; }
.product-settings-card form > footer { display: flex; flex: 0 0 auto; gap: 9px; justify-content: flex-end; padding: 14px 24px; background: #fff; border-top: 1px solid #edf0ef; }

@media (max-width: 900px) {
    .product-scope-tabs, .product-settings-grid { grid-template-columns: 1fr; }
    .product-settings-grid .wide-setting { grid-column: auto; }
    .product-settings-layer { padding: 12px; }
    .product-settings-card { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
}
.cell-note { display: block; margin-top: 5px; color: #909795; font-size: 8px; }
.reference-switch { display: inline-flex; align-items: center; width: 31px; height: 17px; padding: 2px; background: #cbd0ce; border-radius: 10px; }
.reference-switch i { width: 13px; height: 13px; background: #fff; border-radius: 50%; transition: .2s; }
.reference-switch.on { justify-content: flex-end; background: #54bba1; }
.order-summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.order-summary-strip div { display: flex; flex-direction: column; gap: 8px; padding: 15px 17px; background: #fff; border: 1px solid #eef0ef; border-radius: 9px; box-shadow: 0 2px 7px rgba(31,58,52,.035); }
.order-summary-strip span { color: #828987; font-size: 9px; }
.order-summary-strip strong { color: #40b093; font-size: 18px; }
.trend-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 13px; align-items: end; height: 210px; padding: 12px 8px 0; border-bottom: 1px solid #e9eceb; }
.trend-bars div { display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; height: 100%; text-align: center; }
.trend-bars span { min-height: 10px; background: linear-gradient(180deg, #55c0a4, #9bdac9); border-radius: 5px 5px 0 0; }
.trend-bars small { color: #89908e; font-size: 8px; }
.flash-session-overview, .flash-session-rule-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.flash-session-overview > div, .flash-session-rule-grid > div { display: flex; flex-direction: column; gap: 7px; padding: 15px 17px; background: #fff; border: 1px solid #eef0ef; border-radius: 9px; box-shadow: 0 2px 7px rgba(31,58,52,.035); }
.flash-session-overview span, .flash-session-rule-grid span { color: #858e8b; font-size: 9px; }
.flash-session-overview strong, .flash-session-rule-grid strong { color: #3cad91; font-size: 17px; }
.flash-session-rule-grid small { color: #8a9290; font-size: 9px; }
.flash-session-form form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flash-session-detail-head { display: flex; align-items: center; justify-content: space-between; margin: 14px 0; padding: 20px; background: #fff; border: 1px solid #eef0ef; border-radius: 9px; }
.flash-session-detail-head > div > span { color: #42af93; font-size: 9px; font-weight: 800; letter-spacing: 1.3px; }
.flash-session-detail-head h2 { margin: 5px 0; color: #3f4946; font-size: 20px; }
.flash-session-detail-head p { margin: 0; color: #838c89; font-size: 10px; }
.flash-session-actions { display: flex; gap: 8px; align-items: center; }
.flash-session-actions form { margin: 0; }
.flash-product-picker .admin-table-toolbar > div > div { display: flex; flex-direction: column; gap: 5px; }
.flash-product-picker .admin-table-toolbar small { color: #8c9492; font-size: 9px; }
.table-stock-input { width: 84px; height: 31px; padding: 0 8px; border: 1px solid #dfe3e2; border-radius: 4px; }
.table-owner-input { width: 150px; height: 31px; padding: 0 8px; color: #59615f; background: #fff; border: 1px solid #dfe3e2; border-radius: 4px; }
.table-money-input { display: inline-flex; align-items: center; height: 31px; overflow: hidden; background: #fff; border: 1px solid #dfe3e2; border-radius: 4px; }
.table-money-input span { padding-left: 8px; color: #8b9390; font-size: 10px; }
.table-money-input input { width: 100px; height: 29px; padding: 0 8px 0 4px; color: #515a57; border: 0; outline: none; }
.table-action-muted { color: #a5adaa; font-size: 9px; }
.split-product-summary { display: flex; gap: 28px; align-items: center; justify-content: space-between; margin: 14px 0; padding: 20px; background: #fff; border: 1px solid #eef0ef; border-radius: 9px; }
.split-product-summary > div > span { color: #42af93; font-size: 9px; font-weight: 800; letter-spacing: 1.3px; }
.split-product-summary h2 { margin: 5px 0; color: #3f4946; font-size: 20px; }
.split-product-summary p { margin: 0; color: #838c89; font-size: 10px; }
.split-product-summary dl { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 1px; margin: 0; overflow: hidden; background: #edf0ef; border: 1px solid #edf0ef; border-radius: 7px; }
.split-product-summary dl div { padding: 12px 18px; background: #fff; }
.split-product-summary dt { margin-bottom: 7px; color: #929997; font-size: 9px; }
.split-product-summary dd { margin: 0; color: #36a98d; font-size: 13px; font-weight: 700; }
.split-product-card .admin-table-toolbar { align-items: center; }
.split-product-card .admin-table-toolbar > div:last-child { align-items: center; }
.split-count-setting { display: flex; align-items: center; }
.split-count-setting label { display: flex; gap: 8px; align-items: center; color: #59615f; font-size: 10px; }
.split-count-setting input { width: 64px; height: 31px; padding: 0 8px; border: 1px solid #dfe3e2; border-radius: 4px; }
.split-count-setting small { color: #929997; font-size: 9px; }
.split-total { color: #7d8582; font-size: 9px; }
.split-total strong { color: #32a98c; }
.split-name-input { width: 260px; height: 31px; padding: 0 9px; border: 1px solid #dfe3e2; border-radius: 4px; }
.split-clear-form { margin-top: 14px; text-align: right; }
.flash-session-delete { margin-top: 18px; text-align: right; }
.flash-session-delete button { color: #df6158; font-size: 10px; background: transparent; border: 0; }
.store-decoration-host { min-height: 100%; padding-bottom: 12px; }
.store-dk-member { display: flex; gap: 12px; align-items: center; min-height: 118px; padding: 20px 17px; color: #fff; background-position: center; background-size: cover; }
.store-dk-member > i { display: grid; flex: none; width: 52px; height: 52px; place-items: center; font-size: 20px; font-style: normal; background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.65); border-radius: 50%; }
.store-dk-member > div { display: grid; gap: 4px; min-width: 0; }
.store-dk-member small, .store-dk-member span { font-size: 10px; opacity: .85; }
.store-dk-member button { margin-left: auto; padding: 7px 10px; color: #3c8f7b; font-size: 10px; background: #fff; border: 0; border-radius: 999px; }
.store-dk-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 12px; overflow: hidden; background: #edf1ef; border-radius: 12px; }
.store-dk-assets > * { display: grid; gap: 5px; padding: 15px; color: #59635f; background: #fff; }
.store-dk-assets small, .store-dk-panel small { color: #8b9491; font-size: 10px; }
.store-dk-assets strong { color: #2eaa8c; font-size: 17px; }
.store-dk-panel { margin: 12px; padding: 14px; background: #fff; border-radius: 12px; }
.store-dk-panel header { display: flex; align-items: center; justify-content: space-between; }
.store-dk-panel header a { color: #8b9491; font-size: 10px; }
.store-dk-panel > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 5px; padding-top: 15px; text-align: center; }
.store-dk-panel > div a { display: grid; gap: 5px; color: #59635f; }
.store-dk-panel > div b { color: #2eaa8c; font-size: 15px; }
.store-dk-panel > div a { justify-items: center; }
.store-dk-panel .ui-icon { width: 26px; height: 26px; }
.store-dk-order-icon { position: relative; display: grid; place-items: center; width: 30px; height: 30px; }
.store-dk-panel > div .store-dk-order-count { position: absolute; top: -8px; right: -11px; display: flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; color: #fff; font-size: 11px; line-height: 1; background: #ef6756; border: 2px solid #fff; border-radius: 999px; }
.store-decoration-host .dk-nav img { flex: 0 0 auto; object-fit: contain; }
.store-decoration-host .dk-nav:not(.scroll) button { min-width: 0; }
.store-dk-logout { width: calc(100% - 24px); min-height: 42px; margin: 12px; color: #d65f57; background: #fff; border: 0; border-radius: 12px; }

@media (max-width: 720px) {
    html, body.reference-mobile-body { width: 100%; max-width: 100%; overflow-x: hidden; }
    .reference-mobile-body { display: block; padding: 0; background: #f5f5f5; }
    .mobile-preview-stage { width: 100%; height: 100vh; height: 100dvh; }
    .reference-mobile-body .phone-shell { width: 100% !important; max-width: 100% !important; height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; transform: none; }
    .reference-mobile-body .mobile-header, .reference-mobile-body .mobile-main, .reference-mobile-body .mobile-nav { width: 100% !important; max-width: 100% !important; }
    .reference-wallet-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .reference-wallet-grid a, .reference-member-copy { min-width: 0; }
}

/* Global readability scale: keep dense layouts, but avoid sub-12px interface text. */
.reference-mobile-body { font-size: 14px; }
.reference-mobile-body .mobile-header h1 { font-size: 18px; }
.reference-mobile-body .mobile-nav a { font-size: 13px; }
.reference-mobile-body .mobile-main small { font-size: 12px; line-height: 1.45; }
.reference-mobile-body .mobile-main input,
.reference-mobile-body .mobile-main select,
.reference-mobile-body .mobile-main textarea,
.reference-mobile-body .mobile-main button { font-size: 14px; }
.reference-mobile-body .flash-message,
.reference-mobile-body .header-action,
.reference-mobile-body .soft-badge,
.reference-mobile-body .notice-strip span,
.reference-mobile-body .notice-strip p,
.reference-mobile-body .quick-grid small,
.reference-mobile-body .zone-description,
.reference-mobile-body .product-info > p,
.reference-mobile-body .page-tip,
.reference-mobile-body .plain-copy,
.reference-mobile-body .process-panel > p,
.reference-mobile-body .payment-notice,
.reference-mobile-body .invite-card a { font-size: 14px; }
.reference-mobile-body .eyebrow,
.reference-mobile-body .section-heading span,
.reference-mobile-body .product-meta,
.reference-mobile-body .advance-line,
.reference-mobile-body .advance-banner span,
.reference-mobile-body .asset-content span,
.reference-mobile-body .asset-content p,
.reference-mobile-body .asset-card button,
.reference-mobile-body .asset-card > a,
.reference-mobile-body .stack-form label,
.reference-mobile-body .fee-summary > div,
.reference-mobile-body .result-list > div,
.reference-mobile-body .workflow-status > span,
.reference-mobile-body .workflow-status p { font-size: 13px; }
.reference-mobile-body .text-button,
.reference-mobile-body .back-link,
.reference-mobile-body .detail-panel > p,
.reference-mobile-body .amount-main span,
.reference-mobile-body .warehouse-summary span,
.reference-mobile-body .tab-row button,
.reference-mobile-body .tab-row a,
.reference-mobile-body .payment-summary > div { font-size: 15px; }
.reference-mobile-body .primary-pill,
.reference-mobile-body .sticky-purchase small,
.reference-mobile-body .product-visual > span,
.reference-mobile-body .detail-visual > span { font-size: 12px; }
.reference-mobile-body .product-info h3,
.reference-mobile-body .asset-content h3 { font-size: 17px; }

.reference-member-copy h2 { font-size: 17px; }
.reference-member-copy span,
.reference-member-copy p,
.reference-profile-shortcuts small { font-size: 12px; }
.reference-wallet-grid strong { font-size: 18px; }
.reference-wallet-grid small { font-size: 12px; }
.reference-order-panel h2 { font-size: 17px; }
.reference-order-panel header a { font-size: 13px; }
.reference-order-panel > div small { font-size: 12px; }
.reference-order-panel > div span b { font-size: 11px; }
.reference-profile-menu span { font-size: 16px; }
.reference-profile-menu small { font-size: 12px; }
.reference-tool-card > p,
.reference-tool-card > div { font-size: 14px; }
.warehouse-tabs a,
.reference-order-tabs a { font-size: 13px; }
.reference-warehouse-list article > header,
.reference-warehouse-list section p,
.flash-privilege-strip,
.flash-session-card > header > strong,
.reference-order-search button { font-size: 13px; }
.reference-warehouse-list section h3,
.flash-product-list h3,
.reference-order-product h3 { font-size: 16px; }
.reference-warehouse-list section small,
.reference-warehouse-list section em,
.reference-warehouse-list article > footer,
.session-note,
.flash-product-list p,
.flash-product-list a > span,
.reference-order-list > article > header,
.reference-order-product p,
.reference-order-product div small,
.reference-order-product > section small,
.reference-order-list > article > footer > span,
.reference-order-list footer a { font-size: 12px; }
.flash-session-card > header span { font-size: 11px; }
.flash-session-card h2,
.flash-product-list div > strong { font-size: 17px; }
.reference-order-search input { font-size: 14px; }
.reference-order-product > section strong { font-size: 14px; }

.order-overview-title span,
.order-card > header small,
.order-product-copy p,
.order-product-copy small,
.order-price small,
.order-amount-row,
.order-card > footer button,
.order-card > footer a { font-size: 12px; }
.order-overview-title > a,
.order-status-grid small,
.order-filter-bar a,
.order-card > header span,
.order-state,
.empty-orders p,
.empty-orders a,
.payment-product p,
.payment-summary .personal-payment small { font-size: 13px; }
.order-product-copy h3,
.order-price strong,
.payment-product > strong { font-size: 15px; }

.admin-reference-body { font-size: 14px; }
.admin-brand small { font-size: 10px; }
.reference-menu-group summary,
.reference-menu .single-menu-group a.top-level { font-size: 14px; }
.reference-menu .reference-menu-group a { min-height: 38px; font-size: 13px; }
.reference-admin-header .header-left strong { font-size: 16px; }
.reference-admin-header .header-right,
.reference-admin-header .header-right strong,
.admin-tabbar a,
.admin-tabbar span { font-size: 13px; }
.admin-filter-grid label,
.admin-button,
.reference-table th,
.reference-table td,
.table-actions button,
.table-actions a,
.form-error,
.dashboard-session-note,
.flash-session-detail-head p,
.table-money-input span,
.flash-session-delete button { font-size: 13px; }
.admin-pagination,
.admin-record-card header span,
.admin-confirm-card > span,
.admin-record-card dt,
.order-summary-strip span,
.flash-session-overview span,
.flash-session-rule-grid span,
.flash-session-rule-grid small,
.flash-session-detail-head > div > span,
.flash-product-picker .admin-table-toolbar small,
.table-action-muted,
.split-product-summary > div > span,
.split-product-summary p,
.split-product-summary dt,
.split-count-setting small,
.split-total { font-size: 12px; }
.success-message,
.admin-record-card dd,
.admin-confirm-card p,
.split-count-setting label { font-size: 14px; }
.cell-note,
.trend-bars small { font-size: 11px; line-height: 1.4; }

/* Admin batch operations and member-listed flash product pool */
.batch-toolbar { align-items: center; gap: 14px; }
.batch-toolbar > div { align-items: center; flex-wrap: wrap; }
.batch-toolbar select { min-width: 128px; min-height: 35px; padding: 0 30px 0 10px; color: #58615f; font-size: 13px; background: #fff; border: 1px solid #dfe3e2; border-radius: 5px; }
.batch-toolbar [data-selected-count] { color: #249b7e; }
.reference-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: #40af91; cursor: pointer; }
.data-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: #40af91; cursor: pointer; }
.reference-table th:first-child,
.reference-table td:first-child { width: 42px; text-align: center; }
.flash-products-note { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 16px; padding: 22px 26px; color: #f6fffc; background: linear-gradient(125deg, #23896f, #54baa0); border-radius: 9px; box-shadow: 0 9px 22px rgba(35, 137, 111, .15); }
.flash-products-note span { font-size: 10px; letter-spacing: 1.8px; opacity: .78; }
.flash-products-note h2 { margin: 5px 0 6px; font-size: 21px; }
.flash-products-note p { max-width: 720px; margin: 0; font-size: 13px; line-height: 1.7; opacity: .9; }
.flash-products-note > strong { min-width: 118px; font-size: 30px; text-align: center; }
.flash-products-note > strong small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; opacity: .82; }
.table-product-cell { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.table-product-cell span { display: flex; flex-direction: column; gap: 4px; }
.table-product-cell small { color: #949b99; }
.flash-listed-products-table { min-width: 1320px; }
@media (max-width: 760px) {
    .flash-products-note { align-items: flex-start; padding: 18px; }
    .flash-products-note > strong { min-width: 72px; font-size: 24px; }
}

.configuration-browse{display:flex;gap:8px;overflow-x:auto;padding:8px 0;flex-shrink:0}.configuration-browse a{flex-shrink:0;padding:8px 12px;border-radius:18px;background:#fff;border:1px solid #e3e9e5;font-size:14px;color:#3d5e50}.configuration-browse a[aria-current=page]{background:#176148;color:#fff}

.configured-banner-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px}.configured-banner-track>a{position:relative;flex:0 0 100%;scroll-snap-align:start}.configured-banner-track img{width:100%;height:170px;object-fit:cover;border-radius:16px}.configured-banner-track strong{position:absolute;bottom:12px;left:12px;color:white;background:#18392dcc;padding:8px;border-radius:8px}.configured-activity-card{display:flex;flex-direction:column;gap:12px;border:1px solid #e3ebe5;border-radius:12px;padding:12px;margin:12px 0}.configured-activity-card.is-horizontal{flex-direction:row}.configured-activity-card img{width:100%;height:150px;object-fit:cover;border-radius:8px}.configured-activity-card.is-horizontal img{width:90px;height:90px}.configured-activity-card span{display:flex;flex-direction:column;gap:8px}.configured-activity-card b{color:#16604a}

/* Confine wide admin content to its panel so the fixed sidebar never covers controls. */
.admin-body{min-width:0}.reference-admin-shell{min-width:0}.reference-admin-main{min-width:0;overflow-x:auto}.reference-admin-header{overflow-x:auto}