/* ============================================================
   深蓝高级主题 theme-premium.css  (v2)
   ------------------------------------------------------------
   这次的调整思路：
     1) 把「整屏蓝」拆开：底色压成近黑蓝，只有内容卡/顶栏保持蓝色，
        蓝色的“面积”降下来，层次自然出来
     2) 按功能分配颜色（每种颜色只干一件事，看起来才合理）：
          金色 = 价格 / 主按钮 / 选中态     → 高级感
          青色 = 信息 / 筛选 / 图标 / 聚焦   → 清爽
          紫色 = 商家 / 会员 / 推广          → 品质
          红色 = 中奖 / 警示                → 只此一处
          绿色 = 成功 / 完成状态
     3) 顶栏底部加一条「蓝→青→金」渐变细线，是画面里最提气的少量彩色
   加载顺序：必须放在各页面自身 <style> 之后
   ============================================================ */

:root {
    /* 底色（近黑蓝，压暗以突出卡片） */
    --tp-bg: #05070f;
    --tp-canvas-1: #0b1226;
    --tp-canvas-2: #06090f;

    /* 蓝色面 */
    --tp-surface-1: #1b3573;
    --tp-surface-2: #12224d;
    --tp-surface-3: #24418a;

    /* 功能色 */
    --tp-gold: #f6c65b;
    --tp-gold-light: #ffe08f;
    --tp-gold-dark: #d9a63a;
    --tp-teal: #2ed3c6;
    --tp-teal-deep: #12a89c;
    --tp-violet: #a78bfa;
    --tp-violet-deep: #7c5cf0;
    --tp-green: #34d399;
    --tp-red: #ff5a5f;
    --tp-red-deep: #e0242b;
    --tp-blue: #4f8bff;

    /* 文字 */
    --tp-text: #f2f6ff;
    --tp-text-2: #a9bde9;
    --tp-text-3: #788cb8;

    /* 线 / 影 */
    --tp-line: rgba(255, 255, 255, .09);
    --tp-line-strong: rgba(255, 255, 255, .16);
    --tp-radius: 14px;
    --tp-shadow: 0 6px 18px rgba(0, 0, 0, .32);
    --tp-shadow-lg: 0 20px 50px rgba(0, 0, 0, .55);

    /* 渐变 */
    --tp-grad-gold: linear-gradient(135deg, #ffe08f 0%, #e0a83c 100%);
    --tp-grad-teal: linear-gradient(135deg, #2ed3c6 0%, #12a89c 100%);
    --tp-grad-blue: linear-gradient(135deg, #4f8bff 0%, #23479f 100%);
    --tp-grad-surface: linear-gradient(180deg, var(--tp-surface-1) 0%, var(--tp-surface-2) 100%);
    /* 顶栏底部那根彩色细线 */
    --tp-grad-hairline: linear-gradient(90deg, #4f8bff 0%, #2ed3c6 46%, #f6c65b 100%);
}

/* ================= 1. 底层背景 + 画布 ================= */
html {
    background: var(--tp-bg);
}

body {
    background:
        radial-gradient(900px 420px at 50% -180px, rgba(79, 139, 255, .22), rgba(79, 139, 255, 0) 65%),
        radial-gradient(700px 360px at 100% 0%, rgba(167, 139, 250, .12), rgba(167, 139, 250, 0) 60%),
        var(--tp-bg) !important;
    color: var(--tp-text);
}

/* 手机画布：顶部极光（蓝 + 青 + 紫），往下过渡到近黑蓝 → 彩色只占顶部一小块 */
.app-container {
    background:
        radial-gradient(70% 34% at 14% 0%, rgba(79, 139, 255, .30), rgba(79, 139, 255, 0) 62%),
        radial-gradient(60% 30% at 88% 2%, rgba(167, 139, 250, .22), rgba(167, 139, 250, 0) 60%),
        radial-gradient(52% 26% at 50% 0%, rgba(46, 211, 198, .16), rgba(46, 211, 198, 0) 66%),
        linear-gradient(180deg, var(--tp-canvas-1) 0%, var(--tp-canvas-2) 100%) !important;
    animation: tpFadeIn .3s ease both;
}

@media (min-width: 768px) {
    .app-container {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 0 90px rgba(79, 139, 255, .18);
    }
}

@keyframes tpFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ================= 2. 吸顶栏：玻璃 + 三色渐变细线 ================= */
.page-header,
.top-bar,
.top-nav {
    background: linear-gradient(135deg, rgba(36, 65, 138, .92) 0%, rgba(11, 18, 38, .94) 100%) !important;
    border-bottom: 2px solid transparent !important;
    border-image: var(--tp-grad-hairline) 1 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.page-title,
.nav-title {
    color: #fff !important;
    font-weight: 600;
    letter-spacing: .6px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

.back-btn {
    color: var(--tp-text) !important;
    transition: color .2s, transform .2s;
}

.back-btn:active {
    color: var(--tp-teal) !important;
    transform: scale(.92);
}

/* ================= 3. 商家卡：蓝 → 紫 ================= */
.merchant-card {
    background: linear-gradient(135deg, #2a4aa8 0%, #4b3a9e 55%, #161f45 100%) !important;
    border-bottom: 1px solid rgba(167, 139, 250, .28);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .40);
}

.merchant-avatar {
    border: 2px solid rgba(246, 198, 91, .85) !important;
    box-shadow: 0 0 0 5px rgba(246, 198, 91, .10), 0 8px 20px rgba(0, 0, 0, .45);
}

.merchant-name {
    color: #fff !important;
    font-weight: 600;
    letter-spacing: .4px;
}

.merchant-actions {
    border-top: 1px solid rgba(255, 255, 255, .16) !important;
}

/* 三个动作按钮各给一个色，功能区分清楚又不花 */
.action-btn {
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px !important;
    color: #eef3ff;
    transition: all .2s;
}

.action-btn:nth-child(1) {
    background: rgba(79, 139, 255, .20) !important;
    border-color: rgba(79, 139, 255, .45);
}

.action-btn:nth-child(2) {
    background: rgba(255, 90, 95, .18) !important;
    border-color: rgba(255, 90, 95, .45);
}

.action-btn:nth-child(3) {
    background: rgba(46, 211, 198, .18) !important;
    border-color: rgba(46, 211, 198, .45);
}

.action-btn:active {
    transform: translateY(1px);
    filter: brightness(1.25);
}

/* ================= 4. 公告条：金色标签 + 青色文字 ================= */
.notice-bar {
    background: linear-gradient(90deg, rgba(246, 198, 91, .16) 0%, rgba(46, 211, 198, .08) 42%, rgba(255, 255, 255, 0) 100%) !important;
    border-bottom: 1px solid var(--tp-line) !important;
}

.notice-label {
    background: var(--tp-grad-gold) !important;
    color: #3a2705 !important;
    font-weight: 700;
    letter-spacing: .5px;
}

.notice-text {
    color: #9fd8d2 !important;
}

/* ================= 5. 筛选栏：青色选中 ================= */
.filter-bar {
    background: rgba(11, 18, 38, .90) !important;
    border-bottom: 1px solid var(--tp-line) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.filter-item {
    color: var(--tp-text-3);
}

.filter-item.active {
    color: var(--tp-teal) !important;
    font-weight: 600;
}

.filter-item.active .arrow {
    color: var(--tp-teal);
}

.filter-dropdown {
    background: var(--tp-surface-2) !important;
    border: 1px solid var(--tp-line-strong);
    box-shadow: var(--tp-shadow-lg);
}

.dropdown-item {
    border-bottom: 1px solid var(--tp-line) !important;
}

.dropdown-item:active,
.dropdown-item:hover {
    background: rgba(46, 211, 198, .16) !important;
    color: #fff !important;
}

/* ================= 6. 商品列表：深蓝卡 + 左侧彩色细条 ================= */
.content-list {
    background: transparent !important;
    padding: 10px 12px 6px;
}

.list-item {
    position: relative;
    background:
        linear-gradient(180deg, rgba(79, 139, 255, .10) 0%, rgba(79, 139, 255, 0) 60%),
        linear-gradient(180deg, var(--tp-surface-1) 0%, var(--tp-surface-2) 100%) !important;
    border: 1px solid var(--tp-line);
    border-radius: var(--tp-radius) !important;
    margin-bottom: 10px;
    padding: 14px !important;
    box-shadow: var(--tp-shadow);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

/* 左侧那根青→蓝渐变细条（按分类给色，避免整排一个色） */
.list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--tp-teal) 0%, var(--tp-blue) 100%);
}

.list-item:nth-child(3n+2)::before {
    background: linear-gradient(180deg, var(--tp-violet) 0%, var(--tp-blue) 100%);
}

.list-item:nth-child(3n+3)::before {
    background: linear-gradient(180deg, var(--tp-gold) 0%, var(--tp-teal) 100%);
}

.list-item:active {
    transform: scale(.985);
    border-color: rgba(46, 211, 198, .38);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

.list-item-title {
    color: var(--tp-text) !important;
    font-weight: 500;
}

.list-item-time {
    color: var(--tp-text-3) !important;
}

/* 价格：金色胶囊 */
.price-tag {
    background: var(--tp-grad-gold) !important;
    border: none !important;
    border-radius: 999px !important;
    color: #3a2705 !important;
    font-weight: 700;
    padding: 4px 13px !important;
    letter-spacing: .2px;
    box-shadow: 0 5px 14px rgba(217, 166, 58, .30);
}

/* 中奖：红色渐变，只留给它 */
.winning-badge {
    background: linear-gradient(135deg, #ff8086 0%, var(--tp-red-deep) 100%) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(224, 36, 43, .50);
}

/* ================= 7. 底部导航 ================= */
.bottom-nav {
    background: linear-gradient(180deg, rgba(11, 18, 38, .96) 0%, rgba(5, 7, 15, .98) 100%) !important;
    border-top: 2px solid transparent !important;
    border-image: linear-gradient(90deg, #2ed3c6 0%, #4f8bff 50%, #f6c65b 100%) 1 !important;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.nav-icon,
.nav-text {
    color: #64769e !important;
    transition: color .2s, transform .2s;
}

.nav-item.active .nav-icon,
.nav-item.active .nav-text {
    color: var(--tp-gold) !important;
}

.nav-item.active .nav-icon {
    transform: translateY(-1px) scale(1.08);
    filter: drop-shadow(0 4px 10px rgba(246, 198, 91, .45));
}

.nav-badge {
    background: linear-gradient(135deg, #ff8086 0%, var(--tp-red-deep) 100%) !important;
    box-shadow: 0 2px 8px rgba(224, 36, 43, .55);
}

/* ================= 8. 弹窗 ================= */
.modal-content {
    background: linear-gradient(180deg, #1c2b5c 0%, #0b1226 100%) !important;
    border: 1px solid rgba(246, 198, 91, .22);
    border-radius: 16px !important;
    box-shadow: var(--tp-shadow-lg);
}

.modal-title {
    color: #fff !important;
    letter-spacing: .4px;
}

.modal-text {
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid var(--tp-line);
    color: #cfdcff !important;
    border-radius: 10px !important;
}

.modal-btn {
    background: var(--tp-grad-blue) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 22px rgba(79, 139, 255, .35);
    letter-spacing: .5px;
}

.modal-btn.close {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--tp-text-2) !important;
    box-shadow: none;
}

/* ================= 9. 卡片块（订单 / 信息区） ================= */
.order-item,
.info-section,
.info-box {
    background: var(--tp-grad-surface) !important;
    border: 1px solid var(--tp-line) !important;
    border-radius: var(--tp-radius) !important;
    box-shadow: var(--tp-shadow);
    margin-bottom: 10px;
}

/* ================= 10. 表单控件：青色聚焦 ================= */
.form-label,
.input-label,
.label {
    color: var(--tp-text-2) !important;
}

.form-input,
.form-textarea,
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select {
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid var(--tp-line-strong) !important;
    border-radius: 10px !important;
    color: var(--tp-text) !important;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.form-input:focus,
.form-textarea:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    background: rgba(46, 211, 198, .07) !important;
    border-color: rgba(46, 211, 198, .60) !important;
    box-shadow: 0 0 0 3px rgba(46, 211, 198, .16) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--tp-text-3) !important;
}

/* ================= 11. 按钮 ================= */
/* 主行动按钮：金色 */
.submit-btn,
.pay-btn,
.primary-btn {
    background: var(--tp-grad-gold) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #3a2705 !important;
    font-weight: 700;
    letter-spacing: .8px;
    box-shadow: 0 12px 28px rgba(217, 166, 58, .30);
    transition: transform .15s, box-shadow .15s, filter .15s;
}

.submit-btn:active,
.pay-btn:active,
.primary-btn:active {
    transform: translateY(1px);
    filter: brightness(1.06);
    box-shadow: 0 6px 16px rgba(217, 166, 58, .26);
}

/* 次级按钮：青 → 蓝 */
.phone-btn,
.btn {
    background: linear-gradient(135deg, #2ed3c6 0%, #2f6bd8 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #04211f !important;
    font-weight: 700;
    letter-spacing: .5px;
    box-shadow: 0 10px 26px rgba(46, 211, 198, .26);
}

.phone-btn:active,
.btn:active {
    transform: translateY(1px);
    filter: brightness(1.06);
}

/* ================= 12. 空状态 / 提示 ================= */
.empty-state {
    color: var(--tp-text-3) !important;
}

.empty-icon {
    filter: drop-shadow(0 8px 18px rgba(79, 139, 255, .45));
}

.tips,
.tips-title {
    color: var(--tp-text-2) !important;
}

.load-more {
    color: var(--tp-text-3);
}

/* ================= 13. 细节质感 ================= */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--tp-teal) 0%, var(--tp-blue) 100%);
    border-radius: 999px;
}

::selection {
    background: rgba(246, 198, 91, .35);
    color: #fff;
}

/* 金额类数字统一用等宽，看起来更整齐 */
.price-tag,
.list-item-price {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   14. v3 细节优化
   ============================================================ */

/* ---- 顶部栏：固定高度，吸顶元素对齐更准 ---- */
.top-nav {
    height: 48px !important;
    padding: 0 14px !important;
    gap: 10px;
}

.top-nav .nav-title {
    font-size: 17px !important;
}

/* 左侧金色品牌标 */
.brand-chip {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    background: var(--tp-grad-gold);
    color: #3a2705;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(217, 166, 58, .35), inset 0 1px 0 rgba(255, 255, 255, .65);
}

.top-nav .nav-right {
    flex: 0 0 34px;
    width: 34px;
}

/* 筛选栏吸顶位置跟着顶部栏走 */
.filter-bar {
    top: 48px !important;
}

/* ---- 商家卡：右上角柔光，增加材质感 ---- */
.merchant-card {
    position: relative;
    overflow: hidden;
}

.merchant-card::after {
    content: '';
    position: absolute;
    right: -50px;
    top: -70px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

/* 三个动作按钮：图标跟着各自颜色走 */
.action-btn:nth-child(1) { color: #cfe0ff; }
.action-btn:nth-child(2) { color: #ffc9cb; }
.action-btn:nth-child(3) { color: #b9f4ef; }
.action-btn .icon { display: inline-flex; align-items: center; }
.action-btn .icon svg { width: 15px; height: 15px; display: block; }

/* ---- 公告条：右侧箭头 ---- */
.notice-bar::after {
    content: '';
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid rgba(255, 255, 255, .40);
    border-top: 1.5px solid rgba(255, 255, 255, .40);
    transform: rotate(45deg);
    flex: 0 0 auto;
}

/* ---- 搜索图标矢量化 ---- */
.search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tp-text-2);
}

.search-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.search-icon:active {
    color: var(--tp-teal);
}

/* ---- 商品卡：标题两行截断 + 右侧进入箭头 + 桌面悬停 ---- */
.list-item-title {
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.list-item-price::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 9px;
    border-right: 1.5px solid rgba(255, 255, 255, .35);
    border-top: 1.5px solid rgba(255, 255, 255, .35);
    transform: rotate(45deg);
}

@media (hover: hover) {
    .list-item:hover {
        transform: translateY(-1px);
        border-color: rgba(46, 211, 198, .35);
        box-shadow: 0 12px 26px rgba(0, 0, 0, .48);
    }
}

/* ---- 底部导航：矢量图标 + iPhone 底部安全区 ---- */
.bottom-nav {
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
}

.nav-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.nav-text {
    margin-top: 3px;
    letter-spacing: .3px;
}

.app-container {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ---- 无障碍：键盘焦点可见 ---- */
:focus-visible {
    outline: 2px solid rgba(46, 211, 198, .7);
    outline-offset: 2px;
}

/* 用户偏好减少动效时不播放动画 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ---- 筛选栏做成胶囊（chip）样式 ---- */
.filter-item {
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid transparent;
    transition: background .2s, border-color .2s, color .2s;
}

.filter-item.active {
    background: rgba(46, 211, 198, .14) !important;
    border-color: rgba(46, 211, 198, .45);
}

.filter-item:active {
    background: rgba(255, 255, 255, .10);
}

/* ---- 空状态：图标做成柔光圆底 ---- */
.empty-icon,
.empty-state .icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px !important;
    background: radial-gradient(circle at 50% 35%, rgba(79, 139, 255, .28), rgba(79, 139, 255, 0) 72%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

.empty-state .empty-text,
.empty-state .text {
    color: var(--tp-text-3) !important;
    font-size: 14px;
    letter-spacing: .3px;
}