/*
 * TikTok Merchant Home UI
 * 仅在 body.tiktok-home-ui，即 /home 页面生效。
 * 不修改接口、数据、路由、按钮事件和其他页面。
 */

body.tiktok-home-ui {
    margin: 0 !important;
    min-height: 100vh !important;
    color: #f8fafc !important;
    background:
        radial-gradient(circle at 8% 12%, rgba(37, 244, 238, .12), transparent 27%),
        radial-gradient(circle at 92% 9%, rgba(254, 44, 85, .13), transparent 30%),
        radial-gradient(circle at 55% 62%, rgba(122, 84, 255, .12), transparent 34%),
        linear-gradient(145deg, #080d1f 0%, #111936 46%, #171038 100%) !important;
    background-attachment: fixed !important;
}

body.tiktok-home-ui::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .25;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 42px 42px;
}

body.tiktok-home-ui #app {
    position: relative !important;
    z-index: 1 !important;
    min-height: 100vh !important;
    background: transparent !important;
}

body.tiktok-home-ui #app > div,
body.tiktok-home-ui main {
    max-width: none !important;
}

body.tiktok-home-ui .tt-page-root {
    box-sizing: border-box !important;
    width: min(1540px, calc(100vw - 42px)) !important;
    max-width: none !important;
    margin: 22px auto 105px !important;
    padding: 0 !important;
}

/* 通用面板 */
body.tiktok-home-ui .tt-profile-card,
body.tiktok-home-ui .tt-store-section,
body.tiktok-home-ui .tt-actions-section,
body.tiktok-home-ui .tt-chart-section {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(126, 145, 210, .22) !important;
    border-radius: 22px !important;
    color: #f8fafc !important;
    background:
        linear-gradient(145deg, rgba(27, 38, 78, .96), rgba(16, 23, 53, .97)) !important;
    box-shadow:
        0 22px 55px rgba(0, 0, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .045) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* 商户头部 */
body.tiktok-home-ui .tt-profile-card {
    min-height: 104px !important;
    margin-bottom: 18px !important;
    padding: 18px 25px !important;
    background:
        radial-gradient(circle at 92% 0%, rgba(37, 244, 238, .23), transparent 25%),
        radial-gradient(circle at 75% 130%, rgba(254, 44, 85, .20), transparent 29%),
        linear-gradient(115deg, #161e45 0%, #25205d 52%, #152f52 100%) !important;
}

body.tiktok-home-ui .tt-profile-card::after {
    content: "";
    position: absolute;
    right: -42px;
    top: -85px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    border: 1px solid rgba(37, 244, 238, .24);
    box-shadow:
        0 0 55px rgba(37, 244, 238, .12),
        inset 0 0 55px rgba(254, 44, 85, .08);
    pointer-events: none;
}

body.tiktok-home-ui .tt-profile-card img {
    border: 2px solid rgba(37, 244, 238, .50) !important;
    box-shadow:
        0 0 0 5px rgba(37, 244, 238, .07),
        0 8px 25px rgba(0, 0, 0, .35) !important;
}

body.tiktok-home-ui .tt-profile-card button {
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-weight: 700 !important;
    background: linear-gradient(110deg, #fe2c55, #ff6b47) !important;
    box-shadow: 0 8px 22px rgba(254, 44, 85, .28) !important;
}

/* 店铺数据大面板 */
body.tiktok-home-ui .tt-store-section {
    margin-bottom: 18px !important;
    padding: 24px !important;
}

body.tiktok-home-ui .tt-store-section::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 88px;
    border-radius: 0 10px 10px 0;
    background: linear-gradient(#25f4ee, #7c4dff, #fe2c55);
    box-shadow: 0 0 25px rgba(37, 244, 238, .35);
}

body.tiktok-home-ui .tt-store-section h1,
body.tiktok-home-ui .tt-store-section h2,
body.tiktok-home-ui .tt-store-section h3,
body.tiktok-home-ui .tt-store-section h4,
body.tiktok-home-ui .tt-actions-section h1,
body.tiktok-home-ui .tt-actions-section h2,
body.tiktok-home-ui .tt-actions-section h3,
body.tiktok-home-ui .tt-chart-section h1,
body.tiktok-home-ui .tt-chart-section h2,
body.tiktok-home-ui .tt-chart-section h3 {
    color: #ffffff !important;
    letter-spacing: .02em !important;
}

body.tiktok-home-ui .tt-store-section p,
body.tiktok-home-ui .tt-store-section span,
body.tiktok-home-ui .tt-actions-section p,
body.tiktok-home-ui .tt-actions-section span,
body.tiktok-home-ui .tt-chart-section p,
body.tiktok-home-ui .tt-chart-section span {
    color: #c7d0ea;
}

/* 总销售额 / 总利润 */
body.tiktok-home-ui .tt-balance-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr) !important;
    gap: 16px !important;
    width: 100% !important;
}

body.tiktok-home-ui .tt-total-sales,
body.tiktok-home-ui .tt-total-profit {
    box-sizing: border-box !important;
    min-height: 150px !important;
    padding: 23px 25px !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 19px !important;
    transition: transform .22s ease, border-color .22s ease !important;
}

body.tiktok-home-ui .tt-total-sales {
    background:
        radial-gradient(circle at 82% 15%, rgba(255, 255, 255, .15), transparent 25%),
        linear-gradient(125deg, #5e30e6, #6f3df2 43%, #315cdb 100%) !important;
    box-shadow:
        0 18px 38px rgba(83, 48, 221, .28),
        inset 0 1px 0 rgba(255, 255, 255, .13) !important;
}

body.tiktok-home-ui .tt-total-profit {
    background:
        radial-gradient(circle at 85% 10%, rgba(37, 244, 238, .16), transparent 28%),
        linear-gradient(135deg, #153d62, #1e335f 55%, #3b285d 100%) !important;
    box-shadow:
        0 16px 35px rgba(10, 21, 54, .30),
        inset 0 1px 0 rgba(255, 255, 255, .09) !important;
}

body.tiktok-home-ui .tt-total-sales:hover,
body.tiktok-home-ui .tt-total-profit:hover {
    transform: translateY(-3px);
    border-color: rgba(37, 244, 238, .38) !important;
}

body.tiktok-home-ui .tt-total-sales strong,
body.tiktok-home-ui .tt-total-sales b,
body.tiktok-home-ui .tt-total-profit strong,
body.tiktok-home-ui .tt-total-profit b {
    color: #fff !important;
    font-size: clamp(31px, 3vw, 50px) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
}

/* 今日售出订单、今日销售额、预计利润 */
body.tiktok-home-ui .tt-primary-row {
    display: grid !important;
    grid-template-columns: minmax(300px, 1.40fr) minmax(250px, 1fr) minmax(250px, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
}

body.tiktok-home-ui .tt-today-orders,
body.tiktok-home-ui .tt-today-sales,
body.tiktok-home-ui .tt-estimated-profit {
    box-sizing: border-box !important;
    min-height: 130px !important;
    padding: 20px 22px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 18px !important;
    box-shadow:
        0 16px 34px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

body.tiktok-home-ui .tt-today-orders {
    background:
        radial-gradient(circle at 93% 0%, rgba(254, 44, 85, .28), transparent 35%),
        linear-gradient(130deg, #151c3a, #242451 65%, #34203d) !important;
    border-left: 4px solid #fe2c55 !important;
}

body.tiktok-home-ui .tt-today-sales {
    background:
        radial-gradient(circle at 92% 0%, rgba(37, 244, 238, .22), transparent 35%),
        linear-gradient(130deg, #132d50, #213665 70%, #2c275e) !important;
    border-left: 4px solid #25f4ee !important;
}

body.tiktok-home-ui .tt-estimated-profit {
    background:
        radial-gradient(circle at 92% 0%, rgba(255, 196, 0, .20), transparent 35%),
        linear-gradient(130deg, #3f2d19, #4f351e 60%, #292141) !important;
    border-left: 4px solid #ffc83d !important;
}

body.tiktok-home-ui .tt-today-orders strong,
body.tiktok-home-ui .tt-today-orders b,
body.tiktok-home-ui .tt-today-sales strong,
body.tiktok-home-ui .tt-today-sales b,
body.tiktok-home-ui .tt-estimated-profit strong,
body.tiktok-home-ui .tt-estimated-profit b {
    color: #fff !important;
    font-size: clamp(28px, 2.3vw, 40px) !important;
    font-weight: 800 !important;
}

/* 次级数据 */
body.tiktok-home-ui .tt-secondary-metric {
    box-sizing: border-box !important;
    min-height: 88px !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(135, 150, 205, .16) !important;
    border-radius: 15px !important;
    color: #eef2ff !important;
    background:
        linear-gradient(145deg, rgba(37, 48, 91, .84), rgba(20, 28, 62, .92)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 10px 25px rgba(0, 0, 0, .14) !important;
    transition: transform .18s ease, border-color .18s ease !important;
}

body.tiktok-home-ui .tt-secondary-metric:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 244, 238, .30) !important;
}

body.tiktok-home-ui .tt-secondary-metric strong,
body.tiktok-home-ui .tt-secondary-metric b {
    color: #fff !important;
    font-size: 21px !important;
}

/* 常用功能 */
body.tiktok-home-ui .tt-actions-section {
    margin-bottom: 18px !important;
    padding: 23px !important;
}

body.tiktok-home-ui .tt-action-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 13px !important;
}

body.tiktok-home-ui .tt-action-item {
    box-sizing: border-box !important;
    min-height: 98px !important;
    border: 1px solid rgba(123, 143, 201, .15) !important;
    border-radius: 16px !important;
    color: #eef2ff !important;
    background:
        linear-gradient(145deg, rgba(36, 46, 86, .90), rgba(18, 26, 57, .95)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 10px 24px rgba(0, 0, 0, .14) !important;
    transition:
        transform .20s ease,
        background .20s ease,
        border-color .20s ease,
        box-shadow .20s ease !important;
}

body.tiktok-home-ui .tt-action-item:hover {
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(37, 244, 238, .35) !important;
    background:
        linear-gradient(145deg, rgba(48, 62, 112, .95), rgba(26, 34, 75, .98)) !important;
    box-shadow:
        0 15px 34px rgba(0, 0, 0, .23),
        0 0 25px rgba(37, 244, 238, .07) !important;
}

body.tiktok-home-ui .tt-action-item svg,
body.tiktok-home-ui .tt-action-item i {
    color: #25f4ee !important;
    filter: drop-shadow(0 0 8px rgba(37, 244, 238, .20));
}

/* 图表面板 */
body.tiktok-home-ui .tt-chart-section {
    min-height: 360px !important;
    margin-bottom: 18px !important;
    padding: 23px !important;
    background:
        radial-gradient(circle at 60% 25%, rgba(91, 70, 230, .12), transparent 38%),
        linear-gradient(145deg, rgba(23, 32, 70, .97), rgba(13, 20, 47, .98)) !important;
}

body.tiktok-home-ui .tt-chart-section::before {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 65px;
    height: 1px;
    background: linear-gradient(90deg, #25f4ee, #7657ff, #fe2c55);
    opacity: .5;
}

body.tiktok-home-ui .tt-chart-section canvas {
    filter: brightness(1.28) saturate(1.16);
}

body.tiktok-home-ui .tt-chart-section svg text {
    fill: #aeb9d8 !important;
}

/* 底部导航只在首页换色，不改变尺寸及点击 */
body.tiktok-home-ui .tt-home-tabbar {
    overflow: hidden !important;
    border: 1px solid rgba(126, 145, 210, .22) !important;
    border-radius: 20px 20px 0 0 !important;
    background: rgba(12, 18, 42, .94) !important;
    box-shadow:
        0 -14px 40px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(255, 255, 255, .04) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.tiktok-home-ui .tt-home-tabbar * {
    color: #98a5c5;
}

body.tiktok-home-ui .tt-home-tabbar .van-tabbar-item--active,
body.tiktok-home-ui .tt-home-tabbar [aria-selected="true"] {
    color: #25f4ee !important;
}

/* 清除首页原浅色背景，但不修改节点功能 */
body.tiktok-home-ui .tt-store-section > div,
body.tiktok-home-ui .tt-actions-section > div,
body.tiktok-home-ui .tt-chart-section > div {
    border-color: rgba(128, 145, 198, .13);
}

/* 响应式 */
@media (max-width: 1100px) {
    body.tiktok-home-ui .tt-page-root {
        width: calc(100vw - 24px) !important;
        margin-top: 12px !important;
    }

    body.tiktok-home-ui .tt-balance-row {
        grid-template-columns: 1.25fr .75fr !important;
    }

    body.tiktok-home-ui .tt-primary-row {
        grid-template-columns: 1.15fr 1fr 1fr !important;
    }
}

@media (max-width: 760px) {
    body.tiktok-home-ui .tt-page-root {
        width: calc(100vw - 14px) !important;
        margin: 7px auto 90px !important;
    }

    body.tiktok-home-ui .tt-profile-card,
    body.tiktok-home-ui .tt-store-section,
    body.tiktok-home-ui .tt-actions-section,
    body.tiktok-home-ui .tt-chart-section {
        border-radius: 16px !important;
    }

    body.tiktok-home-ui .tt-store-section,
    body.tiktok-home-ui .tt-actions-section,
    body.tiktok-home-ui .tt-chart-section {
        padding: 15px !important;
    }

    body.tiktok-home-ui .tt-balance-row,
    body.tiktok-home-ui .tt-primary-row {
        grid-template-columns: 1fr !important;
    }

    body.tiktok-home-ui .tt-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.tiktok-home-ui .tt-total-sales,
    body.tiktok-home-ui .tt-total-profit {
        min-height: 120px !important;
    }

    body.tiktok-home-ui .tt-today-orders,
    body.tiktok-home-ui .tt-today-sales,
    body.tiktok-home-ui .tt-estimated-profit {
        min-height: 105px !important;
    }
}