/* 全站共享菜单样式 —— 改这里全站同步 */
.menu-btn{
  position:fixed;bottom:0;left:0;width:52px;height:52px;
  background:#6c3483;border-radius:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;z-index:600;transition:background 0.2s;
}
.menu-btn:hover{background:#7d3c98;}
.menu-btn.active{background:#4a235a;}
.menu-btn span{
  display:block;width:26px;height:4px;background:#fff;border-radius:0;
  transition:transform 0.25s ease,opacity 0.25s ease;transform-origin:center;
}
.menu-btn.active span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.menu-btn.active span:nth-child(2){opacity:0;transform:scaleX(0);}
.menu-btn.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}
.taskbar-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(20,4,40,0.93);
  display:none;flex-direction:column;
}
.taskbar-overlay.open{display:flex;}
@keyframes menuOpen{
  from{clip-path:circle(0% at 26px calc(100% - 26px));}
  to{clip-path:circle(150% at 26px calc(100% - 26px));}
}
@keyframes menuClose{
  from{clip-path:circle(150% at 26px calc(100% - 26px));}
  to{clip-path:circle(0% at 26px calc(100% - 26px));}
}
.taskbar-overlay.anim-open{animation:menuOpen 0.45s cubic-bezier(0.4,0,0.2,1) forwards;}
.taskbar-overlay.anim-close{animation:menuClose 0.38s cubic-bezier(0.4,0,0.2,1) forwards;}
.tb-indicator{
  position:absolute;top:20px;left:20px;
  font-size:15px;color:rgba(210,180,222,0.9);
  letter-spacing:2px;font-weight:300;pointer-events:none;
}
.tb-indicator .bracket{color:rgba(155,89,182,0.7);}
.tb-grid-wrap{flex:1;display:flex;align-items:center;justify-content:center;overflow:visible;}

/* col: 140 140 140 140 70 */
.tb-grid{
  display:grid;
  grid-template-columns: 140px 140px 140px 140px 70px;
  grid-template-rows: 140px 140px;
  gap:8px;
  overflow:visible;
}
.tb-grid.qq-expanded,.tb-grid.kards-expanded{
  grid-template-rows: 140px 140px 140px;
}
.tb-grid.qq-expanded.kards-expanded{
  grid-template-rows: 140px 140px 140px 140px;
}
.tile-kards .kards-arrow{
  display:none;position:absolute;inset:0;
  align-items:center;justify-content:center;
  font-size:36px;color:#fff;
  background:rgba(108,52,131,0.9);
}
.tile-kards.expanded .kards-img{display:none;}
.tile-kards.expanded .tb-tile-overlay{display:none;}
.tile-kards.expanded .kards-arrow{display:flex;}


@keyframes tileIn{
  from{opacity:0;transform:scale(0.82) translateY(16px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}
@keyframes tileOut{
  from{opacity:1;transform:scale(1);}
  to{opacity:0;transform:scale(0.9);}
}
.tb-clock,.tile-qq,.tile-pvzh,.tile-kards,.tile-blog,.tile-shizuoka{opacity:0;}
.taskbar-overlay.anim-open .tb-clock  {animation:tileIn 0.28s ease 0.25s forwards;}
.taskbar-overlay.anim-open .tile-qq   {animation:tileIn 0.28s ease 0.30s forwards;}
.taskbar-overlay.anim-open .tile-pvzh {animation:tileIn 0.28s ease 0.35s forwards;}
.taskbar-overlay.anim-open .tile-kards{animation:tileIn 0.28s ease 0.40s forwards;}
.taskbar-overlay.anim-open .tile-blog {animation:tileIn 0.28s ease 0.45s forwards;}
.taskbar-overlay.anim-open .tile-shizuoka{animation:tileIn 0.28s ease 0.50s forwards;}
.taskbar-overlay.anim-close .tb-clock,
.taskbar-overlay.anim-close .tile-qq,
.taskbar-overlay.anim-close .tile-pvzh,
.taskbar-overlay.anim-close .tile-kards,
.taskbar-overlay.anim-close .tile-blog,
.taskbar-overlay.anim-close .tile-shizuoka{animation:tileOut 0.2s ease forwards;}

.tb-clock{
  grid-column:1/3;grid-row:1;
  background:rgba(108,52,131,0.75);border-radius:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:1px solid rgba(155,89,182,0.35);
}
.clock-time{
  font-size:52px;font-weight:300;color:#fff;
  font-family:'PingFang TC','Microsoft JhengHei',monospace;letter-spacing:4px;
}
.clock-date{font-size:13px;color:rgba(255,255,255,0.6);letter-spacing:1px;}
.clock-stat{font-size:11px;color:rgba(255,255,255,0.45);letter-spacing:1px;margin-top:4px;}

.tb-tile{position:relative;overflow:hidden;border-radius:0;cursor:pointer;}
.tb-tile img{width:100%;height:100%;object-fit:cover;display:block;}
.tb-tile-overlay{
  position:absolute;inset:0;background:rgba(60,10,90,0.55);
  display:flex;align-items:flex-end;padding:8px 10px;transition:background 0.18s;
}
.tb-tile:hover .tb-tile-overlay{background:rgba(60,10,90,0.28);}
.tb-tile-label{
  color:#fff;font-size:13px;letter-spacing:0.5px;
  text-shadow:0 1px 4px rgba(0,0,0,0.5);line-height:1;
  font-family:'PingFang SC','Microsoft YaHei',sans-serif;
}
.tile-qq .qq-arrow{
  display:none;position:absolute;inset:0;
  align-items:center;justify-content:center;
  font-size:36px;color:#fff;
  background:rgba(108,52,131,0.9);
}
.tile-qq.expanded .qq-img{display:none;}
.tile-qq.expanded .tb-tile-overlay{display:none;}
.tile-qq.expanded .qq-arrow{display:flex;}

@keyframes subSlideIn{
  from{opacity:0;transform:translateX(-74px) translateY(-16px) scale(0.92);}
  to{opacity:1;transform:translateX(-74px) translateY(0) scale(1);}
}
@keyframes subSlideOut{
  from{opacity:1;transform:translateX(-74px) translateY(0) scale(1);}
  to{opacity:0;transform:translateX(-74px) translateY(-16px) scale(0.92);}
}

.tile-sub{
  position:relative;overflow:hidden;border-radius:0;cursor:pointer;
  display:none;
  /* 向左偏移74px，使磁贴居于两列中间 */
  transform:translateX(-74px);
  z-index:2;
}
.tile-sub.show{display:block;}
.tile-sub.anim-in{animation:subSlideIn 0.28s cubic-bezier(0.25,0.46,0.45,0.94) forwards;}
.tile-sub.anim-out{animation:subSlideOut 0.22s ease forwards;}
.tile-sub img{width:100%;height:100%;object-fit:cover;display:block;}
.sub-overlay{
  position:absolute;inset:0;background:rgba(60,10,90,0.58);
  display:flex;align-items:flex-end;padding:8px 10px;transition:background 0.18s;
}
.tile-sub:hover .sub-overlay{background:rgba(60,10,90,0.28);}
.sub-label{
  color:#fff;font-size:13px;letter-spacing:0.5px;
  text-shadow:0 1px 4px rgba(0,0,0,0.5);line-height:1;
  font-family:'PingFang SC','Microsoft YaHei',sans-serif;
}

/* Toast 提示 */
.toast{
  position:fixed;
  bottom:80px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:rgba(108,52,131,0.95);
  color:#fff;
  font-size:15px;
  letter-spacing:2px;
  padding:14px 32px;
  border-left:3px solid #d7bde2;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s ease;
  font-family:'PingFang SC','Microsoft YaHei',sans-serif;
  white-space:nowrap;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

@media (max-width: 640px) {
  /* 菜单按钮：左下角，增大尺寸 */
  .menu-btn{
    width:68px;height:68px;
    left:0;bottom:0;
    transform:none;
  }
  .menu-btn.active{background:#4a235a;transform:none;}
  .menu-btn span{width:30px;height:3px;}
  .menu-btn.active span:nth-child(1){transform:translateY(9px) rotate(45deg);}
  .menu-btn.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

  /* 圆形展开动画原点：左下角按钮中心 */
  @keyframes menuOpen{
    from{clip-path:circle(0% at 34px calc(100% - 34px));}
    to{clip-path:circle(150% at 34px calc(100% - 34px));}
  }
  @keyframes menuClose{
    from{clip-path:circle(150% at 34px calc(100% - 34px));}
    to{clip-path:circle(0% at 34px calc(100% - 34px));}
  }

  /* 覆盖层可滚动 */
  .tb-grid-wrap{
    align-items:flex-start;
    padding:60px 12px 100px;
    overflow-y:auto;
    width:100%;
  }

  /* 磁贴网格：双列正方形竖排 */
  .tb-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
    width:100%;
  }
  .tb-grid.qq-expanded,.tb-grid.kards-expanded,.tb-grid.qq-expanded.kards-expanded{grid-template-rows:none;}

  /* 时钟：满宽，2:1 比例 */
  .tb-clock{
    grid-column:1 / 3 !important;
    grid-row:auto !important;
    height:auto;
    aspect-ratio:2 / 1;
  }
  .clock-time{font-size:36px;}

  /* 普通磁贴：正方形，自动流排 */
  .tb-tile{
    grid-column:auto !important;
    grid-row:auto !important;
    height:auto;
    aspect-ratio:1 / 1;
  }

  /* QQ 子磁贴：取消横向偏移，正方形竖排 */
  .tile-sub{
    transform:none !important;
    grid-column:auto !important;
    grid-row:auto !important;
    height:auto;
    aspect-ratio:1 / 1;
  }
  @keyframes subSlideIn{
    from{opacity:0;transform:translateY(-16px) scale(0.92);}
    to{opacity:1;transform:translateY(0) scale(1);}
  }
  @keyframes subSlideOut{
    from{opacity:1;transform:translateY(0) scale(1);}
    to{opacity:0;transform:translateY(-16px) scale(0.92);}
  }

}