:root {
    --mgt-primary: #6048ff;
    --mgt-secondary: #06b6d4;
    --mgt-bg: #eef3fb;
    --mgt-surface: #ffffff;
    --mgt-surface-2: #f7f9fc;
    --mgt-text: #101828;
    --mgt-muted: #667085;
    --mgt-border: rgba(91, 102, 133, 0.16);
    --mgt-nav-bg: #0b2b28;
    --mgt-nav-text: #e9f5f3;
    --mgt-active-bg: #fff3c7;
    --mgt-active-text: #111827;
    --mgt-shadow: 0 16px 42px rgba(22, 34, 66, 0.12);
    --mgt-bottom-height: 76px;
}

/* 全局主题变量 */
html[data-merchant-theme="midnight"] {
    --mgt-primary: #4967ff;
    --mgt-secondary: #00b8d9;
    --mgt-bg: #071426;
    --mgt-surface: #10213b;
    --mgt-surface-2: #162a49;
    --mgt-text: #f5f8ff;
    --mgt-muted: #9fb0cd;
    --mgt-border: rgba(135, 160, 200, 0.20);
    --mgt-nav-bg: #071426;
    --mgt-nav-text: #dce7ff;
    --mgt-active-bg: #eaf0ff;
    --mgt-active-text: #16213b;
}

html[data-merchant-theme="violet"] {
    --mgt-primary: #7a3cff;
    --mgt-secondary: #b64bdb;
    --mgt-bg: #17112d;
    --mgt-surface: #241944;
    --mgt-surface-2: #302058;
    --mgt-text: #fff8ff;
    --mgt-muted: #c1acd6;
    --mgt-border: rgba(201, 164, 255, 0.20);
    --mgt-nav-bg: #21143a;
    --mgt-nav-text: #f4eaff;
    --mgt-active-bg: #f1e6ff;
    --mgt-active-text: #402075;
}

html[data-merchant-theme="ocean"] {
    --mgt-primary: #087e8b;
    --mgt-secondary: #00b4d8;
    --mgt-bg: #072f36;
    --mgt-surface: #0b4d57;
    --mgt-surface-2: #0e5d68;
    --mgt-text: #f2ffff;
    --mgt-muted: #9ed7dc;
    --mgt-border: rgba(114, 221, 230, 0.20);
    --mgt-nav-bg: #062f35;
    --mgt-nav-text: #dcfbff;
    --mgt-active-bg: #dffaff;
    --mgt-active-text: #063a42;
}

html[data-merchant-theme="emerald"] {
    --mgt-primary: #0f9f75;
    --mgt-secondary: #24c08a;
    --mgt-bg: #eaf8f2;
    --mgt-surface: #ffffff;
    --mgt-surface-2: #f2fbf7;
    --mgt-text: #102a24;
    --mgt-muted: #5e7e75;
    --mgt-border: rgba(38, 145, 110, 0.16);
    --mgt-nav-bg: #063f36;
    --mgt-nav-text: #e9fff9;
    --mgt-active-bg: #fff1bd;
    --mgt-active-text: #17251f;
}

html[data-merchant-theme="sunset"] {
    --mgt-primary: #ef5b4c;
    --mgt-secondary: #f59e0b;
    --mgt-bg: #fff3ee;
    --mgt-surface: #ffffff;
    --mgt-surface-2: #fff8f4;
    --mgt-text: #40211d;
    --mgt-muted: #8a6761;
    --mgt-border: rgba(212, 93, 67, 0.18);
    --mgt-nav-bg: #5a211a;
    --mgt-nav-text: #fff0eb;
    --mgt-active-bg: #ffe6b8;
    --mgt-active-text: #452418;
}

html[data-merchant-theme="graphite"] {
    --mgt-primary: #4b5563;
    --mgt-secondary: #8b95a5;
    --mgt-bg: #15181d;
    --mgt-surface: #232831;
    --mgt-surface-2: #2c323d;
    --mgt-text: #f6f7f9;
    --mgt-muted: #b3bbc7;
    --mgt-border: rgba(202, 210, 222, 0.14);
    --mgt-nav-bg: #111419;
    --mgt-nav-text: #e6e9ee;
    --mgt-active-bg: #eef0f3;
    --mgt-active-text: #1f2937;
}

html[data-merchant-theme="ice"] {
    --mgt-primary: #6d55ff;
    --mgt-secondary: #8cc7ff;
    --mgt-bg: #eef4ff;
    --mgt-surface: #ffffff;
    --mgt-surface-2: #f7faff;
    --mgt-text: #101828;
    --mgt-muted: #7b8aa5;
    --mgt-border: rgba(91, 109, 160, 0.14);
    --mgt-nav-bg: #0d2140;
    --mgt-nav-text: #eaf3ff;
    --mgt-active-bg: #fff0b8;
    --mgt-active-text: #172033;
}

html[data-merchant-theme="sakura"] {
    --mgt-primary: #d75a92;
    --mgt-secondary: #ef93bd;
    --mgt-bg: #fff0f6;
    --mgt-surface: #ffffff;
    --mgt-surface-2: #fff7fb;
    --mgt-text: #3f2130;
    --mgt-muted: #916879;
    --mgt-border: rgba(218, 103, 153, 0.17);
    --mgt-nav-bg: #57243a;
    --mgt-nav-text: #fff0f7;
    --mgt-active-bg: #ffe0ec;
    --mgt-active-text: #4a1f31;
}

/* 全页面应用主题，不改业务结构 */
html[data-merchant-theme] body {
    padding-bottom:
        calc(
            var(--mgt-bottom-height) +
            env(safe-area-inset-bottom, 0px) +
            10px
        ) !important;
    color: var(--mgt-text);
    background: var(--mgt-bg) !important;
    transition:
        background-color 0.22s ease,
        color 0.22s ease;
}

html[data-merchant-theme] body > #app,
html[data-merchant-theme] #app,
html[data-merchant-theme] [id="app"] {
    min-height: 100vh;
    color: var(--mgt-text);
    background: var(--mgt-bg) !important;
}

html[data-merchant-theme] :is(
    .card,
    [class*="card"],
    .panel,
    [class*="panel"],
    .box,
    [class*="section"],
    [class*="content"]
) {
    border-color: var(--mgt-border);
}

html[data-merchant-theme] :is(
    .card,
    [class*="card"],
    .panel,
    [class*="panel"]
) {
    color: var(--mgt-text);
    background-color: var(--mgt-surface);
}

html[data-merchant-theme] :is(
    input,
    textarea,
    select
) {
    color: var(--mgt-text);
    border-color: var(--mgt-border);
    background-color: var(--mgt-surface) !important;
}

html[data-merchant-theme] :is(
    button,
    .btn,
    [class*="button"]
) {
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

/* 隐藏识别到的旧底部导航 */
.mgt-old-bottom-nav-hidden-v1 {
    display: none !important;
}

/* 隐藏旧版固定在线客服按钮 */
.mgt-old-customer-service-hidden-v1 {
    display: none !important;
}

/* 新的固定五按钮导航 */
#mgt-global-bottom-nav-v1 {
    position: fixed;
    z-index: 2147482000;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height:
        calc(
            var(--mgt-bottom-height) +
            env(safe-area-inset-bottom, 0px)
        );
    padding:
        6px
        max(8px, env(safe-area-inset-right, 0px))
        env(safe-area-inset-bottom, 0px)
        max(8px, env(safe-area-inset-left, 0px));
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    background: var(--mgt-nav-bg);
    box-shadow: 0 -12px 34px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

#mgt-global-bottom-nav-v1 .mgt-nav-item {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    margin: 0 2px;
    padding: 5px 2px;
    border: 0;
    border-radius: 13px;
    color: var(--mgt-nav-text);
    font: inherit;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#mgt-global-bottom-nav-v1 .mgt-nav-item.is-active {
    color: var(--mgt-active-text);
    background: var(--mgt-active-bg);
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.12);
}

#mgt-global-bottom-nav-v1 .mgt-nav-icon {
    display: block;
    font-size: 22px;
    line-height: 1;
}

#mgt-global-bottom-nav-v1 .mgt-nav-label {
    overflow: hidden;
    max-width: 100%;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mgt-global-bottom-nav-v1 .mgt-theme-icon {
    font-size: 24px;
}

/* 主题弹层 */
#mgt-theme-overlay-v1 {
    position: fixed;
    z-index: 2147483000;
    inset: 0;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 18px;
    background: rgba(8, 15, 28, 0.58);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#mgt-theme-overlay-v1.is-open {
    display: flex;
}

#mgt-theme-dialog-v1 {
    width: min(620px, 100%);
    max-height: calc(100dvh - 34px);
    overflow-y: auto;
    padding: 20px;
    border: 1px solid var(--mgt-border);
    border-radius: 22px;
    color: var(--mgt-text);
    background: var(--mgt-surface);
    box-shadow: var(--mgt-shadow);
}

#mgt-theme-dialog-v1 .mgt-theme-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 12px;
    align-items: start;
    margin-bottom: 16px;
}

#mgt-theme-dialog-v1 h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
}

#mgt-theme-dialog-v1 .mgt-theme-subtitle {
    margin: 5px 0 0;
    color: var(--mgt-muted);
    font-size: 13px;
    line-height: 1.55;
}

#mgt-theme-dialog-v1 .mgt-close {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    color: var(--mgt-text);
    font-size: 20px;
    background: var(--mgt-surface-2);
    cursor: pointer;
}

#mgt-theme-dialog-v1 .mgt-theme-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

#mgt-theme-dialog-v1 .mgt-theme-option {
    position: relative;
    display: block;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--mgt-border);
    border-radius: 14px;
    color: var(--mgt-text);
    text-align: left;
    background: var(--mgt-surface-2);
    cursor: pointer;
}

#mgt-theme-dialog-v1 .mgt-theme-option.is-selected {
    border-color: var(--mgt-primary);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--mgt-primary) 24%, transparent);
}

#mgt-theme-dialog-v1 .mgt-theme-preview {
    height: 34px;
    margin-bottom: 7px;
    border-radius: 9px;
    background: var(--preview);
}

#mgt-theme-dialog-v1 .mgt-theme-name {
    display: block;
    overflow: hidden;
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mgt-theme-dialog-v1 .mgt-theme-check {
    position: absolute;
    top: 5px;
    right: 5px;
    display: none;
    width: 21px;
    height: 21px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    background: var(--mgt-primary);
}

#mgt-theme-dialog-v1 .mgt-theme-option.is-selected .mgt-theme-check {
    display: flex;
}

@media (min-width: 761px) {
    #mgt-theme-overlay-v1 {
        align-items: center;
    }
}

@media (max-width: 600px) {
    :root {
        --mgt-bottom-height: 72px;
    }

    #mgt-theme-overlay-v1 {
        padding:
            8px
            8px
            calc(
                var(--mgt-bottom-height) +
                env(safe-area-inset-bottom, 0px) +
                8px
            );
    }

    #mgt-theme-dialog-v1 {
        padding: 17px 14px 15px;
        border-radius: 20px;
    }

    #mgt-theme-dialog-v1 .mgt-theme-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    #mgt-theme-dialog-v1 .mgt-theme-option {
        padding: 6px;
        border-radius: 12px;
    }

    #mgt-theme-dialog-v1 .mgt-theme-preview {
        height: 31px;
    }

    #mgt-global-bottom-nav-v1 .mgt-nav-icon {
        font-size: 21px;
    }

    #mgt-global-bottom-nav-v1 .mgt-nav-label {
        font-size: 12px;
    }
}