/* =========================================================
   VINE CLEAN THEME FIX V4
   ========================================================= */

:root {
    --v4-bg: #f5f6fa;
    --v4-card: #ffffff;
    --v4-card-soft: #f7f8fb;
    --v4-input: #ffffff;

    --v4-text: #11131b;
    --v4-muted: #778195;

    --v4-border: #e3e6ed;

    --v4-button: #6d5df0;
    --v4-button-text: #ffffff;

    --v4-shadow:
        0 18px 48px
        rgba(25, 30, 45, .08);
}


html[data-theme="dark"] {
    --v4-bg: #0e1016;
    --v4-card: #1d2029;
    --v4-card-soft: #20232d;
    --v4-input: #171a22;

    --v4-text: #f3f5f8;
    --v4-muted: #a7afbf;

    --v4-border: #303541;

    --v4-button: #7768ff;
    --v4-button-text: #ffffff;

    --v4-shadow:
        0 18px 48px
        rgba(0, 0, 0, .28);
}


/* 页面背景 */

html,
body {
    background:
        var(--v4-bg) !important;

    color:
        var(--v4-text) !important;
}


/* =========================================================
   我的账户
   ========================================================= */

/*
兼容不同历史模板结构。
只要在账户页里的卡片、信息块，
全部跟随主题变量。
*/

.account-page,
.account-container,
.profile-page,
.profile-container,
.account-wrapper,
.account-content {
    color:
        var(--v4-text) !important;
}


.account-card,
.profile-card,
.user-card,
.account-info,
.account-info-card,
.profile-info,
.profile-info-card,
.account-summary,
.account-profile,
.account-details,
.account-section,
.profile-section {
    background:
        var(--v4-card) !important;

    color:
        var(--v4-text) !important;

    border-color:
        var(--v4-border) !important;

    box-shadow:
        var(--v4-shadow) !important;
}


/*
截图中账户资料内部的六个信息框
*/

.account-card > div,
.profile-card > div,
.account-info > div,
.account-info-card > div,
.account-details > div,
.account-grid > div,
.profile-grid > div,
.user-info-grid > div {
    border-color:
        var(--v4-border);
}


/*
只处理常见信息卡，
避免把头像本身变成普通背景。
*/

.account-item,
.profile-item,
.account-field,
.profile-field,
.info-item,
.info-card,
.user-info-item,
.account-detail-item {
    background:
        var(--v4-card-soft) !important;

    color:
        var(--v4-text) !important;

    border-color:
        var(--v4-border) !important;
}


/* 截图里可能没有 class，所以增加账户页局部兼容 */

body:has(a[href="/account"]) .account-card,
body:has(a[href="/account"]) .profile-card {
    background:
        var(--v4-card) !important;
}


/* 账户页标题和文本 */

.account-page h1,
.account-page h2,
.account-page h3,
.account-container h1,
.account-container h2,
.account-container h3,
.profile-page h1,
.profile-page h2,
.profile-page h3,
.account-card h1,
.account-card h2,
.account-card h3,
.profile-card h1,
.profile-card h2,
.profile-card h3 {
    color:
        var(--v4-text) !important;
}


.account-page p,
.account-container p,
.profile-page p,
.profile-container p,
.account-card p,
.profile-card p {
    color:
        var(--v4-muted);
}


/* 订单区域 */

.orders-section,
.order-section,
.my-orders,
.orders-card,
.order-card,
.empty-orders,
.empty-state {
    background:
        var(--v4-card-soft) !important;

    color:
        var(--v4-text) !important;

    border-color:
        var(--v4-border) !important;
}


/* =========================================================
   后台首页
   ========================================================= */

.vine-admin-clean {
    width:
        min(1380px, calc(100% - 40px));

    margin:
        28px auto 60px;
}


.vine-admin-tabs {
    display:
        flex;

    gap:
        12px;

    flex-wrap:
        wrap;

    margin-bottom:
        24px;
}


.vine-admin-tabs a {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        48px;

    padding:
        0 22px;

    border-radius:
        14px;

    text-decoration:
        none;

    font-weight:
        750;

    background:
        var(--v4-card-soft);

    color:
        var(--v4-text);

    border:
        1px solid
        var(--v4-border);
}


.vine-admin-hero-clean {
    padding:
        48px 30px;

    border:
        1px solid
        var(--v4-border);

    border-radius:
        24px;

    background:
        var(--v4-card);

    color:
        var(--v4-text);

    box-shadow:
        var(--v4-shadow);
}


.vine-admin-welcome-clean {
    margin-bottom:
        20px;

    color:
        var(--v4-muted);

    font-size:
        17px;

    font-weight:
        700;
}


.vine-admin-hero-clean h1 {
    margin:
        0;

    max-width:
        100%;

    font-size:
        clamp(38px, 5vw, 72px);

    line-height:
        1.05;

    letter-spacing:
        -.04em;

    overflow-wrap:
        anywhere;
}


.vine-admin-stats-clean {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        18px;

    margin-top:
        28px;
}


.vine-admin-stat {
    padding:
        28px;

    border-radius:
        22px;

    background:
        var(--v4-card);

    border:
        1px solid
        var(--v4-border);

    box-shadow:
        var(--v4-shadow);
}


.vine-admin-stat span {
    display:
        block;

    margin-bottom:
        20px;

    color:
        var(--v4-muted);

    font-size:
        17px;
}


.vine-admin-stat strong {
    display:
        block;

    color:
        var(--v4-text);

    font-size:
        31px;
}


/* =========================================================
   商品编辑
   ========================================================= */

.vine-product-edit-clean {
    width:
        min(1200px, calc(100% - 40px));

    margin:
        32px auto 60px;
}


.vine-product-edit-title {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        22px;
}


.vine-edit-label {
    color:
        var(--v4-button);

    font-weight:
        800;

    letter-spacing:
        .08em;
}


.vine-product-edit-title h1 {
    margin:
        8px 0 0;

    color:
        var(--v4-text);

    font-size:
        48px;
}


.vine-product-edit-form {
    display:
        grid;

    gap:
        20px;

    padding:
        28px;

    border:
        1px solid
        var(--v4-border);

    border-radius:
        24px;

    background:
        var(--v4-card);

    box-shadow:
        var(--v4-shadow);
}


.vine-form-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        18px;
}


.vine-product-edit-form label {
    display:
        grid;

    gap:
        9px;

    color:
        var(--v4-text);

    font-weight:
        700;
}


.vine-product-edit-form input,
.vine-product-edit-form textarea,
.vine-product-edit-form select {
    width:
        100%;

    box-sizing:
        border-box;

    padding:
        14px 16px;

    border:
        1px solid
        var(--v4-border);

    border-radius:
        14px;

    background:
        var(--v4-input) !important;

    color:
        var(--v4-text) !important;

    font:
        inherit;
}


.vine-checkbox-row {
    display:
        flex !important;

    align-items:
        center;

    gap:
        10px !important;
}


.vine-checkbox-row input {
    width:
        auto !important;
}


.vine-save-edit {
    min-height:
        52px;
}


/* =========================================================
   全局主题兼容
   ========================================================= */

.card,
.panel,
.dashboard-card {
    border-color:
        var(--v4-border);
}


html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background:
        var(--v4-input) !important;

    color:
        var(--v4-text) !important;

    border-color:
        var(--v4-border) !important;
}


/* 只保留左下角最终主题按钮 */

#theme-toggle,
.theme-toggle,
[data-theme-toggle],
header .theme-switch,
header .theme-button,
nav .theme-switch,
nav .theme-button {
    display:
        none !important;
}


#vine-theme-toggle-final {
    display:
        flex !important;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 900px) {

    .vine-admin-clean,
    .vine-product-edit-clean {
        width:
            min(100% - 24px, 100%);
    }


    .vine-admin-stats-clean {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .vine-form-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 600px) {

    .vine-admin-hero-clean {
        padding:
            30px 22px;
    }


    .vine-admin-hero-clean h1 {
        font-size:
            clamp(34px, 12vw, 48px);
    }


    .vine-admin-stats-clean {
        grid-template-columns:
            1fr;
    }


    .vine-product-edit-title {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .vine-product-edit-form {
        padding:
            20px;
    }

}