/* bucaicai 模板样式（精简） */
body{font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;background:#f6f8fa;color:#222;margin:0}

#body-wrap{max-width:1000px;margin:20px auto;padding:12px}
nav#nav{height:160px;border-radius:10px;background-image:url('https://api.ixiaowai.cn/api/api.php');background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;padding:16px;color:#fff;position:relative}
.not_index_bg::after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;border-radius:10px;background:linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.18));pointer-events:none;z-index:1}
#page_site-info{position:relative;z-index:2;width:100%;display:flex;align-items:center;justify-content:center}
#site-title{width:100%;display:flex;align-items:center;justify-content:center}
.datetime-display{font-family:'Poppins', 'Noto Sans SC', sans-serif;font-size:52px;font-weight:700;color:#fff;text-shadow:0 3px 8px rgba(0,0,0,0.4);letter-spacing:2px;line-height:1.3;display:flex;flex-direction:column;align-items:center;gap:8px}
.date-line{font-family:'Noto Sans SC', sans-serif;font-size:48px;font-weight:700;letter-spacing:3px}
.time-line{font-family:'Poppins', sans-serif;font-size:56px;font-weight:300;letter-spacing:2px}
.blogtitle{font-size:20px;font-weight:700}
.layout_page{display:grid;grid-template-columns:260px 1fr 320px;gap:18px;align-items:start}
.aside_content{width:100%}
.card-widget{background:linear-gradient(180deg,#ffffff,#fbfbfb);border-radius:8px;padding:12px;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.card-info-avatar .avatar-img{width:88px;height:88px;border-radius:50%;display:block;margin:6px auto}
.author-info__name{text-align:center;font-weight:700;margin-top:6px}
.author-info__description{text-align:center;color:#666;font-size:13px}
.card-info-social-icons{margin-top:8px;display:flex;justify-content:center;align-items:center;gap:12px}
.card-info-social-icons .social-icon{display:inline-flex;align-items:center;gap:8px;margin:0 6px;color:#333;text-decoration:none}
.card-info-social-icons .social-icon .social-link-text{font-size:14px;color:#333;margin-left:4px}
.card-info-social-icons .social-icon:hover{color:#2b8ae5}

/* 联系按钮样式 */
.contact-btn{background:transparent;color:#2b8ae5;padding:7px 12px;border-radius:999px;border:1px solid rgba(43,138,229,0.18);transition:all .14s ease;box-shadow:none}
.contact-btn i{margin-right:6px}
.contact-btn:hover{background:rgba(43,138,229,0.06);transform:translateY(-2px);color:#1f6fc4}
.contact-btn:focus{outline:2px solid rgba(43,138,229,0.12);outline-offset:2px}
.article-container{background:linear-gradient(180deg,#ffffff,#fcfcfc);padding:18px;border-radius:8px}

/* 右侧博文面板 */
.right-panel{width:100%}
.right-panel .panel-card{background:#fff;border-radius:8px;padding:14px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.right-panel h3{margin:4px 0 12px 0;font-size:18px}
.projects-header{display:flex;justify-content:space-between;align-items:center}
.projects-header h3{margin:0}
.projects-header .view-all{color:#2b8ae5;font-weight:700;text-decoration:none;padding:6px 10px;border-radius:8px;background:rgba(43,138,229,0.06);transition:all .16s ease;font-size:14px}
.projects-header .view-all:hover{background:rgba(43,138,229,0.12);box-shadow:0 4px 12px rgba(43,138,229,0.08);transform:translateY(-2px)}
.projects-grid{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.proj-card{border-radius:8px;overflow:hidden;border:1px solid #eee;background:#fff;display:flex;flex-direction:column}
.proj-thumb{overflow:hidden;height:220px}
.proj-thumb img{width:100%;height:220px;object-fit:cover;display:block;border-bottom:1px solid #f0f0f0}

/* status display for small previews */
.proj-thumb.proj-status{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px;box-sizing:border-box;height:auto}
.proj-thumb.proj-status img{width:100%;height:auto;border-radius:6px}
.proj-status__info{display:flex;align-items:center;gap:10px;width:100%}

/* 夜间模式设置开关样式 */
.setting-switch {
	margin: 18px 0 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.setting-switch .switch-label {
	margin-right: 10px;
	font-size: 15px;
	color: #888;
}
.switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
}
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	border-radius: 24px;
	transition: background 0.2s;
}
.slider:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 2px;
	bottom: 2px;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0,0,0,.08);
	transition: transform 0.2s;
}
.switch input:checked + .slider {
	background-color: #2b8ae5;
}
.switch input:checked + .slider:before {
	transform: translateX(20px);
}
.status-dot{width:14px;height:14px;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,0.06);flex:0 0 auto}
.status-online{background:#48c774}
.status-offline{background:#e55353}
.status-text{font-weight:700;color:#333}

@media (max-width:480px){
	.proj-thumb{height:220px}
}
.proj-body{padding:16px}
.proj-title{margin:0 0 8px 0;font-size:18px}
.hot-badge{display:inline-block;background:#e55353;color:#fff;font-size:11px;padding:2px 6px;border-radius:999px;margin-left:8px;vertical-align:middle;font-weight:700;line-height:1}
.new-badge{display:inline-block;background:#48c774;color:#fff;font-size:11px;padding:2px 6px;border-radius:999px;margin-left:8px;vertical-align:middle;font-weight:700;line-height:1}
.proj-desc{color:#666;font-size:14px;margin-bottom:10px}
.proj-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.proj-tags span{background:#f1f5f9;padding:6px 10px;border-radius:999px;font-size:12px;color:#344}
.proj-btn{display:block;padding:10px 12px;border-radius:8px;border:1px solid #e6e6e6;text-decoration:none;color:#111;background:#ffffff;width:100%;text-align:center;box-shadow:0 2px 6px rgba(20,20,20,0.04);transition:all .18s ease;box-sizing:border-box}
.proj-btn:hover{background:#f7f9ff;border-color:#cfe0ff;transform:translateY(-2px);box-shadow:0 6px 18px rgba(32,78,164,0.08)}
.proj-empty{text-align:center;padding:36px 8px;font-size:16px;color:#666}

@media (max-width:900px){
	.layout_page{grid-template-columns:1fr;}
	.aside_content{order:1}
	.right-panel{order:2}
	#page, article{order:3}
}
/* 技能区域已移除 */
.tool a{color:#2b8ae5}
/* Hobbies pills */
.hobbies{display:flex;flex-wrap:wrap;gap:8px}
.hobby-pill{background:#f1f5f9;padding:6px 10px;border-radius:999px;color:#344;font-weight:600}

/* Friend links (vertical) */
.friend-links{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.friend-link{padding:10px;border-radius:8px;background:#fff;border:1px solid #eee}
.friend-link a{color:#2b8ae5;font-weight:700;text-decoration:none}
.friend-desc{color:#888;font-size:12px;margin-top:6px}
.friend-favicon{max-height:64px;height:auto;width:auto;vertical-align:middle;margin-right:6px;display:inline-block}
#footer{margin-top:16px;text-align:center;color:#777;font-size:13px}

/* 可点击卡片链接样式 */
.card-link{display:block;color:inherit;text-decoration:none;border-radius:8px}
.card-link .card-widget{transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.card-link:hover .card-widget,.card-link:focus .card-widget{transform:translateY(-6px);box-shadow:0 10px 26px rgba(32,78,164,0.06);border-color:rgba(43,138,229,0.12)}

/* 卡片翻转效果 - 3D翻转动画 */
.card-flip-container{
	display:block;
	color:inherit;
	text-decoration:none;
	border-radius:8px;
	cursor:pointer;
	perspective:1000px;
	outline:none
}
.card-flip-inner{
	position:relative;
	width:100%;
	transition: transform 0.6s ease-in-out;
	transform-style: preserve-3d;
	/* 性能提示：告诉浏览器此属性可能会改变 */
	will-change: transform;
}
.card-flip-container.flipped .card-flip-inner{
	transform:rotateY(180deg)
}
.card-flip-front,.card-flip-back{
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	width:100%;
	display:block
}
.card-flip-front{
	transform:rotateY(0deg)
}
.card-flip-back{
	position:absolute;
	top:0;
	left:0;
	transform:rotateY(180deg)
}
.card-flip-front .card-widget,.card-flip-back .card-widget{
	transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
	display:flex;
	flex-direction:column
}
.card-flip-container:hover .card-flip-front .card-widget,.card-flip-container:focus .card-flip-front .card-widget,.card-flip-container:hover .card-flip-back .card-widget,.card-flip-container:focus .card-flip-back .card-widget{
	transform:translateY(-6px);
	box-shadow:0 10px 26px rgba(32,78,164,0.06);
	border-color:rgba(43,138,229,0.12)
}

.card-runtime{background:linear-gradient(180deg,#ffffff,#fbfbfb);border-radius:8px;padding:12px;box-shadow:0 1px 4px rgba(0,0,0,.05);display:flex;flex-direction:column}
.card-flip-front .card-webinfo{display:flex;flex-direction:column}
.card-webinfo .card-content{display:flex;flex-direction:column}
.webinfo{flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:6px}
.card-content{display:flex;flex-direction:column}
.item-headline{font-weight:700;display:flex;align-items:center;gap:8px;flex-shrink:0}
.runtime-text{font-size:16px;font-weight:600;color:#2196F3;line-height:1.6;margin-top:0px;font-family:'Poppins', 'Noto Sans SC', sans-serif;flex-grow:1;display:flex;align-items:center;justify-content:center;min-height:70px}


@media (max-width:900px){
	.layout_page{flex-direction:column;gap:24px}
	.aside_content{width:100%}
	.datetime-display{font-size:36px;gap:4px}
	.date-line{font-size:32px}
	.time-line{font-size:40px}
	nav#nav{height:160px}
}

@media (max-width:600px){
	.layout_page{gap:20px}
	nav#nav{height:140px}
	.datetime-display{font-size:32px;gap:3px}
	.date-line{font-size:28px;letter-spacing:2px}
	.time-line{font-size:36px;letter-spacing:1px}
	.runtime-text{font-size:18px}
	.card-widget{margin-bottom:16px}
}

@media (max-width:400px){
	.layout_page{gap:18px}
	nav#nav{height:120px}
	.datetime-display{font-size:26px;gap:2px}
	.date-line{font-size:22px;letter-spacing:1.5px}
	.time-line{font-size:30px;letter-spacing:0.5px}
	.runtime-text{font-size:16px}
	.card-widget{margin-bottom:14px}
}

/* 背景装饰 */
.bg-decor{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;border-radius:10px;pointer-events:none}
.bg-decor .blob{position:absolute;border-radius:50%;filter:blur(18px);opacity:0.85;transform:translate3d(0,0,0)}
.bg-decor .b1{width:360px;height:260px;background:linear-gradient(135deg,#6E9CCF 0%, #8FB3D9 100%);left:-40px;top:-40px;animation:move1 12s ease-in-out infinite}
.bg-decor .b2{width:300px;height:220px;background:linear-gradient(135deg,#9CBF9C 0%, #C8DEC8 100%);right:-60px;top:10px;animation:move2 16s ease-in-out infinite}
.bg-decor .b3{width:240px;height:180px;background:linear-gradient(135deg,#D9C8A8 0%, #EFE2C8 100%);left:120px;bottom:-40px;animation:move3 18s ease-in-out infinite}
.bg-decor .dotgrid{position:absolute;left:0;top:0;right:0;bottom:0;background-image:radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);background-size:26px 26px;mix-blend-mode:overlay;opacity:0.6}

@keyframes move1{0%{transform:translateY(0) translateX(0)}50%{transform:translateY(18px) translateX(20px)}100%{transform:translateY(0) translateX(0)}}
@keyframes move2{0%{transform:translateY(0) translateX(0)}50%{transform:translateY(-18px) translateX(-30px)}100%{transform:translateY(0) translateX(0)}}
@keyframes move3{0%{transform:translateY(0) translateX(0)}50%{transform:translateY(16px) translateX(-16px)}100%{transform:translateY(0) translateX(0)}}

/* 顶部信息前置并保持可见 */
#page_site-info{position:relative;z-index:2}
.not_index_bg{position:relative}