/* ===== 千禧年风格调色盘 ===== */
:root{
  --hotpink:#ff69b4;
  --cyan:#00ffff;
  --lime:#39ff14;
  --purple:#9b30ff;
  --yellow:#fff44f;
  --win-gray:#c0c0c0;
  --win-dark:#808080;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:"Comic Sans MS","Chalkboard SE","Microsoft YaHei",cursive,sans-serif;
  color:#fff;
  background-color:#000;
  /* 与 pizzachild 同款蓝色星星平铺背景（固定不滚动） */
  background-image:url('/images/bluestarback.gif');
  background-repeat:repeat;
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
}

/* ===== 仿 WIN98 标题栏（博客文章窗口也在用）===== */
.title-bar{
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  color:#fff; font-weight:bold; padding:4px 8px;
  display:flex; justify-content:space-between; align-items:center;
}

/* ===== 博客主体 ===== */
#blog{position:relative; z-index:1; max-width:760px; margin:0 auto; padding:24px 16px 60px;}
.site-header{text-align:center; margin-bottom:18px;}
.glitter{
  font-size:40px; margin:10px 0 4px;
  background:linear-gradient(90deg,var(--hotpink),var(--cyan),var(--lime),var(--yellow),var(--purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:hue 6s linear infinite; text-shadow:0 0 8px rgba(255,255,255,.4);
}
@keyframes hue{from{filter:hue-rotate(0);}to{filter:hue-rotate(360deg);}}
.subtitle{color:var(--cyan); font-size:16px; margin:0 0 10px;}
.site-header marquee{background:#000; color:var(--yellow); padding:4px 0; border:2px ridge var(--cyan);}

.navbar{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:14px 0;
}
.navbar a{
  text-decoration:none; color:#000; font-weight:bold; font-size:14px;
  background:linear-gradient(180deg,#fff,var(--win-gray));
  border:2px outset #fff; padding:6px 12px;
}
.navbar a:active{border-style:inset;}

/* ===== 搜索框（Y2K 蓝紫渐变，与其他框架统一） ===== */
.search-box{
  display:flex;
  align-items:center;
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  border:2px outset #fff;
  border-radius:0;
  padding:3px 4px 3px 6px;
  gap:4px;
}
.search-box input{
  flex:1;
  background:#fff;
  border:none;
  color:#000;
  font-family:inherit;
  font-size:13px;
  padding:5px 10px;
  border-radius:0;
  outline:none;
}
.search-box input::placeholder{color:#777;}
.search-box button{
  width:30px; height:28px;
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border:none;
  border-radius:0;
  cursor:pointer;
  font-size:14px;
  padding:0;
}
.search-box button:hover{background:#ffd1ec;}
.no-result{text-align:center; color:var(--cyan); font-size:15px; padding:20px;}

/* ===== 文章分类筛选标签 ===== */
.filter-bar{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px;}
.filter-btn{
  font-family:inherit; font-size:14px; font-weight:bold; cursor:pointer;
  color:#000; background:linear-gradient(180deg,#fff,var(--win-gray));
  border:2px outset #fff; padding:5px 12px;
}
.filter-btn:active{border-style:inset;}
.filter-btn.active{
  border-style:inset; color:#fff;
  background:linear-gradient(180deg,var(--cyan),var(--purple));
}
/* 每篇文章标题栏右侧的分类小标签 */
.post-cat{
  font-size:12px; font-weight:normal;
  background:rgba(255,255,255,.85); color:#7a004f;
  padding:1px 7px; border-radius:8px; white-space:nowrap;
}

.panel, .post-window{
  background:rgba(192,192,192,.94); color:#000;
  border:2px solid #fff; border-right-color:var(--win-dark); border-bottom-color:var(--win-dark);
  margin:16px 0; box-shadow:4px 4px 0 rgba(0,0,0,.35);
}
.section-title{
  margin:0; padding:6px 10px; font-size:18px;
  background:linear-gradient(90deg,var(--cyan),var(--purple)); color:#fff;
}
.post-body{padding:12px;}
.post-date{color:#555; font-size:13px; margin:0 0 6px;}
.post-body p{line-height:1.6; margin:6px 0;}
.post-img{display:block; max-width:100%; height:auto; margin:8px 0; border:2px inset #fff; background:#fff;}

.panel{padding:0 12px 12px;}
.panel .section-title{margin:0 -12px 12px;}

/* ===== 两栏布局（主内容 + 右侧边栏）===== */
.content{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.main-col{
  flex:2;
  min-width:0;
}
.side-col{
  flex:1;
  min-width:220px;
  max-width:280px;
}
.side-col .panel{
  margin-top:0;
}
@media (max-width:720px){
  .content{flex-direction:column;}
  .main-col,.side-col{width:100%; max-width:none;}
  .side-col .panel{margin-top:16px;}
}

/* 右侧边栏里的搜索框：紧凑贴边 */
.side-col .search-box{
  margin:0 0 16px;
}

/* 个人简介：小字体 */
.about-text{
  font-size:13px;
  line-height:1.6;
  margin:6px 0 0;
}

/* 最新博客列表 */
.latest-list{
  list-style:none;
  padding:0;
  margin:8px 0 0;
}
.latest-list li{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.4;
}
.latest-list a{
  color:#0000aa;
  text-decoration:underline;
  font-weight:bold;
}
.latest-list a:hover{
  color:var(--hotpink);
}
.latest-list .latest-date{
  display:block;
  color:#555;
  font-size:11px;
  margin-top:2px;
}

/* 日历（FC2 风格） */
.calendar{ font-size:12px; }
.calendar .cal-head{
  text-align:center;
  font-weight:bold;
  margin-bottom:6px;
  color:#7a004f;
}
.calendar table{
  width:100%;
  border-collapse:collapse;
}
.calendar th, .calendar td{
  text-align:center;
  padding:3px 0;
  border:1px solid #bbb;
  font-size:11px;
}
.calendar th{
  background:var(--win-gray);
  color:#000;
}
.calendar td.empty{
  border:none;
}
.calendar td.today{
  background:var(--hotpink);
  color:#fff;
  font-weight:bold;
}
.calendar td.has-post{
  background:#e8f7ff;
}
.calendar td.has-post a{
  color:#0000aa;
  font-weight:bold;
  text-decoration:underline;
}

.site-footer{text-align:center; margin-top:30px; color:#fff;}
.counter{
  display:inline-block; background:#000; color:var(--lime);
  font-family:"Courier New",monospace; padding:2px 8px; letter-spacing:3px;
  border:2px inset #555;
}
.badges{font-size:13px; color:var(--yellow);}

/* ===== 退出登录按钮 ===== */
.logout-btn{
  display:inline-block; text-decoration:none; font-weight:bold; font-size:15px;
  color:#7a004f; padding:8px 22px; cursor:pointer;
  background:linear-gradient(180deg,#ffd1ec,var(--hotpink));
  border:2px outset #fff;
}
.logout-btn:active{border-style:inset;}

/* ===== Y2K 友情链接徽章（88×31 按钮风格）===== */
.badge-box{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center;
  margin-top:12px;
}
.badge-box a{text-decoration:none;}
.badge{
  display:block; max-width:88px; height:auto;
  border:2px outset #fff; background:#000;
  image-rendering:pixelated;
  transition:transform .1s;
}
.badge:hover{
  transform:scale(1.1);
  border-color:var(--yellow);
}

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