/* ===== 花花严选商品主页：深灰紫色 + 银色光晕主题 ===== */

html,
body {
    background: #111116 !important;
    color: #f7f2ff !important;
}

body {
    position: relative !important;
    overflow-x: hidden !important;
}

/* 银色/紫色光晕背景 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 8%, rgba(210, 210, 225, .22), transparent 26%),
        radial-gradient(circle at 82% 12%, rgba(166, 96, 255, .28), transparent 26%),
        radial-gradient(circle at 50% 72%, rgba(230, 230, 245, .13), transparent 30%),
        linear-gradient(135deg, #0d0d12 0%, #17141f 42%, #100f16 100%);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 80%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 80%);
}

.app {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
}

/* 顶部栏 */
.top {
    background: rgba(18, 17, 26, .88) !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.brand {
    color: #fff !important;
    text-shadow: 0 0 12px rgba(185, 120, 255, .45) !important;
}

.logo {
    background: linear-gradient(135deg, #a855f7, #7c3aed 48%, #f5d0fe) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(168,85,247,.55) !important;
}

/* 搜索框 */
.search {
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.search input {
    color: #fff !important;
}

.search input::placeholder {
    color: rgba(255,255,255,.55) !important;
}

/* 筛选按钮 */
.hh-filter-bar,
.hh-filter-row,
.filter-bar,
.filter-row,
.front-filter-bar {
    background: transparent !important;
}

.hh-filter-btn,
.filter-btn,
.front-filter-btn,
.hh-filter-tab,
.hh-dropdown-btn {
    background: rgba(255,255,255,.10) !important;
    color: #f5efff !important;
    border: 1px solid rgba(185,120,255,.22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.22) !important;
}

.hh-filter-btn.active,
.filter-btn.active,
.front-filter-btn.active,
.hh-filter-tab.active,
.hh-dropdown-btn.active {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(168,85,247,.55) !important;
}

.hh-filter-panel,
.filter-panel,
.filter-dropdown,
.hh-filter-dropdown,
.hh-filter-menu {
    background: rgba(24,22,34,.96) !important;
    border: 1px solid rgba(185,120,255,.26) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.45), 0 0 26px rgba(168,85,247,.22) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    color: #fff !important;
}

/* 商品区域 */
.section {
    position: relative !important;
    z-index: 1 !important;
}

.section-title h2 {
    color: #fff !important;
    text-shadow: 0 0 14px rgba(185,120,255,.38) !important;
}

.product {
    background: rgba(24, 23, 34, .92) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow:
        0 14px 36px rgba(0,0,0,.42),
        0 0 22px rgba(130,70,220,.12),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
    color: #fff !important;
}

.product:hover {
    box-shadow:
        0 16px 42px rgba(0,0,0,.48),
        0 0 30px rgba(168,85,247,.24),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.pic,
.no-main {
    background:
        radial-gradient(circle at 50% 40%, rgba(210,210,225,.12), transparent 30%),
        linear-gradient(135deg, #1a1a24, #242231) !important;
    color: rgba(255,255,255,.62) !important;
}

.pic img {
    background: #181822 !important;
}

.p-body {
    background: linear-gradient(180deg, rgba(25,24,36,.95), rgba(18,17,26,.98)) !important;
}

.p-name {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(185,120,255,.20) !important;
}

.p-desc,
.p-code {
    color: rgba(255,255,255,.70) !important;
}

/* 编号、地址 */
.num-badge {
    background: linear-gradient(135deg, rgba(168,85,247,.16), rgba(255,255,255,.08)) !important;
    color: #f4d7ff !important;
    border: 1px solid rgba(216,180,254,.52) !important;
    box-shadow: 0 0 12px rgba(168,85,247,.30) !important;
}

.p-loc {
    color: rgba(255,255,255,.86) !important;
}

/* 主图左下角大区 */
.area-badge {
    background: rgba(0,0,0,.58) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.35) !important;
}

/* 收藏 */
.fav-btn {
    color: rgba(255,255,255,.60) !important;
}

.fav-btn.active {
    color: #ff5fa2 !important;
}

/* 查看详情按钮 */
.buy,
.service-btn,
.order-btn {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(168,85,247,.45), 0 10px 24px rgba(0,0,0,.28) !important;
}

/* 单排/双排/联系客服底部按钮 */
.mode-switch,
.hh-view-mode,
.hh-mode-switch,
.hh-bottom-tools,
.hh-bottom-action-bar,
.hh-front-bottom-actions {
    background: rgba(15,15,22,.78) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 24px rgba(168,85,247,.20) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.mode-btn,
.hh-mode-btn,
.hh-bottom-btn {
    color: rgba(255,255,255,.72) !important;
}

.mode-btn.active,
.hh-mode-btn.active,
.hh-bottom-btn.active {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    color: #fff !important;
}

/* 弹窗详情 */
.modal-mask {
    background: rgba(0,0,0,.72) !important;
}

.modal,
.chat-box {
    background: rgba(24,23,34,.98) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 28px rgba(168,85,247,.22) !important;
}

.modal-actions {
    background: rgba(18,17,26,.98) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
}

.close-btn {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.14) !important;
}

.detail-img,
.modal-pic,
.video-box {
    background: #171722 !important;
}

/* 客服 */
.chat-head {
    background: linear-gradient(135deg, #111, #2a1742) !important;
}

.chat-body {
    color: rgba(255,255,255,.86) !important;
}

.chat-bubble {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
}

/* 空内容 */
.empty {
    background: rgba(24,23,34,.88) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.62) !important;
}

/* HOT 保持橙色更醒目 */
.hh-hot-badge,
.hot-badge,
[class*="hot"] {
    box-shadow: 0 0 18px rgba(255,92,0,.65) !important;
}

/* 置顶绶带增强 */
.hh-top-ribbon,
.top-ribbon,
[class*="ribbon"] {
    filter: drop-shadow(0 8px 14px rgba(255,190,40,.32)) !important;
}

/* 手机端 */
@media (max-width: 640px) {
    .top {
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }

    .product {
        border-radius: 20px !important;
    }

    .buy {
        background: linear-gradient(135deg, #111, #7c3aed) !important;
    }
}