:root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --ink: #1a1a1a;
    --muted: #8c8c8c;
    --line: #e8e8e8;
    --soft: #f5f5f5;
    --accent: #e66a1c;
    --accent-dark: #c75814;
    --accent-light: #fff7f0;
    --danger: #ff4d4f;
    --warning: #faad14;
    --success: #52c41a;
    --radius: 8px;
    --shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, .btn, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }

.site-header {
    position: sticky; top: 0; z-index: 20;
    background: rgba(245, 246, 242, .9);
    border-bottom: 1px solid rgba(215, 219, 209, .7);
    backdrop-filter: blur(16px);
}
.header-inner {
    width: min(1120px, calc(100% - 40px)); height: 76px; margin: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-logo { height: 32px; width: auto; border-radius: 8px; display: block; }
.brand-mark {
    width: 42px; height: 42px; display: inline-grid; place-items: center;
    background: var(--ink); color: var(--accent); border-radius: 13px;
    font-size: 20px; font-weight: 900; transform: rotate(-4deg);
}
.brand > span:last-child { display: grid; gap: 1px; }
.brand strong { font-size: 18px; line-height: 1.2; }
.brand small { color: var(--muted); font-size: 11px; }
.desktop-nav { display: flex; align-items: center; gap: 10px; }
.desktop-nav a {
    padding: 10px 15px; color: #4f534b; border-radius: 10px;
    transition: background .2s, color .2s;
}
.desktop-nav a:hover { background: var(--surface); color: var(--ink); }
.header-search { position: relative; display: flex; align-items: center; }
.header-search-icon { position: absolute; left: 12px; font-size: 16px; color: var(--muted); pointer-events: none; }
.header-search input {
    width: 200px; padding: 9px 14px 9px 34px; border: 1px solid var(--border);
    border-radius: 999px; font-size: 14px; background: var(--surface); color: var(--ink);
    transition: border-color .2s, background .2s;
}
.header-search input:focus { outline: none; border-color: var(--accent); background: #fff; }
.header-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 搜索建议下拉 */
.search-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,.1);
    margin-top: 4px;
    overflow: hidden;
    z-index: 100;
    display: none;
}
.search-suggest.show { display: block; }
.search-suggest-item {
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #f5f0ea;
    transition: background .15s;
}
.search-suggest-item:last-child { border-bottom: none; }
.search-suggest-item:hover,
.search-suggest-item.active {
    background: #fff5ed;
}
.search-suggest-name {
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.search-suggest-name mark {
    background: transparent;
    color: var(--accent);
    font-weight: 700;
}
.search-suggest-price {
    font-size: 13px;
    color: var(--accent);
    font-weight: 700;
    flex-shrink: 0;
}
.search-suggest-empty {
    padding: 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}
.mobile-catalog-search .search-suggest {
    border-radius: 12px;
    margin-top: 6px;
}
.menu-toggle, .admin-menu-toggle {
    display: none; border: 0; background: transparent; font-size: 24px; cursor: pointer;
}
.mobile-nav { display: none; }

.hero {
    width: min(1120px, calc(100% - 40px)); min-height: 230px; margin: 42px auto 0;
    padding: 42px 46px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
    border-radius: 26px; background: var(--ink); color: white; overflow: hidden; position: relative;
}
.hero::after {
    content: ""; position: absolute; width: 350px; height: 350px; right: 12%; top: -260px;
    border: 70px solid rgba(230, 106, 28, .15); border-radius: 50%;
}
.eyebrow {
    display: block; margin-bottom: 13px; color: #c75814; font-size: 11px;
    letter-spacing: .17em; font-weight: 800;
}
.hero .eyebrow { color: var(--accent); }
.hero h1 { margin: 0; font-size: clamp(30px, 4vw, 49px); letter-spacing: -.045em; line-height: 1.12; }
.hero p { max-width: 650px; margin: 16px 0 0; color: #a8927a; line-height: 1.8; }
.hero-order {
    flex: 0 0 180px; padding: 21px 22px; border-radius: 16px;
    background: var(--accent); color: var(--ink); display: grid; gap: 5px;
    transition: transform .2s;
}
.hero-order:hover { transform: translateY(-3px); }
.hero-order span { font-size: 12px; color: #52632e; }
.hero-order strong { font-size: 16px; }

.catalog, .page-shell, .lookup-shell {
    width: min(1120px, calc(100% - 40px)); margin: 34px auto 80px;
}
.category-tabs { display: flex; gap: 10px; margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs a {
    flex: 0 0 auto; padding: 11px 20px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: #555950; font-weight: 650;
}
.category-tabs a.active { background: var(--ink); color: white; border-color: var(--ink); }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.product-card {
    min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; transition: transform .22s, box-shadow .22s, border-color .22s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #e8ddd0; }
.product-cover { display: block; position: relative; aspect-ratio: 1 / 1; padding: 10px; background: #eceee8; }
.product-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.cover-placeholder {
    width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 11px;
    border-radius: 12px; color: var(--ink);
    background: radial-gradient(circle at 75% 20%, rgba(230,106,28,.8), transparent 28%), linear-gradient(145deg, #fdf0e6, #f0dcc8);
}
.cover-placeholder b {
    width: 76px; height: 76px; display: grid; place-items: center; background: var(--ink);
    color: var(--accent); border-radius: 24px; font-size: 36px; transform: rotate(-5deg);
}
.cover-placeholder small { font-weight: 700; letter-spacing: .08em; color: #8a7560; }
.soldout {
    position: absolute; inset: 10px; display: grid; place-items: center; border-radius: 12px;
    color: white; font-weight: 800; background: rgba(17, 18, 16, .68); backdrop-filter: blur(3px);
}
.product-info { padding: 16px; }
.product-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.price { font-size: 23px; font-weight: 850; letter-spacing: -.04em; }
.price small { font-size: 14px; margin-right: 2px; }

/* 商品卡片：登录用户价格区 */
.price-logged-in { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.price-logged-in .price-original { font-size: 14px; font-weight: 500; color: #b0a89c; text-decoration: line-through; }
.price-logged-in .price-member { font-size: 23px; font-weight: 850; color: #e66a1c; letter-spacing: -.04em; }
.price-logged-in .price-member small { font-size: 14px; margin-right: 2px; }
.price-level-tag { font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: #e66a1c; padding: 2px 7px; border-radius: 999px; white-space: nowrap; line-height: 1.4; }
.stock { padding: 5px 8px; border-radius: 7px; color: var(--muted); background: var(--soft); font-size: 11px; white-space: nowrap; }
.product-info h2 { margin: 11px 0 5px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-info p { margin: 0 0 15px; color: var(--muted); font-size: 12px; }
.buy-link {
    display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 14px;
    border: 1px solid #e8ddd0; border-radius: 10px; font-size: 13px; font-weight: 700;
}
.buy-link:hover { background: var(--ink); color: white; border-color: var(--ink); }
.buy-link.disabled { color: #999; pointer-events: none; }
.empty-state { padding: 56px 20px; text-align: center; background: var(--surface); border: 1px dashed #e8ddd0; border-radius: var(--radius); }
.empty-state strong { font-size: 19px; }
.empty-state p { color: var(--muted); margin-bottom: 0; }
.site-footer { padding: 35px 20px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 12px; }
.site-footer p { margin: 7px 0 0; }

.btn {
    display: inline-flex; min-height: 44px; align-items: center; justify-content: center;
    padding: 11px 19px; border: 1px solid transparent; border-radius: 11px;
    font-weight: 750; cursor: pointer; transition: transform .18s, background .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: #e66a1c; }
.btn-outline { color: var(--ink); background: white; border-color: #e8ddd0; }
.btn-light { background: white; color: var(--ink); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.back-link { display: inline-block; margin: 6px 0 22px; color: var(--muted); }
.purchase-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: start; }
.purchase-product { padding: 12px 20px 20px 0; }
.purchase-image {
    float: left; width: 190px; aspect-ratio: 1; margin: 0 25px 25px 0; padding: 9px;
    background: #f5ede3; border-radius: 20px;
}
.purchase-image img, .purchase-image .cover-placeholder { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.purchase-image .cover-placeholder b { width: 62px; height: 62px; font-size: 28px; }
.purchase-product h1 { margin: 0 0 12px; font-size: 31px; letter-spacing: -.03em; }
.detail-price { font-size: 38px; font-weight: 850; margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.detail-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-stats span { background: #f5ede3; color: #6b5848; border-radius: 8px; padding: 7px 10px; font-size: 12px; }
.detail-stats b { color: var(--ink); }
.product-description { clear: both; padding-top: 28px; color: #60645c; line-height: 1.85; border-top: 1px solid var(--line); }
.checkout-card {
    padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow);
}
.step-label { display: inline-block; padding: 6px 9px; border-radius: 7px; background: #fdf0e6; color: #c75814; font-size: 11px; font-weight: 800; }
.checkout-card h2 { margin: 12px 0 24px; font-size: 25px; }
label { display: grid; gap: 8px; color: #4a3520; font-weight: 650; }
label small { color: var(--muted); font-size: 11px; font-weight: 400; }
input, select, textarea {
    width: 100%; border: 1px solid #e8ddd0; background: white; color: var(--ink);
    border-radius: 10px; padding: 11px 13px; outline: none; transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { border-color: #f0a868; box-shadow: 0 0 0 3px rgba(230, 106, 28, .16); }
textarea { resize: vertical; line-height: 1.6; }
.checkout-form { display: grid; gap: 19px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 650; margin-bottom: 9px; color: #4a3520; }
.pay-options { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.pay-options label { position: relative; display: block; cursor: pointer; flex: 1 1 200px; max-width: 300px; }
.pay-options input { position: absolute; opacity: 0; }
.pay-options span { display: block; padding: 11px; border: 1px solid #e8ddd0; border-radius: 9px; text-align: center; }
.pay-options input:checked + span { border-color: var(--ink); background: var(--ink); color: white; }
.pay-options .pay-balance span {
  background: linear-gradient(135deg, #fff4d6 0%, #ffdc8a 100%) !important;
  border: 2px solid #e6b42e !important;
  color: #7a5500 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(230, 180, 46, 0.25) !important;
  position: relative;
}
.pay-options .pay-balance span::before {
  content: "💰";
  margin-right: 6px;
}
.pay-options .pay-balance input:checked + span {
  background: linear-gradient(135deg, #ffc94a 0%, #e6a01f 100%) !important;
  border-color: #b8820a !important;
  color: #4a2e00 !important;
  box-shadow: 0 4px 16px rgba(230, 160, 31, 0.45) !important;
}
.checkout-total { display: flex; justify-content: space-between; align-items: center; padding: 17px 0; border-top: 1px solid var(--line); }
.checkout-total strong { font-size: 30px; }
.safe-tip { margin: -7px 0 0; color: var(--muted); font-size: 11px; text-align: center; }

.flash { padding: 12px 16px; border-radius: 9px; font-size: 14px; margin-bottom: 14px; }
.flash-error { background: #fff0f0; color: #c0392b; border: 1px solid #f5c6cb; }
.flash-warning { background: #fff8e6; color: #8a6500; border: 1px solid #ffe08a; }
.flash-info { background: #fff4e6; color: #c75814; border: 1px solid #ffd4a8; }
.flash-success { background: #e6f7ee; color: #1a7a52; border: 1px solid #a8e6c4; }

.lookup-shell { max-width: 760px; }
.lookup-heading { margin: 60px 0 28px; }
.lookup-heading h1 { font-size: 36px; margin: 0 0 10px; }
.lookup-heading p { color: var(--muted); }
.lookup-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 12px; padding: 22px; background: white; border: 1px solid var(--line); border-radius: 16px; }
.order-result { margin-top: 20px; padding: 27px; background: white; border: 1px solid var(--line); border-radius: 18px; }
.order-result-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.order-result-head div { display: grid; gap: 5px; }
.order-result-head span { color: var(--muted); font-size: 11px; }
.order-result-head strong { font-size: 17px; }
.order-result dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 25px; margin: 23px 0; }
.order-result dl div { display: grid; gap: 6px; }
.order-result dt { color: var(--muted); font-size: 11px; }
.order-result dd { margin: 0; font-weight: 650; }
.card-delivery { padding: 18px; border-radius: 13px; background: #fdf0e6; border: 1px solid #f0dcc8; }
.card-delivery > div { display: flex; justify-content: space-between; align-items: center; font-weight: 750; }
.card-delivery button { border: 0; background: transparent; color: #c75814; cursor: pointer; font-weight: 750; }
.card-delivery pre { overflow-x: auto; padding: 15px; border-radius: 9px; background: var(--ink); color: var(--accent); white-space: pre-wrap; word-break: break-all; font: 14px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.card-delivery p { color: var(--muted); font-size: 11px; margin-bottom: 0; }

.order-notice { margin-top: 12px; padding: 16px 18px; border-radius: 12px; background: #FFF5F5; border: 1px solid #FFD4D4; }
.order-notice-head { display: flex; align-items: center; gap: 7px; color: #D64541; font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.order-notice-body { color: #D64541; font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; font-weight: 500; }

.order-list-wrap { margin-top: 20px; }
.order-list-tip { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.order-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.order-list-item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; background: white; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.order-list-item:hover { border-color: var(--accent); box-shadow: 0 2px 12px rgba(230,106,28,.08); }
.order-list-info { display: grid; gap: 3px; }
.order-list-info strong { font-size: 15px; }
.order-list-no { font-size: 12px; color: var(--muted); }
.order-list-info small { font-size: 11px; color: var(--muted); }
.order-list-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.order-list-amount { font-size: 15px; font-weight: 700; color: var(--accent); }
@media (max-width: 600px) {
    .lookup-form { grid-template-columns: 1fr; }
    .order-list-item { flex-direction: column; align-items: flex-start; gap: 8px; }
    .order-list-right { flex-direction: row; align-items: center; }
}
.status { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; white-space: nowrap; font-style: normal; }
.status-success { color: #477500; background: #eaf6d5; }
.status-info { color: #c75814; background: #fdf0e6; }
.status-warning { color: #8a5c00; background: #fff0c9; }
.status-muted { color: #9a8770; background: #f5ede3; }

.toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: 360px; }
.toast { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; box-shadow: 0 8px 30px rgba(0,0,0,.14); pointer-events: auto; animation: toast-slide-in .35s cubic-bezier(.21,1.02,.73,1) both; min-width: 240px; }
.toast.toast-out { animation: toast-slide-out .3s ease forwards; }
.toast-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.toast-msg { flex: 1; line-height: 1.4; }
.toast-msg br { display: block; margin-top: 4px; content: ""; }
.toast-close { cursor: pointer; font-size: 18px; line-height: 1; color: rgba(0,0,0,.3); flex-shrink: 0; padding: 0 2px; transition: color .2s; }
.toast-close:hover { color: rgba(0,0,0,.6); }
.toast-success { color: #1a7d3a; background: #f0fbef; border: 1px solid #c7ecbf; }
.toast-success .toast-icon { background: #4caf50; color: #fff; }
.toast-error { color: #9c2e2e; background: #fde7e7; border: 1px solid #f4caca; }
.toast-error .toast-icon { background: #ef4444; color: #fff; }
.toast-warning { color: #835900; background: #fff8e8; border: 1px solid #f3dfaa; }
.toast-warning .toast-icon { background: #f59e0b; color: #fff; }
.toast-info { color: #c75814; background: #fdf0e6; border: 1px solid #f0dcc8; }
.toast-info .toast-icon { background: #e66a1c; color: #fff; }
@keyframes toast-slide-in { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-slide-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(60px); } }

.redirect-page, .login-page, .install-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.redirect-card { width: min(460px, 100%); padding: 45px; text-align: center; background: white; border-radius: 22px; box-shadow: var(--shadow); }
.redirect-card h1 { margin-bottom: 7px; }
.redirect-card p { color: var(--muted); }
.redirect-card form { margin-top: 25px; }
.loader { display: inline-block; width: 34px; height: 34px; border: 4px solid #e8ddd0; border-top-color: var(--accent-dark); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 扫码支付页面（支付宝 / 微信） */
.alipay-qr-card, .wechat-qr-card { width: min(420px, 100%); padding: 36px 30px; text-align: center; }
.alipay-qr-card h1, .wechat-qr-card h1 { font-size: 22px; }
.alipay-qr-card .order-no, .wechat-qr-card .order-no { font-size: 12px; color: var(--muted); margin: 4px 0 0; word-break: break-all; }
.alipay-qr-card .amount-display, .wechat-qr-card .amount-display { margin: 14px 0 22px; font-size: 15px; color: var(--muted); }
.alipay-qr-card .amount-display strong, .wechat-qr-card .amount-display strong { font-size: 32px; color: #e66a1c; font-weight: 700; }
.alipay-qr-card .qr-wrapper, .wechat-qr-card .qr-wrapper { display: flex; justify-content: center; width: 100%; }
.alipay-qr-card .qr-box, .wechat-qr-card .qr-box { padding: 16px; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,.04); width: fit-content; }
.alipay-qr-card .qr-box img,
.alipay-qr-card .qr-box canvas, .wechat-qr-card .qr-box img { display: block; border-radius: 6px; }
.alipay-qr-card .qr-tip, .wechat-qr-card .qr-tip { margin-top: 18px; font-size: 13px; }
.alipay-qr-card .qr-status, .wechat-qr-card .qr-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 8px 18px; border-radius: 20px; font-size: 14px; background: #f5f5f5; color: var(--muted); }
.alipay-qr-card .qr-status .qr-status-dot, .wechat-qr-card .qr-status .qr-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #bbb; animation: pulse-dot 1.5s ease-in-out infinite; }
.alipay-qr-card .qr-status.paid, .wechat-qr-card .qr-status.paid { background: #e6f7ee; color: #1dc981; font-weight: 600; }
.alipay-qr-card .qr-status.paid .qr-status-dot, .wechat-qr-card .qr-status.paid .qr-status-dot { background: #1dc981; animation: none; }
.alipay-qr-card .qr-status.timeout, .wechat-qr-card .qr-status.timeout { background: #fff0f0; color: #e8463a; }
.alipay-qr-card .qr-status.timeout .qr-status-dot, .wechat-qr-card .qr-status.timeout .qr-status-dot { background: #e8463a; animation: none; }
.wechat-qr-card .qr-status.pending { background: #fff4e6; color: #e66a1c; font-weight: 600; }
.wechat-qr-card .qr-status.pending .qr-status-dot { background: #e66a1c; animation: none; }
.wechat-qr-card .btn-block { margin-top: 18px; }
.wechat-qr-card .qr-box img { width: 220px; height: 220px; object-fit: contain; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* 支付成功遮罩层 */
.pay-success-overlay { position: fixed; inset: 0; background: rgba(255,255,255,.98); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: fadeIn .25s ease; }
.pay-success-modal { text-align: center; padding: 40px; }
.pay-success-icon { display: flex; justify-content: center; margin-bottom: 20px; }
.pay-success-icon svg { animation: popIn .4s cubic-bezier(.18,.89,.32,1.28); }
.pay-success-circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: drawCircle .5s ease forwards; }
.pay-success-check { stroke-dasharray: 48; stroke-dashoffset: 48; animation: drawCheck .35s ease .45s forwards; }
.pay-success-modal h2 { font-size: 24px; color: #1dc981; margin: 0 0 8px; animation: slideUp .3s ease .5s both; }
.pay-success-desc { color: var(--muted); font-size: 14px; margin: 0 0 24px; animation: slideUp .3s ease .6s both; }
.pay-success-loader { width: 28px; height: 28px; border: 3px solid #e8ddd0; border-top-color: #1dc981; border-radius: 50%; margin: 0 auto; animation: spin .8s linear infinite; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.pay-mode-block { margin-top: 20px; animation: fadeSlide .25s ease; }
.pay-mode-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* 优惠券 - 购买页 */
.coupon-field { margin: 16px 0; padding: 14px; background: var(--soft); border-radius: 12px; }
.coupon-field > label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.coupon-field > label small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.coupon-input-row { display: flex; gap: 8px; }
.coupon-input-row input { flex: 1; min-width: 0; }
.coupon-apply-btn { white-space: nowrap; padding: 8px 16px; }
.coupon-result { margin-top: 8px; font-size: 13px; min-height: 18px; }
.coupon-result.success { color: #1dc981; font-weight: 600; }
.coupon-result.error { color: var(--danger); }
.checkout-amounts { display: flex; align-items: baseline; gap: 10px; }
.checkout-amounts .original-price { font-size: 14px; color: var(--muted); text-decoration: line-through; }
.checkout-amounts .discount-line { font-size: 14px; color: #e8463a; font-weight: 600; }

/* 优惠券 - 后台管理 */
.badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge-info { background: #fdf0e6; color: #c75814; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 8px; }
.checkbox-grid .check-line { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.checkbox-grid .check-line:hover { background: var(--soft); }
.coupon-product-list { margin-top: 4px; }
.data-table small { display: block; color: var(--muted); font-size: 11px; }
.ip-cell { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.ip-loc { color: var(--ink); font-weight: 600; }

.login-card { width: min(440px, 100%); padding: 36px; border: 1px solid var(--line); background: white; border-radius: 22px; box-shadow: var(--shadow); }
.login-heading { margin: 42px 0 25px; }
.login-heading h1 { margin: 0 0 8px; font-size: 34px; }
.login-heading p { color: var(--muted); }
.login-form { display: grid; gap: 18px; }
.login-card .back-link { margin: 24px 0 0; font-size: 12px; }
.install-shell { width: min(850px, 100%); }
.install-card { padding: 38px; background: white; border: 1px solid var(--line); border-radius: 23px; box-shadow: var(--shadow); }
.install-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 28px; }
.install-heading h1 { margin: 0; }
.install-heading p { color: var(--muted); margin: 5px 0 0; }
.requirement-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 15px; margin-bottom: 25px; background: var(--soft); border-radius: 12px; }
.requirement-list span { padding: 5px 8px; background: white; border-radius: 7px; font-size: 11px; }
.requirement-list .ok { color: #54840a; }
.requirement-list .bad { color: var(--danger); }
.install-card .form-grid h2 { grid-column: 1/-1; margin: 11px 0 0; font-size: 17px; }
.install-success { padding: 40px; text-align: center; border-radius: 16px; background: #fdf0e6; }
.install-success strong { font-size: 25px; }
.install-success p { color: var(--muted); }
.actions, .form-actions { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }

/* Admin */
.admin-body { background: #faf6f1; }
.admin-sidebar {
    position: fixed; inset: 0 auto 0 0; width: 235px; padding: 24px 18px;
    background: #2b1810; color: white; z-index: 30;
}
.admin-brand { display: flex; align-items: center; gap: 10px; padding: 10px 13px 29px; font-size: 18px; font-weight: 800; }
.admin-brand > span { display: grid; gap: 2px; }
.admin-brand small { color: #a8927a; font-size: 10px; letter-spacing: .1em; }
.admin-sidebar nav { display: grid; gap: 5px; }
.admin-sidebar nav a { padding: 11px 13px; color: #9a8770; border-radius: 9px; font-size: 13px; }
.admin-sidebar nav a:hover { color: white; background: #2a2c27; }
.admin-main { margin-left: 235px; min-height: 100vh; }
.admin-topbar { height: 60px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; background: white; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; }
.admin-topbar-spacer { flex: 1; }
.admin-user-menu { position: relative; }
.admin-user-btn { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border: 1px solid var(--line); border-radius: 25px; background: white; cursor: pointer; font-size: 13px; color: var(--ink); transition: border-color .15s; }
.admin-user-btn:hover { border-color: #c4b8a8; }
.admin-user-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #2b1810; color: white; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.admin-user-name { font-weight: 600; }
.admin-user-btn svg { color: var(--muted); transition: transform .2s; }
.admin-user-btn.open svg { transform: rotate(180deg); }
.admin-user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.12); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .18s ease; z-index: 200; }
.admin-user-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); }
.admin-dropdown-header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: #faf6f1; }
.admin-dropdown-avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #2b1810; color: white; font-weight: 700; font-size: 16px; flex-shrink: 0; }
.admin-dropdown-header strong { display: block; font-size: 14px; }
.admin-dropdown-header small { color: var(--muted); font-size: 11px; }
.admin-user-dropdown a { display: block; padding: 12px 18px; font-size: 13px; color: var(--ink); text-decoration: none; transition: background .12s; }
.admin-user-dropdown a:hover { background: #f5f0ea; }
.admin-user-dropdown a:last-child { color: #c0392b; }
.admin-content { padding: 28px 32px 50px; }
.narrow-content { max-width: 920px; }
.welcome-card { padding: 30px 32px; display: flex; align-items: end; justify-content: space-between; gap: 25px; color: white; background: var(--ink); border-radius: 18px; }
.welcome-card h2 { margin: 0; font-size: 27px; }
.welcome-card p { color: #8a7560; margin-bottom: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; }
.stat-grid article { display: grid; gap: 7px; padding: 21px; border: 1px solid var(--line); background: white; border-radius: 15px; }
.stat-grid article > span, .stat-grid small { color: var(--muted); font-size: 11px; }
.stat-grid strong { font-size: 25px; letter-spacing: -.03em; }
.stat-highlight { background: white !important; border-color: var(--line) !important; border-top: 3px solid var(--accent); }
.stat-highlight strong { color: #000; }

.dash-section-title { font-size: 14px; font-weight: 700; color: var(--ink); margin: 24px 0 4px; padding-left: 2px; }
.dash-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0; }
.dash-card { border: 1px solid var(--line); background: white; border-radius: 15px; overflow: hidden; }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dash-card-head h3 { margin: 0; font-size: 14px; }
.dash-card-head small { color: var(--muted); font-size: 11px; }
.dash-empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13px; }

.dash-ranking { padding: 8px 12px; }
.dash-rank-item { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid #f5f0ea; }
.dash-rank-item:last-child { border-bottom: 0; }
.dash-rank-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: #f0ebe5; color: var(--muted); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dash-rank-num.top { background: var(--accent); color: white; }
.dash-rank-info { flex: 1; min-width: 0; }
.dash-rank-info strong { font-size: 13px; display: block; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-rank-bar { height: 4px; background: #f0ebe5; border-radius: 2px; overflow: hidden; }
.dash-rank-bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .4s ease; }
.dash-rank-data { text-align: right; flex-shrink: 0; }
.dash-rank-amount { font-size: 13px; font-weight: 700; color: #000; }
.dash-rank-data small { display: block; color: var(--muted); font-size: 10px; }

.dash-stock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #f5f0ea; }
.dash-stock-cell { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: white; }
.dash-stock-cell.out strong { color: #000; }
.dash-stock-cell strong { font-size: 13px; }
.dash-stock-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; width: fit-content; }
.stock-zero { background: #fff0f0; color: #c0392b; }
.stock-low { background: #fff8e6; color: #8a6500; }
.btn-sm { padding: 6px 14px; font-size: 11px; }
.dash-card-foot { padding: 12px 16px; border-top: 1px solid var(--line); text-align: center; }

.dash-trend-table { padding: 0; }
.dash-trend-table .data-table th { padding: 10px 16px; }
.dash-trend-table .data-table td { padding: 10px 16px; }

@media (max-width: 900px) {
    .dash-two-col { grid-template-columns: 1fr; }
}
.admin-columns { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .7fr); gap: 18px; align-items: start; }
.levels-layout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: flex-start; }
.panel { border: 1px solid var(--line); background: white; border-radius: 15px; overflow: hidden; }
.panel-head { min-height: 64px; padding: 16px 19px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 16px; }
.panel-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.panel-head a, .panel-head button { color: #c75814; border: 0; background: none; font-size: 12px; cursor: pointer; }
.stock-list { padding: 8px 17px; }
.stock-list a { display: flex; justify-content: space-between; gap: 15px; padding: 12px 2px; border-bottom: 1px solid #eceee8; }
.stock-list a:last-child { border-bottom: 0; }
.stock-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.danger-text, .danger-link { color: var(--danger) !important; }
.content-actions { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.content-actions h2 { margin: 0; font-size: 25px; }
.content-actions p { margin: 7px 0 0; color: var(--muted); }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 12px 16px; background: #faf6f1; color: #9a8770; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.data-table td { padding: 14px 16px; border-top: 1px solid #eceee8; font-size: 12px; vertical-align: middle; }
.data-table tbody tr:hover { background: #faf6f1; }
.data-table td > strong { display: block; }
.data-table td > small { display: block; margin-top: 5px; color: var(--muted); max-width: 270px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-product { display: flex; align-items: center; gap: 11px; min-width: 220px; }
.table-product img, .table-product > span { width: 42px; height: 42px; object-fit: cover; border-radius: 9px; background: var(--soft); }
.table-product > span { display: grid; place-items: center; font-weight: 850; }
.row-actions { display: flex; gap: 9px; align-items: center; }
.row-actions a, .row-actions button, .text-button { padding: 0; border: 0; background: none; color: #c75814; cursor: pointer; font-size: 12px; white-space: nowrap; }
.row-actions form { display: inline; }
.empty-cell { padding: 40px !important; color: var(--muted); text-align: center !important; }

/* 订单管理 - 搜索筛选栏 */
.order-filter-bar {
    margin-bottom: 16px;
}
.order-filter-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}
.order-search-input {
    flex: 1;
    min-width: 140px;
    max-width: 220px;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    transition: border-color .2s;
}
.order-search-input:focus {
    border-color: #c75814;
    outline: none;
}
.order-filter-select {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
}

/* 订单表格 - 新增列样式 */
.order-table th { white-space: nowrap; }
.order-table td { white-space: nowrap; }
.order-table td:nth-child(3),
.order-table td:nth-child(5) { white-space: normal; }

.order-ip {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #aaa;
}

.order-user-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.order-user-account {
    font-size: 12px;
    color: #3d2e1e;
    font-weight: 600;
}

.order-amount-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.order-original-price {
    font-size: 11px;
    color: #bbb;
    text-decoration: line-through;
}
.order-discount-info {
    font-size: 11px;
    color: #c75814;
    font-weight: 600;
}
.order-coupon-tag {
    font-size: 10px;
    color: #9a8770;
    background: #f5ede3;
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}
.order-final-price {
    font-size: 14px;
    color: #3d2e1e;
}

.pay-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.pay-badge.pay-alipay { background: #e3f2fd; color: #1565c0; }
.pay-badge.pay-wxpay { background: #e8f5e9; color: #2e7d32; }
.pay-badge.pay-qqpay { background: #e3f2fd; color: #1565c0; }
.pay-badge.pay-bank { background: #fff3e0; color: #e65100; }
.pay-badge.pay-share_coupon { background: #fff8e1; color: #e65100; font-weight: 700; }

.admin-form { padding-bottom: 22px; }
.admin-form > label, .admin-form > .form-grid, .admin-form > .settings-section, .admin-form > button, .admin-form > .form-actions { margin-left: 22px; margin-right: 22px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.admin-form > .form-grid { padding-top: 22px; }
.span-2 { grid-column: 1/-1; }
.current-image img { width: 110px; height: 110px; object-fit: cover; border-radius: 12px; }
.form-actions { justify-content: flex-start; }
.switch { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; }
.switch span { width: 38px; height: 22px; padding: 3px; border-radius: 99px; background: #e8ddd0; transition: .2s; }
.switch span::after { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: white; transition: .2s; }
.switch input:checked + span { background: #e66a1c; }
.switch input:checked + span::after { transform: translateX(16px); }
.inventory-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 17px; align-items: start; }
.product-stock-nav { display: grid; padding: 8px; }
.product-stock-nav a { display: grid; gap: 5px; padding: 12px; border-radius: 9px; }
.product-stock-nav a:hover, .product-stock-nav a.active { background: var(--soft); }
.product-stock-nav small { color: var(--muted); }
.product-stock-nav b { color: #c75814; }
.import-form { margin-bottom: 17px; }
.import-form > label { margin-top: 20px; }
.import-form > button { margin-top: 15px; }
.card-secret { max-width: 360px; font: 11px/1.5 ui-monospace, monospace; word-break: break-all; }
.filter-bar { display: grid; grid-template-columns: minmax(220px,1fr) 180px auto; gap: 10px; margin-bottom: 15px; }
.categories-layout { grid-template-columns: 310px 1fr; }
.categories-layout .admin-form { display: grid; gap: 17px; padding: 0 20px 22px; }
.categories-layout .admin-form .panel-head { margin: 0 -20px; }
.check-line { display: flex; align-items: center; grid-template-columns: auto 1fr; }
.check-line input { width: auto; }
.settings-section { padding: 24px 0; border-bottom: 1px solid var(--line); }
.settings-section h3 { margin: 0 0 18px; font-size: 14px; }
.settings-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.settings-title-row h3 { margin-bottom: 5px; }
.settings-title-row p { margin: 0; color: var(--muted); font-size: 11px; }
.callback-box { display: grid; grid-template-columns: 130px 1fr; gap: 8px; margin-top: 20px; padding: 14px; border-radius: 10px; background: var(--soft); font-size: 11px; }
.callback-box span { color: var(--muted); }
.callback-box code { overflow-wrap: anywhere; }
.settings-section + .btn { margin-top: 22px; }

@media (max-width: 1050px) {
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-columns { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
    .header-inner { width: calc(100% - 28px); height: 68px; }
    .desktop-nav { display: none; }
    .menu-toggle { display: block; order: 1; }
    .brand { order: 2; margin-left: auto; margin-right: auto; }
    .header-user-menu, .header-user-link { order: 3; }
    .header-user-name { display: none; }
    .header-user-btn { padding: 4px; }
    .header-user-avatar { width: 32px; height: 32px; font-size: 14px; }
    .header-tier-icon { display: none; }
    .header-tier-btn { padding: 5px 16px; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
    .header-tier-name { font-size: 12px; max-width: none; }
    .mobile-nav.open { display: grid; padding: 5px 20px 14px; background: var(--bg); }
    .mobile-nav a { padding: 11px 4px; border-bottom: 1px solid var(--line); }
    .mobile-search { margin-bottom: 6px; }
    .mobile-search input { width: 100%; }
    .mobile-catalog-search { display: block !important; margin: 0 0 14px; }
    .mobile-catalog-search input { width: 100%; padding: 10px 14px 10px 38px; border-radius: 999px; border: 1px solid #e8ddd0; background: #fff; font-size: 14px; }
    .detail-price { font-size: 30px; flex-direction: column; gap: 4px; }
    .member-price-tag { margin-left: 0; font-size: 17px; }
    .purchase-product h1 { font-size: 24px; }
    .hero { width: calc(100% - 28px); margin-top: 12px; padding: 16px 18px; min-height: auto; align-items: flex-start; flex-direction: column; border-radius: 14px; }
    .hero-order { flex: 0; width: 100%; }
    .catalog, .page-shell, .lookup-shell { width: calc(100% - 28px); }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .product-info { padding: 10px; }
    .price { font-size: 17px; }
    .price-logged-in .price-original { font-size: 12px; }
    .price-logged-in .price-member { font-size: 17px; }
    .price-logged-in .price-member small { font-size: 11px; }
    .price-level-tag { font-size: 9px; padding: 1px 5px; }
    .stock { padding: 3px 5px; font-size: 10px; }
    .buy-link { padding: 7px 6px; font-size: 12px; min-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .buy-link .purchase-cart { width: 14px; height: 14px; flex-shrink: 0; }
    .arrow-button { width: 22px; height: 22px; flex-shrink: 0; }
    .purchase-layout { grid-template-columns: 1fr; gap: 15px; }
    .purchase-product { padding-right: 0; }
    .lookup-form { grid-template-columns: 1fr; }
    .admin-sidebar { transform: translateX(-100%); transition: transform .25s ease; z-index: 200; }
    .admin-sidebar.open { transform: translateX(0) !important; box-shadow: 4px 0 30px rgba(0,0,0,.2); }
    .admin-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 150; }
    .admin-sidebar-overlay.show { display: block; }
    .admin-main { margin-left: 0; }
    .admin-menu-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; font-size: 20px; color: #3d2e1e; }
    .admin-menu-toggle:hover { background: #f5ede3; }
    .admin-content { padding: 20px 15px 40px; }
    .admin-topbar { padding: 0 12px; }
    .inventory-layout, .categories-layout { grid-template-columns: 1fr; }
    .levels-layout { grid-template-columns: 1fr !important; }
    .toast-container { left: 16px; right: 16px; max-width: none; }
    .form-grid { grid-template-columns: 1fr; }
    .content-actions { flex-direction: column; gap: 12px; align-items: flex-start; }
    .order-filter-form { flex-wrap: nowrap; gap: 6px; }
    .order-search-input { min-width: 80px; max-width: 140px; flex: 0 1 140px; }
    .order-filter-select { width: auto; min-width: 0; }
    .data-table { font-size: 11px; }
    .data-table th, .data-table td { padding: 8px 10px; }
    .data-table th { white-space: nowrap; }
    /* 移动端表格水平滚动 */
    .panel.table-wrap, .data-card, .table-wrap, .dash-trend-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .order-table { min-width: 720px; }
    .admin-form { padding: 16px 14px 18px; }
    .admin-form > label, .admin-form > .form-grid, .admin-form > .settings-section, .admin-form > button, .admin-form > .form-actions { margin-left: 0; margin-right: 0; }
}

@media (max-width: 520px) {
    .brand small { display: none; }
    .hero h1 { font-size: 31px; }
    .hero p { font-size: 13px; }
    .product-grid { gap: 8px; }
    .product-cover { padding: 6px; }
    .product-cover img, .product-cover .cover-placeholder { border-radius: 10px; }
    .cover-placeholder b { width: 54px; height: 54px; font-size: 26px; border-radius: 17px; }
    .cover-placeholder small { font-size: 9px; }
    .product-info h2 { font-size: 13px; }
    .buy-link { padding: 9px 10px; }
    .purchase-image { width: 130px; }
    .purchase-product h1 { font-size: 25px; }
    .checkout-card { padding: 20px; }
    .pay-options { flex-wrap: wrap; }
    .pay-options label { flex: 1 1 100%; max-width: 100%; }
    .order-result dl { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .stat-grid article { padding: 15px; }
    .stat-grid strong { font-size: 21px; }
    .welcome-card { align-items: flex-start; flex-direction: column; }
    .welcome-actions { width: 100%; align-items: stretch; flex-direction: column; }
    .content-actions { align-items: flex-start; flex-direction: column; }
    .filter-bar { grid-template-columns: 1fr; }
    .callback-box { grid-template-columns: 1fr; }
    .install-card, .login-card { padding: 24px; }
}

/* Refined storefront */
body {
    background:
        radial-gradient(circle at 8% 6%, rgba(184, 241, 74, .08), transparent 20rem),
        var(--bg);
}
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 3px solid rgba(134, 189, 34, .42); outline-offset: 3px; }
.top-notice { min-height: 34px; color: #a8927a; background: #1a0e08; font-size: 11px; }
.top-notice > div {
    width: min(1120px, calc(100% - 40px)); min-height: 34px; margin: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.top-notice span { display: flex; align-items: center; gap: 7px; color: #d9ddd3; white-space: nowrap; }
.top-notice span i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(184,241,74,.11); }
.top-notice p { margin: 0; max-width: 680px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-header { top: 0; transition: box-shadow .25s, background .25s; }
.site-header.is-scrolled { background: rgba(250, 251, 247, .94); box-shadow: 0 10px 30px rgba(31, 35, 27, .06); }
.brand-mark { position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.brand-mark::after {
    content: ""; position: absolute; width: 28px; height: 28px; right: -15px; bottom: -14px;
    border: 6px solid var(--accent); border-radius: 50%; opacity: .65;
}
.brand-mark i { position: relative; z-index: 1; font-style: normal; }
.desktop-nav { margin-left: auto; margin-right: 8px; }
.header-order-link {
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px;
    border: 1px solid #e8ddd0; border-radius: 10px; background: white; font-size: 13px; font-weight: 700;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.header-order-link:hover { transform: translateY(-1px); border-color: #c8b8a0; box-shadow: 0 8px 24px rgba(80,40,10,.07); }
.header-order-link span { font-size: 18px; line-height: 0; }

.hero {
    min-height: 465px; padding: 54px 58px; align-items: center;
    background:
        linear-gradient(112deg, rgba(255,255,255,.035), transparent 42%),
        #1a0e08;
    box-shadow: 0 28px 80px rgba(26, 29, 22, .14);
}
.hero::before {
    content: ""; position: absolute; width: 480px; height: 480px; right: -110px; top: -190px;
    border-radius: 50%; background: var(--accent); filter: blur(1px); opacity: .1;
}
.hero::after { width: 330px; height: 330px; right: 78px; top: 70px; border: 1px solid rgba(255,255,255,.07); }
.hero-copy { position: relative; z-index: 3; width: 58%; }
.eyebrow { display: flex; align-items: center; gap: 8px; }
.eyebrow i { width: 18px; height: 1px; background: currentColor; }
.hero h1 { max-width: 600px; font-size: clamp(43px, 5vw, 66px); line-height: .98; letter-spacing: -.065em; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero p { max-width: 570px; font-size: 14px; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 28px; }
.hero-primary { gap: 28px; min-width: 156px; }
.hero-primary span { font-size: 18px; }
.hero-text-link { color: #e8ddd0; font-size: 13px; font-weight: 650; }
.hero-text-link span { display: inline-block; margin-left: 6px; color: var(--accent); transition: transform .2s; }
.hero-text-link:hover span { transform: translateX(4px); }
.hero-proof { display: flex; gap: 0; margin-top: 40px; }
.hero-proof > span { display: grid; gap: 3px; min-width: 112px; padding-right: 22px; margin-right: 22px; border-right: 1px solid rgba(255,255,255,.12); }
.hero-proof > span:last-child { border-right: 0; }
.hero-proof b { color: white; font-size: 15px; }
.hero-proof small { color: #a8927a; font-size: 10px; }
.hero-visual { position: relative; z-index: 2; width: 35%; min-height: 330px; display: grid; place-items: center; perspective: 900px; }
.delivery-card {
    position: relative; z-index: 2; width: 265px; min-height: 315px; padding: 22px;
    background: rgba(247,249,243,.97); color: var(--ink); border: 1px solid rgba(255,255,255,.7);
    border-radius: 23px; box-shadow: 0 30px 70px rgba(0,0,0,.28);
    transform: rotateY(-8deg) rotateX(3deg) rotate(2deg);
    animation: card-float 6s ease-in-out infinite;
}
.delivery-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; }
.delivery-card-top i { padding: 5px 7px; border-radius: 99px; color: #c75814; background: #fdf0e6; font-style: normal; }
.delivery-icon { width: 72px; height: 72px; margin: 42px auto 20px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); font-size: 29px; font-weight: 900; box-shadow: 0 0 0 11px rgba(184,241,74,.2); }
.delivery-card > strong, .delivery-card > p { display: block; text-align: center; }
.delivery-card > strong { font-size: 16px; }
.delivery-card > p { color: #a8927a; font-size: 8px; letter-spacing: .17em; }
.delivery-code { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 31px; }
.delivery-code span { padding: 9px 5px; border-radius: 7px; text-align: center; background: #f5ede3; font: 11px ui-monospace, monospace; letter-spacing: .1em; }
.signal { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(230,106,28,.25); border-radius: 50%; transform: translate(-50%, -50%); }
.signal-a { width: 330px; height: 330px; }
.signal-b { width: 405px; height: 405px; }
.float-pill {
    position: absolute; z-index: 3; padding: 9px 12px; border: 1px solid rgba(255,255,255,.13);
    border-radius: 99px; color: #e8ddd0; background: rgba(43,24,16,.78); backdrop-filter: blur(9px); font-size: 10px;
}
.pill-secure { left: -6px; top: 70px; }
.pill-fast { right: -10px; bottom: 66px; }
@keyframes card-float { 0%,100% { transform: rotateY(-8deg) rotateX(3deg) rotate(2deg) translateY(0); } 50% { transform: rotateY(-5deg) rotateX(1deg) rotate(1deg) translateY(-8px); } }

.catalog { margin-top: 32px; }
.catalog.catalog-no-hero { margin-top: 52px; }
.catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 31px; }
.section-kicker { display: block; margin-bottom: 10px; color: #c75814; font-size: 10px; font-weight: 850; letter-spacing: .16em; }
.catalog-heading h2 { margin: 0; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.045em; }
.catalog-heading p { margin: 9px 0 0; color: var(--muted); }
.product-search { position: relative; display: block; width: 230px; }
.product-search span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #a8927a; font-size: 18px; }
.product-search input { padding-left: 39px; border-radius: 999px; background: rgba(255,255,255,.75); }
.catalog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.catalog-toolbar .category-tabs { margin-bottom: -1px; gap: 4px; }
.catalog-toolbar .category-tabs a { padding: 12px 15px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; }
.catalog-toolbar .category-tabs a.active { color: var(--ink); border-bottom-color: var(--ink); background: transparent; }
.catalog-toolbar .category-tabs small { margin-left: 4px; color: #a8927a; font-size: 9px; }
.catalog-count { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.mobile-catalog-search { display: none; position: relative; }
.mobile-catalog-search .search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #a8927a; font-size: 16px; pointer-events: none; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 36px 0 8px; }
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 12px; border-radius: 10px;
    font-size: 14px; font-weight: 500; color: var(--muted);
    border: 1px solid var(--border); background: #fff;
    transition: all .2s;
}
.pagination a:hover { color: var(--ink); border-color: var(--ink); }
.pagination .current { color: #fff; background: var(--ink); border-color: var(--ink); }
.product-grid { gap: 18px; }
.product-card { border-color: rgba(220,223,215,.9); border-radius: 20px; box-shadow: 0 1px 0 rgba(255,255,255,.8); }
.product-card[hidden] { display: none !important; }
.product-cover { overflow: hidden; }
.product-cover img { transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .3s; }
.product-card:hover .product-cover img { transform: scale(1.035); }
.product-category {
    position: absolute; left: 19px; top: 19px; z-index: 2; padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.45); border-radius: 99px; color: #30332d;
    background: rgba(250,251,247,.8); backdrop-filter: blur(8px); font-size: 9px; font-weight: 750;
}
.product-info { padding: 18px; }
.product-info h2 { margin-top: 14px; font-size: 15px; }
.product-info p { color: #a8927a; font-size: 10px; }
.price { font-variant-numeric: tabular-nums; }
.buy-link { padding: 8px 8px 8px 13px; border-color: #e8ddd0; background: #faf6f1; }
.arrow-button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: white; background: var(--ink); transition: transform .2s, background .2s; }
.buy-link:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.buy-link:hover .arrow-button { transform: rotate(45deg); background: var(--ink); }
.trust-strip {
    width: min(1120px, calc(100% - 40px)); margin: 0 auto 86px; padding: 27px 0;
    display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.trust-strip article { display: flex; gap: 17px; padding: 4px 28px; border-right: 1px solid var(--line); }
.trust-strip article:first-child { padding-left: 0; }
.trust-strip article:last-child { border-right: 0; }
.trust-strip article > span { color: #e66a1c; font: 10px ui-monospace, monospace; }
.trust-strip strong { display: block; margin-bottom: 6px; font-size: 13px; }
.trust-strip p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }

.site-footer { padding: 0; text-align: left; color: #8a7560; background: #1a0e08; border: 0; }
.footer-inner, .footer-bottom { width: min(1120px, calc(100% - 40px)); margin: auto; }
.footer-inner { min-height: 145px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand strong { color: white; font-size: 17px; }
.footer-brand p { margin: 5px 0 0; }
.footer-links { display: flex; gap: 24px; }
.footer-links a:hover { color: var(--accent); }
.footer-bottom { padding: 17px 0 25px; display: flex; justify-content: space-between; border-top: 1px solid #292b26; font-size: 10px; }

/* Refined inner pages and admin */
.page-shell { margin-top: 44px; }
.checkout-card { position: sticky; top: 104px; border-radius: 24px; box-shadow: 0 24px 65px rgba(27,31,22,.09); }
.checkout-card .btn-primary { min-height: 50px; }
.purchase-image { box-shadow: 0 16px 38px rgba(29,33,24,.08); }
.lookup-form, .order-result { box-shadow: 0 18px 55px rgba(27,31,22,.055); }
.admin-sidebar { background: linear-gradient(180deg, #2b1810, #1a0e08); }
.admin-sidebar nav a { transition: background .18s, color .18s, transform .18s; }
.admin-sidebar nav a:hover { transform: translateX(3px); }
.admin-topbar { position: sticky; top: 0; z-index: 15; background: rgba(255,255,255,.9); backdrop-filter: blur(14px); }
.panel, .stat-grid article { box-shadow: 0 1px 0 rgba(255,255,255,.9); transition: box-shadow .22s, transform .22s; }
.stat-grid article:hover { transform: translateY(-2px); box-shadow: 0 14px 35px rgba(28,32,23,.065); }
.welcome-card { overflow: hidden; position: relative; background: #181916; }
.welcome-card::after { content: ""; position: absolute; width: 260px; height: 260px; right: -60px; top: -130px; border: 45px solid rgba(184,241,74,.12); border-radius: 50%; }
.welcome-card > * { position: relative; z-index: 1; }
.welcome-actions { display: flex; align-items: center; gap: 9px; }
.btn-screen { color: var(--accent); border-color: #34372f; background: #252720; }
.btn-screen:hover { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.data-table tr { transition: background .15s; }
.reveal-item { opacity: 0; transform: translateY(14px); transition: opacity .55s ease var(--reveal-delay), transform .55s cubic-bezier(.2,.7,.2,1) var(--reveal-delay); }
.reveal-item.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
    .hero { min-height: 420px; padding: 42px; }
    .hero-copy { width: 63%; }
    .hero-visual { width: 31%; transform: scale(.84); }
    .catalog-heading { align-items: flex-start; }
}
@media (max-width: 800px) {
    .top-notice p { display: none; }
    .top-notice > div { justify-content: center; }
    .header-order-link { display: none; }
    .hero { min-height: auto; padding: 16px 18px; border-radius: 14px; overflow: hidden; }
    .hero-copy { width: 100%; }
    .hero h1 { font-size: 22px; }
    .hero p { font-size: 12px; }
    .hero .eyebrow { font-size: 10px; margin-bottom: 6px; }
    .hero-actions { margin-top: 10px; gap: 10px; flex-wrap: wrap; }
    .hero-primary { min-width: 120px; gap: 10px; padding: 8px 14px; font-size: 13px; }
    .hero-primary span { font-size: 13px; }
    .hero-text-link { font-size: 12px; }
    .hero-visual { display: none; }
    .hero-proof { display: none; }
    .catalog { margin-top: 14px; }
    .catalog-heading { display: grid; }
    .product-search { width: 100%; }
    .trust-strip { grid-template-columns: 1fr; padding: 8px 0; }
    .trust-strip article, .trust-strip article:first-child { padding: 17px 0; border-right: 0; border-bottom: 1px solid var(--line); }
    .trust-strip article:last-child { border-bottom: 0; }
    .checkout-card { position: static; }
}
@media (max-width: 520px) {
    .top-notice { min-height: 30px; }
    .top-notice > div { min-height: 30px; }
    .hero { min-height: auto; padding: 18px 20px; margin-top: 10px; border-radius: 16px; }
    .hero h1 { font-size: 26px; }
    .hero h1 em { display: inline-block; white-space: nowrap; }
    .hero p { font-size: 12px; line-height: 1.55; margin-top: 8px; }
    .hero-actions { display: flex; margin-top: 12px; gap: 12px; flex-wrap: wrap; }
    .hero-primary { width: auto; min-width: 140px; }
    .hero-proof { display: none; }
    .hero-visual { display: none; }
    .pill-secure { left: 8px; top: 40px; }
    .pill-fast { right: 8px; bottom: 50px; }
    .catalog-heading h2 { font-size: 29px; }
    .catalog-toolbar { align-items: flex-start; }
    .catalog-count { display: none; }
    .catalog-toolbar .category-tabs a { padding: 11px 10px; }
    .product-category { left: 12px; top: 12px; }
    .product-info { padding: 12px; }
    .product-info p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .footer-inner { padding: 34px 0; align-items: flex-start; flex-direction: column; }
    .footer-links { flex-wrap: wrap; }
    .footer-bottom { gap: 8px; flex-direction: column; }
    .settings-title-row { align-items: stretch; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
    .reveal-item { opacity: 1; transform: none; }
}

/* AI customer service */
.ai-service {
    position: fixed; right: 26px; bottom: 24px; z-index: 80;
    font-size: 13px;
}
.ai-new-message {
    position: absolute;
    right: 0;
    bottom: 70px;
    width: 238px;
    min-height: 66px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #303744;
    border: 1px solid #e8ddd0;
    border-radius: 13px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 14px 38px rgba(80,40,10,.16);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(9px) scale(.98);
    transform-origin: bottom right;
    transition: opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility .22s;
}
.ai-new-message::after {
    content: "";
    position: absolute;
    right: 25px;
    bottom: -6px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-right: 1px solid #e8ddd0;
    border-bottom: 1px solid #e8ddd0;
    transform: rotate(45deg);
}
.ai-service.has-notice .ai-new-message {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    animation: ai-notice-nudge 4.8s 1.4s infinite;
}
.ai-service.open .ai-new-message {
    opacity: 0;
    visibility: hidden;
    transform: translateY(7px) scale(.98);
    animation: none;
}
.ai-notice-icon {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fdf0e6;
}
.ai-notice-icon::before {
    content: "";
    width: 16px;
    height: 12px;
    border: 2px solid #e66a1c;
    border-radius: 5px;
}
.ai-notice-icon::after {
    content: "";
    position: absolute;
    left: 12px;
    bottom: 9px;
    width: 5px;
    height: 5px;
    border-left: 2px solid #e66a1c;
    border-bottom: 2px solid #e66a1c;
    transform: skewY(-35deg);
}
.ai-notice-icon i {
    position: absolute;
    right: -2px;
    top: -2px;
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #e66a1c;
}
.ai-new-message > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 3px;
    text-align: left;
}
.ai-new-message strong { font-size: 12px; }
.ai-new-message small {
    overflow: hidden;
    color: #8a7560;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ai-new-message > b {
    margin-left: auto;
    color: #a8927a;
    font-size: 20px;
    font-weight: 400;
}
@keyframes ai-notice-nudge {
    0%, 86%, 100% { transform: translateY(0); }
    90% { transform: translateY(-3px); }
    94% { transform: translateY(0); }
    97% { transform: translateY(-2px); }
}
.ai-launcher {
    position: relative; height: 58px; padding: 7px 18px 7px 8px;
    display: flex; align-items: center; gap: 10px;
    color: white; background: #2b1810; border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px; box-shadow: 0 18px 45px rgba(18,20,16,.22);
    cursor: pointer; transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.ai-launcher:hover { transform: translateY(-3px); box-shadow: 0 23px 55px rgba(18,20,16,.28); }
.ai-launcher-icon, .ai-agent-avatar {
    position: relative; width: 43px; height: 43px; flex: 0 0 auto;
    display: grid; place-items: center; overflow: hidden; color: var(--ink);
    background: var(--accent); border-radius: 13px;
}
.ai-launcher-icon i, .ai-agent-avatar > i {
    position: absolute; width: 34px; height: 34px; left: -18px; top: -17px;
    border: 7px solid rgba(23,24,21,.13); border-radius: 50%;
}
.ai-launcher-icon b, .ai-agent-avatar b { position: relative; font-size: 11px; letter-spacing: -.03em; }
.ai-launcher-label { display: grid; gap: 1px; text-align: left; font-weight: 750; }
.ai-launcher-label small { color: #a8927a; font-size: 9px; font-weight: 500; }
.ai-launcher em {
    position: absolute; right: -3px; top: -5px; width: 18px; height: 18px;
    display: grid; place-items: center; color: var(--ink); background: var(--accent);
    border: 3px solid var(--bg); border-radius: 50%; font-size: 8px; font-style: normal; font-weight: 850;
}
.ai-panel {
    position: absolute; right: 0; bottom: 72px; width: min(390px, calc(100vw - 28px)); height: min(610px, calc(100vh - 120px));
    display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; overflow: hidden;
    background: rgba(250,251,248,.98); border: 1px solid rgba(215,219,209,.95);
    border-radius: 23px; box-shadow: 0 30px 90px rgba(18,22,14,.22); backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; transform: translateY(16px) scale(.965); transform-origin: bottom right;
    transition: opacity .22s ease, transform .3s cubic-bezier(.2,.8,.2,1), visibility .22s;
}
.ai-service.open .ai-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.ai-panel-head {
    min-height: 76px; padding: 14px 17px; display: flex; align-items: center; gap: 11px;
    color: white; background: #2b1810;
}
.ai-agent-avatar { width: 45px; height: 45px; }
.ai-panel-head > div:nth-child(2) { display: grid; gap: 4px; }
.ai-panel-head strong { font-size: 14px; }
.ai-panel-head span { display: flex; align-items: center; gap: 6px; color: #9a8770; font-size: 9px; }
.ai-panel-head span i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(184,241,74,.12); }
.ai-close {
    width: 34px; height: 34px; margin-left: auto; display: grid; place-items: center;
    border: 1px solid #3d2818; border-radius: 10px; color: #9a8770; background: #2b1810;
    font-size: 20px; cursor: pointer; transition: color .18s, background .18s;
}
.ai-close:hover { color: white; background: #30322b; }
.ai-disclaimer { padding: 8px 14px; color: #9a8770; background: #f5ede3; border-bottom: 1px solid #e8ddd0; text-align: center; font-size: 8px; }
.ai-messages {
    min-height: 0; padding: 18px 16px; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: #d5d8cf transparent;
}
.ai-message { margin-bottom: 14px; display: flex; align-items: flex-end; gap: 8px; animation: ai-message-in .28s cubic-bezier(.2,.8,.2,1) both; }
.ai-message > div {
    max-width: 83%; padding: 11px 13px; border: 1px solid #e8ddd0;
    border-radius: 5px 15px 15px 15px; color: #42463e; background: white;
    box-shadow: 0 5px 18px rgba(28,32,23,.04); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere;
}
.ai-message.user { justify-content: flex-end; }
.ai-message.user > div {
    color: var(--ink); background: var(--accent); border-color: var(--accent);
    border-radius: 15px 5px 15px 15px; box-shadow: none;
}
.ai-mini-avatar {
    width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center;
    color: var(--accent); background: var(--ink); border-radius: 8px; font-size: 9px; font-weight: 850;
}
.ai-message.is-typing > div { display: flex; gap: 4px; padding: 15px 16px; }
.ai-message.is-typing i { width: 5px; height: 5px; border-radius: 50%; background: #a8927a; animation: ai-dot 1.1s infinite ease-in-out; }
.ai-message.is-typing i:nth-child(2) { animation-delay: .14s; }
.ai-message.is-typing i:nth-child(3) { animation-delay: .28s; }
.ai-quick-questions { display: grid; gap: 7px; margin: 4px 0 15px 33px; }
.ai-quick-questions button {
    width: fit-content; max-width: 100%; padding: 8px 10px; display: flex; align-items: center; gap: 12px;
    border: 1px solid #e8ddd0; border-radius: 9px; color: #6b5848; background: rgba(255,255,255,.75);
    font-size: 10px; text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s;
}
.ai-quick-questions button:hover { transform: translateX(3px); border-color: #f0a868; background: white; }
.ai-quick-questions span { color: #c75814; }
.ai-input-form { padding: 12px 14px 13px; border-top: 1px solid #e8ddd0; background: white; }
.ai-input-form label {
    min-height: 46px; display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 12px;
    border: 1px solid #d9ddd3; border-radius: 14px; background: #faf6f1;
}
.ai-input-form textarea {
    min-height: 32px; max-height: 96px; padding: 7px 0; border: 0; box-shadow: none; background: transparent;
    resize: none; line-height: 1.4;
}
.ai-input-form textarea:focus { box-shadow: none; }
.ai-input-form button {
    width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center;
    border: 0; border-radius: 10px; color: var(--ink); background: var(--accent);
    font-size: 18px; font-weight: 800; cursor: pointer; transition: transform .18s, opacity .18s;
}
.ai-input-form button:hover { transform: translateY(-1px); }
.ai-input-form button:disabled { opacity: .45; cursor: wait; }
.ai-input-form > small { display: block; margin-top: 6px; color: #a8927a; text-align: center; font-size: 8px; }
@keyframes ai-message-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ai-dot { 0%,70%,100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-4px); opacity: 1; } }

@media (max-width: 520px) {
    .ai-service { right: 14px; bottom: 13px; }
    .ai-new-message {
        right: 0;
        bottom: 67px;
        width: min(238px, calc(100vw - 28px));
    }
    .ai-launcher { width: 54px; height: 54px; padding: 6px; border-radius: 17px; }
    .ai-launcher-icon { width: 40px; height: 40px; }
    .ai-launcher-label { display: none; }
    .ai-panel {
        position: fixed; left: 8px; right: 8px; bottom: 8px;
        width: auto; height: calc(100vh - 16px); height: calc(100dvh - 16px); max-height: none;
        border-radius: 22px; transform-origin: bottom center;
    }
    .ai-service.open .ai-launcher { opacity: 0; pointer-events: none; }
}

/* AI admin */
.ai-admin-state {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px;
    border: 1px solid #e8ddd0; border-radius: 99px; color: #9a8770; background: white;
    font-size: 11px; font-weight: 700;
}
.ai-admin-state i { width: 7px; height: 7px; border-radius: 50%; background: #a8927a; }
.ai-admin-state.is-on { color: #c75814; border-color: #f0dcc8; background: #fdf0e6; }
.ai-admin-state.is-on i { background: #e66a1c; box-shadow: 0 0 0 4px rgba(230,106,28,.12); }
.ai-admin-layout { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(360px,.88fr); gap: 18px; align-items: start; }
.ai-notify-settings {
    padding: 15px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    border: 1px solid #e8ddd0;
    border-radius: 10px;
    background: #faf6f1;
}
.ai-notify-settings > div { display: grid; gap: 4px; }
.ai-notify-settings strong { font-size: 13px; }
.ai-notify-settings small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
}
.ai-notify-settings .switch { white-space: nowrap; }
.ai-settings-form > .settings-section { margin-left: 22px; margin-right: 22px; }
.ai-settings-form .settings-section:first-of-type { padding-top: 22px; }
.ai-settings-form > button { margin-top: 21px; }
.ai-faq-column { display: grid; gap: 18px; }
.faq-form { display: grid; gap: 17px; }
.faq-form > label, .faq-form > .faq-form-row, .faq-form > button { margin-left: 20px; margin-right: 20px; }
.faq-form > .panel-head { margin-bottom: 3px; }
.faq-form-row { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: end; }
.faq-form-row .check-line { min-height: 42px; }
.faq-list article { padding: 17px 19px; border-top: 1px solid #eceee8; }
.faq-list article > div:first-child { display: flex; align-items: center; gap: 9px; }
.faq-list article strong { font-size: 13px; }
.faq-list article p { margin: 9px 0 7px; color: #8a7560; font-size: 11px; line-height: 1.65; }
.faq-list article small { display: block; margin-bottom: 10px; color: #8a7560; font-size: 9px; }
.faq-list .row-actions { justify-content: flex-end; }

@media (max-width: 1120px) {
    .ai-admin-layout { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .ai-admin-state { align-self: flex-start; }
    .faq-form-row { grid-template-columns: 1fr; }
    .ai-notify-settings { grid-template-columns: 1fr; }
    .ai-notify-settings .switch { justify-self: start; }
}

/* Light UI system */
:root {
    --bg: #faf6f1;
    --surface: #ffffff;
    --ink: #2b1810;
    --muted: #8a7560;
    --line: #e8ddd0;
    --soft: #f5ede3;
    --accent: #e66a1c;
    --accent-dark: #c75814;
    --accent-light: #fff7f0;
    --shadow: 0 18px 55px rgba(80, 40, 10, .08);
}
body {
    background:
        radial-gradient(circle at 5% 0%, rgba(230, 106, 28, .10), transparent 25rem),
        #faf6f1;
}
.top-notice { color: #8a7560; background: #f5ede3; border-bottom: 1px solid #e8ddd0; }
.top-notice span { color: #6b5848; }
.top-notice span i { background: #e66a1c; box-shadow: 0 0 0 4px rgba(230,106,28,.12); }
.site-header { background: rgba(255,255,255,.88); }
.site-header.is-scrolled { background: rgba(255,255,255,.96); box-shadow: 0 10px 28px rgba(80,40,10,.06); }
.brand-mark { color: #e66a1c; background: #fdf0e6; box-shadow: inset 0 0 0 1px rgba(230,106,28,.09); }
.brand-mark::after { border-color: #f0a868; opacity: .5; }
.header-order-link { border-color: #e8ddd0; background: #fdfaf7; box-shadow: 0 3px 12px rgba(80,40,10,.035); }
.desktop-nav a:hover { background: #f5ede3; }

.hero {
    color: var(--ink);
    background:
        radial-gradient(circle at 88% 12%, rgba(230,106,28,.13), transparent 21rem),
        linear-gradient(135deg, #fdf6ef, #f7e8d8);
    border: 1px solid #f0dcc8;
    box-shadow: 0 26px 70px rgba(80,40,10,.09);
}
.hero::before { background: #e66a1c; opacity: .11; }
.hero::after { border-color: rgba(230,106,28,.11); }
.hero .eyebrow { color: #c75814; }
.hero h1 em { color: #e66a1c; }
.hero p { color: #7a6855; }
.hero-text-link { color: #6b5848; }
.hero-proof b { color: #2b1810; }
.hero-proof small { color: #8a7560; }
.hero-proof > span { border-right-color: rgba(80,40,10,.13); }
.delivery-card { background: rgba(255,255,255,.96); border-color: #f0dcc8; box-shadow: 0 26px 60px rgba(80,40,10,.14); }
.delivery-icon { color: #e66a1c; background: #fdf0e6; box-shadow: 0 0 0 11px rgba(230,106,28,.16); }
.delivery-card-top i { color: #c75814; background: #fdf0e6; }
.delivery-code span { background: #f5ede3; }
.signal { border-color: rgba(230,106,28,.16); }
.float-pill { color: #6b5848; border-color: rgba(230,106,28,.16); background: rgba(255,255,255,.82); box-shadow: 0 8px 24px rgba(80,40,10,.08); }

.category-tabs a, .product-search input { background: rgba(255,255,255,.88); }
.catalog-toolbar .category-tabs a { background: transparent; }
.product-card { box-shadow: 0 8px 30px rgba(80,40,10,.04); }
.product-card:hover { box-shadow: 0 18px 46px rgba(80,40,10,.09); }
.product-cover { background: #f5ede3; }
.cover-placeholder { background: radial-gradient(circle at 75% 20%, rgba(230,106,28,.30), transparent 28%), linear-gradient(145deg,#fdf6ef,#f0dcc8); }
.cover-placeholder b { color: #c75814; background: #fdf0e6; border: 1px solid #f0dcc8; }
.product-category { color: #8a7560; background: rgba(255,255,255,.86); border-color: rgba(255,255,255,.75); }
.product-category { color: #8a7560; }
.buy-link { background: #fdfaf7; }
.buy-link:hover { color: #c75814; background: #fdf0e6; border-color: #f0dcc8; }
.arrow-button { color: #fff; background: #e66a1c; }
.buy-link:hover .arrow-button { background: #c75814; }
.trust-strip { border-color: #e8ddd0; }
.trust-strip article { border-color: #e8ddd0; }
.trust-strip article > span { color: #e66a1c; }
.site-footer { color: #8a7560; background: #fff; border-top: 1px solid #e8ddd0; }
.footer-brand strong { color: #2b1810; }
.footer-bottom { border-color: #e8ddd0; }
.footer-links a:hover { color: #e66a1c; }

.checkout-card, .lookup-form, .order-result { box-shadow: 0 20px 55px rgba(80,40,10,.08); }
.card-delivery { background: #fdf0e6; border-color: #f0dcc8; }
.card-delivery pre { color: #4a3520; background: #fdf0e6; border: 1px solid #f0dcc8; }

.admin-body { background: #f5f7fa; }
.admin-sidebar {
    color: #333; background: #ffffff; border-right: 1px solid #e8e8e8;
    box-shadow: 2px 0 12px rgba(0,0,0,.03);
}
.admin-brand { color: #1a1a1a; }
.admin-brand small { color: #999; }
.admin-sidebar nav a { color: #666; }
.admin-sidebar nav a:hover { color: #1a1a1a; background: #f0f2f5; }
.admin-topbar { background: rgba(255,255,255,.95); }
.admin-avatar { color: #e66a1c; background: #fff7f0; }
.welcome-card { color: #1a1a1a; background: #fff; border: 1px solid #e8e8e8; }
.welcome-card::after { border-color: rgba(0,0,0,.04); }
.welcome-card p { color: #999; }
.welcome-card .eyebrow { color: #e66a1c; }
.btn-light { color: #333; background: white; border-color: #e8e8e8; }
.btn-screen { color: #666; border-color: #e8e8e8; background: rgba(255,255,255,.72); }
.btn-screen:hover { color: #e66a1c; background: #fff7f0; border-color: #ffd8b8; }
.panel, .stat-grid article { border-color: #e8e8e8; box-shadow: 0 2px 8px rgba(0,0,0,.03); }
.panel-head, .data-table td { border-color: #eee; }
.data-table th { background: #fafbfc; }
.data-table tbody tr:hover { background: #f5f7fa; }
.product-stock-nav a:hover, .product-stock-nav a.active { color: #e66a1c; background: #fff7f0; }
.callback-box { background: #f5f7fa; }
.ai-admin-state.is-on { color: #e66a1c; background: #fff7f0; border-color: #ffd8b8; }

.ai-launcher {
    color: #333; background: rgba(255,255,255,.96); border-color: #e8e8e8;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.ai-launcher:hover { box-shadow: 0 12px 32px rgba(0,0,0,.1); }
.ai-launcher-icon, .ai-agent-avatar { color: #e66a1c; background: #fff7f0; }
.ai-launcher-icon i, .ai-agent-avatar > i { border-color: rgba(0,0,0,.06); }
.ai-launcher-label small { color: #999; }
.ai-panel { background: rgba(255,255,255,.99); border-color: #e8e8e8; box-shadow: 0 16px 48px rgba(0,0,0,.12); }
.ai-panel-head { color: #1a1a1a; background: #fafbfc; border-bottom: 1px solid #eee; }
.ai-panel-head span { color: #999; }
.ai-close { color: #999; border-color: #e8e8e8; background: #fff; }
.ai-close:hover { color: #333; background: #f5f7fa; }
.ai-mini-avatar { color: #e66a1c; background: #fff7f0; }
.ai-message > div { border-color: #eee; box-shadow: 0 2px 8px rgba(0,0,0,.03); }
.ai-message.user > div { color: #333; background: #fff7f0; border-color: #ffd8b8; }
.ai-input-form button { color: #e66a1c; background: #fff7f0; }

.redirect-card, .login-card, .install-card { border-color: #e8e8e8; box-shadow: 0 8px 32px rgba(0,0,0,.06); }

/* Warm orange accent cleanup */
:focus-visible { outline-color: rgba(230,106,28,.42); }
.eyebrow, .section-kicker { color: #e66a1c; }
.btn-primary { color: #fff; background: #e66a1c; border-color: #e66a1c; }
.btn-primary:hover { background: #c75814; }
input:focus, select:focus, textarea:focus {
    border-color: #f0a868;
    box-shadow: 0 0 0 3px rgba(230,106,28,.16);
}
.step-label { color: #e66a1c; background: #fff7f0; }
.card-delivery button,
.panel-head a,
.panel-head button,
.row-actions a,
.row-actions button,
.text-button,
.product-stock-nav b { color: #e66a1c; }
.status-success { color: #52c41a; background: #f6ffed; }
.requirement-list .ok { color: #52c41a; }
.switch input:checked + span { background: #e66a1c; }
.ai-admin-state.is-on i {
    background: #e66a1c;
    box-shadow: 0 0 0 4px rgba(230,106,28,.12);
}
.ai-quick-questions button:hover { border-color: #f0a868; }
.ai-quick-questions span { color: #c75814; }

/* Restrained commerce UI */
body { background: #faf6f1; }
.top-notice { background: #f5ede3; }
.site-header,
.site-header.is-scrolled {
    background: rgba(255,255,255,.96);
    box-shadow: none;
}
.brand-mark {
    border-radius: 10px;
    transform: none;
    box-shadow: none;
}
.brand-mark::after { display: none; }
.eyebrow,
.section-kicker {
    margin-bottom: 8px;
    color: #a89280;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .04em;
}
.eyebrow i { display: none; }
.catalog-heading h2 { letter-spacing: -.025em; }
.product-card {
    border-radius: 12px;
    box-shadow: none;
}
.product-card:hover {
    transform: none;
    border-color: #f0dcc8;
    box-shadow: 0 6px 18px rgba(80,40,10,.06);
}
.product-cover { background: #f5ede3; }
.cover-placeholder {
    background: #f5ede3;
    border-radius: 8px;
}
.cover-placeholder b {
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 12px;
    transform: none;
}
.product-category {
    color: #8a7560;
    background: rgba(255,255,255,.9);
    backdrop-filter: none;
}
.buy-link { border-radius: 8px; }
.arrow-button { border-radius: 7px; }
.trust-strip,
.trust-strip article { border-color: #ebe0d4; }

.admin-sidebar { box-shadow: none; }
.admin-sidebar nav a:hover { transform: none; }
.welcome-card {
    padding: 24px 26px;
    color: #2b1810;
    background: #fff;
    border-color: #e8ddd0;
    border-radius: 12px;
}
.welcome-card::after { display: none; }
.welcome-card h2 { font-size: 24px; }
.welcome-card p { color: #8a7560; }
.panel,
.stat-grid article {
    border-radius: 12px;
    box-shadow: none;
}
.stat-grid article:hover {
    transform: none;
    box-shadow: none;
    border-color: #f0dcc8;
}
.btn { border-radius: 8px; }
.btn:hover { transform: none; }
.admin-avatar { border-radius: 8px; }

.ai-launcher {
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(80,40,10,.12);
}
.ai-launcher:hover {
    transform: none;
    box-shadow: 0 8px 24px rgba(80,40,10,.15);
}
.ai-launcher-icon,
.ai-agent-avatar { border-radius: 10px; }
.ai-panel {
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(80,40,10,.16);
}
.ai-panel-head { background: #fff; }
.ai-message > div { box-shadow: none; }
.redirect-card,
.login-card,
.install-card { border-radius: 14px; }

/* Subtle visual rhythm */
.catalog-heading > div {
    position: relative;
    padding-left: 17px;
}
.catalog-heading > div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 4px;
    height: 42px;
    border-radius: 4px;
    background: #e66a1c;
}
.catalog-toolbar .category-tabs a.active {
    color: #c75814;
    border-bottom-color: #e66a1c;
}
.product-card:nth-child(4n + 1) .product-cover,
.product-card:nth-child(4n + 1) .cover-placeholder { background: #fdf0e6; }
.product-card:nth-child(4n + 2) .product-cover,
.product-card:nth-child(4n + 2) .cover-placeholder { background: #faf6f1; }
.product-card:nth-child(4n + 3) .product-cover,
.product-card:nth-child(4n + 3) .cover-placeholder { background: #f5ede3; }
.product-card:nth-child(4n + 4) .product-cover,
.product-card:nth-child(4n + 4) .cover-placeholder { background: #f7f1ed; }
.product-card:nth-child(4n + 1) .cover-placeholder b { color: #c75814; background: #fdf0e6; }
.product-card:nth-child(4n + 2) .cover-placeholder b { color: #b85620; background: #fae3d0; }
.product-card:nth-child(4n + 3) .cover-placeholder b { color: #a04a12; background: #f5ede3; }
.product-card:nth-child(4n + 4) .cover-placeholder b { color: #956f59; background: #f0e0d4; }
.product-card:nth-child(4n + 2) .arrow-button { background: #d4751e; }
.product-card:nth-child(4n + 3) .arrow-button { background: #b85620; }
.product-card:nth-child(4n + 4) .arrow-button { background: #9b7561; }
.trust-strip article:nth-child(2) > span { color: #d4751e; }
.trust-strip article:nth-child(3) > span { color: #8a6d5e; }

/* Product card purchase action */
.buy-link {
    min-height: 44px;
    padding: 10px 16px;
    justify-content: center;
    gap: 9px;
    color: #c75814;
    background: #fdf6ef;
    border: 1px solid #f0dcc8;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .01em;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.buy-link:hover {
    color: #e66a1c;
    background: #fdf0e6;
    border-color: #f0a868;
    box-shadow: 0 4px 12px rgba(230, 106, 28, .08);
}
.buy-link.disabled {
    color: #a89280;
    background: #f5f0ea;
    border-color: #ebe0d4;
    box-shadow: none;
}
.purchase-cart {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    overflow: visible;
    color: #2b1810;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.buy-link.disabled .purchase-cart {
    color: #a89280;
}

.admin-sidebar nav a.active {
    position: relative;
    color: #e66a1c;
    background: #fff7f0;
    font-weight: 700;
}
.admin-sidebar nav a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: #e66a1c;
}
.welcome-card {
    background: #fff;
    border-color: #e8e8e8;
}
.stat-grid article {
    position: relative;
    overflow: hidden;
    border-top-width: 3px;
}
.stat-grid article:nth-child(1) { border-top-color: #e66a1c; }
.stat-grid article:nth-child(2) { border-top-color: #d4751e; }
.stat-grid article:nth-child(3) { border-top-color: #b85620; }
.stat-grid article:nth-child(4) { border-top-color: #9b7561; }
.panel-head { background: #fafbfc; }
.ai-launcher { border-top: 3px solid #e66a1c; }

@media (max-width: 520px) {
    .catalog-heading > div { padding-left: 13px; }
    .catalog-heading > div::before { height: 34px; }
}

/* Inventory workspace */
.inventory-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
.product-stock-nav {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
    padding: 10px;
}
.stock-nav-head {
    grid-column: 1 / -1;
    min-height: 42px;
    padding: 2px 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ebe0d4;
}
.stock-nav-head strong { font-size: 14px; }
.stock-nav-head span { color: var(--muted); font-size: 11px; }
.product-stock-nav a {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #e8ddd0;
    border-radius: 9px;
    background: #fff;
}
.product-stock-nav a span {
    overflow: hidden;
    font-weight: 650;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.product-stock-nav a small {
    display: flex;
    align-items: center;
    gap: 7px;
}
.product-stock-nav a small i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c8b8a0;
}
.product-stock-nav a:hover {
    color: #4a3520;
    border-color: #f0dcc8;
    background: #fdf6ef;
}
.product-stock-nav a.active {
    color: #c75814;
    border-color: #f0a868;
    background: #fdf0e6;
    box-shadow: inset 0 0 0 1px rgba(230,106,28,.08);
}
.inventory-main { min-width: 0; }
.import-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    padding-bottom: 20px;
}
.import-form > .panel-head { grid-column: 1 / -1; }
.import-form > label { margin: 18px 0 0 20px; }
.import-form > label textarea { min-height: 142px; }
.import-form > button {
    min-width: 120px;
    margin: 18px 20px 0 14px;
}
.inventory-main .table-wrap { min-width: 0; }

@media (max-width: 700px) {
    .product-stock-nav {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }
    .stock-nav-head { display: none; }
    .product-stock-nav a {
        width: 210px;
        flex: 0 0 210px;
        scroll-snap-align: start;
    }
    .import-form { grid-template-columns: 1fr; }
    .import-form > label { margin: 16px 15px 0; }
    .import-form > button {
        width: auto;
        margin: 12px 15px 0;
    }
}

/* =========================================================
   后台全站 UI 统一优化（浅色系统风）
   作用域：所有后台页面，只改显示层，不影响功能逻辑
   ========================================================= */

/* --- 页面头 --- */
.page-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px;}
.page-head h1{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:0;color:#1A1A1A;}
.page-head p{color:#8C8C8C;font-size:12px;margin-top:3px;}

/* --- 按钮 --- */
.btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:10px;font-size:13px;font-weight:700;font-family:inherit;padding:9px 16px;cursor:pointer;transition:background .15s,transform .1s;text-decoration:none;}
.btn-primary{background:#E66A1C;color:#fff;box-shadow:0 4px 12px rgba(230,106,28,.24);}
.btn-primary:hover{background:#C75814;}
.btn-ghost{background:#fff;color:#4B5563;border:1px solid #EEF0F3;}
.btn-ghost:hover{border-color:#D8DBDF;}
.btn-sm{padding:7px 12px;font-size:12px;border-radius:8px;}
.btn-outline{background:#fff;color:#1A1A1A;border:1px solid #EEF0F3;}
.btn-outline:hover{border-color:#D8DBDF;}

/* --- 筛选栏 --- */
.filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid #EEF0F3;border-radius:14px;padding:12px 14px;box-shadow:0 2px 10px rgba(17,24,39,.05);margin-bottom:14px;}
.filter-bar input[type="text"],.filter-bar input[type="search"],.filter-bar select{height:36px;border:1px solid #EEF0F3;border-radius:9px;padding:0 12px;font-size:12.5px;color:#1A1A1A;outline:none;background:#FAFBFC;font-family:inherit;min-width:150px;transition:border-color .15s,box-shadow .15s,background .15s;}
.filter-bar input[type="text"]:focus,.filter-bar input[type="search"]:focus,.filter-bar select:focus{border-color:#E66A1C;background:#fff;box-shadow:0 0 0 3px rgba(230,106,28,.12);}
.filter-bar .f-btn{height:36px;padding:0 18px;border-radius:9px;border:0;background:#E66A1C;color:#fff;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;}
.filter-bar .f-btn:hover{background:#C75814;}
.filter-bar .f-count{margin-left:auto;font-size:12px;color:#8C8C8C;}

/* --- 状态 Tabs --- */
.tabs{display:flex;gap:6px;background:#fff;border:1px solid #EEF0F3;border-radius:14px;padding:8px;box-shadow:0 2px 10px rgba(17,24,39,.05);margin-bottom:14px;flex-wrap:wrap;}
.tab{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:9px;font-size:12.5px;font-weight:600;color:#6B7280;cursor:pointer;transition:all .15s;text-decoration:none;}
.tab .tb-cnt{font-size:10.5px;font-weight:700;background:#F0F1F3;color:#8C8C8C;border-radius:999px;padding:1px 7px;}
.tab.active{background:#E66A1C;color:#fff;box-shadow:0 4px 10px rgba(230,106,28,.25);}
.tab.active .tb-cnt{background:rgba(255,255,255,.22);color:#fff;}
.tab:hover:not(.active){background:#F7F8FA;}

/* --- 数据卡片容器 --- */
.data-card{background:#fff;border:1px solid #EEF0F3;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(17,24,39,.05);}
.table-wrap{overflow-x:auto;}

/* --- 数据表格 --- */
table.data-table{width:100%;border-collapse:collapse;min-width:760px;}
.data-table thead th{background:#F7F8FA;font-size:11.5px;color:#8C8C8C;font-weight:600;text-align:left;padding:0 16px;height:40px;white-space:nowrap;border-bottom:1px solid #EEF0F3;}
.data-table tbody td{padding:0 16px;height:56px;font-size:13px;border-top:1px solid #F5F6F8;white-space:nowrap;color:#4A5568;}
.data-table tbody tr{transition:background .12s;}
.data-table tbody tr:hover{background:#FAFBFC;}

/* 商品名主单元格 */
.td-main{display:flex;align-items:center;gap:11px;}
.td-thumb{width:38px;height:38px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:12px;}
.td-main b{display:block;font-size:13px;font-weight:600;line-height:1.3;color:#1A1A1A;}
.td-main small{display:block;color:#8C8C8C;font-size:10.5px;margin-top:1px;}

/* 金额列 */
.td-amt{color:#E66A1C;font-weight:700;}

/* --- 状态徽章 --- */
.badge{display:inline-block;font-size:11px;font-weight:600;padding:3px 10px;border-radius:6px;line-height:1.5;}
.badge-on,.badge-success,.badge-done{background:#E8F6EE;color:#2E9E5B;}
.badge-off,.badge-muted{background:#F0F1F3;color:#8C8C8C;}
.badge-pay,.badge-warning{background:#FEF6E3;color:#8A6D1F;}
.badge-ship,.badge-info,.badge-processing{background:#EAF2FB;color:#3D6FA8;}
.badge-refund,.badge-danger{background:#FDECEC;color:#D64541;}

/* 操作链接 */
.op-link{font-size:12.5px;font-weight:600;color:#E66A1C;margin-right:13px;cursor:pointer;text-decoration:none;}
.op-link:hover{text-decoration:underline;}
.op-link.danger{color:#D64541;}

/* --- 分页 --- */
.pager{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:13px 16px;border-top:1px solid #EEF0F3;flex-wrap:wrap;}
.pg{min-width:31px;height:31px;padding:0 8px;border-radius:8px;border:1px solid #EEF0F3;background:#fff;color:#4B5563;font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;}
.pg:hover{border-color:#D8DBDF;}
.pg.cur{background:#E66A1C;border-color:#E66A1C;color:#fff;box-shadow:0 3px 8px rgba(230,106,28,.25);}
.pg.dim{color:#C5CAD1;cursor:default;}
.pg-info{font-size:12px;color:#8C8C8C;margin-right:6px;}

/* --- 空状态 --- */
.empty-state{text-align:center;padding:50px 20px;color:#8C8C8C;}
.empty-state p{margin:8px 0 0;font-size:13px;}

/* --- 表单卡片（设置/账号/AI客服等） --- */
.form-card{background:#fff;border:1px solid #EEF0F3;border-radius:14px;padding:20px 24px;box-shadow:0 2px 10px rgba(17,24,39,.05);margin-bottom:14px;}
.form-card h3{margin:0 0 16px;font-size:15px;font-weight:700;color:#1A1A1A;padding-left:12px;position:relative;}
.form-card h3::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:16px;background:linear-gradient(180deg,#F07B2F,#E66A1C);border-radius:2px;}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 18px;margin-bottom:4px;}
.form-row .full{grid-column:1/-1;}
.form-item{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.form-item label{font-size:12.5px;color:#4A5568;font-weight:500;}
.form-item label .hint{color:#8C8C8C;font-weight:400;font-size:11px;margin-left:4px;}
.form-item input[type="text"],.form-item input[type="number"],.form-item input[type="email"],.form-item input[type="password"],.form-item select,.form-item textarea{height:36px;border:1px solid #EEF0F3;border-radius:9px;padding:0 12px;font-size:13px;color:#1A1A1A;outline:none;background:#FAFBFC;font-family:inherit;transition:border-color .15s,box-shadow .15s,background .15s;width:100%;box-sizing:border-box;}
.form-item textarea{height:auto;padding:10px 12px;resize:vertical;min-height:80px;}
.form-item input[type="text"]:focus,.form-item input[type="number"]:focus,.form-item input[type="email"]:focus,.form-item input[type="password"]:focus,.form-item select:focus,.form-item textarea:focus{border-color:#E66A1C;background:#fff;box-shadow:0 0 0 3px rgba(230,106,28,.12);}
.form-item .checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#4A5568;}
.form-item input[type="checkbox"]{width:16px;height:16px;accent-color:#E66A1C;}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px;padding-top:14px;border-top:1px solid #F5F6F8;}

/* --- 等级设置页面卡片 --- */
.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.level-card{background:#fff;border:1px solid #EEF0F3;border-radius:14px;padding:18px;box-shadow:0 2px 10px rgba(17,24,39,.05);position:relative;transition:all .2s;}
.level-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(17,24,39,.09);}
.level-card .lc-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.level-card .lc-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.level-card h4{margin:0;font-size:15px;font-weight:700;color:#1A1A1A;}
.level-card .lc-discount{font-size:11px;color:#8C8C8C;margin-top:2px;}
.level-card .lc-body{font-size:12.5px;color:#4A5568;line-height:1.8;}
.level-card .lc-body b{color:#1A1A1A;}
.level-card .lc-actions{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #F5F6F8;}

/* --- 手机端适配 --- */
@media (max-width:760px){
  .admin-content{padding:16px 12px 40px !important;}
  .page-head{flex-direction:column;align-items:flex-start;gap:10px;}
  .page-head h1{font-size:17px;}
  .filter-bar{padding:10px;gap:8px;}
  .filter-bar input[type="text"],.filter-bar input[type="search"],.filter-bar select{min-width:0;flex:1;}
  .tabs{padding:6px;gap:4px;}
  .tab{padding:7px 12px;font-size:12px;}
  .data-table thead th{padding:0 12px;font-size:11px;}
  .data-table tbody td{padding:0 12px;font-size:12px;height:50px;}
  .pager{justify-content:center;padding:10px 12px;}
  .form-row{grid-template-columns:1fr;}
  .form-card{padding:16px;}
  .level-grid{grid-template-columns:1fr;}
}

/* =========================================================
   旧页面 CSS 统一覆盖（零 HTML 改动，只改视觉）
   作用：让未改造 HTML 的旧页面（设置/AI客服/账号/商品编辑等）
   也能用上新的卡片视觉，零功能风险
   ========================================================= */

/* 旧 panel 类 → 新 form-card 风格 */
.panel{
  background:#fff !important;
  border:1px solid #EEF0F3 !important;
  border-radius:14px !important;
  box-shadow:0 2px 10px rgba(17,24,39,.05) !important;
  padding:20px 24px !important;
}
.panel-head{
  margin:-20px -24px 16px !important;
  padding:14px 24px !important;
  border-bottom:1px solid #F0F1F3 !important;
}
.panel-head h2,.panel-head h3{
  margin:0 !important;
  font-size:15px !important;
  font-weight:700 !important;
  color:#1A1A1A !important;
  padding-left:12px !important;
  position:relative !important;
}
.panel-head h2::before,.panel-head h3::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:16px;
  background:linear-gradient(180deg,#F07B2F,#E66A1C);
  border-radius:2px;
}

/* 旧 admin-form → 新表单风格 */
.admin-form label{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  font-size:12.5px !important;
  color:#4A5568 !important;
  font-weight:500 !important;
  margin-bottom:10px !important;
}
.admin-form label small{
  color:#8C8C8C !important;
  font-weight:400 !important;
  font-size:11px !important;
}
.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="email"],
.admin-form input[type="password"],
.admin-form input[type="datetime-local"],
.admin-form select,
.admin-form textarea{
  height:36px !important;
  border:1px solid #EEF0F3 !important;
  border-radius:9px !important;
  padding:0 12px !important;
  font-size:13px !important;
  color:#1A1A1A !important;
  outline:none !important;
  background:#FAFBFC !important;
  font-family:inherit !important;
  transition:border-color .15s,box-shadow .15s,background .15s !important;
  width:100% !important;
  box-sizing:border-box !important;
}
.admin-form textarea{
  height:auto !important;
  padding:10px 12px !important;
  min-height:80px !important;
}
.admin-form input[type="text"]:focus,
.admin-form input[type="number"]:focus,
.admin-form input[type="email"]:focus,
.admin-form input[type="password"]:focus,
.admin-form input[type="datetime-local"]:focus,
.admin-form select:focus,
.admin-form textarea:focus{
  border-color:#E66A1C !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(230,106,28,.12) !important;
}
.admin-form input[type="checkbox"]{
  accent-color:#E66A1C !important;
  width:16px !important;
  height:16px !important;
}

/* 旧 check-line → 新 checkbox-row 风格 */
.check-line{
  flex-direction:row !important;
  align-items:center !important;
  gap:8px !important;
  font-size:13px !important;
  color:#4A5568 !important;
  font-weight:400 !important;
}

/* 旧 form-grid → 两列表单布局 */
.form-grid{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:14px 18px !important;
}
.form-grid label[style*="grid-column:1/-1"],
.form-grid label[style*="grid-column: 1 / -1"]{
  grid-column:1/-1 !important;
}
.form-grid > div[style*="grid-column:1/-1"],
.form-grid > div[style*="grid-column: 1 / -1"]{
  grid-column:1/-1 !important;
}

/* 旧 settings-section → 分组卡片风格 */
.settings-section{
  background:#fff !important;
  border:1px solid #EEF0F3 !important;
  border-radius:14px !important;
  padding:20px 24px !important;
  box-shadow:0 2px 10px rgba(17,24,39,.05) !important;
  margin-bottom:14px !important;
}
.settings-title-row{
  margin-bottom:14px !important;
}
.settings-section-head h3{
  font-size:15px !important;
  font-weight:700 !important;
  color:#1A1A1A !important;
  margin:0 !important;
}
.settings-section-head p{
  color:#8C8C8C !important;
  font-size:12px !important;
  margin:4px 0 0 !important;
}

/* 旧 content-actions → 新 page-head 风格（页面头通用） */
.content-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  margin-bottom:18px !important;
}
.content-actions h2{
  font-size:19px !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  margin:0 !important;
  color:#1A1A1A !important;
}
.content-actions p{
  color:#8C8C8C !important;
  font-size:12px !important;
  margin-top:3px !important;
}

/* 旧 status 徽章 → 新 badge 风格 */
.status{
  display:inline-block !important;
  font-size:11px !important;
  font-weight:600 !important;
  padding:3px 10px !important;
  border-radius:6px !important;
  line-height:1.5 !important;
  border:none !important;
}
.status-success{background:#E8F6EE !important;color:#2E9E5B !important;}
.status-warning{background:#FEF6E3 !important;color:#8A6D1F !important;}
.status-info{background:#EAF2FB !important;color:#3D6FA8 !important;}
.status-muted{background:#F0F1F3 !important;color:#8C8C8C !important;}
.status-danger{background:#FDECEC !important;color:#D64541 !important;}

/* 旧 row-actions 操作链接 → 新 op-link 风格 */
.row-actions{
  display:flex !important;
  gap:13px !important;
  align-items:center !important;
}
.row-actions a,
.row-actions button.text-button{
  font-size:12.5px !important;
  font-weight:600 !important;
  color:#E66A1C !important;
  cursor:pointer !important;
  text-decoration:none !important;
  background:none !important;
  border:none !important;
  padding:0 !important;
  font-family:inherit !important;
}
.row-actions a:hover,
.row-actions button.text-button:hover{
  text-decoration:underline !important;
}
.row-actions .danger-link,
.row-actions button.danger-link{
  color:#D64541 !important;
}

/* 旧 pagination 分页 → 新 pager 风格 */
.pagination{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:6px !important;
  padding:13px 16px !important;
  border-top:1px solid #EEF0F3 !important;
  flex-wrap:wrap !important;
}
.pagination a{
  min-width:31px !important;
  height:31px !important;
  padding:0 8px !important;
  border-radius:8px !important;
  border:1px solid #EEF0F3 !important;
  background:#fff !important;
  color:#4B5563 !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  text-decoration:none !important;
}
.pagination a:hover{
  border-color:#D8DBDF !important;
}
.pagination a.active{
  background:#E66A1C !important;
  border-color:#E66A1C !important;
  color:#fff !important;
  box-shadow:0 3px 8px rgba(230,106,28,.25) !important;
}

/* 手机端旧页面适配 */
@media (max-width:760px){
  .form-grid{grid-template-columns:1fr !important;}
  .panel{padding:16px !important;}
  .panel-head{margin:-16px -16px 14px !important;padding:12px 16px !important;}
  .pagination{justify-content:center !important;padding:10px 12px !important;}
  .content-actions{flex-direction:column;align-items:flex-start;gap:10px !important;}
  .content-actions h2{font-size:17px !important;}
}


/* Settings workspace */
.settings-page { max-width: 1180px; }
.settings-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.settings-nav {
    position: sticky;
    top: 92px;
    padding: 10px;
    display: grid;
    gap: 4px;
}
.settings-nav > strong {
    padding: 10px 11px 13px;
    color: #303744;
    border-bottom: 1px solid #ebe0d4;
    font-size: 13px;
}
.settings-nav a {
    padding: 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    color: #8a7560;
    font-size: 12px;
}
.settings-nav a span {
    color: #b09a82;
    font: 9px ui-monospace, monospace;
}
.settings-nav a:hover {
    color: #c75814;
    background: #fdf0e6;
}
.settings-form {
    padding: 0;
    display: grid;
    gap: 16px;
    background: transparent;
}
.settings-form > .settings-section {
    margin: 0;
    padding: 22px;
    scroll-margin-top: 92px;
    border: 1px solid #e8ddd0;
    border-radius: 12px;
    background: #fff;
}
.settings-section-head {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}
.settings-section-head > div {
    display: flex;
    align-items: center;
    gap: 10px;
}
.settings-section-head > div > span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #c75814;
    background: #fdf0e6;
    font: 9px ui-monospace, monospace;
}
.settings-section-head h3 {
    margin: 0;
    font-size: 16px;
}
.settings-section-head p {
    max-width: 440px;
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
    text-align: right;
}
.settings-form .settings-title-row {
    margin-bottom: 20px;
    align-items: center;
}
.settings-form .settings-title-row .settings-section-head {
    flex: 1;
    margin: 0;
}
.settings-form .form-grid { gap: 16px; }
.settings-form .callback-box {
    margin-top: 18px;
    border: 1px solid #e8ddd0;
    background: #faf6f1;
}
.settings-save-bar {
    position: sticky;
    bottom: 14px;
    z-index: 5;
    padding: 12px 14px 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid #e8ddd0;
    border-radius: 11px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 10px 30px rgba(80,40,10,.09);
    backdrop-filter: blur(12px);
}
.settings-save-bar span { color: var(--muted); font-size: 11px; }
.settings-save-bar .btn { min-width: 145px; }

@media (max-width: 900px) {
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav {
        position: static;
        display: flex;
        overflow-x: auto;
    }
    .settings-nav > strong { display: none; }
    .settings-nav a {
        flex: 0 0 auto;
        border: 1px solid #e8ddd0;
        background: #fff;
    }
}
@media (max-width: 620px) {
    .settings-form > .settings-section { padding: 17px 15px; }
    .settings-section-head {
        display: block;
    }
    .settings-section-head p {
        margin: 9px 0 0 37px;
        text-align: left;
    }
    .settings-form .settings-title-row {
        align-items: stretch;
    }
    .settings-form .settings-title-row .switch {
        align-self: flex-start;
        margin-left: 37px;
    }
    .settings-save-bar {
        bottom: 8px;
        padding: 10px;
    }
    .settings-save-bar span { display: none; }
    .settings-save-bar .btn { width: 100%; }
}

/* Configurable store logo */
.brand-mark.has-image {
    padding: 3px;
    background: #fff;
    border: 1px solid #e8ddd0;
}
.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 7px;
}
.admin-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}
.admin-brand > span:last-child {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.admin-brand-logo {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 9px;
    color: #c75814;
    background: #fdf0e6;
    font-size: 16px;
    font-weight: 850;
}
.admin-brand-logo.has-image {
    padding: 3px;
    background: #fff;
    border: 1px solid #e8ddd0;
}
.admin-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}
.logo-setting-row {
    padding: 14px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    border: 1px solid #e8ddd0;
    border-radius: 10px;
    background: #faf6f1;
}
.logo-setting-preview {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #e8ddd0;
    border-radius: 14px;
    color: #c75814;
    background: #f5ede3;
    font-size: 27px;
    font-weight: 850;
}
.logo-setting-preview img {
    width: 100%;
    height: 100%;
    padding: 5px;
    object-fit: contain;
    background: #fff;
}
.logo-remove-line {
    color: #9a8770;
    font-size: 11px;
    white-space: nowrap;
}
@media (max-width: 680px) {
    .logo-setting-row {
        grid-template-columns: 60px minmax(0, 1fr);
    }
    .logo-setting-preview {
        width: 60px;
        height: 60px;
    }
    .logo-remove-line {
        grid-column: 1 / -1;
    }
}

/* ==================== 用户系统 ==================== */

/* 头部用户按钮 */
.header-user-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: linear-gradient(135deg, #fffaf5, #fff4eb) padding-box,
                linear-gradient(135deg, #e66a1c, #f0883e) border-box;
    color: #3d2e1e;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(230, 106, 28, .08);
    transition: all .25s ease;
}
.header-user-link:hover {
    box-shadow: 0 4px 16px rgba(230, 106, 28, .18);
    transform: translateY(-1px);
    color: #c75814;
}
.header-user-menu {
    position: relative;
}
.header-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 4px;
    border: 1px solid #e0d5c5;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    transition: all .2s;
}
.header-user-btn:hover {
    border-color: #c75814;
}
.header-user-btn.open {
    border-color: #c75814;
}
.header-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5a623, #c75814);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}
.header-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #3d2e1e;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #e8ddd0;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
    padding: 8px;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all .2s;
}
.header-user-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.header-user-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #3d2e1e;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s;
}
.header-user-dropdown a:hover {
    background: #f5ede3;
    color: #c75814;
}
.header-user-dropdown a svg {
    color: #9a8770;
    flex-shrink: 0;
}
.header-user-level {
    padding: 8px 12px;
    margin: 4px 0;
    border-top: 1px solid #f0e8dc;
    border-bottom: 1px solid #f0e8dc;
    font-size: 12px;
    color: #c75814;
    font-weight: 600;
}

/* 等级按钮（登录后头部） — 胶囊卡片样式 */
.header-tier-btn {
    padding: 4px 14px 4px 4px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: linear-gradient(135deg, #fffaf5, #fff4eb) padding-box,
                linear-gradient(135deg, #e66a1c, #f0883e) border-box;
    box-shadow: 0 2px 8px rgba(230, 106, 28, .08);
    transition: all .25s ease;
}
.header-tier-btn > svg:last-child {
    display: none;
}
.header-tier-btn:hover {
    box-shadow: 0 4px 16px rgba(230, 106, 28, .18);
    transform: translateY(-1px);
}
.header-tier-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #fff5ed, #ffe8d6);
    box-shadow: inset 0 1px 3px rgba(230, 106, 28, .08);
}
.header-tier-icon .tier-svg {
    width: 20px;
    height: 20px;
}
.header-tier-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #3d2e1e;
    max-width: 100px;
    letter-spacing: .2px;
}
.header-tier-name em {
    font-style: normal;
    font-weight: 700;
}

/* 各等级主题色 — 胶囊卡片 */
.tier-btn-1 {
    background: linear-gradient(135deg, #f8f9fa, #f0f3f4) padding-box,
                linear-gradient(135deg, #95A5A6, #7F8C8D) border-box;
    box-shadow: 0 2px 8px rgba(127, 140, 141, .1);
}
.tier-btn-1:hover { box-shadow: 0 4px 16px rgba(149, 165, 166, .25); transform: translateY(-1px); }
.tier-btn-1 .header-tier-icon { background: linear-gradient(135deg, #f4f6f7, #d5dbdb); box-shadow: inset 0 1px 3px rgba(127, 140, 141, .12); }

.tier-btn-2 {
    background: linear-gradient(135deg, #f7fbfd, #eaf4fb) padding-box,
                linear-gradient(135deg, #3498DB, #21618C) border-box;
    box-shadow: 0 2px 8px rgba(33, 97, 140, .1);
}
.tier-btn-2:hover { box-shadow: 0 4px 16px rgba(52, 152, 219, .25); transform: translateY(-1px); }
.tier-btn-2 .header-tier-icon { background: linear-gradient(135deg, #ebf5fb, #aed6f1); box-shadow: inset 0 1px 3px rgba(33, 97, 140, .12); }

.tier-btn-3 {
    background: linear-gradient(135deg, #fdf8fc, #f7eef9) padding-box,
                linear-gradient(135deg, #9B59B6, #6C3483) border-box;
    box-shadow: 0 2px 8px rgba(108, 52, 131, .1);
}
.tier-btn-3:hover { box-shadow: 0 4px 16px rgba(155, 89, 182, .25); transform: translateY(-1px); }
.tier-btn-3 .header-tier-icon { background: linear-gradient(135deg, #f5eef8, #d7bde2); box-shadow: inset 0 1px 3px rgba(108, 52, 131, .12); }

.tier-btn-4 {
    background: linear-gradient(135deg, #fffdf5, #fef9e7) padding-box,
                linear-gradient(135deg, #F39C12, #B9770E) border-box;
    box-shadow: 0 2px 8px rgba(185, 119, 14, .1);
}
.tier-btn-4:hover { box-shadow: 0 4px 16px rgba(243, 156, 18, .25); transform: translateY(-1px); }
.tier-btn-4 .header-tier-icon { background: linear-gradient(135deg, #fef9e7, #f9e79f); box-shadow: inset 0 1px 3px rgba(185, 119, 14, .12); }

/* 修改密码页 */
.password-page {
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    background: linear-gradient(135deg, #fef5ed 0%, #fff8f0 50%, #fef9e7 100%);
}
.password-wrap {
    width: 100%;
    max-width: 480px;
}
.password-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(199, 88, 20, .12);
    overflow: hidden;
}
.password-card-head {
    padding: 36px 32px 24px;
    text-align: center;
    background: linear-gradient(135deg, #fff5ed 0%, #fef9e7 100%);
    border-bottom: 1px solid #f5ede3;
}
.password-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e66a1c, #f0883e);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 24px rgba(230, 106, 28, .3);
}
.password-card-head h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #3d2e1e;
}
.password-card-head p {
    margin: 0;
    font-size: 13px;
    color: #8a7358;
}
.password-card-body {
    padding: 28px 32px 32px;
}
.pwd-field {
    margin-bottom: 18px;
}
.pwd-field > label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #3d2e1e;
}
.pwd-input-wrap {
    position: relative;
}
.pwd-input-wrap input {
    width: 100%;
    padding: 12px 44px 12px 14px;
    border: 1.5px solid #e8ddd0;
    border-radius: 10px;
    font-size: 14px;
    background: #faf6f1;
    transition: all .2s;
    box-sizing: border-box;
}
.pwd-input-wrap input:focus {
    outline: none;
    border-color: #e66a1c;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(230, 106, 28, .1);
}
.pwd-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9a8770;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    transition: all .15s;
}
.pwd-toggle:hover { color: #e66a1c; background: #fff5ed; }
.pwd-toggle.active { color: #e66a1c; }

/* 密码强度 */
.pwd-strength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.pwd-strength-bar {
    flex: 1;
    height: 4px;
    background: #f0e8dc;
    border-radius: 999px;
    overflow: hidden;
}
.pwd-strength-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: all .3s;
    background: #e66a1c;
}
.pwd-strength-bar span.level-1 { background: #e74c3c; width: 25%; }
.pwd-strength-bar span.level-2 { background: #f39c12; width: 50%; }
.pwd-strength-bar span.level-3 { background: #f1c40f; width: 75%; }
.pwd-strength-bar span.level-4 { background: #2ecc71; width: 100%; }
.pwd-strength-bar span.level-5 { background: #27ae60; width: 100%; }
.pwd-strength-text {
    font-size: 12px;
    color: #9a8770;
    min-width: 50px;
    text-align: right;
}
.pwd-strength-text.level-1 { color: #e74c3c; }
.pwd-strength-text.level-2 { color: #f39c12; }
.pwd-strength-text.level-3 { color: #f1c40f; }
.pwd-strength-text.level-4 { color: #2ecc71; }
.pwd-strength-text.level-5 { color: #27ae60; }

/* 匹配提示 */
.pwd-match {
    margin-top: 8px;
    font-size: 12px;
    min-height: 16px;
}
.pwd-match.match-ok { color: #27ae60; }
.pwd-match.match-err { color: #e74c3c; }

/* 安全提示 */
.pwd-tips {
    background: #fef9f3;
    border: 1px solid #f0e2ce;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.pwd-tips h4 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #c75814;
}
.pwd-tips ul {
    margin: 0;
    padding-left: 18px;
}
.pwd-tips li {
    font-size: 12px;
    color: #8a7358;
    margin-bottom: 4px;
}
.pwd-tips li:last-child { margin-bottom: 0; }

.pwd-submit {
    height: 46px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
}
.pwd-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    font-size: 12px;
}
.pwd-footer a {
    color: #9a8770;
    text-decoration: none;
    transition: color .15s;
}
.pwd-footer a:hover { color: #e66a1c; }

/* 成功状态 */
.pwd-success {
    text-align: center;
    padding: 20px 0;
}
.pwd-success-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 24px rgba(46, 204, 113, .3);
    animation: successPulse .5s ease;
}
@keyframes successPulse {
    0% { transform: scale(0); }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.pwd-success h3 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: #3d2e1e;
}
.pwd-success p {
    margin: 0 0 24px;
    font-size: 13px;
    color: #8a7358;
}

.btn-block {
    width: 100%;
    display: block;
    text-align: center;
}

@media (max-width: 480px) {
    .password-card-head { padding: 28px 24px 20px; }
    .password-card-body { padding: 24px; }
    .password-icon { width: 60px; height: 60px; }
    .password-icon svg { width: 32px; height: 32px; }
    .password-card-head h2 { font-size: 19px; }
}

/* 认证页 */
.auth-page {
    max-width: 480px;
    margin: 50px auto;
    padding: 0 16px;
}
.auth-card {
    background: #fff;
    border: 1px solid #e8ddd0;
    border-radius: 20px;
    padding: 40px 36px;
    box-shadow: 0 8px 32px rgba(0,0,0,.06);
}
.auth-tabs {
    display: flex;
    gap: 4px;
    background: #f5ede3;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 28px;
}
.auth-tab {
    flex: 1;
    padding: 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #9a8770;
    cursor: pointer;
    transition: all .2s;
}
.auth-tab.active {
    background: #fff;
    color: #c75814;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.auth-form.hidden {
    display: none;
}
.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.auth-form label span {
    font-size: 14px;
    font-weight: 600;
    color: #3d2e1e;
}
.auth-form input {
    padding: 13px 16px;
    border: 1px solid #e0d5c5;
    border-radius: 10px;
    font-size: 15px;
    outline: none;
    transition: border-color .2s;
}
.auth-form input:focus {
    border-color: #c75814;
}
.auth-tip {
    font-size: 13px;
    color: #9a8770;
    text-align: center;
    margin: 0;
}

/* 登录页额外链接 */
.auth-extra {
    text-align: right;
    margin-top: 4px;
}
.auth-extra a {
    font-size: 13px;
    color: #c75814;
    text-decoration: none;
    transition: opacity .2s;
}
.auth-extra a:hover {
    opacity: .7;
}

/* 找回密码页 */
.forgot-header {
    margin-bottom: 20px;
}
.forgot-header .back-link {
    display: inline-block;
    font-size: 13px;
    color: #9a8770;
    text-decoration: none;
    margin-bottom: 12px;
    transition: color .2s;
}
.forgot-header .back-link:hover {
    color: #c75814;
}
.forgot-header h2 {
    margin: 0;
    font-size: 22px;
    color: #3d2e1e;
}
.found-account-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #f0f9eb;
    border: 1px solid #e1f3d8;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #529b2e;
}
.found-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #67c23a;
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
}

/* 个人中心 - 账号安全 */
.security-card {
    background: #fff;
    border: 1px solid #e8ddd0;
    border-radius: 12px;
    padding: 24px;
}
.security-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 360px;
}
.security-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.security-form label span {
    font-size: 13px;
    font-weight: 600;
    color: #3d2e1e;
}
.security-form input {
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color .2s;
}
.security-form input:focus {
    border-color: #c75814;
    outline: none;
}
.security-form .btn {
    align-self: flex-start;
    margin-top: 4px;
}
.security-tip {
    font-size: 13px;
    color: #9a8770;
    margin: 16px 0 0;
}
.security-tip a {
    color: #c75814;
    text-decoration: none;
}
.security-tip a:hover {
    text-decoration: underline;
}

/* 后台重置密码按钮 */
.admin-reset-btn {
    margin-top: 6px;
}

/* ==================== 个人中心 ==================== */
.uc-container {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---- SVG 通用 ---- */
.tier-svg {
    width: 100%;
    height: 100%;
    display: block;
}
.uc-muted { color: #aaa !important; }

/* ---- Hero 卡 ---- */
.uc-hero {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(60,40,20,.06);
}
.uc-hero-top {
    background: linear-gradient(135deg, #e66a1c 0%, #c75814 50%, #8a3d0a 100%);
    padding: 28px 24px 44px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
/* 等级主题色 — 顶部hero背景 */
.uc-hero-top.hero-tier-1 { background: linear-gradient(135deg, #95A5A6 0%, #7F8C8D 40%, #566573 100%); }
.uc-hero-top.hero-tier-2 { background: linear-gradient(135deg, #5DADE2 0%, #2980B9 40%, #1A5276 100%); }
.uc-hero-top.hero-tier-3 { background: linear-gradient(135deg, #A569BD 0%, #8E44AD 40%, #4A235A 100%); }
.uc-hero-top.hero-tier-4 { background: linear-gradient(135deg, #F4D03F 0%, #F39C12 35%, #D68910 70%, #B9770E 100%); }
.uc-hero-wave.hero-tier-1 { background: linear-gradient(135deg, #95A5A6 0%, #7F8C8D 40%, #566573 100%); }
.uc-hero-wave.hero-tier-2 { background: linear-gradient(135deg, #5DADE2 0%, #2980B9 40%, #1A5276 100%); }
.uc-hero-wave.hero-tier-3 { background: linear-gradient(135deg, #A569BD 0%, #8E44AD 40%, #4A235A 100%); }
.uc-hero-wave.hero-tier-4 { background: linear-gradient(135deg, #F4D03F 0%, #F39C12 35%, #D68910 70%, #B9770E 100%); }
.uc-hero-glow {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 50% 70% at 80% 30%, rgba(255,255,255,.15), transparent 65%),
      radial-gradient(ellipse 40% 50% at 20% 80%, rgba(255,200,120,.1), transparent 60%);
    pointer-events: none;
}
.uc-hero-user {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}
.uc-avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 3px solid rgba(255,255,255,.35);
    backdrop-filter: blur(4px);
    display: grid; place-items: center;
    font-size: 28px; font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.uc-hero-id { display: flex; flex-direction: column; gap: 8px; }
.uc-hero-id h2 {
    margin: 0;
    font-size: 19px; font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.uc-hero-tags {
    display: flex; gap: 6px; flex-wrap: wrap;
}
/* ===== 等级徽章 P3/P5/P7/P9 ===== */
.lv-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .04em;
    margin-left: 10px;
    vertical-align: middle;
    border: 1px solid transparent;
}
.lv-badge.b1 { background: linear-gradient(135deg, #BDC3C7, #95A5A6); color: #fff; border-color: #7F8C8D; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.lv-badge.b2 { background: linear-gradient(135deg, #5DADE2, #2980B9); color: #fff; border-color: #1A5276; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.lv-badge.b3 { background: linear-gradient(135deg, #A569BD, #8E44AD); color: #fff; border-color: #6C3483; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.lv-badge.b4 { background: linear-gradient(135deg, #F4D03F, #D68910); color: #fff; border-color: #B9770E; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.uc-lvl-locked .lv-badge { opacity: .5; }
/* 等级胶囊内的徽章样式调整 */
.uc-tier-chip .lv-badge {
    margin-left: 4px;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 999px;
    line-height: 1;
}

.uc-tier-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 6px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.uc-tier-chip svg {
    width: 20px; height: 20px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.uc-tier-chip em { font-style: normal; display: inline-flex; align-items: center; }
.chip-1 { background: rgba(189,195,199,.45); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.chip-2 { background: rgba(93,173,226,.5); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.chip-3 { background: rgba(165,105,189,.55); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.chip-4 { background: rgba(244,208,63,.55); color: #fff; border: 1px solid rgba(249,231,159,.6); }
.uc-discount-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    min-height: 28px;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    text-shadow: 0 1px 2px rgba(0,0,0,.15);
    line-height: 1;
}
.uc-orders-link {
    font-size: 13px;
    color: rgba(255,255,255,.8);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s;
    position: relative;
    z-index: 1;
}
.uc-orders-link:hover { color: #fff; }

/* 弧形过渡 */
.uc-hero-wave {
    height: 20px;
    background: linear-gradient(135deg, #e66a1c 0%, #c75814 50%, #8a3d0a 100%);
    margin-top: -20px;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    position: relative;
}
.uc-hero-wave::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 50% 70% at 80% 30%, rgba(255,255,255,.15), transparent 65%),
      radial-gradient(ellipse 40% 50% at 20% 80%, rgba(255,200,120,.1), transparent 60%);
}
/* 等级主题色 — 弧形波浪（必须在默认样式之后，否则会被覆盖） */
.uc-hero-wave.hero-tier-1 { background: linear-gradient(135deg, #95A5A6 0%, #7F8C8D 40%, #566573 100%); }
.uc-hero-wave.hero-tier-2 { background: linear-gradient(135deg, #5DADE2 0%, #2980B9 40%, #1A5276 100%); }
.uc-hero-wave.hero-tier-3 { background: linear-gradient(135deg, #A569BD 0%, #8E44AD 40%, #4A235A 100%); }
.uc-hero-wave.hero-tier-4 { background: linear-gradient(135deg, #F4D03F 0%, #F39C12 35%, #D68910 70%, #B9770E 100%); }

/* ---- 统计行 ---- */
.uc-stats {
    display: flex;
    align-items: center;
    padding: 18px 24px;
    border-top: 1px solid #f5f0eb;
}
.uc-stat { flex: 1; text-align: center; }
.uc-stat-link {
    text-decoration: none;
    border-radius: 12px;
    padding: 8px 12px;
    transition: all .2s ease;
    cursor: pointer;
}
.uc-stat-link:hover {
    background: rgba(230,106,28,.08);
}
.uc-stat-link:hover .uc-stat-num {
    color: #e66a1c;
}
.uc-stat-link:hover .uc-stat-arrow {
    transform: translateX(3px);
    opacity: 1;
}
.uc-stat-num {
    display: block;
    font-size: 22px; font-weight: 800;
    color: #2c1810;
    letter-spacing: -0.5px;
    transition: color .2s ease;
}
.uc-stat-label {
    display: block;
    font-size: 12px;
    color: #aaa;
    margin-top: 3px;
}
.uc-stat-arrow {
    font-size: 13px;
    color: #e66a1c;
    opacity: 0;
    transform: translateX(0);
    transition: all .2s ease;
}
.uc-stat-sep {
    width: 1px; height: 30px;
    background: #f0e8dc;
    flex-shrink: 0;
}

/* ---- 通用卡片 ---- */
.uc-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(60,40,20,.06);
    overflow: hidden;
}
.uc-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 22px 24px 0;
}
.uc-card-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #2c1810;
}
.uc-card-sub { font-size: 12px; color: #b8a898; }
.uc-card-body { padding: 20px 24px 24px; }

/* ---- 升级进度 ---- */
.uc-upgrade {
    background: linear-gradient(135deg, #faf6f1, #f5efe8);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
}
.uc-upgrade-tiers {
    display: flex;
    align-items: center;
    gap: 14px;
}
.uc-upgrade-from,
.uc-upgrade-to {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.uc-upgrade-icon-wrap {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: grid; place-items: center;
    position: relative;
}
.uc-upgrade-icon-wrap.from-1 { background: linear-gradient(135deg, #E8EDEE, #95A5A6); box-shadow: 0 3px 10px rgba(127,140,141,.2); }
.uc-upgrade-icon-wrap.from-2 { background: linear-gradient(135deg, #D6EAF8, #3498DB); box-shadow: 0 3px 12px rgba(41,128,185,.25); }
.uc-upgrade-icon-wrap.from-3 { background: linear-gradient(135deg, #E8DAEF, #9B59B6); box-shadow: 0 3px 14px rgba(142,68,173,.28); }
.uc-upgrade-icon-wrap.from-4 { background: linear-gradient(135deg, #FCF3CF, #F39C12); box-shadow: 0 3px 16px rgba(243,156,18,.35); }
.uc-upgrade-icon-wrap.to-1 { background: linear-gradient(135deg, #E8EDEE, #95A5A6); }
.uc-upgrade-icon-wrap.to-2 { background: linear-gradient(135deg, #D6EAF8, #3498DB); }
.uc-upgrade-icon-wrap.to-3 { background: linear-gradient(135deg, #E8DAEF, #9B59B6); }
.uc-upgrade-icon-wrap.to-4 { background: linear-gradient(135deg, #FCF3CF, #F39C12); }
.uc-upgrade-icon-wrap.locked { opacity: .45; filter: grayscale(.6); }
.uc-upgrade-icon-wrap svg {
    width: 32px; height: 32px;
}
.uc-upgrade-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.uc-upgrade-name {
    font-size: 12px;
    color: #8a7a68;
    font-weight: 600;
}
.uc-upgrade-amount {
    font-size: 15px;
    font-weight: 800;
    color: #2c1810;
}
.uc-upgrade-to .uc-upgrade-amount { color: #b8a898; }

.uc-upgrade-track {
    flex: 1;
    height: 10px;
    background: #ebe2d6;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    min-width: 60px;
}
.uc-upgrade-fill {
    height: 100%;
    background: linear-gradient(90deg, #f5a623, #e66a1c);
    border-radius: 5px;
    transition: width .6s ease;
    position: relative;
}
.uc-upgrade-fill::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 6px;
    background: rgba(255,255,255,.4);
    border-radius: 5px;
}
.uc-upgrade-pct {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 800;
    color: #e66a1c;
    white-space: nowrap;
}
/* 等级主题色 — 进度条 */
.progress-to-1 .uc-upgrade-fill { background: linear-gradient(90deg, #BDC3C7, #95A5A6); }
.progress-to-1 .uc-upgrade-pct { color: #7F8C8D; }
.progress-to-2 .uc-upgrade-fill { background: linear-gradient(90deg, #85C1E9, #3498DB); }
.progress-to-2 .uc-upgrade-pct { color: #2980B9; }
.progress-to-3 .uc-upgrade-fill { background: linear-gradient(90deg, #D7BDE2, #9B59B6); }
.progress-to-3 .uc-upgrade-pct { color: #8E44AD; }
.progress-to-4 .uc-upgrade-fill { background: linear-gradient(90deg, #F9E79F, #F39C12); }
.progress-to-4 .uc-upgrade-pct { color: #B9770E; }
.uc-upgrade-hint {
    margin: 16px 0 0;
    font-size: 13px;
    color: #8a7a68;
    line-height: 1.5;
    text-align: center;
}
.uc-upgrade-hint strong { color: #e66a1c; }
.uc-upgrade-max .uc-upgrade-tiers { justify-content: center; }

/* 最高等级居中布局 */
.uc-max-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}
.uc-max-icon {
    width: 56px !important;
    height: 56px !important;
}
.uc-max-icon svg {
    width: 36px;
    height: 36px;
}
.uc-max-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.uc-max-label {
    font-size: 15px;
    font-weight: 800;
    color: #2c1810;
}
.uc-max-spent {
    font-size: 13px;
    color: #8a7a68;
}
.uc-max-badge {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #e66a1c, #a04510);
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(200,80,16,.2);
    white-space: nowrap;
}
/* 等级主题色 — 最高等级徽章 */
.progress-to-1 .uc-max-badge { background: linear-gradient(135deg, #95A5A6, #5D6D7E); box-shadow: 0 2px 10px rgba(93,109,126,.25); }
.progress-to-2 .uc-max-badge { background: linear-gradient(135deg, #3498DB, #1A5276); box-shadow: 0 2px 10px rgba(26,82,118,.28); }
.progress-to-3 .uc-max-badge { background: linear-gradient(135deg, #9B59B6, #4A235A); box-shadow: 0 2px 10px rgba(108,52,131,.3); }
.progress-to-4 .uc-max-badge { background: linear-gradient(135deg, #F4D03F, #B9770E); box-shadow: 0 2px 12px rgba(185,119,14,.35); }
.uc-max-track {
    height: 10px;
    background: #ebe2d6;
    border-radius: 5px;
    overflow: hidden;
}
.uc-max-track-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #f5a623, #e66a1c, #a04510);
    border-radius: 5px;
}
/* 等级主题色 — 最高等级进度条 */
.progress-to-1 .uc-max-track-fill { background: linear-gradient(90deg, #BDC3C7, #95A5A6, #5D6D7E); }
.progress-to-2 .uc-max-track-fill { background: linear-gradient(90deg, #85C1E9, #3498DB, #1A5276); }
.progress-to-3 .uc-max-track-fill { background: linear-gradient(90deg, #D7BDE2, #9B59B6, #4A235A); }
.progress-to-4 .uc-max-track-fill { background: linear-gradient(90deg, #F9E79F, #F39C12, #B9770E); }

/* ---- 等级阶梯 ---- */
.uc-ladder {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.uc-lvl {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all .2s;
}
.uc-lvl:hover { background: #faf8f5; }
.uc-lvl-locked { opacity: .5; }
.uc-lvl-locked .uc-lvl-name { color: #b8a898; }

.uc-lvl-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: grid; place-items: center;
    flex-shrink: 0;
    position: relative;
}
.uc-lvl-icon.tier-1 { background: linear-gradient(135deg, #E8EDEE, #BDC3C7); box-shadow: 0 3px 10px rgba(127,140,141,.18); }
.uc-lvl-icon.tier-2 { background: linear-gradient(135deg, #D6EAF8, #5DADE2); box-shadow: 0 3px 12px rgba(41,128,185,.22); }
.uc-lvl-icon.tier-3 { background: linear-gradient(135deg, #E8DAEF, #A569BD); box-shadow: 0 3px 14px rgba(142,68,173,.25); }
.uc-lvl-icon.tier-4 { background: linear-gradient(135deg, #FCF3CF, #F1C40F); box-shadow: 0 3px 16px rgba(243,156,18,.3); }
.uc-lvl-icon svg { width: 30px; height: 30px; }

.uc-lvl-current {
    background: linear-gradient(135deg, #fff8f0, #fff0e4);
    border-color: #f0c8a0;
    box-shadow: 0 2px 12px rgba(230,106,28,.08);
    padding: 11px 14px;
    gap: 12px;
}
.uc-lvl-current .uc-lvl-icon {
    width: 42px; height: 42px;
    transform: scale(1);
}
.uc-lvl-current .uc-lvl-icon svg { width: 26px; height: 26px; }
.uc-lvl-current .uc-lvl-name { font-size: 14px; }
.uc-lvl-current .uc-lvl-benefit { font-size: 12px; }
.uc-lvl-current .uc-lvl-body { gap: 2px; }
/* 等级主题色 — 当前等级卡片（专属配色，高对比度） */
.uc-lvl-current.cur-tier-1 {
    background: linear-gradient(135deg, #E8EDEE 0%, #BDC3C7 50%, #95A5A6 100%);
    border: 2px solid #7F8C8D;
    box-shadow: 0 4px 16px rgba(127,140,141,.25);
}
.uc-lvl-current.cur-tier-1 .uc-lvl-name { color: #2C3E50; }
.uc-lvl-current.cur-tier-1 .uc-lvl-benefit { color: #34495E; }
.uc-lvl-current.cur-tier-1 .uc-lvl-now { background: #5D6D7E; }

.uc-lvl-current.cur-tier-2 {
    background: linear-gradient(135deg, #D6EAF8 0%, #85C1E9 50%, #3498DB 100%);
    border: 2px solid #2980B9;
    box-shadow: 0 4px 16px rgba(41,128,185,.28);
}
.uc-lvl-current.cur-tier-2 .uc-lvl-name { color: #1B4F72; }
.uc-lvl-current.cur-tier-2 .uc-lvl-benefit { color: #21618C; }
.uc-lvl-current.cur-tier-2 .uc-lvl-now { background: #2471A3; }

.uc-lvl-current.cur-tier-3 {
    background: linear-gradient(135deg, #E8DAEF 0%, #BB8FCE 50%, #9B59B6 100%);
    border: 2px solid #8E44AD;
    box-shadow: 0 4px 18px rgba(142,68,173,.3);
}
.uc-lvl-current.cur-tier-3 .uc-lvl-name { color: #5B2C6F; }
.uc-lvl-current.cur-tier-3 .uc-lvl-benefit { color: #6C3483; }
.uc-lvl-current.cur-tier-3 .uc-lvl-now { background: #7D3C98; }

.uc-lvl-current.cur-tier-4 {
    background: linear-gradient(135deg, #FCF3CF 0%, #F4D03F 30%, #F39C12 70%, #D68910 100%);
    border: 2px solid #B9770E;
    box-shadow: 0 4px 20px rgba(243,156,18,.35);
}
.uc-lvl-current.cur-tier-4 .uc-lvl-name { color: #7E5109; }
.uc-lvl-current.cur-tier-4 .uc-lvl-benefit { color: #9A7D0A; }
.uc-lvl-current.cur-tier-4 .uc-lvl-now { background: #B7950B; }
.uc-lvl-current .uc-lvl-icon {
    transform: scale(1.06);
}

.uc-lock-icon {
    position: absolute;
    right: -4px; bottom: -4px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    padding: 3px;
    color: #aaa;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

.uc-lvl-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.uc-lvl-top { display: flex; align-items: center; gap: 8px; }
.uc-lvl-name { font-size: 15px; font-weight: 700; color: #1A1D21; }
.uc-lvl-now {
    font-size: 10px;
    padding: 2px 8px;
    background: #e66a1c;
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.uc-lvl-done {
    font-size: 10px;
    padding: 2px 8px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 10px;
    font-weight: 700;
}
.uc-lvl-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uc-lvl-benefit { font-size: 13px; color: #5C6470; font-weight: 600; }
.uc-lvl-threshold { font-size: 12px; color: #c4b4a4; }

/* ---- 表单 ---- */
.uc-form { display: flex; flex-direction: column; gap: 16px; }
.uc-form-row { display: flex; flex-direction: column; gap: 6px; }
.uc-form-row label { font-size: 13px; font-weight: 600; color: #6b5d4f; }
.uc-form-row input {
    height: 44px; padding: 0 16px;
    border: 1px solid #e8ddd0;
    border-radius: 12px;
    font-size: 14px; color: #2c1810;
    transition: border-color .2s, box-shadow .2s;
    background: #faf8f5;
}
.uc-form-row input:focus {
    outline: none;
    border-color: #e66a1c;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(230,106,28,.08);
}
.uc-form-actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.uc-form-link { font-size: 13px; color: #9a8770; text-decoration: none; }
.uc-form-link:hover { color: #e66a1c; }

/* ---- 订单列表（兼容） ---- */
.user-order-list { display: flex; flex-direction: column; gap: 8px; }
.user-order-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; background: #fff;
    border: 1px solid #e8ddd0; border-radius: 10px;
    text-decoration: none; transition: all .2s;
}
.user-order-item:hover { border-color: #c75814; box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.order-item-main { display: flex; flex-direction: column; gap: 4px; }
.order-item-main strong { font-size: 14px; color: #3d2e1e; }
.order-item-main small { font-size: 12px; color: #9a8770; }
.order-item-side { text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.order-item-side strong { font-size: 15px; color: #c75814; }
.order-status-badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.order-status-badge.warning { background: #fff3e0; color: #e65100; }
.order-status-badge.info { background: #e3f2fd; color: #1565c0; }
.order-status-badge.success { background: #e8f5e9; color: #2e7d32; }
.order-status-badge.muted { background: #f5f5f5; color: #9e9e9e; }

/* 购买页会员价 */
.member-price-tag {
    margin-left: 12px;
    font-size: 19px;
    color: #c75814;
    font-weight: 700;
}
.member-price-tag small {
    font-size: 11px;
    font-weight: 500;
    color: #9a8770;
}
.member-discount-line {
    font-size: 12px;
    color: #c75814;
    font-weight: 600;
    display: block;
    margin: 2px 0;
}

/* 后台补充样式 */
.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}
.btn-danger {
    background: #e53e3e;
    color: #fff;
    border: none;
}
.btn-danger:hover {
    background: #c53030;
}
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.badge-success { background: #e8f5e9; color: #2e7d32; }
.badge-warning { background: #fff3e0; color: #e65100; }
.badge-danger { background: #fce4ec; color: #c62828; }
.badge-muted { background: #f5f5f5; color: #9e9e9e; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.data-table th {
    text-align: left;
    padding: 10px 12px;
    background: #faf6f1;
    color: #9a8770;
    font-weight: 600;
    font-size: 12px;
    border-bottom: 1px solid #e8ddd0;
    white-space: nowrap;
}
.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0e8dc;
    color: #3d2e1e;
    vertical-align: middle;
}
.data-table tr:hover td {
    background: #fdfaf6;
}
.muted {
    color: #9a8770;
}

/* 响应式 */
@media (max-width: 768px) {
    .uc-container { gap: 14px; }
    .uc-hero-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 0 20px;
    }
    .uc-hero-top {
        padding: 20px 20px 36px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .uc-orders-link { padding-bottom: 0; }
    .uc-stats { padding: 16px 20px; }
    .uc-stat-num { font-size: 18px; }
    .uc-card-head, .uc-card-body { padding-left: 20px; padding-right: 20px; }
    .uc-upgrade { padding: 16px; }
    .uc-upgrade-tiers { gap: 8px; }
    .uc-upgrade-icon-wrap { width: 42px; height: 42px; }
    .uc-upgrade-icon-wrap svg { width: 26px; height: 26px; }
    .uc-upgrade-text .uc-upgrade-name { font-size: 11px; }
    .uc-upgrade-text .uc-upgrade-amount { font-size: 13px; }
    .uc-upgrade-hint { font-size: 12px; text-align: left; }
    .uc-max-content {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .uc-lvl { padding: 10px 12px; gap: 12px; }
    .uc-lvl-icon { width: 40px; height: 40px; }
    .uc-lvl-icon svg { width: 26px; height: 26px; }
    .uc-lvl-info { flex-wrap: wrap; }
    .uc-form-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .header-user-name { display: none; }
}

/* ==================== 分享链接页面 ==================== */
.share-page {
    max-width: 640px;
    margin: 0 auto;
}
.share-product-card {
    display: flex;
    gap: 20px;
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.share-product-image {
    flex: 0 0 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-2,#f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.share-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.share-product-info {
    flex: 1;
    min-width: 0;
}
.share-product-info h1 {
    font-size: 18px;
    margin: 4px 0 8px;
}
.share-title-tag {
    color: #c75814;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}
.share-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}
.share-price-normal {
    font-size: 26px;
    font-weight: 800;
    color: #e66a1c;
}
.share-stock {
    font-size: 13px;
    color: #8a7560;
}
.share-order-section {
    background: #fff;
    border-radius: 14px;
    padding: 24px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.share-order-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.share-form-title {
    font-size: 16px;
    font-weight: 700;
    color: #2b1810;
    margin-bottom: 4px;
}
.share-order-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #2b1810;
}
.share-order-form input {
    padding: 12px 14px;
    border: 1px solid #e8ddd0;
    border-radius: 10px;
    font-size: 16px;
    background: #faf6f1;
    color: #2b1810;
    transition: border-color .2s;
}
.share-order-form input:focus {
    outline: none;
    border-color: #e66a1c;
    background: #fff;
}
.share-order-form .btn {
    font-size: 16px;
    padding: 14px;
    margin-top: 4px;
}

/* ==================== 公告弹窗 ==================== */
.announce-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999; display: none; align-items: center; justify-content: center;
    padding: 20px;
}
.announce-modal.show { display: flex; animation: announceFadeIn .25s ease; }
.announce-modal-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, .45); backdrop-filter: blur(3px);
}
.announce-modal-box {
    position: relative; width: 100%; max-width: 460px;
    background: #fff; border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.2);
    overflow: hidden; animation: announceSlideUp .3s ease;
}
.announce-modal-close {
    position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
    border: none; background: rgba(0,0,0,.05); border-radius: 50%;
    font-size: 20px; color: #999; cursor: pointer; transition: background .2s, color .2s;
    display: flex; align-items: center; justify-content: center; z-index: 1;
}
.announce-modal-close:hover { background: rgba(0,0,0,.1); color: #333; }
.announce-modal-header {
    padding: 28px 28px 16px; text-align: center;
    background: linear-gradient(135deg, #fff5ed, #fff);
    border-bottom: 1px solid #f5ebe0;
}
.announce-modal-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #e66a1c, #f0883e);
    color: #fff; margin-bottom: 12px;
    box-shadow: 0 8px 24px rgba(230,106,28,.25);
}
.announce-modal-header h3 {
    font-size: 20px; font-weight: 800; color: #2b1810; margin: 0;
}
.announce-modal-content {
    padding: 20px 28px; font-size: 15px; line-height: 1.7; color: #4a3b2e;
    max-height: 300px; overflow-y: auto; word-break: break-word;
}
/* 公告内容统一样式（前后台共用 .ann-content） */
.ann-content p { margin: 0 0 12px; line-height: 1.8; }
.ann-content p:last-child { margin-bottom: 0; }
.ann-content h1, .ann-content h2, .ann-content h3, .ann-content h4 {
    margin: 16px 0 10px; font-weight: 700; color: #2b1810; line-height: 1.4;
}
.ann-content h1 { font-size: 22px; }
.ann-content h2 { font-size: 19px; }
.ann-content h3 { font-size: 17px; }
.ann-content h4 { font-size: 15px; }
.ann-content ul, .ann-content ol { margin: 10px 0; padding-left: 24px; line-height: 1.8; }
.ann-content li { margin: 4px 0; }
.ann-content strong, .ann-content b { font-weight: 700; color: #2b1810; }
.ann-content em, .ann-content i { font-style: italic; }
.ann-content a { color: #e66a1c; text-decoration: underline; }
.ann-content img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
.ann-content blockquote {
    margin: 12px 0; padding: 10px 16px;
    background: #fff5ed; border-left: 3px solid #e66a1c;
    border-radius: 0 8px 8px 0; color: #5c4030;
}
.ann-content code {
    background: #f5f0ea; padding: 2px 6px; border-radius: 4px;
    font-family: Consolas, Monaco, monospace; font-size: 13px;
}
.ann-content hr { border: none; border-top: 1px solid #e8ddd0; margin: 16px 0; }
.ann-content table {
    width: 100%; border-collapse: collapse; margin: 12px 0;
    font-size: 14px;
}
.ann-content th, .ann-content td {
    border: 1px solid #e8ddd0; padding: 8px 12px; text-align: left;
}
.ann-content th { background: #fff5ed; font-weight: 600; }
.announce-modal-footer {
    padding: 16px 28px 24px; text-align: center;
}
.announce-modal-ok {
    width: 100%; padding: 12px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #e66a1c, #f0883e);
    color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}
.announce-modal-ok:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(230,106,28,.3); }
.announce-modal-ok:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.announce-modal-ok.enabled {
    animation: announcePulse .5s ease;
}
@keyframes announcePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* 公告倒计时 */
.announce-countdown {
    margin-bottom: 12px;
    padding: 10px 16px;
    background: #fff5ed;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 13px;
    color: #8a6d5a;
}
.announce-countdown .countdown-text {
    font-weight: 500;
}
.announce-countdown .countdown-timer b {
    color: #e66a1c;
    font-size: 18px;
    font-weight: 800;
    margin: 0 2px;
}
.announce-countdown.done {
    background: #e8f5e9;
    color: #2e7d32;
}
.announce-countdown.done .countdown-timer b {
    color: #2e7d32;
}

/* 纯倒计时模式：全屏居中圆环倒计时 */
.announce-modal.countdown-only {
    cursor: default;
    pointer-events: auto;
}
.announce-modal.countdown-only .announce-modal-overlay {
    background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(6px);
}
.announce-countdown-fullscreen {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: countdownFadeIn .4s ease;
}
.countdown-ring {
    position: relative;
    width: 140px;
    height: 140px;
    margin-bottom: 24px;
}
.countdown-ring-svg {
    width: 100%;
    height: 100%;
}
.countdown-ring-progress {
    transition: stroke-dashoffset 1s linear;
}
.countdown-ring-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.countdown-num {
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    font-family: 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
}
.countdown-unit {
    font-size: 16px;
    font-weight: 500;
    margin-top: 4px;
    opacity: .9;
}
.countdown-tip {
    color: rgba(255, 255, 255, .9);
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    letter-spacing: 2px;
}
.announce-countdown-fullscreen.done .countdown-tip {
    animation: countdownPulse .5s ease;
}
@keyframes countdownFadeIn {
    from { opacity: 0; transform: scale(.8); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes countdownPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@media (max-width: 480px) {
    .countdown-ring {
        width: 120px;
        height: 120px;
    }
    .countdown-num {
        font-size: 44px;
    }
    .countdown-tip {
        font-size: 15px;
    }
}
@keyframes announceFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes announceSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 480px) {
    .announce-modal-box { max-width: 100%; border-radius: 12px; }
    .announce-modal-header { padding: 22px 20px 12px; }
    .announce-modal-content { padding: 16px 20px; font-size: 14px; max-height: 250px; }
    .announce-modal-footer { padding: 12px 20px 20px; }
    .announce-modal-icon { width: 48px; height: 48px; }
    .announce-modal-header h3 { font-size: 18px; }
    .announce-countdown {
        padding: 8px 12px;
        font-size: 12px;
        gap: 8px;
        flex-direction: column;
    }
    .announce-countdown .countdown-timer b {
        font-size: 16px;
    }
    .announce-modal-ok {
        padding: 11px;
        font-size: 14px;
    }
}
.share-form-tip {
    font-size: 12px;
    color: #8a7560;
    text-align: center;
    margin: 0;
}

/* 后台分享链接管理 */
.share-detail-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.share-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}
.share-detail-header h3 {
    margin-bottom: 4px;
}
.share-detail-header p {
    font-size: 13px;
    color: var(--muted,#888);
    margin: 2px 0;
}
.share-detail-header code {
    font-size: 12px;
    color: #000;
    font-weight: 700;
    word-break: break-all;
}
.share-detail-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.stat-pill {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    background: #f0f0f0;
    color: #666;
}
.stat-pill.avail { background: #e8f7f0; color: #1dc981; }
.stat-pill.used { background: #fff3e0; color: #d97706; }
.share-generate-form {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}
.coupon-code-text {
    font-family: 'Courier New',monospace;
    font-weight: 700;
    color: #000;
    letter-spacing: .5px;
}

/* ==================== 后台公告管理 ==================== */
.data-card {
    background: #fff;
    border: 1px solid var(--line, #eceee8);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}
.data-card .data-table { border-radius: 12px; }
.data-card .data-table th { border-bottom: 1px solid var(--line, #eceee8); }
.data-card.empty-state { padding: 40px 20px; text-align: center; }

.ann-section { margin-bottom: 28px; }
.ann-section-title {
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 2px solid #f0ebe4;
}
.ann-section-title h3 { font-size: 16px; font-weight: 800; color: #2b1810; margin: 0; }
.ann-section-title span { font-size: 12px; color: var(--muted, #9a8770); }
.ann-publish-form { margin-bottom: 16px; }

/* ==================== 前端公告列表页 ==================== */
.ann-page { max-width: 800px; margin: 0 auto; padding: 30px 20px 60px; }
.ann-page-header { text-align: center; margin-bottom: 32px; }
.ann-page-header h1 { font-size: 28px; font-weight: 800; color: #2b1810; margin: 0 0 8px; }
.ann-page-header p { font-size: 14px; color: var(--muted, #9a8770); margin: 0; }

.ann-list { display: flex; flex-direction: column; gap: 20px; }
.ann-item {
    background: #fff;
    border: 1px solid #eceee8;
    border-radius: 14px;
    padding: 24px 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    transition: box-shadow .2s, transform .2s;
}
.ann-item:hover { box-shadow: 0 6px 24px rgba(0,0,0,.07); transform: translateY(-2px); }
.ann-item-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px; padding-bottom: 14px;
    border-bottom: 1px solid #f5f0eb;
}
.ann-item-num {
    flex-shrink: 0; width: 28px; height: 28px;
    border-radius: 50%; background: linear-gradient(135deg, #e66a1c, #f0883e);
    color: #fff; font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.ann-item-header h2 { font-size: 17px; font-weight: 700; color: #2b1810; margin: 0; flex: 1; }
.ann-item-header time { font-size: 12px; color: var(--muted, #9a8770); white-space: nowrap; }
.ann-item-body { font-size: 14px; line-height: 1.8; color: #4a3b2e; word-break: break-word; }
.ann-item-body p { margin: 0 0 10px; }
.ann-item-body p:last-child { margin-bottom: 0; }
.ann-item-body a { color: #e66a1c; text-decoration: underline; }
.ann-item-body img { max-width: 100%; border-radius: 8px; margin: 8px 0; }

.ann-empty {
    text-align: center; padding: 80px 20px;
    color: var(--muted, #9a8770);
}
.ann-empty-icon { margin-bottom: 16px; color: #d4c8b8; }
.ann-empty p { font-size: 15px; margin: 0; }

@media (max-width: 600px) {
    .ann-page { padding: 20px 14px 40px; }
    .ann-page-header h1 { font-size: 22px; }
    .ann-item { padding: 18px 16px; }
    .ann-item-header h2 { font-size: 15px; }
    .ann-item-body { font-size: 13px; }
}

/* ==================== 右侧悬浮公告按钮 ==================== */
.complaint-fab {
    position: fixed; right: 24px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff; text-decoration: none;
    box-shadow: 0 6px 20px rgba(231, 76, 60, .35);
    z-index: 9000;
    transition: transform .25s, box-shadow .25s;
    justify-content: center;
}
.complaint-fab:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 10px 28px rgba(231, 76, 60, .45); color: #fff; }
.complaint-fab svg { flex-shrink: 0; }
.complaint-fab-label { font-size: 10px; font-weight: 700; line-height: 1; }
@media (max-width: 768px) {
    .complaint-fab { right: 16px; width: 46px; height: 46px; }
    .complaint-fab svg { width: 18px; height: 18px; }
}

/* ==================== 后台表单修复 ==================== */
.admin-form { display: grid; gap: 16px; padding: 20px 22px 22px; }
.admin-form > label, .admin-form > .form-grid, .admin-form > .settings-section, .admin-form > button, .admin-form > .form-actions { margin-left: 0; margin-right: 0; }
.admin-form > .form-actions { margin-top: 4px; }
.admin-form .checkbox-label {
    display: flex !important; align-items: center; gap: 8px;
    white-space: nowrap; cursor: pointer; font-weight: 600;
}
.admin-form .checkbox-label input[type="checkbox"] {
    width: 16px; height: 16px; cursor: pointer; margin: 0; flex-shrink: 0;
}
.admin-form h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #1a1a1a; }
.levels-layout .panel { padding: 0; }
.levels-layout .panel > h3 { padding: 20px 22px 0; }

/* ==================== 后台管理UI统一重做（爱马仕橙专业风格） ==================== */
/* 此区块为最终覆盖层，统一所有后台页面风格，清除之前所有冲突样式 */

/* --- 基础布局 --- */
.admin-body {
    background: #f0f2f5 !important;
}
.admin-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e8e8e8 !important;
    box-shadow: 2px 0 8px rgba(0,0,0,.03) !important;
    box-shadow: none !important;
}
.admin-sidebar::before, .admin-sidebar::after { display: none !important; }
.admin-brand {
    color: #1a1a1a !important;
    padding: 20px 14px 18px 10px !important;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 8px;
}
.admin-brand small {
    color: #999 !important;
    font-size: 10px !important;
}
.admin-brand-logo {
    width: auto !important;
    height: 30px !important;
    border-radius: 7px !important;
    display: block !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.admin-sidebar nav { gap: 2px !important; padding: 0 10px; }
.admin-sidebar nav a {
    color: #595959 !important;
    background: transparent !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all .15s ease !important;
    transform: none !important;
    position: relative;
}
.admin-sidebar nav a:hover {
    color: #e66a1c !important;
    background: #fff7f0 !important;
    transform: none !important;
}
.admin-sidebar nav a.active {
    color: #e66a1c !important;
    background: #fff7f0 !important;
    font-weight: 600 !important;
}
.admin-sidebar nav a.active::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 60% !important;
    border-radius: 0 3px 3px 0 !important;
    background: #e66a1c !important;
}

/* --- 顶栏 --- */
.admin-topbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e8e8e8 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.admin-menu-toggle {
    color: #595959 !important;
}
.admin-menu-toggle:hover { background: #fff7f0 !important; }
.admin-user-btn {
    border: 1px solid #e8e8e8 !important;
    background: #fff !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.admin-user-btn:hover {
    border-color: #e66a1c !important;
    box-shadow: 0 0 0 3px rgba(230,106,28,.1) !important;
}
.admin-user-avatar, .admin-dropdown-avatar {
    background: #e66a1c !important;
    color: #fff !important;
}
.admin-user-dropdown {
    border: 1px solid #e8e8e8 !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.1) !important;
    border-radius: 10px !important;
}
.admin-dropdown-header {
    background: #fff7f0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}
.admin-user-dropdown a:hover { background: #fff7f0 !important; }
.admin-user-dropdown a:last-child { color: #ff4d4f !important; }

/* --- 内容区 --- */
.admin-content, .content-section { padding: 24px 28px 50px !important; }
.content-actions {
    margin-bottom: 20px !important;
}
.content-actions h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
}
.content-actions p {
    color: #8c8c8c !important;
    font-size: 13px !important;
    margin: 6px 0 0 !important;
}

/* --- 欢迎卡片 --- */
.welcome-card {
    background: linear-gradient(135deg, #e66a1c, #d4581a) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 28px 30px !important;
    box-shadow: 0 4px 16px rgba(230,106,28,.2) !important;
    overflow: hidden;
    position: relative;
}
.welcome-card::after { display: none !important; }
.welcome-card > * { position: relative; z-index: 1; }
.welcome-card h2 { color: #fff !important; font-size: 24px !important; }
.welcome-card p { color: rgba(255,255,255,.8) !important; }
.welcome-card .eyebrow { color: rgba(255,255,255,.7) !important; }
.welcome-actions { display: flex; align-items: center; gap: 10px; }

/* --- 统计卡片 --- */
.stat-grid {
    gap: 16px !important;
    margin: 16px 0 !important;
}
.stat-grid article {
    background: #fff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.03) !important;
    border-top: 3px solid #e66a1c !important;
    transition: box-shadow .2s, transform .2s !important;
}
.stat-grid article:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.06) !important;
    transform: translateY(-2px) !important;
}
.stat-grid article > span, .stat-grid small { color: #8c8c8c !important; }
.stat-grid strong { color: #1a1a1a !important; font-size: 26px !important; }
.stat-grid article:nth-child(1) { border-top-color: #e66a1c !important; }
.stat-grid article:nth-child(2) { border-top-color: #f0883e !important; }
.stat-grid article:nth-child(3) { border-top-color: #d4751e !important; }
.stat-grid article:nth-child(4) { border-top-color: #b85620 !important; }
.stat-highlight { border-top: 3px solid #e66a1c !important; }

/* --- 面板/卡片 --- */
.panel {
    background: #fff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.03) !important;
}
.panel.table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.panel-head { overflow: hidden; border-radius: 12px 12px 0 0; }
.panel-head {
    background: #fafafa !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 16px 20px !important;
    min-height: 56px !important;
}
.panel-head h2 { font-size: 15px !important; font-weight: 600 !important; color: #1a1a1a !important; margin: 0 !important; }
.panel-head p { color: #8c8c8c !important; font-size: 12px !important; margin: 4px 0 0 !important; }
.panel-head a, .panel-head button { color: #e66a1c !important; font-size: 13px !important; }
.panel-head a:hover, .panel-head button:hover { color: #c75814 !important; }
.panel-foot { padding: 12px 16px; border-top: 1px solid #f0f0f0; text-align: center; }

/* --- 仪表盘卡片 --- */
.dash-section-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 22px 0 10px !important;
}
.dash-two-col { gap: 16px !important; margin: 10px 0 !important; }
.dash-card {
    background: #fff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.03) !important;
}
.dash-card-head {
    padding: 14px 20px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}
.dash-card-head h3 { font-size: 14px !important; font-weight: 600 !important; margin: 0 !important; color: #1a1a1a !important; }
.dash-card-head small { color: #8c8c8c !important; font-size: 12px !important; }
.dash-empty { padding: 40px 20px !important; color: #8c8c8c !important; font-size: 13px !important; }
.dash-rank-item { border-bottom: 1px solid #f5f5f5 !important; padding: 10px 8px !important; }
.dash-rank-num { background: #f5f5f5 !important; color: #8c8c8c !important; }
.dash-rank-num.top { background: #e66a1c !important; color: #fff !important; }
.dash-rank-bar { background: #f5f5f5 !important; }
.dash-rank-bar i { background: #e66a1c !important; }
.dash-rank-amount { color: #1a1a1a !important; }
.dash-stock-grid { background: #f5f5f5 !important; }
.dash-stock-cell { background: #fff !important; }
.dash-card-foot { border-top: 1px solid #f0f0f0 !important; padding: 12px 16px !important; }
.dash-trend-table .data-table th { padding: 10px 16px !important; }
.dash-trend-table .data-table td { padding: 10px 16px !important; }

/* --- 数据表格 --- */
.data-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
}
.data-table th {
    padding: 12px 16px !important;
    background: #fafafa !important;
    color: #595959 !important;
    text-align: left !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-bottom: 1px solid #e8e8e8 !important;
    white-space: nowrap !important;
}
.data-table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f5f5f5 !important;
    color: #333 !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}
.data-table tbody tr { transition: background .12s !important; }
.data-table tbody tr:hover { background: #fff7f0 !important; }
.data-table tbody tr:hover td { background: transparent !important; }
.data-table td > strong { color: #1a1a1a !important; }
.data-table td > small { color: #8c8c8c !important; }
.table-product img, .table-product > span {
    border-radius: 8px !important;
    background: #f5f5f5 !important;
}

/* --- 按钮 --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
    text-decoration: none;
    line-height: 1.5;
    background: #fff;
    color: #333;
}
.btn:hover { transform: none !important; }
.btn-primary {
    color: #fff !important;
    background: #e66a1c !important;
    border-color: #e66a1c !important;
}
.btn-primary:hover {
    background: #c75814 !important;
    border-color: #c75814 !important;
    box-shadow: 0 4px 12px rgba(230,106,28,.25) !important;
}
.btn-outline {
    color: #595959 !important;
    background: #fff !important;
    border-color: #d9d9d9 !important;
}
.btn-outline:hover {
    color: #e66a1c !important;
    border-color: #e66a1c !important;
    background: #fff7f0 !important;
}
.btn-light {
    color: #333 !important;
    background: #fff !important;
    border-color: #e8e8e8 !important;
}
.btn-sm {
    padding: 5px 12px !important;
    font-size: 12px !important;
}
.btn-block { width: 100%; }
.btn-danger {
    background: #ff4d4f !important;
    color: #fff !important;
    border-color: #ff4d4f !important;
}
.btn-danger:hover {
    background: #d9363e !important;
    border-color: #d9363e !important;
}
.btn-screen {
    color: #595959 !important;
    border-color: #d9d9d9 !important;
    background: #fff !important;
}
.btn-screen:hover {
    color: #e66a1c !important;
    background: #fff7f0 !important;
    border-color: #e66a1c !important;
}

/* --- 行操作链接 --- */
.row-actions { display: flex; gap: 10px; align-items: center; }
.row-actions a, .row-actions button, .text-button {
    color: #e66a1c !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}
.row-actions a:hover, .row-actions button:hover, .text-button:hover { color: #c75814 !important; }

/* --- 表单 --- */
.admin-form {
    display: grid;
    gap: 16px;
    padding: 20px 22px 24px;
}
.admin-form > label,
.admin-form > .form-grid,
.admin-form > .settings-section,
.admin-form > button,
.admin-form > .form-actions { margin: 0 !important; }
.admin-form > .form-actions { margin-top: 4px !important; }
.admin-form label {
    display: grid;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
}
.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="password"],
.admin-form input[type="number"],
.admin-form input[type="url"],
.admin-form input[type="tel"],
.admin-form input[type="search"],
.admin-form select,
.admin-form textarea,
.admin-form input:not([type]),
.settings-form input[type="text"],
.settings-form input[type="email"],
.settings-form input[type="password"],
.settings-form input[type="number"],
.settings-form input[type="url"],
.settings-form select,
.settings-form textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus,
.settings-form input:focus,
.settings-form select:focus,
.settings-form textarea:focus {
    outline: none;
    border-color: #e66a1c !important;
    box-shadow: 0 0 0 3px rgba(230,106,28,.1) !important;
}
.admin-form h3 {
    margin: 0 0 4px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
}
.admin-form .checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
}
.admin-form .checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    accent-color: #e66a1c;
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.span-2 { grid-column: 1/-1; }
.form-actions { display: flex; gap: 10px; justify-content: flex-start; margin-top: 4px; }
.current-image img { border-radius: 10px !important; }

/* --- 开关 --- */
.switch { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; }
.switch span {
    width: 38px; height: 22px; padding: 3px;
    border-radius: 99px;
    background: #d9d9d9;
    transition: .2s;
}
.switch span::after {
    content: ""; display: block;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.switch input:checked + span { background: #e66a1c !important; }
.switch input:checked + span::after { transform: translateX(16px); }

/* --- 徽章 --- */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}
.badge-success { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
.badge-warning { background: #fffbe6; color: #fa8c16; border: 1px solid #ffd591; }
.badge-danger { background: #fff2f0; color: #ff4d4f; border: 1px solid #ffccc7; }
.badge-muted { background: #fafafa; color: #8c8c8c; border: 1px solid #e8e8e8; }

/* --- 支付标识 --- */
.pay-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.pay-badge.pay-alipay { background: #e3f2fd; color: #1565c0; }
.pay-badge.pay-wxpay { background: #e8f5e9; color: #2e7d32; }
.pay-badge.pay-qqpay { background: #e3f2fd; color: #1565c0; }
.pay-badge.pay-bank { background: #fff3e0; color: #e65100; }
.pay-badge.pay-share_coupon { background: #fff7f0; color: #e66a1c; font-weight: 600; border: 1px solid #ffd8b8; }
.pay-badge.pay-code_pay { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }

/* --- 订单筛选栏 --- */
.order-filter-bar { margin-bottom: 16px; }
.order-filter-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}
.order-search-input {
    flex: 1;
    min-width: 140px;
    max-width: 240px;
    padding: 7px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
}
.order-search-input:focus {
    border-color: #e66a1c;
    outline: none;
    box-shadow: 0 0 0 3px rgba(230,106,28,.1);
}
.order-filter-select {
    padding: 7px 10px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
}
.order-filter-select:focus {
    border-color: #e66a1c;
    outline: none;
    box-shadow: 0 0 0 3px rgba(230,106,28,.1);
}

/* --- 订单表格列 --- */
.order-table th { white-space: nowrap; }
.order-table td { white-space: nowrap; }
.order-table td:nth-child(3), .order-table td:nth-child(5) { white-space: normal; }
.order-ip { display: block; margin-top: 4px; font-size: 11px; color: #bbb; }
.order-user-cell { display: flex; flex-direction: column; gap: 4px; }
.order-user-account { font-size: 13px; color: #1a1a1a; font-weight: 500; }
.order-amount-cell { display: flex; flex-direction: column; gap: 2px; }
.order-original-price { font-size: 11px; color: #bbb; text-decoration: line-through; }
.order-discount-info { font-size: 11px; color: #e66a1c; font-weight: 500; }
.order-coupon-tag {
    font-size: 11px; color: #8c8c8c;
    background: #fafafa;
    padding: 1px 8px; border-radius: 4px;
    display: inline-block; width: fit-content;
    border: 1px solid #e8e8e8;
}
.order-final-price { font-size: 14px; color: #1a1a1a; font-weight: 500; }

/* --- 设置页面 --- */
.settings-page { max-width: 1180px; }
.settings-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.settings-nav {
    position: sticky;
    top: 80px;
    padding: 10px;
    display: grid;
    gap: 2px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
}
.settings-nav > strong {
    padding: 10px 11px 12px;
    color: #1a1a1a;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    font-weight: 600;
}
.settings-nav a {
    padding: 10px 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    color: #595959;
    font-size: 13px;
    transition: all .15s;
}
.settings-nav a span { color: #bbb; font: 10px ui-monospace, monospace; }
.settings-nav a:hover { color: #e66a1c; background: #fff7f0; }
.settings-form { padding: 0; display: grid; gap: 16px; background: transparent; }
.settings-form > .settings-section {
    margin: 0;
    padding: 22px;
    scroll-margin-top: 80px;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    background: #fff;
}
.settings-section { padding: 22px !important; border-bottom: none !important; }
.settings-section h3 { font-size: 15px !important; font-weight: 600 !important; color: #1a1a1a !important; margin: 0 0 16px !important; }
.settings-section-head { margin-bottom: 18px; }
.settings-title-row { margin-bottom: 18px; }
.settings-title-row h3 { margin-bottom: 5px; }
.settings-title-row p { color: #8c8c8c; font-size: 12px; margin: 0; }
.callback-box {
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
}

/* --- 等级管理 --- */
.levels-layout { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: flex-start; }
.levels-layout .panel { padding: 0; }
.levels-layout .panel > h3 { padding: 20px 22px 0; font-size: 15px; font-weight: 600; color: #1a1a1a; }

/* --- 库存管理 --- */
.inventory-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.product-stock-nav { display: grid; padding: 8px; gap: 6px; }
.product-stock-nav a {
    display: grid; gap: 5px;
    padding: 12px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fff;
    transition: all .15s;
}
.product-stock-nav a:hover, .product-stock-nav a.active {
    background: #fff7f0;
    border-color: #e66a1c;
}
.product-stock-nav a:hover span, .product-stock-nav a.active span { color: #e66a1c; }
.product-stock-nav small { color: #8c8c8c; }
.product-stock-nav b { color: #e66a1c; }

/* --- 分类管理 --- */
.categories-layout { grid-template-columns: 310px 1fr; }
.categories-layout .admin-form { display: grid; gap: 16px; padding: 0 20px 22px; }
.categories-layout .admin-form .panel-head { margin: 0 -20px; }

/* --- AI 客服管理 --- */
.ai-admin-state {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border: 1px solid #e8e8e8; border-radius: 99px;
    color: #8c8c8c; background: #fff;
    font-size: 12px; font-weight: 500;
}
.ai-admin-state i { width: 7px; height: 7px; border-radius: 50%; background: #d9d9d9; }
.ai-admin-state.is-on { color: #e66a1c; border-color: #ffd8b8; background: #fff7f0; }
.ai-admin-state.is-on i {
    background: #e66a1c;
    box-shadow: 0 0 0 4px rgba(230,106,28,.12);
}
.ai-admin-layout { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(360px,.88fr); gap: 16px; align-items: start; }
.ai-notify-settings {
    padding: 14px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #fafafa;
}
.ai-notify-settings strong { font-size: 13px; color: #1a1a1a; }
.ai-notify-settings small { color: #8c8c8c; font-size: 11px; }
.ai-settings-form > .settings-section { margin: 0 22px; }
.ai-settings-form .settings-section:first-of-type { padding-top: 22px; }
.ai-settings-form > button { margin-top: 20px; }
.ai-faq-column { display: grid; gap: 16px; }
.faq-form { display: grid; gap: 16px; }
.faq-form > label, .faq-form > .faq-form-row, .faq-form > button { margin: 0 20px; }
.faq-form > .panel-head { margin-bottom: 0; }
.faq-form-row { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: end; }
.faq-list article { padding: 16px 19px; border-top: 1px solid #f5f5f5; }
.faq-list article > div:first-child { display: flex; align-items: center; gap: 9px; }
.faq-list article strong { font-size: 13px; color: #1a1a1a; }
.faq-list article p { margin: 8px 0 6px; color: #8c8c8c; font-size: 12px; line-height: 1.6; }
.faq-list article small { display: block; margin-bottom: 8px; color: #bbb; font-size: 10px; }
.faq-list .row-actions { justify-content: flex-end; }

/* --- 分享链接管理 --- */
.share-detail-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.share-detail-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap; gap: 12px;
    margin-bottom: 16px; padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}
.share-detail-header h3 { margin-bottom: 4px; font-size: 15px; font-weight: 600; color: #1a1a1a; }
.share-detail-header p { font-size: 13px; color: #8c8c8c; margin: 2px 0; }
.share-detail-header code { font-size: 13px; color: #1a1a1a; font-weight: 700; word-break: break-all; }
.share-detail-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.stat-pill {
    font-size: 12px; font-weight: 500;
    padding: 4px 12px; border-radius: 20px;
    background: #fafafa; color: #8c8c8c;
    border: 1px solid #e8e8e8;
}
.stat-pill.avail { background: #f6ffed; color: #52c41a; border-color: #b7eb8f; }
.stat-pill.used { background: #fff7f0; color: #e66a1c; border-color: #ffd8b8; }
.share-generate-form {
    margin-bottom: 16px; padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}
.coupon-code-text {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: .5px;
}

/* --- 公告管理 --- */
.data-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.data-card.table-wrap { overflow-x: auto !important; }
.data-card .data-table { border-radius: 0; }
.data-card .data-table th { border-bottom: 1px solid #e8e8e8; }
.data-card.empty-state { padding: 40px 20px; text-align: center; }
.ann-section { margin-bottom: 28px; }
.ann-section-title {
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}
.ann-section-title h3 { font-size: 16px; font-weight: 600; color: #1a1a1a; margin: 0; }
.ann-section-title span { font-size: 12px; color: #8c8c8c; }
.ann-publish-form { margin-bottom: 16px; }

/* 后台公告预览 */
.announce-preview-box {
    border: 1px solid #e8ddd0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    max-width: 460px;
}
.announce-preview-header {
    padding: 20px 24px 12px;
    text-align: center;
    background: linear-gradient(135deg, #fff5ed, #fff);
    border-bottom: 1px solid #f5ebe0;
}
.announce-preview-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #2b1810;
}
.announce-preview-content {
    padding: 20px 24px;
    font-size: 14px;
    line-height: 1.7;
    color: #4a3b2e;
    max-height: 300px;
    overflow-y: auto;
    word-break: break-word;
}

/* 后台公告编辑选项布局 */
.ann-edit-options {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.ann-edit-option {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ann-edit-option > label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin: 0;
    padding: 0;
    display: block;
}
.ann-edit-option input[type="number"] {
    width: 140px;
    padding: 8px 12px;
    border: 1px solid #e8ddd0;
    border-radius: 8px;
    font-size: 14px;
    height: 38px;
    box-sizing: border-box;
}
.ann-edit-option input[type="number"]:focus {
    outline: none;
    border-color: var(--accent);
}
.ann-edit-option small {
    font-size: 12px;
    color: #8c8c8c;
    line-height: 1.4;
}
.ann-edit-checkbox {
    display: flex;
    align-items: center;
    padding-top: 28px; /* 与其他选项的标签高度对齐 */
}
.ann-edit-checkbox .checkbox-label {
    height: auto;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 600px) {
    .ann-edit-options {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .ann-edit-option input[type="number"] {
        width: 100%;
    }
    .ann-edit-checkbox {
        padding-top: 0;
    }
}

/* --- 杂项 --- */
.muted { color: #8c8c8c !important; }
.danger-text, .danger-link { color: #ff4d4f !important; }
.empty-cell { padding: 40px !important; color: #8c8c8c !important; text-align: center !important; }
.check-line { display: flex; align-items: center; }
.check-line input { width: auto; margin-right: 6px; accent-color: #e66a1c; }
.card-secret { max-width: 360px; font: 11px/1.5 ui-monospace, monospace; word-break: break-all; }
.filter-bar { display: grid; grid-template-columns: minmax(220px,1fr) 180px auto; gap: 10px; margin-bottom: 15px; }
.import-form > label { margin-top: 16px; }
.import-form > button { margin-top: 12px; }
.narrow-content { max-width: 920px; }
.admin-columns { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .7fr); gap: 16px; align-items: start; }

/* --- 分页 --- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 24px 0 8px; }
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px;
    font-size: 13px; font-weight: 500; color: #595959;
    border: 1px solid #d9d9d9; background: #fff;
    transition: all .15s;
}
.pagination a:hover { color: #e66a1c; border-color: #e66a1c; background: #fff7f0; }
.pagination .active, .pagination .current {
    color: #fff !important; background: #e66a1c !important; border-color: #e66a1c !important;
}

/* --- 状态标签 --- */
.status { display: inline-flex; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; white-space: nowrap; font-style: normal; }
.status-success { color: #52c41a; background: #f6ffed; }
.status-warning { color: #faad14; background: #fffbe6; }
.status-info { color: #1890ff; background: #e6f7ff; }
.status-muted { color: #8c8c8c; background: #fafafa; }

/* --- 等级徽章 --- */
.level-badge {
    display: inline-block; padding: 3px 10px; border-radius: 5px;
    font-size: 12px; font-weight: 600;
    border: 1px solid transparent;
}
.level-badge.level-1 { background: rgba(151,161,174,.14); color: #6E7884; }
.level-badge.level-2 { background: rgba(74,90,106,.14); color: #33414E; }
.level-badge.level-3 { background: rgba(140,109,70,.14); color: #66502F; }
.level-badge.level-4 { background: rgba(201,162,75,.16); color: #A8853A; border: 1px solid rgba(201,162,75,.4); }

/* --- 响应式（后台） --- */
@media (max-width: 800px) {
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 200;
    }
    .admin-sidebar.open {
        transform: translateX(0) !important;
        box-shadow: 4px 0 30px rgba(0,0,0,.15);
    }
    .admin-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 150; }
    .admin-sidebar-overlay.show { display: block; }
    .admin-main { margin-left: 0; }
    .admin-menu-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; font-size: 20px; color: #595959; }
    .admin-menu-toggle:hover { background: #fff7f0; color: #e66a1c; }
    .admin-content { padding: 16px 12px 40px; }
    .admin-topbar { padding: 0 12px; }
    .inventory-layout, .categories-layout { grid-template-columns: 1fr; }
    .levels-layout { grid-template-columns: 1fr !important; }
    .form-grid { grid-template-columns: 1fr; }
    .content-actions { flex-direction: column; gap: 12px; align-items: flex-start; }
    .order-filter-form { flex-wrap: nowrap; gap: 6px; }
    .order-search-input { min-width: 80px; max-width: 140px; flex: 0 1 140px; }
    .order-filter-select { width: auto; min-width: 0; }
    .data-table { font-size: 11px; }
    .data-table th, .data-table td { padding: 8px 10px; }
    .data-table th { white-space: nowrap; }
    .panel.table-wrap, .data-card, .table-wrap, .dash-trend-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .order-table { min-width: 720px; }
    .admin-form { padding: 16px 14px 18px; }
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav { position: static; }
    .ai-admin-layout { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .stat-grid { grid-template-columns: 1fr; }
    .welcome-card { padding: 20px; flex-direction: column; align-items: flex-start; }
    .faq-form-row { grid-template-columns: 1fr; }
    .ai-notify-settings { grid-template-columns: 1fr; }
}

/* ==================== 投诉/工单功能样式 ==================== */

/* 前端投诉页面 */
.complaints-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 20px;
}
.complaints-intro {
    color: var(--muted);
    margin: 8px 0 20px;
    font-size: 14px;
    line-height: 1.6;
}
.complaint-form {
    display: grid;
    gap: 16px;
}
.complaint-form textarea {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
    border: 1px solid #e8ddd0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    background: white;
    color: var(--ink);
}
.complaint-form textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.complaint-form select {
    border: 1px solid #e8ddd0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    background: white;
    color: var(--ink);
}
.complaint-form select:focus {
    outline: none;
    border-color: var(--accent);
}

.complaint-list {
    display: grid;
    gap: 12px;
}
.complaint-item {
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, box-shadow .2s;
    position: relative;
}
.complaint-item:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 12px rgba(230, 106, 28, .08);
}
.complaint-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.complaint-item-id {
    font-size: 12px;
    color: var(--muted);
}
.complaint-item strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}
.complaint-item p {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}
.complaint-item-meta {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--muted);
}
.complaint-item-reply {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
}

.complaint-detail-card {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
}
.complaint-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.complaint-detail-id {
    font-size: 13px;
    color: var(--muted);
}
.complaint-detail-card h3 {
    margin: 0 0 14px;
    font-size: 20px;
}
.complaint-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.complaint-meta b { color: var(--ink); font-weight: 600; }
.complaint-lookup-form {
    display: grid;
    gap: 14px;
}

/* 对话式聊天气泡 */
.complaint-chat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
    padding: 16px;
    background: #faf6f2;
    border-radius: 12px;
    max-height: 400px;
    overflow-y: auto;
}
.chat-bubble {
    display: flex;
    gap: 10px;
    max-width: 85%;
}
.chat-bubble.chat-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.chat-bubble.chat-admin {
    align-self: flex-start;
}
.chat-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: white;
}
.chat-user .chat-avatar {
    background: linear-gradient(135deg, #e66a1c, #f0883e);
}
.chat-admin .chat-avatar {
    background: linear-gradient(135deg, #5c6bc0, #7986cb);
}
.chat-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.chat-user .chat-content {
    align-items: flex-end;
}
.chat-admin .chat-content {
    align-items: flex-start;
}
.chat-text {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.7;
    word-break: break-word;
    white-space: pre-wrap;
}
.chat-user .chat-text {
    background: linear-gradient(135deg, #e66a1c, #f0883e);
    color: white;
    border-top-right-radius: 4px;
}
.chat-admin .chat-text {
    background: white;
    color: #333;
    border: 1px solid #e8ddd0;
    border-top-left-radius: 4px;
}
.chat-time {
    font-size: 11px;
    color: var(--muted);
    padding: 0 4px;
}
.chat-system {
    align-self: center;
    padding: 8px 16px;
    background: #fff3e0;
    color: #e65100;
    border-radius: 20px;
    font-size: 12px;
}
.chat-closed {
    text-align: center;
    padding: 12px;
    background: #f5f5f5;
    color: #888;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* 用户追加回复表单 */
.complaint-reply-form {
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-bottom: 16px;
}
.complaint-reply-form textarea {
    width: 100%;
    border: 1px solid #e8ddd0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    resize: vertical;
    min-height: 70px;
    font-family: inherit;
    margin-bottom: 8px;
    box-sizing: border-box;
}
.complaint-reply-form textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.complaint-reply-form .btn {
    float: right;
}
.complaint-reply-form::after {
    content: '';
    display: block;
    clear: both;
}

/* 后台投诉管理样式 */
.complaint-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.complaint-tabs a {
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s;
}
.complaint-tabs a:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.complaint-tabs a.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}
.complaint-preview {
    margin-top: 4px;
}
.complaint-view-btn {
    background: none;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all .2s;
}
.complaint-view-btn:hover {
    background: var(--accent);
    color: white;
}

.complaint-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    align-items: center;
    justify-content: center;
}
.complaint-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .4);
}
.complaint-modal-box {
    position: relative;
    width: min(600px, calc(100% - 32px));
    max-height: 80vh;
    overflow-y: auto;
    background: white;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
}
.complaint-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    border: 0;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
    color: var(--muted);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.complaint-modal-close:hover {
    background: #f5f5f5;
}
.complaint-modal-detail h3 {
    margin: 10px 0 16px;
    font-size: 20px;
}
.complaint-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.complaint-modal-id {
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
}
.complaint-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.complaint-modal-meta b { color: var(--ink); }
.complaint-modal-content {
    line-height: 1.8;
    color: #4a3520;
    font-size: 14px;
    margin-bottom: 20px;
    padding: 14px;
    background: var(--surface);
    border-radius: 10px;
}
.complaint-modal-reply {
    border-top: 1px solid var(--line);
    padding-top: 20px;
}
.complaint-modal-reply textarea {
    width: 100%;
    border: 1px solid #e8ddd0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}
.complaint-modal-reply textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* 响应式 */
@media (max-width: 800px) {
    .complaints-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .complaint-modal-box {
        padding: 20px;
    }
    .complaint-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .complaint-tabs::-webkit-scrollbar {
        display: none;
    }
}

/* ========== 余额统计 & 充值直升按钮 ========== */
.uc-stat-balance .uc-stat-num {
    color: #e67e22;
}
.uc-lvl-recharge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all .2s ease;
    border: 2px solid transparent;
    background: linear-gradient(135deg, #fff5eb, #ffe8d6) padding-box,
                linear-gradient(135deg, #e67e22, #d35400) border-box;
    color: #d35400;
    box-shadow: 0 2px 8px rgba(230, 126, 34, .1);
}
.uc-lvl-recharge:hover {
    box-shadow: 0 4px 14px rgba(230, 126, 34, .25);
    transform: translateY(-1px);
}
.uc-lvl-recharge em {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
}
.tier-recharge-1 {
    background: linear-gradient(135deg, #f4f6f7, #e2e6e7) padding-box,
                linear-gradient(135deg, #95A5A6, #7F8C8D) border-box;
    color: #566573;
    box-shadow: 0 2px 8px rgba(127, 140, 141, .1);
}
.tier-recharge-1:hover { box-shadow: 0 4px 14px rgba(149, 165, 166, .25); }
.tier-recharge-2 {
    background: linear-gradient(135deg, #eaf4fb, #d4e6f1) padding-box,
                linear-gradient(135deg, #3498DB, #21618C) border-box;
    color: #1a5276;
    box-shadow: 0 2px 8px rgba(33, 97, 140, .1);
}
.tier-recharge-2:hover { box-shadow: 0 4px 14px rgba(52, 152, 219, .25); }
.tier-recharge-3 {
    background: linear-gradient(135deg, #f4ecf7, #e8daef) padding-box,
                linear-gradient(135deg, #9B59B6, #6C3483) border-box;
    color: #6c3483;
    box-shadow: 0 2px 8px rgba(108, 52, 131, .1);
}
.tier-recharge-3:hover { box-shadow: 0 4px 14px rgba(155, 89, 182, .25); }
.tier-recharge-4 {
    background: linear-gradient(135deg, #fef9e7, #fcefb4) padding-box,
                linear-gradient(135deg, #F39C12, #B9770E) border-box;
    color: #7d6608;
    box-shadow: 0 2px 8px rgba(185, 119, 14, .1);
}
.tier-recharge-4:hover { box-shadow: 0 4px 14px rgba(243, 156, 18, .25); }

/* ========== 后台商品规格管理 ========== */
.sku-section {
    margin: 0 22px 20px;
    padding: 20px;
    background: #fafbfc;
    border-radius: 12px;
    border: 1px solid #eef1f3;
}
.sku-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef1f3;
}
.sku-section-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
}
.sku-section-tip {
    font-size: 13px;
    color: #95a5a6;
}
.sku-spec-name-row {
    display: flex;
    margin-bottom: 14px;
}
.sku-spec-name-row label {
    margin: 0;
}
.sku-table-wrap {
    background: #fff;
    border: 1px solid #eef1f3;
    border-radius: 10px;
    overflow: hidden;
}
.sku-table {
    width: 100%;
    border-collapse: collapse;
}
.sku-table th {
    background: #f8f9fa;
    padding: 12px 14px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #7f8c8d;
    border-bottom: 1px solid #eef1f3;
}
.sku-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f2f4f6;
    vertical-align: middle;
}
.sku-table tr:last-child td { border-bottom: none; }
.sku-table input[type="text"],
.sku-table input[type="number"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #dde3e8;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}
.sku-table input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(230,106,28,.12);
}
.sku-input-sm {
    max-width: 70px;
    text-align: center;
}
.sku-stock-num {
    font-weight: 600;
    color: #2c3e50;
}
.sku-del-btn {
    background: none;
    border: none;
    color: #e74c3c;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 4px;
}
.sku-del-btn:hover { background: #fdf0ef; }
.sku-add-row {
    margin-top: 14px;
    text-align: center;
}
.sku-empty-tip {
    text-align: center;
    padding: 30px 20px;
    color: #bdc3c7;
}
.sku-empty-tip p {
    margin: 10px 0 0;
    font-size: 14px;
}

/* ========== 卡密库存 - 规格Tab ========== */
.cards-sku-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    padding: 4px;
    background: #f5f6f8;
    border-radius: 10px;
    flex-wrap: wrap;
}
.cards-sku-tab {
    padding: 8px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #7f8c8d;
    transition: all .2s ease;
    white-space: nowrap;
}
.cards-sku-tab:hover { color: #2c3e50; }
.cards-sku-tab.active {
    background: #fff;
    color: var(--accent);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.cards-sku-tab .sku-tab-count {
    font-size: 12px;
    color: #95a5a6;
    margin-left: 4px;
    font-weight: 500;
}
.cards-sku-tab.active .sku-tab-count { color: var(--accent); }

/* ========== 前端 - 商品规格选择 ========== */
.product-spec-section {
    margin: 20px 0;
}
.product-spec-label {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 10px;
    font-weight: 500;
}
.product-spec-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.spec-option {
    position: relative;
    padding: 12px 20px;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    cursor: pointer;
    transition: all .25s ease;
    background: #fff;
    min-width: 90px;
    text-align: center;
}
.spec-option:hover {
    border-color: var(--accent-light);
    transform: translateY(-1px);
}
.spec-option.active {
    border-color: var(--accent);
    background: linear-gradient(135deg, #fff7f0, #fff1e6);
    box-shadow: 0 4px 12px rgba(230,106,28,.15);
}
.spec-option-name {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
}
.spec-option.active .spec-option-name {
    color: var(--accent-dark);
}
.spec-option-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
}
.spec-option-price small {
    font-size: 12px;
    font-weight: 500;
    color: #95a5a6;
    margin-left: 2px;
}
.spec-option.disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ============ 会员宣传横幅 promo ============ */
.promo{
  --promo-bg:#F5F6F8;
  --promo-surface:#FFFFFF;
  --promo-ink:#1A1A1A;
  --promo-muted:#8C8C8C;
  --promo-line:#E8E8E8;
  --promo-soft:#F5F5F5;
  --promo-accent:#E66A1C;
  --promo-accent-dark:#C75814;
  --promo-accent-light:#FFF7F0;
  --promo-shadow:0 2px 8px rgba(0,0,0,.06);
  --promo-gold:#C9A24B;
  --promo-gold-2:#E2C47E;
  --promo-gold-deep:#A8853A;
  --promo-c3:#6E7884;
  --promo-c5:#3D6FA8;
  --promo-c7:#7B5AA6;
  --promo-c9:#A8853A;
  --promo-serif:"Noto Serif SC","Songti SC","SimSun",serif;
  --promo-sans:"Microsoft YaHei","PingFang SC",sans-serif;
  position:relative;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  aspect-ratio: 2.32 / 1;
  background:
    radial-gradient(760px 320px at 92% -18%, rgba(230,106,28,.16), transparent 60%),
    radial-gradient(620px 300px at -4% 112%, rgba(230,106,28,.10), transparent 55%),
    linear-gradient(135deg,#FFF9F2,#FBEAD6);
  border:1px solid rgba(230,106,28,.22);
  border-radius:16px;
  color:var(--promo-ink);
  overflow:hidden;
  display:flex;
  box-shadow:var(--promo-shadow);
}
.promo::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.7),rgba(230,106,28,.45),transparent);
  z-index:2;
}
.promo::after{
  content:"";position:absolute;right:-70px;bottom:-110px;width:300px;height:300px;
  border-radius:50%;border:1px solid rgba(201,162,75,.20);
  z-index:1;
}
.promo-intro{
  flex:0 0 37%;
  padding:5.2% 3.4% 5.2% 4.6%;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:2;
}
.promo-kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.3em;color:var(--promo-accent);
  font-weight:600;text-transform:uppercase;
}
.promo-kicker::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--promo-accent),var(--promo-gold));}
.promo-title{
  font-family:var(--promo-serif);font-weight:900;
  font-size:clamp(24px,2.6vw,33px);
  line-height:1.3;letter-spacing:.02em;margin-top:12px;color:var(--promo-ink);
}
.promo-title em{font-style:normal;color:var(--promo-accent);}
.promo-sub{margin-top:10px;color:var(--promo-muted);font-size:clamp(12px,1.05vw,14px);font-weight:400;max-width:24em;}
.promo-sub b{color:var(--promo-accent-dark);font-weight:700;}
.promo-sub .sub-nl{display:inline;}
.promo-tags{display:none;margin-top:16px;flex-direction:column;gap:9px;}
.promo-tags .pt{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;color:var(--promo-muted);letter-spacing:.03em;
}
.promo-tags .pt i{
  flex:0 0 auto;width:22px;height:22px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:var(--promo-accent-light);color:var(--promo-accent);
  font-style:normal;font-size:11px;font-weight:700;
}
.promo-tags .pt b{color:#E5484D;font-weight:600;}
.promo-cta{
  margin-top:18px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:clamp(12.5px,1.1vw,14px);font-weight:700;letter-spacing:.06em;color:#fff;
  background:linear-gradient(135deg,#F07B2F,var(--promo-accent) 55%,var(--promo-accent-dark));
  border-radius:9px;padding:10px 22px;text-decoration:none;
  box-shadow:0 8px 22px rgba(230,106,28,.24);
}
.promo-cta:hover{filter:brightness(1.05);}
.promo-cta-row{margin-top:18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.promo-cta-row .promo-cta{margin-top:0;}
.promo-cta-secondary{
  background:linear-gradient(135deg,#2A2A2A,#1A1A1A) !important;
  color:#F0C97D !important;
  border:1px solid rgba(240,201,125,.4);
  box-shadow:0 6px 16px rgba(0,0,0,.25) !important;
}
.promo-cta-secondary:hover{background:linear-gradient(135deg,#333,#222) !important;filter:none !important;border-color:rgba(240,201,125,.6);}
.promo-cards{
  flex:1;
  padding:4.2% 4.6% 4.2% 1.5%;
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  position:relative;z-index:2;
}
.plv{
  background:linear-gradient(180deg,#FFFFFF,#FBFCFD);
  border:1px solid var(--promo-line);
  border-radius:13px;
  padding:14px 12px 12px;
  display:flex;flex-direction:column;
  position:relative;
  min-width:0;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.plv:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.08);}
.plv.lv1{background:linear-gradient(180deg,#FFFFFF 30%,#F4F6F8);border-color:#D8DDE2;}
.plv.lv1:hover{border-color:#A8B2BC;box-shadow:0 8px 20px rgba(110,120,132,.16);}
.plv.lv2{background:linear-gradient(180deg,#FFFFFF 30%,#F0F6FC);border-color:#CFDFEF;}
.plv.lv2:hover{border-color:#9FBFE0;box-shadow:0 8px 20px rgba(61,111,168,.16);}
.plv.lv3{background:linear-gradient(180deg,#FFFFFF 30%,#F6F0FB);border-color:#DECDF0;}
.plv.lv3:hover{border-color:#C3A8E2;box-shadow:0 8px 20px rgba(123,90,166,.16);}
.plv.lv4{
  border-color:rgba(201,162,75,.55);
  background:linear-gradient(180deg,#FFFDF6,#FBF3DC 55%,#FFFFFF);
  box-shadow:0 10px 24px rgba(201,162,75,.16);
}
.plv.lv4:hover{border-color:rgba(201,162,75,.75);box-shadow:0 10px 26px rgba(201,162,75,.22);}
.plv-tag{
  position:absolute;top:-1px;right:12px;
  font-size:9.5px;font-weight:700;letter-spacing:.12em;color:#171A1F;
  background:linear-gradient(135deg,#E2C47E,#C9A24B);
  padding:3px 10px;border-radius:0 0 7px 7px;
}
.plv-disc{text-align:center;padding:11px 8px 13px;border-radius:9px;}
.lv1 .plv-disc{background:linear-gradient(180deg,#ECEEF1,#DADFE4);}
.lv2 .plv-disc{background:linear-gradient(180deg,#E4EEF8,#CFDFEF);}
.lv3 .plv-disc{background:linear-gradient(180deg,#EEE6F7,#DECDF0);}
.lv4 .plv-disc{background:linear-gradient(180deg,#FCF4DE,#F0DDA8);}
.plv-disc .off{font-size:9.5px;letter-spacing:.22em;color:var(--promo-muted);font-weight:700;}
.lv1 .plv-disc .off{color:#7B8590;}
.lv2 .plv-disc .off{color:#3D6FA8;}
.lv3 .plv-disc .off{color:#7B5AA6;}
.lv4 .plv-disc .off{color:#A8853A;}
.plv-disc .num{
  font-family:var(--promo-serif);font-weight:900;line-height:1.1;
  font-size:clamp(20px,1.9vw,28px);letter-spacing:.01em;margin-top:2px;
}
.plv-disc .num small{font-size:13px;font-weight:600;margin-left:1px;}
.lv1 .plv-disc .num{color:#5C6672;}
.lv2 .plv-disc .num{color:#2F5C8F;}
.lv3 .plv-disc .num{color:#6A4C96;}
.lv4 .plv-disc .num{color:#8C6D32;}
.plv-disc .note{font-size:10px;color:var(--promo-muted);margin-top:4px;letter-spacing:.05em;}
.lv1 .plv-disc .note{color:#8A949E;}
.lv2 .plv-disc .note{color:#4A77A8;}
.lv3 .plv-disc .note{color:#8466AC;}
.lv4 .plv-disc .note{color:var(--promo-gold-deep);font-weight:600;}
.plv-tier{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:10px;}
.plv-id{display:flex;align-items:center;gap:7px;min-width:0;}
.plv-ico{
  width:30px;height:30px;border-radius:9px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
}
.lv1 .plv-ico{background:linear-gradient(135deg,#E8EBEE,#D2D8DD);}
.lv2 .plv-ico{background:linear-gradient(135deg,#E0EBF7,#C4D8EC);}
.lv3 .plv-ico{background:linear-gradient(135deg,#EAE0F6,#D6C5EC);}
.lv4 .plv-ico{background:linear-gradient(135deg,#FBF3DC,#EFDCA8);box-shadow:0 3px 12px rgba(201,162,75,.3);}
.plv-ico svg{width:18px;height:18px;}
.plv-name{font-size:clamp(12.5px,1.15vw,15px);font-weight:700;letter-spacing:.05em;color:var(--promo-ink);white-space:nowrap;}
.lv4 .plv-name{color:var(--promo-gold-deep);}
.plv-badge{
  display:inline-flex;align-items:center;border-radius:6px;
  padding:3px 7px;font-size:clamp(10px,.85vw,11.5px);font-weight:700;
  line-height:1.15;letter-spacing:.04em;flex:0 0 auto;
}
.lv1 .plv-badge{background:linear-gradient(135deg,#DCE2E8,#C9D2DA);color:#4A535D;}
.lv2 .plv-badge{background:linear-gradient(135deg,#D3E0EF,#B9CDE3);color:#2F5C8F;}
.lv3 .plv-badge{background:linear-gradient(135deg,#E4D7F2,#D3BFE6);color:#6A4C96;}
.lv4 .plv-badge{background:linear-gradient(135deg,#F3DFA8,#E4C97E);color:#7A5F24;border:1px solid rgba(201,162,75,.6);}
.plv-bn{
  margin-top:9px;display:flex;align-items:center;gap:6px;
  font-size:clamp(10.5px,.95vw,12px);color:var(--promo-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.plv-bn .dot{width:4px;height:4px;border-radius:50%;flex:0 0 auto;}
.lv1 .plv-bn .dot{background:#97A1AE;}
.lv2 .plv-bn .dot{background:#3D6FA8;}
.lv3 .plv-bn .dot{background:#7B5AA6;}
.lv4 .plv-bn .dot{background:#C9A24B;}
.plv-bn b{color:var(--promo-ink);font-weight:600;}
.plv-gate{
  margin-top:auto;padding-top:8px;
  font-size:clamp(9.5px,.85vw,11px);color:var(--promo-muted);letter-spacing:.02em;
  border-top:1px solid rgba(0,0,0,.06);
}
.plv-gate b{color:var(--promo-ink);font-weight:600;}
.plv-cta{
  margin-top:8px;display:block;text-align:center;
  font-size:clamp(11px,.95vw,12.5px);font-weight:600;letter-spacing:.06em;
  border-radius:7px;padding:7px 0;text-decoration:none;
  border:1px solid #D9D9D9;color:var(--promo-ink);
  background:var(--promo-surface);
  transition:all .18s ease;
}
.plv-cta:hover{background:var(--promo-soft);border-color:#C4C4C4;}
.lv1 .plv-cta{border-color:#C9D2DA;color:#5C6672;}
.lv1 .plv-cta:hover{background:#EDF0F3;border-color:#AEB8C2;}
.lv2 .plv-cta{border-color:#AFC8E3;color:#2F5C8F;}
.lv2 .plv-cta:hover{background:#E4EEF8;border-color:#8FB2D6;}
.lv3 .plv-cta{border-color:#C9B2E4;color:#6A4C96;}
.lv3 .plv-cta:hover{background:#EEE6F7;border-color:#AE8FD4;}
.lv4 .plv-cta{
  background:linear-gradient(135deg,#E2C47E,#C9A24B 60%,#B08A3E);
  color:#171A1F;border:none;font-weight:700;
  box-shadow:0 6px 18px rgba(201,162,75,.26);
}
.lv4 .plv-cta:hover{filter:brightness(1.06);background:linear-gradient(135deg,#E2C47E,#C9A24B 60%,#B08A3E);}

/* 移动端：保持两列（任何手机宽度都不降单列） */
@media (max-width:760px){
  .promo{aspect-ratio:auto;flex-direction:column;}
  .promo-intro{flex:1 1 auto;padding:28px 22px 6px;}
  .promo-cards{grid-template-columns:repeat(2,1fr);padding:14px 22px 26px;gap:10px;}
}

/* 电脑端增强：更饱满，手机端不受影响 */
@media (min-width:761px){
  .promo-tags{display:flex;}
  .promo-sub .sub-nl{display:block;}
  .promo-intro{padding:5.6% 3.8% 5.6% 4.8%;}
  .promo-cards{gap:13px;padding:4.6% 4.8% 4.6% 1.6%;}
  .plv{padding:16px 14px 14px;border-radius:14px;}
  .plv-disc{padding:12px 9px 14px;border-radius:10px;}
  .plv-tier{margin-top:12px;}
  .plv-bn{margin-top:12px;}
  .plv-gate{margin-top:auto;padding-top:12px;}
  .plv-cta{margin-top:10px;}
  .plv-disc .num{font-size:clamp(21px,1.9vw,28px);}
  .plv-name{font-size:clamp(13px,1.2vw,15.5px);}
  .plv-badge{font-size:clamp(10.5px,.9vw,12px);}
  .plv-bn{font-size:clamp(11px,1vw,12.5px);}
  .plv-gate{font-size:clamp(10px,.9vw,11.5px);}
  .plv-cta{font-size:clamp(11.5px,1vw,13px);}
  .promo-title{font-size:clamp(25px,2.6vw,33px);}
  .promo-sub{font-size:clamp(12.5px,1.1vw,14.5px);}
  .promo-cta{font-size:clamp(13px,1.15vw,14.5px);padding:11px 24px;}
}

/* =========================================================
   后台仪表盘 UI 优化（浅色高级感）
   ========================================================= */

/* 区块标题 - 橙色竖条 */
.dash-section-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin: 22px 0 10px !important;
  padding-left: 12px !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: linear-gradient(180deg, #F07B2F, #E66A1C);
  border-radius: 2px;
}

/* 统计卡网格 v2 - 白底卡片 + 图标方块 */
.stat-grid-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 10px 0 4px;
}
.stat-grid-v2 .stat-card {
  display: flex !important;
  align-items: flex-start;
  gap: 14px;
  padding: 20px !important;
  background: #fff !important;
  border: 1px solid #EEF0F3 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(17,24,39,.05) !important;
  transition: all .25s ease !important;
  position: relative;
  overflow: hidden;
  border-top: none !important;
}
.stat-grid-v2 .stat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(17,24,39,.09) !important;
  border-color: #E0E3E8 !important;
}

/* 图标方块 */
.stat-grid-v2 .stat-ico {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
/* 图标方块配色 */
.stat-grid-v2 .stat-revenue .stat-ico { background: #FFF1E6; color: #E66A1C; }
.stat-grid-v2 .stat-orders .stat-ico  { background: #EAF2FB; color: #3D6FA8; }
.stat-grid-v2 .stat-buyers .stat-ico  { background: #E8F6EE; color: #2E9E5B; }
.stat-grid-v2 .stat-conv .stat-ico    { background: #F1EBF9; color: #7B5AA6; }
.stat-grid-v2 .stat-wait .stat-ico    { background: #FDECEC; color: #D64541; }

/* 右侧内容区 */
.stat-grid-v2 .stat-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.stat-grid-v2 .stat-body > span {
  font-size: 12px;
  color: #8C8C8C;
  font-weight: 400;
}
.stat-grid-v2 .stat-body strong {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: #1A1A1A !important;
  line-height: 1.2;
}
.stat-grid-v2 .stat-body small {
  font-size: 11px !important;
  color: #8C8C8C !important;
  margin-top: 1px;
}

/* 两栏布局 */
.dash-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 10px 0;
}

/* 卡片容器 */
.dash-card {
  border: 1px solid #EEF0F3 !important;
  background: #fff;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(17,24,39,.05);
}
.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #F0F1F3 !important;
}
.dash-card-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
}
.dash-card-head small {
  color: #8C8C8C;
  font-size: 12px;
}
.dash-card-foot {
  border-top: 1px solid #F0F1F3 !important;
  padding: 12px 16px !important;
  text-align: center;
}

/* 热销商品排行 */
.dash-ranking {
  padding: 8px 20px 16px;
}
.dash-rank-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #F5F6F8;
  transition: background .2s;
}
.dash-rank-item:last-child {
  border-bottom: none;
}
.dash-rank-item:hover {
  background: #FAFBFC;
  margin: 0 -20px;
  padding: 11px 20px;
}
.dash-rank-num {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #F0F1F3;
  color: #8C8C8C;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* 前三名徽章 */
.dash-rank-num.top {
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.dash-rank-item:nth-child(1) .dash-rank-num.top {
  background: linear-gradient(135deg, #F5D58C, #D9A441);
}
.dash-rank-item:nth-child(2) .dash-rank-num.top {
  background: linear-gradient(135deg, #DCE1E6, #AEB8C2);
  color: #4A5568;
}
.dash-rank-item:nth-child(3) .dash-rank-num.top {
  background: linear-gradient(135deg, #E8C9A3, #B0804E);
}
.dash-rank-info {
  flex: 1;
  min-width: 0;
}
.dash-rank-info strong {
  font-size: 13px;
  color: #1A1A1A;
  font-weight: 600;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-rank-bar {
  height: 5px;
  background: #F0F1F3;
  border-radius: 3px;
  margin-top: 6px;
  overflow: hidden;
}
.dash-rank-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #F07B2F, #E66A1C);
  border-radius: 3px;
  transition: width .6s ease;
}
.dash-rank-data {
  text-align: right;
  flex-shrink: 0;
}
.dash-rank-amount {
  font-size: 13px;
  font-weight: 700;
  color: #E66A1C;
  display: block;
}
.dash-rank-data small {
  font-size: 11px;
  color: #8C8C8C;
}

/* 库存预警 - 卡片化 */
.dash-stock-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px !important;
  background: transparent !important;
  padding: 12px 16px;
}
.dash-stock-cell {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px !important;
  background: #fff !important;
  border: 1px solid #F0F1F3 !important;
  border-radius: 10px !important;
  transition: all .2s;
}
.dash-stock-cell:hover {
  border-color: #E0E3E8;
  box-shadow: 0 2px 8px rgba(17,24,39,.06);
}
.dash-stock-cell.out strong {
  color: #1A1A1A;
}
.dash-stock-cell strong {
  font-size: 13px;
  font-weight: 600;
  color: #4A5568;
  line-height: 1.4;
}
.dash-stock-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  width: fit-content;
  line-height: 1.5;
}
.stock-zero {
  background: #FDECEC;
  color: #D64541;
}
.stock-low {
  background: #FEF6E3;
  color: #8A6D1F;
}

/* 仪表盘内表格（仅 dashboard 内生效，用 dash-trend-table 限定） */
.dash-trend-table .data-table {
  width: 100%;
  border-collapse: collapse;
}
.dash-trend-table .data-table thead th {
  background: #F7F8FA !important;
  color: #8C8C8C !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 0 20px !important;
  height: 40px;
  text-align: left;
  border-bottom: 1px solid #EEF0F3 !important;
}
.dash-trend-table .data-table tbody td {
  padding: 0 20px !important;
  height: 46px;
  font-size: 13px;
  color: #4A5568;
  border-bottom: 1px solid #F5F6F8 !important;
  transition: background .2s;
}
.dash-trend-table .data-table tbody tr:hover td {
  background: #FAFBFC;
}
.dash-trend-table .data-table tbody tr:last-child td {
  border-bottom: none;
}
/* 金额列橙色 */
.dash-trend-table .data-table tbody td:last-child strong,
.dash-trend-table .data-table tbody td:nth-child(5) {
  color: #E66A1C !important;
  font-weight: 700;
}
/* 状态徽章圆角化 */
.dash-trend-table .status {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

/* 整体内容区背景 */
.admin-content {
  background: #F5F6F8;
}

/* 响应式 - 平板 */
@media (max-width: 1024px) {
  .stat-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-two-col {
    grid-template-columns: 1fr;
  }
}

/* 响应式 - 手机 */
@media (max-width: 760px) {
  .stat-grid-v2 {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .stat-grid-v2 .stat-card {
    padding: 14px !important;
    gap: 10px;
  }
  .stat-grid-v2 .stat-ico {
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 8px;
  }
  .stat-grid-v2 .stat-body strong {
    font-size: 20px !important;
  }
  .dash-stock-grid {
    grid-template-columns: 1fr;
  }
  .dash-ranking {
    padding: 8px 14px 16px;
  }
  .dash-trend-table .data-table thead th,
  .dash-trend-table .data-table tbody td {
    padding: 0 12px !important;
    font-size: 12px;
  }
}

/* 登录注册模态弹窗 */
.auth-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.auth-modal-overlay.show {
    display: flex;
    animation: fadeIn .2s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.auth-modal {
    position: relative;
    width: 90%;
    max-width: 420px;
    animation: slideUp .25s ease;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.auth-modal-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #9a8770;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    z-index: 2;
    transition: all .2s;
}
.auth-modal-close:hover {
    background: #fff7f0;
    color: #e66a1c;
    transform: rotate(90deg);
}
.auth-modal-card {
    background: #fff;
    border: 1px solid #e8ddd0;
    border-radius: 20px;
    padding: 36px 30px;
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.auth-modal-card .auth-tabs {
    margin-bottom: 24px;
}
.auth-modal-card .auth-form {
    gap: 16px;
}
.auth-modal-card .auth-form input {
    padding: 12px 14px;
    font-size: 14px;
}
.auth-modal-card .btn-primary {
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
}

@media (max-width: 480px) {
    .auth-modal-card {
        padding: 28px 22px;
        border-radius: 16px;
    }
    .auth-modal-close {
        top: -12px;
        right: -8px;
    }
}


/* =========================================================
   后台侧边栏全新 UI（分组 + 图标 + 橙色高亮）
   ========================================================= */

/* --- 侧边栏整体 --- */
.admin-sidebar {
    width: 216px !important;
    background: #fff !important;
    border-right: 1px solid #EEF0F3 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.admin-sidebar > nav {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 4px 10px 16px !important;
    gap: 0 !important;
}

/* --- 品牌区 --- */
.admin-sidebar .admin-brand {
    padding: 18px 14px 16px 12px !important;
    border-bottom: 1px solid #EEF0F3 !important;
    margin-bottom: 8px !important;
    flex-shrink: 0 !important;
}
.admin-sidebar .admin-brand-logo {
    width: auto !important;
    height: 30px !important;
    border-radius: 8px !important;
    display: block !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.admin-sidebar .admin-brand-name {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #1A1A1A !important;
}
.admin-sidebar .admin-brand small {
    font-size: 10px !important;
    color: #8C8C8C !important;
    margin-top: 2px !important;
}

/* --- 导航分组 --- */
.admin-nav-group {
    margin-top: 12px;
}
.admin-nav-group:first-child {
    margin-top: 4px;
}

/* --- 分组标题 --- */
.admin-nav-title {
    font-size: 10.5px;
    font-weight: 600;
    color: #B4B9C0;
    letter-spacing: .06em;
    padding: 0 12px 7px;
    text-transform: none;
}

/* --- 菜单项 --- */
.admin-sidebar nav a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: 38px !important;
    padding: 0 12px !important;
    margin: 2px 0 !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #4B5563 !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
    transition: background .15s, color .15s !important;
    line-height: 1 !important;
    width: auto !important;
    text-align: left !important;
    float: none !important;
}
.admin-sidebar nav a svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
}
.admin-sidebar nav a:hover {
    background: #F7F8FA !important;
    color: #1A1A1A !important;
}
.admin-sidebar nav a.active {
    background: #E66A1C !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(230,106,28,.28) !important;
}
.admin-sidebar nav a.active svg {
    stroke: #fff;
}

/* --- 底部查看店铺 --- */
.admin-nav-bottom {
    margin-top: auto;
    padding-top: 12px;
    flex-shrink: 0;
}
.admin-nav-view-shop {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 38px !important;
    margin: 0 2px !important;
    border: 1px solid #EEF0F3 !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #6B7280 !important;
    background: #fff !important;
    text-decoration: none !important;
    transition: all .15s !important;
}
.admin-nav-view-shop svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}
.admin-nav-view-shop:hover {
    border-color: #E66A1C !important;
    color: #E66A1C !important;
}

/* --- 手机端 --- */
@media (max-width: 768px) {
    .admin-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: min(286px, 82vw) !important;
        height: 100vh !important;
        z-index: 200 !important;
        transition: transform .25s ease !important;
        transform: translateX(-100%);
        background: #fff !important;
        border-right: 1px solid #EEF0F3 !important;
        box-shadow: none !important;
    }
    .admin-sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(17,24,39,.12) !important;
    }
    .admin-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(17,24,39,.35);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        z-index: 150;
    }
    .admin-sidebar-overlay.show {
        display: block;
    }
    .admin-sidebar > nav {
        padding: 4px 12px 20px !important;
    }
    .admin-nav-group {
        margin-top: 14px;
    }
    .admin-nav-title {
        padding: 0 12px 6px;
        font-size: 10.5px;
    }
    .admin-sidebar nav a {
        height: 36px !important;
        font-size: 13px !important;
        color: #374151 !important;
    }
    .admin-sidebar nav a svg {
        width: 17px;
        height: 17px;
    }
    .admin-sidebar nav a.active {
        background: #E66A1C !important;
        color: #fff !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 12px rgba(230,106,28,.28) !important;
    }
    .admin-sidebar .admin-brand {
        padding: 16px 14px 14px 12px !important;
    }
    .admin-nav-bottom {
        padding-top: 10px;
    }
    .admin-nav-view-shop {
        height: 36px !important;
        font-size: 13px !important;
    }
}

/* --- 清理旧样式残留 --- */
.admin-sidebar nav a + a {
    border-top: 0 !important;
}
