/* ===================================================
   OPC Creator Personality Themes - 6 Types
   =================================================== */

/* --- Picker Panel --- */

.picker-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    transition: background 0.3s;
}

.picker-overlay.picker-open {
    background: rgba(0, 0, 0, 0.45);
    pointer-events: auto;
}

.picker-panel {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    max-width: 480px;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 20px 20px 0 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.picker-open .picker-panel {
    transform: translateY(0);
}

.picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.picker-title {
    font-size: 17px;
    font-weight: 700;
    color: #1A1A1A;
}

.picker-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.picker-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    cursor: pointer;
    background: #F5F5F5;
    transition: background 0.15s;
}

.picker-item:active { background: #EAEAEA; }

.picker-item-active {
    background: #F0EDE8;
    box-shadow: inset 0 0 0 2px var(--primary, #C75C2E);
}

.picker-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}

.picker-icon-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.picker-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.picker-name {
    font-size: 15px;
    font-weight: 600;
    color: #1A1A1A;
}

.picker-desc {
    font-size: 12px;
    color: #888;
    transition: opacity 0.15s;
}

.picker-desc.picker-desc-lore {
    color: #5C4637;
    font-weight: 500;
}

/* --- Lore Toggle --- */

.picker-lore-toggle {
    text-align: center;
    font-size: 12px;
    color: #999;
    padding: 12px 0 4px;
    cursor: pointer;
    letter-spacing: 0.5px;
}

.picker-lore-toggle:active {
    color: #666;
}

/* --- Skip Button --- */

.picker-skip {
    text-align: center;
    padding: 14px 16px;
    margin-top: 10px;
    color: #888;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-top: 1px solid #F0F0F0;
    transition: color 0.15s;
    letter-spacing: 0.3px;
}

.picker-skip:active {
    color: #333;
}

/* --- Type Badge --- */

.type-badge {
    margin-bottom: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.type-name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
}

.type-desc {
    font-size: 13px;
    letter-spacing: 0.5px;
}


/* =============================================
   1. 闪击者 - 速度、行动力、冲劲
   深暗底 + 炽焰橘，粗犷有力，速度感
   ============================================= */

body.theme-blitz {
    --primary: #FF6B35;
    --primary-bg: rgba(255, 107, 53, 0.15);
    --bg: #0D0906;
    --card: #1A1210;
    --text: #F5E6D3;
    --text-secondary: #C4A882;
    --text-light: #8B7355;
    --border: #2E2018;
    --user-bubble: #FF6B35;
}

body.theme-blitz .site-credit {
    color: #A8956F;
    opacity: 0.6;
}

body.theme-blitz .landing-compact {
    background: #0D0906;
    background-image:
        linear-gradient(135deg, rgba(255,107,53,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 90%, rgba(255,107,53,0.1) 0%, transparent 50%);
}

/* 速度线装饰 - 细线 + 流光划过 */
body.theme-blitz .landing-compact::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(165deg, transparent 20%, rgba(255,107,53,0.12) 20.3%, transparent 20.6%),
        linear-gradient(165deg, transparent 45%, rgba(255,107,53,0.08) 45.2%, transparent 45.4%),
        linear-gradient(165deg, transparent 72%, rgba(255,107,53,0.1) 72.2%, transparent 72.4%);
    pointer-events: none;
}

/* 流光效果 - 锐利光束斜向划过 */
body.theme-blitz .landing-compact::after {
    content: "";
    position: absolute;
    top: -50%;
    left: 0;
    width: 80%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,107,53,0.03) 30%,
        rgba(255,107,53,0.14) 48%,
        rgba(255,180,120,0.2) 50%,
        rgba(255,107,53,0.14) 52%,
        rgba(255,107,53,0.03) 70%,
        transparent 100%
    );
    transform: rotate(165deg) translateX(-187.5%);
    pointer-events: none;
    animation: blitz-streak 3.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

@keyframes blitz-streak {
    0% {
        transform: rotate(165deg) translateX(-187.5%);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: rotate(165deg) translateX(250%);
        opacity: 0;
    }
}

body.theme-blitz .topbar {
    background: rgba(13,9,6,0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: #2E2018;
}

body.theme-blitz .brand-line {
    color: #C4A882;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 44px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(255,107,53,0.2);
    display: inline-block;
}

body.theme-blitz .headline-row {
    font-size: 36px;
    font-weight: 900;
    color: #F5E6D3;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

body.theme-blitz .headline-row em {
    color: #FF6B35;
    font-weight: 900;
    font-style: normal;
    text-shadow: 0 0 30px rgba(255,107,53,0.4);
}

body.theme-blitz .type-name {
    color: #FF6B35;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
}

body.theme-blitz .type-desc {
    color: #C4A882;
    font-size: 13px;
    letter-spacing: 1px;
}

body.theme-blitz .landing-sub {
    color: #A8956F;
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 500;
}

body.theme-blitz .cta-note {
    color: #A8956F;
    font-size: 12px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

body.theme-blitz .topbar-hint { color: #A8956F; }

body.theme-blitz .topbar-btn {
    color: #FF6B35;
    background: rgba(255,107,53,0.1);
    border: 1px solid rgba(255,107,53,0.25);
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 1px;
}

body.theme-blitz .cta-button {
    background: #FF6B35;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 16px;
    box-shadow: 0 0 40px rgba(255,107,53,0.3), 0 4px 15px rgba(255,107,53,0.2);
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

body.theme-blitz .cta-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: translateX(-200%);
    animation: blitz-shine 3s ease-in-out infinite;
}

@keyframes blitz-shine {
    0%, 100% { transform: translateX(-200%); }
    50% { transform: translateX(300%); }
}

/* 闪击者 landing-inner 间距紧凑 */
body.theme-blitz .landing-sub {
    margin-bottom: 40px;
}

body.theme-blitz .type-badge {
    margin-bottom: 32px;
}

/* --- 闪击者入场动画 --- */

body.theme-blitz .brand-line {
    animation: blitz-in 0.4s ease-out both;
    animation-delay: 0.1s;
}

body.theme-blitz .landing-headline .headline-row:first-child {
    animation: blitz-punch-left 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.25s;
}

body.theme-blitz .landing-headline .headline-row:last-child {
    animation: blitz-punch-left 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.4s;
}

body.theme-blitz .landing-sub {
    animation: blitz-in 0.35s ease-out both;
    animation-delay: 0.55s;
}

body.theme-blitz .type-badge {
    animation: blitz-in 0.35s ease-out both;
    animation-delay: 0.65s;
}

body.theme-blitz .landing-cta {
    animation: blitz-in 0.4s ease-out both;
    animation-delay: 0.75s;
}

@keyframes blitz-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blitz-punch-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- 闪击者 CTA 呼吸脉冲 --- */

body.theme-blitz .cta-button {
    animation: blitz-pulse 2.5s ease-in-out infinite;
    animation-delay: 1.2s;
}

@keyframes blitz-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255,107,53,0.2), 0 4px 15px rgba(255,107,53,0.15);
    }
    50% {
        box-shadow: 0 0 40px rgba(255,107,53,0.4), 0 4px 20px rgba(255,107,53,0.3);
    }
}

/* --- 闪击者备注打字光标 --- */

body.theme-blitz .cta-note {
    font-family: "SF Mono", "Fira Code", "Courier New", monospace;
    font-size: 11px;
    letter-spacing: 0.3px;
}

body.theme-blitz .cta-note::after {
    content: "▎";
    color: #FF6B35;
    animation: blitz-blink 0.8s step-end infinite;
    margin-left: 2px;
}

@keyframes blitz-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}



/* =============================================
   2. 深耕者 - 克制、精致、匠人精神
   米白 + 深棕，大留白，衬线气质，书房/茶室
   ============================================= */

body.theme-deep {
    --primary: #5C4637;
    --primary-bg: rgba(92,70,55,0.06);
    --bg: #F6F3ED;
    --card: #FFFFFF;
    --text: #2C2216;
    --text-secondary: #7A6E62;
    --text-light: #B0A79B;
    --border: #E5DED6;
    --user-bubble: #5C4637;
}

body.theme-deep .landing-compact {
    background: #F6F3ED;
    background-image:
        url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

body.theme-deep .topbar {
    background: rgba(246,243,237,0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: #E5DED6;
}

body.theme-deep .brand-line {
    font-size: 15px;
    letter-spacing: 4px;
    color: #5C4637;
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding: 0 24px;
}

body.theme-deep .brand-line::before,
body.theme-deep .brand-line::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 24px;
    height: 1px;
    background: #D5CEC6;
}

body.theme-deep .brand-line::before { right: 100%; }
body.theme-deep .brand-line::after { left: 100%; }

body.theme-deep .headline-row {
    font-weight: 400;
    font-size: 30px;
    color: #2C2216;
    letter-spacing: 4px;
    line-height: 1.8;
}

body.theme-deep .headline-row em {
    font-weight: 700;
    color: #5C4637;
    font-style: normal;
}

body.theme-deep .landing-sub {
    letter-spacing: 3px;
    color: #6B5F53;
    font-size: 13px;
    font-weight: 500;
}

body.theme-deep .type-name {
    color: #5C4637;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 6px;
}

body.theme-deep .type-desc {
    color: #6B5F53;
    font-size: 12px;
    letter-spacing: 1.5px;
    font-weight: 400;
}

body.theme-deep .cta-note {
    color: #6B5F53;
    letter-spacing: 1px;
    font-size: 12px;
    font-weight: 400;
}

body.theme-deep .topbar-hint {
    color: #6B5F53;
    font-weight: 400;
    letter-spacing: 0.5px;
}

body.theme-deep .topbar-btn {
    color: #5C4637;
    background: transparent;
    border: 1px solid #D5CEC6;
    border-radius: 0;
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 400;
}

body.theme-deep .cta-button {
    background: transparent;
    color: #5C4637;
    border: 1.5px solid #5C4637;
    border-radius: 0;
    font-weight: 500;
    letter-spacing: 3px;
    font-size: 15px;
    box-shadow: none;
    padding: 16px;
    transition: all 0.6s ease;
}

body.theme-deep .cta-button:active {
    background: #5C4637;
    color: #F6F3ED;
}

body.theme-deep .site-credit {
    color: #A89E92;
    letter-spacing: 1px;
    font-weight: 400;
}

/* --- 深耕者入场动画：缓慢、沉稳、逐一浮现 --- */

body.theme-deep .brand-line {
    animation: deep-emerge 1.2s ease both;
    animation-delay: 0.2s;
}

body.theme-deep .landing-headline .headline-row:first-child {
    animation: deep-emerge 1.2s ease both;
    animation-delay: 0.6s;
}

body.theme-deep .landing-headline .headline-row:last-child {
    animation: deep-emerge 1.2s ease both;
    animation-delay: 1.0s;
}

body.theme-deep .landing-sub {
    animation: deep-emerge 1.2s ease both;
    animation-delay: 1.4s;
}

body.theme-deep .type-badge {
    animation: deep-emerge 1.2s ease both;
    animation-delay: 1.7s;
}

body.theme-deep .landing-cta {
    animation: deep-emerge 1.2s ease both;
    animation-delay: 2.0s;
}

@keyframes deep-emerge {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 深耕者四角装裱 --- */

body.theme-deep .landing-compact::before,
body.theme-deep .landing-compact::after {
    content: "";
    position: absolute;
    pointer-events: none;
    animation: deep-corner-in 2s ease both;
    animation-delay: 0.4s;
}

/* 左上 + 右下角标 */
body.theme-deep .landing-compact::before {
    top: 12%;
    left: 8%;
    width: 40px;
    height: 40px;
    border-top: 1px solid rgba(92,70,55,0.2);
    border-left: 1px solid rgba(92,70,55,0.2);
}

body.theme-deep .landing-compact::after {
    bottom: 12%;
    right: 8%;
    width: 40px;
    height: 40px;
    border-bottom: 1px solid rgba(92,70,55,0.2);
    border-right: 1px solid rgba(92,70,55,0.2);
}

@keyframes deep-corner-in {
    from {
        opacity: 0;
        width: 0;
        height: 0;
    }
    to {
        opacity: 1;
        width: 40px;
        height: 40px;
    }
}

/* --- 深耕者持续动画：背景暖光呼吸 --- */

body.theme-deep .landing-compact {
    animation: deep-warmth 8s ease-in-out infinite;
}

@keyframes deep-warmth {
    0%, 100% {
        background-color: #F6F3ED;
    }
    50% {
        background-color: #F8F4EC;
    }
}

/* --- 深耕者品牌线装饰呼吸 --- */

body.theme-deep .brand-line::before,
body.theme-deep .brand-line::after {
    transition: width 3s ease;
    animation: deep-line-breathe 6s ease-in-out infinite;
}

@keyframes deep-line-breathe {
    0%, 100% { width: 24px; opacity: 0.6; }
    50% { width: 32px; opacity: 1; }
}

/* --- 深耕者 CTA 按钮：hover 时线框缓慢填充 --- */

body.theme-deep .cta-button {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

body.theme-deep .cta-button::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #5C4637;
    transition: height 0.8s ease;
    z-index: -1;
}

body.theme-deep .cta-button:active::before {
    height: 100%;
}

body.theme-deep .cta-button:active {
    color: #F6F3ED;
    background: transparent;
}

/* --- 深耕者备注文字 --- */

body.theme-deep .cta-note {
    font-size: 11px;
    white-space: nowrap;
}

/* --- 深耕者底部署名 --- */

body.theme-deep .site-credit {
    color: #8B8278;
    letter-spacing: 1.5px;
    font-weight: 400;
    opacity: 0.7;
}


/* =============================================
   3. 连接者 - 温暖、社交、人情味
   暖杏底 + 珊瑚/金/粉多色交融，圆润柔和，聚人成势
   ============================================= */

body.theme-connector {
    --primary: #E06B50;
    --primary-bg: rgba(224,107,80,0.1);
    --bg: #FEF5EE;
    --card: #FFFFFF;
    --text: #3D2B24;
    --text-secondary: #7A5F56;
    --text-light: #A8938A;
    --border: #F0E4DC;
    --user-bubble: #E06B50;
}

body.theme-connector .landing-compact {
    background: #FEF5EE;
    background-image:
        radial-gradient(circle at 25% 35%, rgba(224,107,80,0.1) 0%, transparent 40%),
        radial-gradient(circle at 75% 60%, rgba(232,180,80,0.08) 0%, transparent 40%),
        radial-gradient(circle at 50% 85%, rgba(200,100,140,0.06) 0%, transparent 35%);
}

body.theme-connector .topbar {
    background: rgba(254,245,238,0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: #F0E4DC;
}

body.theme-connector .brand-line {
    font-size: 15px;
    font-weight: 700;
    color: #E06B50;
    letter-spacing: 3px;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(224,107,80,0.2);
}

body.theme-connector .headline-row {
    font-weight: 500;
    font-size: 28px;
    color: #3D2B24;
    line-height: 1.6;
    letter-spacing: 1px;
}

body.theme-connector .headline-row em {
    font-weight: 800;
    color: #E06B50;
    font-style: normal;
}

body.theme-connector .landing-sub {
    color: #7A5F56;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    margin-bottom: 44px;
}

body.theme-connector .type-name {
    color: #E06B50;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 3px;
}

body.theme-connector .type-desc {
    color: #7A5F56;
    font-size: 13px;
    font-weight: 400;
}

body.theme-connector .cta-note {
    color: #7A5F56;
    font-size: 11px;
    white-space: nowrap;
}

body.theme-connector .topbar-hint {
    color: #A8938A;
    font-weight: 400;
}

body.theme-connector .topbar-btn {
    color: #E06B50;
    background: rgba(224,107,80,0.08);
    border-radius: 50px;
    font-weight: 500;
}

body.theme-connector .cta-button {
    background: linear-gradient(135deg, #E06B50, #E8945A);
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 16px;
    box-shadow: 0 6px 24px rgba(224,107,80,0.25);
    position: relative;
    overflow: hidden;
    border: none;
}

body.theme-connector .cta-button:active {
    background: linear-gradient(135deg, #C85A42, #D4804A);
}

body.theme-connector .site-credit {
    color: #A8938A;
    font-weight: 400;
}

/* --- 连接者入场动画：从四面八方汇聚到中心 --- */

body.theme-connector .brand-line {
    animation: conn-drop 0.7s ease both;
    animation-delay: 0.15s;
}

body.theme-connector .landing-headline .headline-row:first-child {
    animation: conn-from-left 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.4s;
}

body.theme-connector .landing-headline .headline-row:last-child {
    animation: conn-from-right 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.6s;
}

body.theme-connector .landing-sub {
    animation: conn-drop 0.6s ease both;
    animation-delay: 0.8s;
}

body.theme-connector .type-badge {
    animation: conn-drop 0.6s ease both;
    animation-delay: 1.0s;
}

body.theme-connector .landing-cta {
    animation: conn-scale-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 1.2s;
}

@keyframes conn-drop {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes conn-from-left {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes conn-from-right {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes conn-scale-in {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* --- 连接者背景：多个暖色光团交汇漂移 --- */

body.theme-connector .landing-compact::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(224,107,80,0.08) 0%, transparent 35%),
        radial-gradient(circle at 70% 55%, rgba(232,180,80,0.07) 0%, transparent 35%),
        radial-gradient(circle at 50% 80%, rgba(200,100,140,0.05) 0%, transparent 30%);
    pointer-events: none;
    animation: conn-blobs-a 10s ease-in-out infinite alternate;
}

body.theme-connector .landing-compact::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background:
        radial-gradient(circle at 65% 30%, rgba(224,107,80,0.06) 0%, transparent 30%),
        radial-gradient(circle at 35% 70%, rgba(232,180,80,0.06) 0%, transparent 30%);
    pointer-events: none;
    animation: conn-blobs-b 12s ease-in-out infinite alternate;
}

@keyframes conn-blobs-a {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%;
    }
    100% {
        background-position: 12% -8%, -10% 12%, 8% -6%;
    }
}

@keyframes conn-blobs-b {
    0% {
        background-position: 0% 0%, 0% 0%;
    }
    100% {
        background-position: -12% 10%, 10% -8%;
    }
}

/* --- 连接者 CTA 暖光呼吸 --- */

body.theme-connector .cta-button {
    animation: conn-btn-warmth 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

@keyframes conn-btn-warmth {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(224,107,80,0.2);
    }
    50% {
        box-shadow: 0 8px 35px rgba(224,107,80,0.35);
    }
}


/* =============================================
   4. 造物者 - 技术、工具、极客
   纯黑底 + 荧光绿，网格背景，代码工坊
   ============================================= */

body.theme-builder {
    --primary: #00E676;
    --primary-bg: rgba(0,230,118,0.1);
    --bg: #08080A;
    --card: #121214;
    --text: #E8E8E8;
    --text-secondary: #999;
    --text-light: #555;
    --border: #1E1E22;
    --user-bubble: #00E676;
}

body.theme-builder .landing-compact {
    background: #08080A;
    background-image:
        linear-gradient(rgba(0,230,118,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,230,118,0.025) 1px, transparent 1px);
    background-size: 32px 32px;
}

body.theme-builder .topbar {
    background: rgba(8,8,10,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: #1E1E22;
}

body.theme-builder .brand-line {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #00E676;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(0,230,118,0.2);
    display: inline-block;
}

body.theme-builder .headline-row {
    font-weight: 800;
    font-size: 34px;
    color: #E8E8E8;
    letter-spacing: 0;
    line-height: 1.4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}

body.theme-builder .headline-row em {
    color: #00E676;
    font-weight: 900;
    font-style: normal;
    text-shadow: 0 0 25px rgba(0,230,118,0.35);
}

body.theme-builder .landing-sub {
    color: #666;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
}

body.theme-builder .type-name {
    color: #00E676;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 4px;
    text-shadow: 0 0 15px rgba(0,230,118,0.25);
}

body.theme-builder .type-desc {
    color: #888;
    font-family: "SF Mono","Fira Code","Courier New",monospace;
    font-size: 12px;
    font-weight: 400;
}

body.theme-builder .cta-note {
    color: #666;
    font-family: "SF Mono","Fira Code","Courier New",monospace;
    font-size: 11px;
    white-space: nowrap;
}

body.theme-builder .topbar-hint {
    color: #555;
    font-family: "SF Mono","Fira Code","Courier New",monospace;
    font-weight: 400;
}

body.theme-builder .topbar-btn {
    color: #00E676;
    background: rgba(0,230,118,0.06);
    border: 1px solid rgba(0,230,118,0.2);
    border-radius: 4px;
    font-family: "SF Mono","Fira Code","Courier New",monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
}

body.theme-builder .cta-button {
    background: #00E676;
    color: #08080A;
    border-radius: 4px;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 16px;
    box-shadow: 0 0 30px rgba(0,230,118,0.15);
    position: relative;
    overflow: hidden;
    border: none;
}

body.theme-builder .cta-button:active {
    background: #00C864;
}

body.theme-builder .site-credit {
    color: #00E676;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    opacity: 0.45;
}

/* --- 造物者入场动画：像代码逐行编译 --- */

body.theme-builder .brand-line {
    animation: build-line 0.4s ease both;
    animation-delay: 0.1s;
}

body.theme-builder .landing-headline .headline-row:first-child {
    animation: build-line 0.35s ease both;
    animation-delay: 0.3s;
}

body.theme-builder .landing-headline .headline-row:last-child {
    animation: build-line 0.35s ease both;
    animation-delay: 0.45s;
}

body.theme-builder .landing-sub {
    animation: build-line 0.35s ease both;
    animation-delay: 0.6s;
}

body.theme-builder .type-badge {
    animation: build-line 0.35s ease both;
    animation-delay: 0.75s;
}

body.theme-builder .landing-cta {
    animation: build-line 0.4s ease both;
    animation-delay: 0.9s;
}

@keyframes build-line {
    from {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* --- 造物者背景：网格 + 扫描线 --- */

body.theme-builder .landing-compact::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,230,118,0.3), transparent);
    pointer-events: none;
    animation: build-scanline 4s linear infinite;
}

@keyframes build-scanline {
    0% { transform: translateY(-2px); opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

/* 网格交叉点闪烁 */
body.theme-builder .landing-compact::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 25% 30%, rgba(0,230,118,0.04) 0%, transparent 25%),
        radial-gradient(circle at 75% 65%, rgba(0,230,118,0.03) 0%, transparent 25%),
        radial-gradient(circle at 50% 50%, rgba(0,230,118,0.05) 0%, transparent 30%);
    pointer-events: none;
    animation: build-nodes 6s ease-in-out infinite alternate;
}

@keyframes build-nodes {
    0% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.4;
    }
}

/* --- 造物者 CTA 荧光脉冲 --- */

body.theme-builder .cta-button {
    animation: build-glow 2.5s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes build-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0,230,118,0.15), 0 4px 12px rgba(0,230,118,0.1);
    }
    50% {
        box-shadow: 0 0 40px rgba(0,230,118,0.3), 0 4px 20px rgba(0,230,118,0.2);
    }
}

/* --- 造物者 CTA 按钮扫光 --- */

body.theme-builder .cta-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    transform: translateX(-250%);
    animation: build-btn-sweep 4s ease-in-out infinite;
}

@keyframes build-btn-sweep {
    0%, 100% { transform: translateX(-250%); }
    50% { transform: translateX(375%); }
}


/* =============================================
   5. 操盘者 - 策略、全局、精准
   暖象牙底 + 深海军蓝 + 金色，高端商务质感
   告别暗黑色系，做出私董会/高端棋局的感觉
   ============================================= */

body.theme-strategist {
    --primary: #9A7B2E;
    --primary-bg: rgba(154,123,46,0.08);
    --bg: #ECEEF3;
    --card: #FFFFFF;
    --text: #1C2841;
    --text-secondary: #5A6478;
    --text-light: #7A8396;
    --border: #D8DBE3;
    --user-bubble: #9A7B2E;
}

body.theme-strategist .landing-compact {
    background: #ECEEF3;
    background-image:
        radial-gradient(ellipse at 50% 42%, rgba(154,123,46,0.08) 0%, transparent 50%);
}

body.theme-strategist .topbar {
    background: rgba(236,238,243,0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: #D8DBE3;
}

body.theme-strategist .brand-line {
    font-size: 15px;
    font-weight: 700;
    color: #7A6520;
    letter-spacing: 4px;
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 1.5px solid rgba(154,123,46,0.4);
}

body.theme-strategist .headline-row {
    font-weight: 500;
    font-size: 28px;
    color: #1C2841;
    letter-spacing: 2px;
    line-height: 1.6;
}

body.theme-strategist .headline-row em {
    font-weight: 800;
    color: #8A6E28;
    font-style: normal;
}

body.theme-strategist .landing-sub {
    color: #5A6478;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
}

body.theme-strategist .type-name {
    color: #7A6520;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 5px;
}

body.theme-strategist .type-desc {
    color: #5A6478;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
}

body.theme-strategist .cta-note {
    color: #7A8396;
    font-size: 11px;
    white-space: nowrap;
    font-weight: 400;
}

body.theme-strategist .topbar-hint {
    color: #94A0B4;
    font-weight: 400;
}

body.theme-strategist .topbar-btn {
    color: #7A6520;
    background: transparent;
    border: 1px solid rgba(154,123,46,0.35);
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 2px;
}

body.theme-strategist .cta-button {
    background: #1C2841;
    color: #D4B754;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 3px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(28,40,65,0.25);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

body.theme-strategist .cta-button:active {
    background: #15203A;
}

body.theme-strategist .site-credit {
    color: #7A7E8A;
    font-weight: 500;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* --- 操盘者背景：斜纹肌理 + 金色地平线 --- */

/* 精密斜纹 — 像高定西装面料的暗纹 */
body.theme-strategist .landing-compact::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        repeating-linear-gradient(
            -30deg,
            transparent,
            transparent 11px,
            rgba(28,40,65,0.055) 11px,
            rgba(28,40,65,0.055) 13px
        );
    pointer-events: none;
    animation: strat-texture-in 1.5s ease both;
    animation-delay: 0.2s;
}

@keyframes strat-texture-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 金色雷达扫描 — 操盘者的目光巡视全局 */
body.theme-strategist .landing-compact::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(154,123,46,0.04) 10deg,
        rgba(154,123,46,0.13) 28deg,
        rgba(154,123,46,0.04) 46deg,
        transparent 60deg,
        transparent 360deg
    );
    pointer-events: none;
    animation: strat-radar 15s linear infinite;
}

@keyframes strat-radar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- 操盘者入场动画：精准落位，每一步都算好的 --- */

body.theme-strategist .brand-line {
    animation: strat-precise 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 0.2s;
}

body.theme-strategist .landing-headline .headline-row:first-child {
    animation: strat-precise 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 0.5s;
}

body.theme-strategist .landing-headline .headline-row:last-child {
    animation: strat-precise 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 0.8s;
}

body.theme-strategist .landing-sub {
    animation: strat-precise 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 1.1s;
}

body.theme-strategist .type-badge {
    animation: strat-precise 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 1.4s;
}

body.theme-strategist .landing-cta {
    animation: strat-precise 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 1.7s;
}

@keyframes strat-precise {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- 操盘者 CTA 金色扫光 --- */

body.theme-strategist .cta-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: translateX(-200%);
    animation: strat-shine 5s ease-in-out infinite;
}

@keyframes strat-shine {
    0%, 100% { transform: translateX(-200%); }
    50% { transform: translateX(300%); }
}


/* =============================================
   6. 跨界者 - 多元、好奇、创意碰撞
   多色渐变流转 + 冷暖反向碰撞，跳跃入场，万花筒能量
   ============================================= */

body.theme-crosser {
    --primary: #8B5CF6;
    --primary-bg: rgba(139,92,246,0.08);
    --bg: #F5F0FA;
    --card: #FFFFFF;
    --text: #2E2246;
    --text-secondary: #6B5E86;
    --text-light: #9488AA;
    --border: #E8E0F2;
    --user-bubble: #8B5CF6;
}

body.theme-crosser .landing-compact {
    background: linear-gradient(135deg, #FDF4F0 0%, #F0EEFA 35%, #E8F4F0 65%, #FDF0E8 100%);
    background-size: 300% 300%;
    animation: crosser-flow 10s ease-in-out infinite;
}

@keyframes crosser-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body.theme-crosser .topbar {
    background: rgba(248,242,250,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: #E8E0F2;
}

body.theme-crosser .brand-line {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #5B4A7A;
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 2px solid #8B5CF6;
    border-image: linear-gradient(90deg, #E8724A, #8B5CF6, #00B4D8) 1;
}

body.theme-crosser .headline-row {
    font-weight: 600;
    font-size: 28px;
    color: #2E2246;
    line-height: 1.55;
    letter-spacing: 1px;
}

body.theme-crosser .headline-row em {
    font-weight: 800;
    background: linear-gradient(135deg, #E8724A, #8B5CF6, #00B4D8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
}

body.theme-crosser .landing-sub {
    color: #6B5E86;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
}

body.theme-crosser .type-name {
    color: #8B5CF6;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 3px;
}

body.theme-crosser .type-desc {
    color: #6B5E86;
    font-size: 13px;
    font-weight: 400;
}

body.theme-crosser .cta-note {
    color: #9488AA;
    font-size: 11px;
    white-space: nowrap;
}

body.theme-crosser .topbar-hint {
    color: #9488AA;
    font-weight: 400;
}

body.theme-crosser .topbar-btn {
    color: #8B5CF6;
    background: rgba(139,92,246,0.08);
    border-radius: 50px;
    font-weight: 500;
}

body.theme-crosser .cta-button {
    background: linear-gradient(135deg, #E8724A, #8B5CF6, #00B4D8);
    background-size: 300% 300%;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 16px;
    box-shadow: 0 6px 24px rgba(139,92,246,0.25);
    border: none;
    position: relative;
    overflow: hidden;
    animation: crosser-btn-flow 4.5s ease-in-out infinite;
}

@keyframes crosser-btn-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

body.theme-crosser .cta-button:active {
    transform: scale(0.97);
}

body.theme-crosser .site-credit {
    color: #8A7DAA;
    font-weight: 400;
    letter-spacing: 1px;
}

/* --- 跨界者背景：冷暖色系反向漂移，交叉碰撞 = 跨界 --- */

/* 暖色碰撞层 — 向右上漂移 */
body.theme-crosser .landing-compact::before {
    content: "";
    position: absolute;
    top: -15%; left: -15%; right: -15%; bottom: -15%;
    background:
        radial-gradient(ellipse at 20% 65%, rgba(232,114,74,0.16) 0%, transparent 38%),
        radial-gradient(ellipse at 80% 30%, rgba(255,170,40,0.12) 0%, transparent 35%),
        radial-gradient(ellipse at 55% 85%, rgba(232,80,80,0.08) 0%, transparent 30%);
    pointer-events: none;
    animation: crosser-drift-warm 7s ease-in-out infinite alternate;
}

@keyframes crosser-drift-warm {
    0% { transform: translate(-3%, 3%); }
    100% { transform: translate(3%, -3%); }
}

/* 冷色碰撞层 — 向左下漂移（反向交叉） */
body.theme-crosser .landing-compact::after {
    content: "";
    position: absolute;
    top: -15%; left: -15%; right: -15%; bottom: -15%;
    background:
        radial-gradient(ellipse at 70% 20%, rgba(139,92,246,0.16) 0%, transparent 38%),
        radial-gradient(ellipse at 15% 55%, rgba(0,180,216,0.13) 0%, transparent 35%),
        radial-gradient(ellipse at 50% 40%, rgba(200,100,220,0.06) 0%, transparent 30%);
    pointer-events: none;
    animation: crosser-drift-cool 9s ease-in-out infinite alternate;
}

@keyframes crosser-drift-cool {
    0% { transform: translate(3%, -2%); }
    100% { transform: translate(-3%, 2%); }
}

/* --- 跨界者入场动画：每个元素用不同方式入场 = 跨界精神 --- */

body.theme-crosser .brand-line {
    animation: crosser-in-drop 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.15s;
}

body.theme-crosser .landing-headline .headline-row:first-child {
    animation: crosser-in-left 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.35s;
}

body.theme-crosser .landing-headline .headline-row:last-child {
    animation: crosser-in-right 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.55s;
}

body.theme-crosser .landing-sub {
    animation: crosser-in-scale 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.75s;
}

body.theme-crosser .type-badge {
    animation: crosser-in-rotate 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.9s;
}

body.theme-crosser .landing-cta {
    animation: crosser-in-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 1.1s;
}

@keyframes crosser-in-drop {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes crosser-in-left {
    from { opacity: 0; transform: translateX(-25px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes crosser-in-right {
    from { opacity: 0; transform: translateX(25px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes crosser-in-scale {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes crosser-in-rotate {
    from { opacity: 0; transform: rotate(-5deg) scale(0.9); }
    to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes crosser-in-bounce {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}