/* ============================================
   components.css — 窗口卡片 / 徽章 / 计数器等
   ============================================ */

/* ---------- 复古窗口卡片 ---------- */
.win {
  background: var(--bg-2);
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  box-shadow: 5px 5px 0 rgba(255, 110, 199, .25);
}

.win__titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: linear-gradient(90deg, var(--blue), var(--pink));
  border-bottom: 2px solid var(--bevel-dark);
  color: var(--white);
  font-size: 13px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .45);
}

.win__titlebar img { width: 14px; height: 14px; }

.win__controls { margin-left: auto; display: flex; gap: 4px; }
.win__controls span {
  width: 14px; height: 14px;
  display: inline-block;
  background: var(--dark);
  border: 1px solid var(--white);
  font-family: var(--font-en);
  font-size: 8px;
  line-height: 12px;
  text-align: center;
  color: var(--white);
  cursor: pointer;
}
.win__controls span:hover { background: var(--pink); }

.win__body { padding: 14px 16px; }

/* ---------- 标题与文本 ---------- */
.h-win {
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--cyan-text);
  margin-bottom: 10px;
  text-shadow: 2px 2px 0 var(--dark);
}

.h-big {
  font-family: var(--font-mix);
  font-size: 22px;
  line-height: 1.6;
  background: linear-gradient(90deg, var(--cyan), var(--pink), var(--cyan));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow-slide 3s linear infinite;
}

.h-section {
  font-size: 15px;
  color: var(--pink-light);
  margin: 14px 0 6px;
}
.h-section::before { content: '◆ '; color: var(--cyan); }

/* ---------- 个人信息行 ---------- */
.profile { display: flex; gap: 14px; align-items: flex-start; }
.profile__avatar {
  width: 96px; height: 96px;
  flex-shrink: 0;
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  background: var(--bg);
  padding: 4px;
}
.profile__avatar img { width: 100%; height: 100%; }

.meta-list { list-style: none; font-size: 13px; }
.meta-list li::before { content: '▶ '; color: var(--pink); font-size: 10px; }

/* ---------- 社交账号按钮（社交页） ---------- */
.social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 560px) { .social-grid { grid-template-columns: 1fr; } }
.social-btn {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-areas: "icon name" "icon handle";
  column-gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border: 3px solid var(--ink);
  background: var(--bg-2);
  box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.05s steps(2), box-shadow 0.05s steps(2);
}
.social-btn:hover {
  border-color: var(--pink);
  box-shadow: 3px 3px 0 var(--pink);
}
.social-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}
.social-btn img { grid-area: icon; width: 24px; height: 24px; image-rendering: pixelated; }
.social-btn__name { grid-area: name; font-family: var(--font-en); font-size: 13px; color: var(--ink); }
.social-btn__handle {
  grid-area: handle;
  font-family: var(--font-cn);
  font-size: 11px;
  color: var(--pink-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* button 复用卡片样式时的重置 */
button.social-btn { font: inherit; text-align: left; cursor: pointer; }
/* 悬停时名字和账号都显示下划线（链接卡片与复制按钮统一） */
.social-btn:hover .social-btn__name,
.social-btn:hover .social-btn__handle { text-decoration: underline; }

/* ---------- 提示弹窗（仿 WinXP Luna，模态：点确定/取消才能继续） ---------- */
.copy-toast {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, .2);   /* 轻微压暗，提示下层暂不可操作 */
  display: none;
}
.copy-toast.is-show { display: block; }
.copy-toast__win {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 260px;
  max-width: 340px;
  border: 3px solid #0831d9;
  border-radius: 8px 8px 4px 4px;
  background: #ece9d8;   /* XP 经典米色窗体 */
  box-shadow: 0 6px 24px rgba(0, 20, 90, .45);
  font-family: var(--font-cn);
  overflow: hidden;
}
.copy-toast__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 10px;
  background: linear-gradient(180deg, #0997ff, #0053ee 10%, #0050ee 45%, #0066ff 90%, #003dd7);
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
}
.copy-toast__close {
  margin-left: auto;
  width: 20px;
  height: 20px;
  border: 1px solid #fff;
  border-radius: 3px;
  background: linear-gradient(180deg, #f19b8e, #d6492f 45%, #b33321 90%);
  color: #fff;
  font-family: var(--font-en);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
}
.copy-toast__close:hover { filter: brightness(1.15); }
.copy-toast__body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  color: #1a1a1a;
  font-size: 13px;
}
.copy-toast__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  image-rendering: pixelated;
}
/* XP 风格按钮行 */
.copy-toast__btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 2px 16px 14px;
}
.copy-toast__btn {
  min-width: 76px;
  padding: 4px 14px;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff 45%, #ecebe5 55%, #d8d0c4);
  color: #1a1a1a;
  font-family: var(--font-cn);
  font-size: 12px;
  cursor: pointer;
}
.copy-toast__btn:hover {
  border-color: #e5a622;   /* XP 悬停橙色描边 */
  background: linear-gradient(180deg, #fff 45%, #fdf6e4 55%, #f0dfb2);
}
.copy-toast__btn:active {
  background: linear-gradient(180deg, #dcd8cd, #e6e2d8);
}
/* 默认按钮（确定）：XP 蓝色外圈高亮 */
.copy-toast__btn--ok {
  border: 2px solid #4a7fb5;
  box-shadow: 0 0 0 1px #2c6ecb;
  font-weight: bold;
}

/* ---------- 更新日志列表 ---------- */
.update-list { list-style: none; }
.update-list li {
  padding: 6px 0;
  border-bottom: 1px dashed var(--bevel-dark);
  font-size: 13px;
}
.update-list time {
  font-family: var(--font-en);
  font-size: 9px;
  color: var(--cyan);
  margin-right: 8px;
}

/* ---------- 日志文章条目 ---------- */
.post-item {
  display: block;
  padding: 10px 12px;
  border: 2px solid var(--bevel-dark);
  background: var(--bg);
  color: var(--white);
  margin-bottom: 10px;
  transition: transform .1s steps(2);
}
.post-item:hover {
  text-decoration: none;
  border-color: var(--pink);
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--pink);
}
.post-item__meta {
  font-family: var(--font-en);
  font-size: 11px;
  color: var(--cyan-text);
}
/* 像素英文与中文混排时，Zpix 同字号明显偏小，中文片段放大补偿；
   并显式指定中文像素字体栈——外层 --font-en 里没有 Zpix，否则会回退到系统字体 */
.txt-cn {
  font-family: var(--font-cn);
  font-size: 1.4em;
  line-height: 1;
}
/* .zh：标题等大字号处的中文片段（用 --font-mix 的栈时 Zpix 视觉位置偏下，
   上移补偿；--zh-lift 可微调，em 随字号缩放） */
.zh {
  font-family: var(--font-cn);
  position: relative;
  top: var(--zh-lift, -0.08em);
  line-height: 1;
}
.post-item__title { color: var(--pink-text); font-size: 14px; margin: 4px 0; }
.post-item__excerpt { font-size: 12px; color: var(--cyan-text); opacity: .75; }

/* ---------- 条目详情页 ---------- */
.post-detail__meta {
  font-family: var(--font-en);
  font-size: 11px;
  color: var(--cyan-text);
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* 正文阅读字体切换按钮 */
/* ---------- 返回按钮（条目详情页顶部/底部） ---------- */
.back-btn {
  display: inline-block;
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--white);
  background: var(--pink);
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  padding: 4px 14px;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .45);
  cursor: pointer;
}
.back-btn:hover {
  background: var(--blue);
  color: var(--white);
}
.back-btn:active {
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
}

.font-btn {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--ink);
  background: var(--bg-2);
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  padding: 2px 10px;
  cursor: pointer;
}
.font-btn:hover { background: var(--blue); color: var(--white); }
.font-btn:active,
.font-btn.is-on {
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
}
.md { font-size: 13px; line-height: 1.9; }
/* 阅读模式：正文换系统字体，长文不累眼 */
.md--readable,
.md--readable h1, .md--readable h2, .md--readable h3,
.md--readable h4, .md--readable h5, .md--readable h6,
.md--readable blockquote {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
}
.md--readable { font-size: 14px; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
  font-family: var(--font-cn);
  color: var(--pink-text);
  margin: 20px 0 8px;
}
.md h1 { font-size: 16px; border-bottom: 2px dashed var(--bevel-dark); padding-bottom: 6px; }
.md h2 { font-size: 14px; color: var(--cyan-text); }
.md h3 { font-size: 13px; }
.md h4 { font-size: 13px; color: var(--cyan-text); }
.md h5 { font-size: 12px; }
.md h6 { font-size: 12px; color: var(--cyan-text); font-style: italic; }
.md p { margin: 10px 0; }
.md a { text-decoration: underline; }
.md ul, .md ol { margin: 10px 0 10px 6px; padding-left: 16px; }
.md ul li { list-style: square; }
.md ol li { list-style: decimal; }
.md li { margin: 5px 0; }
.md li::marker { color: var(--pink); }
.md blockquote {
  border-left: 4px solid var(--pink);
  background: rgba(110, 243, 255, .07);
  padding: 8px 14px;
  margin: 12px 0;
}
.md code {
  font-family: Consolas, monospace;
  font-size: 12px;
  background: rgba(110, 243, 255, .12);
  padding: 1px 6px;
  color: var(--cyan-light);
}
.md pre {
  background: var(--dark);
  border: 2px solid var(--bevel-dark);
  padding: 10px 12px;
  overflow-x: auto;
  margin: 12px 0;
  position: relative;
}
/* 代码块顶部语言标签：```python 之类的围栏声明生成 data-lang */
.md pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  right: 0;
  font-family: Consolas, monospace;
  font-size: 10px;
  line-height: 1;
  padding: 3px 6px;
  color: var(--pink-light);
  background: rgba(61, 90, 255, .18);
  border-left: 2px solid var(--bevel-dark);
  border-bottom: 2px solid var(--bevel-dark);
}
.md pre code { background: none; padding: 0; display: block; line-height: 1.6; }
.md img { max-width: 100%; image-rendering: pixelated; border: 2px solid var(--bevel-dark); }
.md hr { border: none; border-top: 2px dashed color-mix(in srgb, var(--blue) 55%, transparent); margin: 16px 0; }
.md blockquote blockquote { border-left-color: var(--cyan); margin: 8px 0 0; }
.md table {
  border-collapse: collapse;
  margin: 12px 0;
  width: 100%;
  font-size: 12px;
}
.md th, .md td {
  border: 2px solid var(--bevel-dark);
  padding: 5px 10px;
  text-align: left;
}
.md th {
  background: var(--dark);
  color: var(--pink-text);
  font-family: var(--font-cn);
}
.md tbody tr:nth-child(even) td { background: rgba(110, 243, 255, .05); }

/* ---------- 标签 ---------- */
.tag {
  display: inline-block;
  padding: 2px 10px;
  margin: 2px;
  font-size: 13px;
  background: var(--dark);
  border: 1px solid var(--blue);
  color: var(--cyan);
}
.tag--pink { border-color: var(--pink); color: var(--pink-light); }

/* ---------- 88x31 徽章按钮 ---------- */
.badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.btn88 {
  width: 88px; height: 31px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, var(--blue) 0%, var(--pink) 100%);
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  color: var(--white);
  font-family: var(--font-en);
  font-size: 7px;
  line-height: 1.4;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}
button.btn88 { font: inherit; font-family: var(--font-en); font-size: 7px; }
.btn88:hover { filter: brightness(1.2); text-decoration: none; }
.btn88 img { width: 100%; height: 100%; object-fit: fill; }

/* ---------- 音乐播放器 ---------- */
.p-player { display: flex; flex-direction: column; gap: 10px; position: relative; }
.p-player__disk {
  width: 84px;
  height: 84px;
  margin: 4px auto 2px;
  image-rendering: pixelated;
}
.is-playing .p-player__disk { animation: spin 1.8s steps(8) infinite; }

/* 像素粒子：播放时从碟片边缘冒出向上飘（JS 生成，见 player.js） */
.p-fx {
  position: absolute;
  width: 4px;
  height: 4px;
  pointer-events: none;
  z-index: 1;
  animation: p-fx-rise steps(6, end) forwards;
}

.p-player .marquee {
  background: var(--bg-2);
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  padding: 4px 8px;
  font-size: 9px;
  color: var(--cyan-text);
}
/* 歌名/歌手两行：左侧标签 + 跑马灯，不溢出不滚动，溢出才跑马灯 */
.p-player__row { display: flex; gap: 6px; align-items: stretch; }
.p-player__row .marquee { flex: 1; min-width: 0; }
.p-player__row--artist { margin-top: -4px; }
.p-player__label {
  flex-shrink: 0;
  align-self: center;
  font-family: var(--font-cn);
  font-size: 13px;
  text-shadow: 1px 1px 0 var(--dark);
}
.p-player__row--song .p-player__label { color: var(--cyan-text); }
.p-player__row--artist .p-player__label { color: var(--pink-text); }
.p-player .marquee__inner {
  font-family: var(--font-mix);
  animation: none;
}
.p-player .marquee.is-scroll .marquee__inner {
  animation: marquee 12s linear infinite;
}
.p-player .marquee--song { color: var(--cyan-text); }
.p-player .marquee--artist {
  color: var(--pink-text);
}

.p-player__progress {
  height: 14px;
  background: var(--bg);
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
  cursor: pointer;
}
.p-player__bar-fill {
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(90deg, var(--cyan) 0 5px, var(--pink) 5px 10px);
}

.p-player__time {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-en);
  font-size: 10px;
  color: var(--cyan-text);
}

.p-player__controls { display: flex; gap: 8px; }
.p-btn {
  flex: 1;
  height: 34px;
  background: var(--bg-2);
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
  color: var(--ink);
  font-family: var(--font-en);
  font-size: 10px;   /* 上/下一首 ◀◀ ▶▶ */
  cursor: pointer;
}
.p-btn:hover {
  background: var(--blue);
  color: var(--white);
}
.p-btn:active {
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
}
.p-btn--main {
  flex: 1.6;
  background: var(--pink);
  color: var(--white);
  font-size: 16px;   /* 播放/暂停 ▶ ❚❚ 放大 */
}
.p-btn--main:hover { background: var(--pink-light); }

.p-player__volume {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: 10px;
  color: var(--cyan-text);
}
.p-player__volume input { flex: 1; accent-color: var(--pink); height: 4px; }

/* ---------- 搜索结果高亮 ---------- */
mark {
  background: var(--pink);
  color: var(--white);
  padding: 0 2px;
}

/* ---------- 访问计数器 ---------- */
.counter {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--dark);
  border: 2px solid;
  border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
}
.counter i {
  font-family: var(--font-en);
  font-style: normal;
  font-size: 12px;
  color: var(--cyan-text);
  background: var(--bg);
  padding: 3px 4px;
}

/* ---------- 音乐盒小组件 ---------- */
.now-playing {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--cyan-text);
}
.now-playing img { width: 16px; height: 16px; animation: bounce 1s steps(2) infinite; }

/* ---------- 分隔线 ---------- */
.hr-star {
  border: none;
  height: 14px;
  margin: 12px 0;
  background: url('../img/sparkle.png') repeat-x center / 10px 10px;
  opacity: .5;
}