.custom-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    gap: 8px; 
    width: max-content;
}

.custom-logo-icon {
    width: var(--zcl-icon-size); 
    height: var(--zcl-icon-size);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-logo-icon svg,
.custom-logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: 50% 50%;
    will-change: transform;
    filter: drop-shadow(0px 2px 6px rgba(252, 73, 86, 0.25));
}

.custom-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: auto; 
    gap: var(--zcl-title-gap, 6px); 
}

/* 完美接管字体注入 */
.custom-logo-main {
    font-family: var(--zcl-main-font); 
    font-size: var(--zcl-main-size, 19px); /* 替换写死的 19px */
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1.1;
    color: var(--zcl-main-color);
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-bottom: 2px;
}

.custom-logo-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--zcl-sub-size, 8px); /* 替换写死的 8px */
    font-weight: 700;
    color: var(--zcl-sub-color); 
    letter-spacing: 3.5px;
    line-height: 1;
    display: flex;
    justify-content: space-between;
}

.custom-logo-wrapper .word {
    display: inline-block;
    will-change: transform, opacity, color, text-shadow;
}

.spotlight-wrapper {
    position: relative;
    display: inline-block;
}
.spotlight-wrapper .sl-base {
    position: relative;
    display: inline-block;
    opacity: 0.25; 
}
.spotlight-wrapper .sl-layer {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    color: inherit;
    pointer-events: none; 
}
.sl-1 { animation: sl_clip1 calc(3.5s / var(--zcl-text-speed, 1)) infinite alternate ease-in-out; filter: blur(1px); }
.sl-2 { animation: sl_clip2 calc(4.5s / var(--zcl-text-speed, 1)) infinite alternate ease-in-out; filter: blur(0.5px); }
.sl-3 { animation: sl_clip3 calc(5.5s / var(--zcl-text-speed, 1)) infinite alternate ease-in-out; filter: blur(1.5px); }

@keyframes sl_clip1 {
    0% { clip-path: circle(30% at 0% 0%); }
    25% { clip-path: circle(40% at 100% 20%); }
    50% { clip-path: circle(20% at 50% 50%); }
    75% { clip-path: circle(35% at 0% 100%); }
    100% { clip-path: circle(45% at 100% 100%); }
}
@keyframes sl_clip2 {
    0% { clip-path: circle(25% at 100% 0%); }
    25% { clip-path: circle(35% at 0% 20%); }
    50% { clip-path: circle(45% at 50% 50%); }
    75% { clip-path: circle(25% at 100% 100%); }
    100% { clip-path: circle(35% at 0% 100%); }
}
@keyframes sl_clip3 {
    0% { clip-path: circle(40% at 50% -20%); }
    25% { clip-path: circle(20% at 100% 50%); }
    50% { clip-path: circle(30% at 0% 50%); }
    75% { clip-path: circle(40% at 50% 120%); }
    100% { clip-path: circle(20% at 50% 50%); }
}

.text-effect-glitch .word {
    position: relative;
    display: inline-block;
    animation: glitch-skew calc(4s / var(--zcl-text-speed, 1)) infinite;
}
.text-effect-glitch .word::before,
.text-effect-glitch .word::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 0.8;
    pointer-events: none;
}
.text-effect-glitch .word::before {
    animation: glitch-1 calc(0.8s / var(--zcl-text-speed, 1)) infinite linear alternate-reverse;
    color: inherit;
    text-shadow: 2px 0 0 rgba(78, 158, 255, 0.8), -2px 0 0 rgba(0, 255, 0, 0.8);
    z-index: -1;
}
.text-effect-glitch .word::after {
    animation: glitch-2 calc(0.8s / var(--zcl-text-speed, 1)) infinite linear alternate-reverse;
    color: inherit;
    text-shadow: 2px 0 0 rgba(233, 69, 96, 0.8), -2px 0 0 rgba(255, 255, 0, 0.8);
    z-index: -2;
}

@keyframes glitch-skew {
    0%, 100% { transform: skew(0deg); }
    2% { transform: skew(2deg); }
    4% { transform: skew(-2deg); }
    6% { transform: skew(1deg); }
    8% { transform: skew(-1deg); }
    10%, 90% { transform: skew(0deg); }
}
@keyframes glitch-1 {
    0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); opacity: .8; }
    10% { clip-path: inset(20% 0 30% 0); transform: translate(-1.5px, 0.5px); opacity: 1; }
    20% { clip-path: inset(10% 0 60% 0); transform: translate(1.5px, -0.5px); opacity: .6; }
    30% { clip-path: inset(40% 0 40% 0); transform: translate(-1.5px, 1.5px); opacity: 1; }
    40% { clip-path: inset(70% 0 10% 0); transform: translate(1.5px, -1.5px); opacity: .7; }
    50% { clip-path: inset(30% 0 50% 0); transform: translate(-0.5px, 0.5px); opacity: .9; }
    60% { clip-path: inset(50% 0 30% 0); transform: translate(0.5px, -0.5px); opacity: .5; }
    70% { clip-path: inset(80% 0 10% 0); transform: translate(-1.5px, 1.5px); opacity: .8; }
    80% { clip-path: inset(15% 0 70% 0); transform: translate(1.5px, -1.5px); opacity: 1; }
}
@keyframes glitch-2 {
    0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); opacity: .8; }
    10% { clip-path: inset(60% 0 20% 0); transform: translate(1.5px, -0.5px); opacity: .6; }
    20% { clip-path: inset(30% 0 50% 0); transform: translate(-1.5px, 0.5px); opacity: 1; }
    30% { clip-path: inset(10% 0 70% 0); transform: translate(1.5px, -1.5px); opacity: .7; }
    40% { clip-path: inset(40% 0 40% 0); transform: translate(-1.5px, 1.5px); opacity: .9; }
    50% { clip-path: inset(70% 0 10% 0); transform: translate(0.5px, -0.5px); opacity: .5; }
    60% { clip-path: inset(20% 0 60% 0); transform: translate(-0.5px, 0.5px); opacity: 1; }
    70% { clip-path: inset(50% 0 30% 0); transform: translate(1.5px, -1.5px); opacity: .8; }
    80% { clip-path: inset(80% 0 10% 0); transform: translate(-1.5px, 1.5px); opacity: .6; }
}

.text-effect-glass .custom-logo-main { overflow: hidden; }
.text-effect-glass .custom-logo-main::after {
    content: ''; position: absolute; top: 0; left: -100px;
    width: 35px; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg); 
    animation: textGlassShine calc(4s / var(--zcl-text-speed, 1)) ease-in-out infinite; 
    pointer-events: none;
}
@keyframes textGlassShine {
    0% { left: -50px; }
    20% { left: 120%; }
    100% { left: 120%; }
}

.dark-theme .custom-logo-main .word,
.dark-theme .custom-logo-main { color: #FFFFFF !important; text-shadow: none !important; }
.dark-theme .text-effect-glass .custom-logo-main::after {
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
}