*{margin: 0 auto;padding: 0;}
html,body{
    background: #eef2f5;
    font-size: 14px;
    color: #333!important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
html,body{
	background-color:#eef2f5;
	position: relative;
	overflow-x: hidden;
	min-height: 100vh;
}
@font-face {
	font-family:impact;
	src:url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/fonts/a07974d9a45376b8441d90005764beb0.eot);
	src:url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/fonts/a07974d9a45376b8441d90005764beb0.eot#iefix) format("embedded-opentype"),
	url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/fonts/b07c9855bd807ccc9d825cb0392c6ef8.woff) format("woff"),
	url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/fonts/1a0d82dfb49fff2d2a291d3dbce6c95c.ttf) format("truetype"),
	url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/fonts/d1e37bdd079d3151cc0edcc71d2c8f0f.svg) format("svg");
	font-weight:400;
	font-style:normal
   }
@font-face {
    font-family:DINBold;
    src:url(../fonts/dinbold-webfont.bc8aa63.woff);
    font-weight:400;
    font-style:normal
}
@font-face {
    font-family:DINBold;
    src:url(../fonts/DIN-Bold_0.otf);
    font-weight:400;
    font-style:normal
}
@font-face {
	font-family:DINBold;
	src:url(https://jddx.jd.com/finance/index/3.0.0/static/fonts/dinbold-webfont.bc8aa63.woff);
	font-weight:400;
	font-style:normal
}

/* =================== 新拟态时钟样式 =================== */
.today {
    width: 100%;
    height: auto;
    margin: 20px auto;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.clock {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 20px auto 0px;
    text-align: center;
    background: linear-gradient(145deg, #f0f0f0, #d9d9d9);
    border-radius: 50%;
    box-shadow: 15px 15px 30px #c4c4c4,
                -15px -15px 30px #ffffff,
                inset 5px 5px 10px rgba(255,255,255,0.5),
                inset -5px -5px 10px rgba(0,0,0,0.05);
    border: 8px solid #e6e6e6;
}

.clock ol {
    list-style-type: none;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    transform: scale(0.96);
}

.clock ol li::before {
    font-family: Helvetica;
    content: counter(labelCounter) "";
}

.clock ol li {
    counter-increment: labelCounter;
    position: absolute;
    font-size: 1.5em;
    color: #667eea;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.clock ol li:nth-child(1){right:73px;top:21px}
.clock ol li:nth-child(2){right:29px;top:64px}
.clock ol li:nth-child(3){right:12px;top:123px}
.clock ol li:nth-child(4){right:31px;bottom:64px}
.clock ol li:nth-child(5){right:73px;bottom:21px}
.clock ol li:nth-child(6){left:132px;bottom:5px}
.clock ol li:nth-child(7){left:73px;bottom:21px}
.clock ol li:nth-child(8){left:31px;bottom:65px}
.clock ol li:nth-child(9){left:12px;top:123px;}
.clock ol li:nth-child(10){left:27px;top:64px}
.clock ol li:nth-child(11){left:69px;top:22px}
.clock ol li:nth-child(12){left:126px; top:5px;}

.spot {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 25px;
    height: 25px;
    background: linear-gradient(145deg, #667eea, #764ba2);
    border-radius: 50%;
    z-index: 5;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

.HH {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    transform: rotate(0deg);
    z-index: 97;
    background: #5a5a5a;
}

.HH::before {
    width: 8px;
    height: 65px;
    border-radius: 4px;
    background: #5a5a5a;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%,0);
}

.MM {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    transform: rotate(0deg);
    z-index: 98;
    background: #667eea;
}

.MM:before {
    width: 5px;
    height: 95px;
    border-radius: 3px;
    background: #667eea;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%,0);
}

.SS {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    transform: rotate(0deg);
    z-index: 99;
    background: #764ba2;
}

.SS:before {
    width: 2px;
    height: 135px;
    border-radius: 2px;
    background: #764ba2;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%,0);
    box-shadow: 2px 0px 5px rgba(118, 75, 162, 0.3);
}

.HH::after, .HH::before,
.MM::after, .MM::before,
.SS::after, .SS::before {
    content: "";
    display: block;
    position: absolute;
}

.time span,
.day span {
    margin: 0px 2px;
    font-family: DINBold;
    font-weight: lighter;
    font-size: 24px;
    vertical-align: middle;
    color: #5a5a5a;
}

.time p{
    vertical-align: middle;
}

.time p:nth-child(1){
    font-size: 18px;
    color: #667eea;
    font-weight: 600;
}

.time p span{
    font-family: DINBold;
    font-weight: lighter;
    font-size: 36px;
    color: #764ba2;
}

.sydate {
    margin: 15px auto;
    font-size: 14px;
    color: #5a5a5a;
}

.sydate span{
    font-family: DINBold;
    font-weight: lighter;
    margin: 0px 2px;
    color: #667eea;
}

.date {
    position: absolute;
    top: 65px;
    left: 0;
    right: 0;
    color: #667eea;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

.times {
    position: absolute;
    bottom: 65px;
    left: 0;
    right: 0;
    color: #764ba2;
    text-align: left;
    font-size: 15px;
    width: 100px;
}

.times span,
.date span{
    margin: 0px 2px;	
    color: #667eea;
    font-family: DINBold;
    font-weight: lighter;
}

.week {
    position: absolute;
    top: 125px;
    right: 40px;
    color: #667eea;
    text-align: center;
    width: 52px;
    height: 22px;
    line-height: 21px;
    font-size: 12px;
    z-index: 0;
    background: #e6e6e6;
    border-radius: 10px;
    box-shadow: inset 3px 3px 6px #c4c4c4,
                inset -3px -3px 6px #ffffff;
}

.year {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    color: rgba(102, 126, 234, 0.1);
    text-align: center;
    font-size: 80px;
    font-family: impact;
    z-index: 1;
}

/* =================== 倒计时动画 =================== */
@keyframes rotateOutDownLeft {
    0% {
        transform-origin: left bottom;
        opacity: 1;
    }
    to {
        transform-origin: left bottom;
        transform: rotate(45deg) translateY(20px);
        opacity: 0;
    }
}

.Lose{
    display: inline-block;
    animation: rotateOutDownLeft 1000ms infinite;
    color: #764ba2;
}

/* =================== 飞行弹幕容器 =================== */
.Barrage {
    position: fixed;
    width: 100%;
    height: 100vh;
    margin: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    overflow: visible;
    pointer-events: none;
}

/* =================== 弹幕输入框 =================== */
.barrage-input {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(230, 230, 230, 0.85);
    backdrop-filter: blur(10px);
    z-index: 9999999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.barrage-input.show {
    display: flex;
    opacity: 1;
}

.barrage-input .barrage-content {
    background: #e6e6e6;
    width: 90%;
    max-width: 420px;
    border-radius: 30px;
    padding: 30px;
    box-shadow: 20px 20px 40px #c4c4c4,
                -20px -20px 40px #ffffff,
                inset 5px 5px 10px rgba(255,255,255,0.5),
                inset -5px -5px 10px rgba(0,0,0,0.05);
    transform: translateY(0) scale(0.95);
    transition: transform 0.3s ease;
}

.barrage-input.show .barrage-content {
    transform: translateY(0) scale(1);
    animation: neuFloat 0.6s ease;
}

@keyframes neuFloat {
    0% {
        transform: translateY(30px) scale(0.9);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.barrage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(102, 126, 234, 0.1);
}

.barrage-title {
    font-size: 20px;
    font-weight: 700;
    color: #5a5a5a;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
}

.barrage-close {
    cursor: pointer;
    color: #999;
    font-size: 22px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e6e6e6;
    box-shadow: 3px 3px 6px #c4c4c4,
                -3px -3px 6px #ffffff;
    transition: all 0.3s ease;
}

.barrage-close:hover {
    color: #667eea;
    box-shadow: inset 3px 3px 6px #c4c4c4,
                inset -3px -3px 6px #ffffff;
}

/* 输入框样式 */
.input-group {
    margin-bottom: 0;
}

.input-row {
    position: relative;
    margin-bottom: 20px;
}

.qq-input {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 15px;
    font-size: 15px;
    box-sizing: border-box;
    background: #e6e6e6;
    color: #5a5a5a;
    box-shadow: inset 5px 5px 10px #c4c4c4,
                inset -5px -5px 10px #ffffff;
    transition: all 0.3s ease;
}

.qq-input::placeholder {
    color: #a0a0a0;
}

.message-input {
    width: 100%;
    min-height: 120px;
    padding: 16px 20px;
    border: none;
    border-radius: 15px;
    font-size: 15px;
    line-height: 1.5;
    resize: vertical;
    background: #e6e6e6;
    color: #5a5a5a;
    box-sizing: border-box;
    margin-bottom: 20px;
    box-shadow: inset 5px 5px 10px #c4c4c4,
                inset -5px -5px 10px #ffffff;
    transition: all 0.3s ease;
}

.message-input::placeholder {
    color: #a0a0a0;
}

.qq-input:focus,
.message-input:focus {
    outline: none;
    box-shadow: inset 3px 3px 6px #c4c4c4,
                inset -3px -3px 6px #ffffff,
                0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* 清空按钮 */
.clear-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #ff6b6b;
    font-size: 13px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
    background: none;
    border: none;
    padding: 8px 12px;
    border-radius: 10px;
    background: #e6e6e6;
    box-shadow: 3px 3px 6px #c4c4c4,
                -3px -3px 6px #ffffff;
}

.clear-btn:hover {
    color: #ff5252;
    box-shadow: inset 3px 3px 6px #c4c4c4,
                inset -3px -3px 6px #ffffff;
}

/* 按钮组样式 */
.button-group {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    gap: 15px;
}

.send-btn {
    flex: 1;
    height: 50px;
    background: linear-gradient(145deg, #667eea, #764ba2);
    border-radius: 15px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    color: white;
    border: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 5px 5px 10px #c4c4c4,
                -5px -5px 10px #ffffff;
}

.send-btn:hover {
    background: linear-gradient(145deg, #764ba2, #667eea);
    transform: translateY(-2px);
    box-shadow: 7px 7px 14px #c4c4c4,
                -7px -7px 14px #ffffff;
}

.send-btn:active {
    transform: translateY(0);
    box-shadow: inset 5px 5px 10px rgba(0,0,0,0.1);
}

.send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 3px 3px 6px #c4c4c4,
                -3px -3px 6px #ffffff;
}

/* 新拟态发送弹幕按钮 */
.send-barrage-btn {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 56px;
    background: linear-gradient(135deg, #6c5ce7, #00cec9);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    z-index: 100;
    box-shadow: 
        10px 10px 20px rgba(108, 92, 231, 0.3),
        -10px -10px 20px rgba(255, 255, 255, 0.8),
        0 8px 25px rgba(108, 92, 231, 0.2);
    transition: all 0.3s ease;
    border: none;
    overflow: hidden;
    position: relative;
}

.send-barrage-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.send-barrage-btn:hover::before {
    left: 100%;
}

.send-barrage-btn:hover {
    transform: translateX(-50%) translateY(-3px);
    box-shadow: 
        12px 12px 24px rgba(108, 92, 231, 0.4),
        -12px -12px 24px rgba(255, 255, 255, 0.8),
        0 10px 30px rgba(108, 92, 231, 0.3);
}

.send-barrage-btn:active {
    transform: translateX(-50%) translateY(0);
    box-shadow: 
        inset 5px 5px 10px rgba(0, 0, 0, 0.2),
        inset -5px -5px 10px rgba(255, 255, 255, 0.1);
}

.cancel-btn {
    flex: 0.5;
    height: 50px;
    background: #e6e6e6;
    border-radius: 15px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    color: #5a5a5a;
    border: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 5px 5px 10px #c4c4c4,
                -5px -5px 10px #ffffff;
}

.cancel-btn:hover {
    background: #e6e6e6;
    color: #667eea;
    transform: translateY(-2px);
    box-shadow: 7px 7px 14px #c4c4c4,
                -7px -7px 14px #ffffff;
}

.cancel-btn:active {
    transform: translateY(0);
    box-shadow: inset 5px 5px 10px #c4c4c4,
                inset -5px -5px 10px #ffffff;
}

/* =================== 飞行弹幕样式 =================== */
.barrage-item {
    position: absolute;
    background: #e6e6e6;
    backdrop-filter: blur(5px);
    border-radius: 20px;
    padding: 12px 16px 12px 70px;
    min-width: 200px;
    max-width: 300px;
    right: -320px;
    animation: barrageMove linear forwards;
    box-shadow: 8px 8px 16px rgba(196, 196, 196, 0.5),
                -8px -8px 16px rgba(255, 255, 255, 0.8),
                inset 3px 3px 6px rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 999999;
    display: flex;
    align-items: center;
    pointer-events: auto;
    max-width: 85vw;
}

.barrage-avatar {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    object-fit: cover;
    box-shadow: 3px 3px 6px #c4c4c4,
                -3px -3px 6px #ffffff;
}

.barrage-content {
    flex: 1;
    min-width: 0;
}

.barrage-message {
    color: #5a5a5a;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 4px;
    word-break: break-word;
    font-weight: 600;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.barrage-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #667eea;
}

.barrage-city {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 10px;
    display: inline-block;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

.barrage-time {
    color: #764ba2;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

@keyframes barrageMove {
    0% {
        right: -320px;
        opacity: 0;
        transform: translateY(0);
    }
    10% {
        opacity: 1;
        transform: translateY(0);
    }
    90% {
        right: 100%;
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        right: 100%;
        opacity: 0;
        transform: translateY(0);
    }
}

/* 手机端响应式调整 */
@media screen and (max-width: 768px) {
    .barrage-item {
        padding: 10px 14px 10px 60px;
        min-width: 180px;
        max-width: 85vw;
        right: -280px;
    }
    
    .barrage-avatar {
        width: 42px;
        height: 42px;
        left: 10px;
    }
    
    .barrage-message {
        font-size: 12px;
        -webkit-line-clamp: 2;
    }
    
    .barrage-city {
        font-size: 9px;
        padding: 2px 6px;
        max-width: 70px;
    }
    
    .barrage-time {
        font-size: 9px;
    }
    
    .today {
        padding: 15px;
    }
    
    .clock {
        width: 250px;
        height: 250px;
    }
    
    .send-barrage-btn {
        width: 180px;
        height: 50px;
        font-size: 15px;
    }
}

@media screen and (max-width: 480px) {
    .barrage-item {
        padding: 8px 12px 8px 55px;
        min-width: 160px;
        max-width: 90vw;
        right: -250px;
    }
    
    .barrage-avatar {
        width: 38px;
        height: 38px;
        left: 8px;
    }
    
    .barrage-message {
        font-size: 11px;
        line-height: 1.3;
    }
    
    .barrage-info {
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .clock {
        width: 220px;
        height: 220px;
    }
    
    .time p span {
        font-size: 28px;
    }
    
    .send-barrage-btn {
        width: 160px;
        height: 46px;
        font-size: 14px;
        bottom: 20px;
    }
}

/* =================== 保留原有样式（未修改部分） =================== */
.message {
	width: 60%;
	height: 50px;
	border-radius: 25px;
	text-align: center;
	line-height: 48px;
	font-size: 15px;
	cursor: pointer;
	background: #eef2f5;
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.08),
        -8px -8px 16px rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #6c5ce7;
    font-weight: 600;
    transition: all 0.3s ease;
}

.message:hover {
    transform: translateY(-2px);
    box-shadow: 
        12px 12px 20px rgba(0, 0, 0, 0.08),
        -12px -12px 20px rgba(255, 255, 255, 0.8);
}

.message:active {
    transform: translateY(0);
    box-shadow: 
        inset 3px 3px 6px rgba(0, 0, 0, 0.08),
        inset -3px -3px 6px rgba(255, 255, 255, 0.8);
}

.key {
	position: fixed;
	width: 100%;
	height: 200px;
	padding: 40px 20px 20px 20px;
	box-sizing: border-box;
	background: white;
	z-index: 20;
	bottom: -400px;
	border-radius: 20px 20px 0px 0px;
	transition: all 300ms;
}
.keys{
	bottom: 0px;
	animation: keys 300ms ease;
    -webkit-animation: keys 300ms ease;
}
@-webkit-keyframes keys {
	0% {
		transform: translateY(400px);
	}
	100% {
		transform: translateY(0px);
	}
}
@keyframes keys {
	0% {
		transform: translateY(400px);
	}
	100% {
		transform: translateY(0px);
	}
}

.van-field__control {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: #323233;
	text-align: left;
	background-color: transparent;
	border: 0;
	resize: none;
	min-height: 100px;
	font-size: 16px;
}
.buts {
	width: 80%;
	height: 42px;
	background: linear-gradient(135deg, #6c5ce7, #00cec9);
	border-radius: 21px;
	line-height: 42px;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
    border: none;
    color: white;
    font-weight: 600;
    box-shadow: 
        6px 6px 12px rgba(108, 92, 231, 0.2),
        -6px -6px 12px rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.buts:hover {
    transform: translateY(-2px);
    box-shadow: 
        8px 8px 16px rgba(108, 92, 231, 0.3),
        -8px -8px 16px rgba(255, 255, 255, 0.8);
}

.buts:active {
    transform: translateY(0);
    box-shadow: 
        inset 3px 3px 6px rgba(0, 0, 0, 0.1),
        inset -3px -3px 6px rgba(255, 255, 255, 0.5);
}

.iocnBox {
	position: absolute;
	width: 100%;
	height: 40px;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	color: #333;
	text-align: right;
	padding-right: 20px;
	line-height: 40px;
	cursor: pointer;
}
.iocnBox i {
	font-size: 18px;
	color: #909399;
}
.remove{
	animation-fill-mode: forwards;
	animation: remove 300ms ease;
    -webkit-animation: remove 300ms ease;
}
@-webkit-keyframes remove {
	0% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(400px);
	}
}
@keyframes remove {
	0% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(400px);
	}
}

@keyframes Barrag
{
    0% {right: -200px;opacity: 1;}
    80% {right: 1120px;opacity: 1;}
    100% {right: 1400px;opacity: 0;}
}
 
@-webkit-keyframes Barrag
{
    0% {right: -200px;opacity: 1;}
    80% {right: 1120px;opacity: 1;}
    100% {right: 1400px;opacity: 0;}
}
.B-span2{
	top: 100px!important;
	color: #ff0!important;
	animation: Barrag 6s linear infinite!important;
	-webkit-animation: Barrag 6s linear infinite!important;
}
@keyframes Barragss
{
    0% {right: 0px;opacity: 1;}
    80% {right: 1120px;opacity: 1;}
    100% {right: 1400px;opacity: 0;}
}
 
@-webkit-keyframes Barragss
{
    0% {right: 0px;opacity: 1;}
    80% {right: 1120px;opacity: 1;}
    100% {right: 1400px;opacity: 0;}
}

.Tips {
	background: rgba(108, 92, 231, 0.95);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 120px;
	height: 45px;
	border-radius: 12px;
	line-height: 45px;
	text-align: center;
    color: white;
    font-weight: 500;
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.1),
        -8px -8px 16px rgba(255, 255, 255, 0.1);
    z-index: 99999999;
}

.empty {
	position: absolute;
	width: 40px;
	height: 30px;
	top: 38px;
	right: 15px;
	margin: auto;
	color: #ff0000;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	opacity: 0;
}
.Tipss{
	background: rgba(253, 121, 168, 0.95);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 200px;
	height: 45px;
	border-radius: 12px;
	line-height: 45px;
	text-align: center;
    color: white;
    font-weight: 500;
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.1),
        -8px -8px 16px rgba(255, 255, 255, 0.1);
    z-index: 99999999;
}

/* =================== 新拟态音乐播放器 =================== */
.music {
	width: 320px;
	margin: 30px auto 15px auto;
	height: 45px;
    background: #eef2f5;
    border-radius: 12px;
    padding: 10px 15px;
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.08),
        -8px -8px 16px rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.music audio {
	background: none;
	width: 100%;
	height: 100%;
    border-radius: 8px;
}
.music marquee {
	font-size: 13px;
	color: #6c5ce7;
	margin-top: 5px;
    font-weight: 500;
}

/* =================== 弹幕列表容器 =================== */
.barrage-list-container {
    width: 90%;
    max-width: 420px;
    margin: 20px auto 40px;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid #e0e0e0;
    height: 340px;
    position: relative;
    z-index: 30;
}

.barrage-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #6750A4, #7B61FF);
    border-bottom: 1px solid #e0e0e0;
}

.barrage-list-header h3 {
    color: white;
    font-size: 18px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.barrage-list-header h3 .iconfont {
    font-size: 20px;
    color: white;
}

.barrage-count {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: white;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 16px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.barrage-list-wrapper {
    height: 280px;
    overflow: hidden;
    position: relative;
    background: #f8f9fa;
}

.barrage-list {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    transition: transform 0.3s linear;
    padding: 8px 0;
}

/* 弹幕列表项样式（移除QQ号版本） */
.barrage-list-item {
    display: flex;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    background: white;
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(10px);
    margin: 0 12px 8px 12px;
    border-radius: 16px;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 2px 6px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.barrage-list-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #6750A4, #7B61FF);
    border-radius: 2px;
}

.barrage-list-item:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 6px 18px rgba(0, 0, 0, 0.04);
}

.barrage-list-item-avatar {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    margin-right: 16px;
    flex-shrink: 0;
    border: 2px solid #f0f0f0;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.barrage-list-item-content {
    flex: 1;
    min-width: 0;
}

/* 修改头部布局：移除QQ号，只保留消息和时间 */
.barrage-list-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.barrage-list-item-message {
    color: #333;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 12px;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 500;
    flex: 1;
    margin-right: 12px;
}

.barrage-list-item-time {
    color: #666;
    font-size: 13px;
    flex-shrink: 0;
    background: #f8f9fa;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
    margin-top: 2px;
}

/* 底部信息：只保留城市和IP，移除QQ号 */
.barrage-list-item-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* QQ号相关样式已完全移除 */
.barrage-list-item-city {
    background: linear-gradient(135deg, #6750A4, #7B61FF);
    color: white;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 12px;
    display: inline-block;
    font-weight: 500;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(103, 80, 164, 0.2);
}

.barrage-list-item-ip {
    color: #888;
    font-size: 12px;
    background: #f8f9fa;
    padding: 5px 10px;
    border-radius: 10px;
    font-weight: 500;
    border: 1px solid #eee;
}

/* 空状态样式 */
.barrage-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 220px;
    color: #888;
    font-size: 15px;
    background: white;
    margin: 12px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.barrage-list-empty .iconfont {
    font-size: 56px;
    margin-bottom: 20px;
    color: #e0e0e0;
    opacity: 0.7;
}

/* 加载中样式 */
.barrage-list-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 220px;
    color: #666;
    font-size: 15px;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid #e0e0e0;
    border-top-color: #6750A4;
    border-radius: 50%;
    animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 滚动条样式 */
.barrage-list-wrapper::-webkit-scrollbar {
    width: 6px;
}

.barrage-list-wrapper::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 3px;
}

.barrage-list-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #6750A4, #7B61FF);
    border-radius: 3px;
}

.barrage-list-wrapper::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #7B61FF, #6750A4);
}