/* ============================================
   标签云 4 种样式切换
   文件：tag-cloud-styles.css
   说明：通过切换 .tag-cloud-box 的样式类实现
         4 种标签云外观；表头圆形按钮切换。
         每种样式搭配一种排列方式。
   ============================================ */

/* ---------- 切换按钮样式 ---------- */
.tag-cloud-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tag-cloud-switch .switch-btn {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: all 0.25s ease;
    outline: none;
}

.tag-cloud-switch .switch-btn:hover {
    transform: scale(1.2);
}

.tag-cloud-switch .switch-btn.active {
    box-shadow: 0 0 0 2px #17a2b8, 0 1px 4px rgba(0,0,0,0.3);
    transform: scale(1.15);
}

/* 四个按钮颜色（多彩渐变） */
.switch-btn.btn-default { background: linear-gradient(135deg, #4facfe, #8a6de9); }
.switch-btn.btn-capsule { background: linear-gradient(135deg, #8a6de9, #ff7eb3); }
.switch-btn.btn-gradient { background: linear-gradient(135deg, #67c23a, #17a2b8); }
.switch-btn.btn-card { background: linear-gradient(135deg, #ff922b, #ffd43b); }

/* ---------- 标签云公共 ---------- */
.sidebar .tag-cloud-box {
    padding: 16px;
}

.sidebar .tag-cloud-box a {
    font-size: 14px;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* 卡片翻转双面结构：仅样式4启用，其他样式隐藏背面 */
.sidebar .tag-cloud-box a .card-back {
    display: none;
}

.sidebar .tag-cloud-box.tag-cloud-card a .card-back {
    display: flex;
}

/* ============================================
   样式1：默认（彩色小圆角）
   排列：DNA 双螺旋 / 3D 环绕旋转环
   ============================================ */
.sidebar .tag-cloud-box.tag-cloud-default {
    position: relative;
    height: 300px;
    padding: 0;
    overflow: hidden;
}

.sidebar .tag-cloud-box.tag-cloud-default a {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    padding: 4px 12px;
    background-color: #f8f9fa;
    color: #666;
    border: 1px solid #eee;
    border-radius: 3px;
    white-space: nowrap;
    cursor: pointer;
    will-change: transform, opacity;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sidebar .tag-cloud-box.tag-cloud-default a:nth-child(6n+1) { background:#e8f4fd; color:#3d6b8c; border-color:#c9e4f8; }
.sidebar .tag-cloud-box.tag-cloud-default a:nth-child(6n+2) { background:#fdeeee; color:#c05a5a; border-color:#f7d5d5; }
.sidebar .tag-cloud-box.tag-cloud-default a:nth-child(6n+3) { background:#e9f9ef; color:#3f9d63; border-color:#c8edcf; }
.sidebar .tag-cloud-box.tag-cloud-default a:nth-child(6n+4) { background:#fef6e3; color:#b07d2e; border-color:#f9e4b0; }
.sidebar .tag-cloud-box.tag-cloud-default a:nth-child(6n+5) { background:#f1ecfb; color:#7b5fc0; border-color:#d9cdf4; }
.sidebar .tag-cloud-box.tag-cloud-default a:nth-child(6n)   { background:#e6f7f8; color:#1799a0; border-color:#b9e6ea; }

.sidebar .tag-cloud-box.tag-cloud-default a:hover {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
}

/* ============================================
   样式2：彩色胶囊（3D 旋转球体标签云）
   排列：3D 球面分布，自动旋转，悬停放大
   ============================================ */
.sidebar .tag-cloud-box.tag-cloud-capsule {
    position: relative;
    height: 280px;
    padding: 0;
    overflow: hidden;
}

.sidebar .tag-cloud-box.tag-cloud-capsule a {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid transparent;
    color: #3d6b8c;
    background-color: #e8f4fd;
    white-space: nowrap;
    cursor: pointer;
    will-change: transform, opacity;
    transition: box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.sidebar .tag-cloud-box.tag-cloud-capsule a:nth-child(6n+1) { background:#e8f4fd; color:#2a5a7c; }
.sidebar .tag-cloud-box.tag-cloud-capsule a:nth-child(6n+2) { background:#fdeeee; color:#a04a4a; }
.sidebar .tag-cloud-box.tag-cloud-capsule a:nth-child(6n+3) { background:#e9f9ef; color:#2f8d53; }
.sidebar .tag-cloud-box.tag-cloud-capsule a:nth-child(6n+4) { background:#fef6e3; color:#906d1e; }
.sidebar .tag-cloud-box.tag-cloud-capsule a:nth-child(6n+5) { background:#f1ecfb; color:#6b4fb0; }
.sidebar .tag-cloud-box.tag-cloud-capsule a:nth-child(6n)   { background:#e6f7f8; color:#078990; }

/* 悬停放大由 JS 控制 scale；这里补充视觉高亮 */
.sidebar .tag-cloud-box.tag-cloud-capsule a.tag-hovered {
    z-index: 999 !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    border-color: currentColor;
}

/* ============================================
   样式3：彩色气泡（缤纷对话感）
   排列：3D 气泡浮动（上下漂浮，错落起伏）
   ============================================ */
.sidebar .tag-cloud-box.tag-cloud-gradient {
    position: relative;
    height: 300px;
    padding: 0;
    overflow: hidden;
}

.sidebar .tag-cloud-box.tag-cloud-gradient a {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    padding: 6px 15px;
    border-radius: 8px;
    color: #666;
    background-color: #f8f9fa;
    border: 1px solid #eee;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    white-space: nowrap;
    cursor: pointer;
    will-change: transform, opacity;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sidebar .tag-cloud-box.tag-cloud-gradient a:nth-child(6n+1) { background:#e8f4fd; color:#2a5a7c; border-color:#c9e4f8; }
.sidebar .tag-cloud-box.tag-cloud-gradient a:nth-child(6n+2) { background:#fdeeee; color:#a04a4a; border-color:#f7d5d5; }
.sidebar .tag-cloud-box.tag-cloud-gradient a:nth-child(6n+3) { background:#e9f9ef; color:#2f8d53; border-color:#c8edcf; }
.sidebar .tag-cloud-box.tag-cloud-gradient a:nth-child(6n+4) { background:#fef6e3; color:#906d1e; border-color:#f9e4b0; }
.sidebar .tag-cloud-box.tag-cloud-gradient a:nth-child(6n+5) { background:#f1ecfb; color:#6b4fb0; border-color:#d9cdf4; }
.sidebar .tag-cloud-box.tag-cloud-gradient a:nth-child(6n)   { background:#e6f7f8; color:#078990; border-color:#b9e6ea; }

.sidebar .tag-cloud-box.tag-cloud-gradient a.tag-hovered {
    z-index: 999 !important;
    background-color: #17a2b8;
    color: #fff;
    border-color: #17a2b8;
    box-shadow: 0 6px 18px rgba(23,162,184,0.35);
}

/* ============================================
   样式4：悬浮卡片（轻盈精致）
   排列：3D 卡片翻转（悬停翻转，交互出彩）
   ============================================ */
.sidebar .tag-cloud-box.tag-cloud-card {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 16px;
    perspective: 1200px;
}

.sidebar .tag-cloud-box.tag-cloud-card a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 5px 13px;
    border-radius: 6px;
    color: #555;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transform-style: preserve-3d;
    transition: transform 0.5s ease, box-shadow 0.3s ease;
}

.sidebar .tag-cloud-box.tag-cloud-card a:nth-child(6n+1) { background:#e8f4fd; color:#3d6b8c; border-color:#c9e4f8; }
.sidebar .tag-cloud-box.tag-cloud-card a:nth-child(6n+2) { background:#fdeeee; color:#c05a5a; border-color:#f7d5d5; }
.sidebar .tag-cloud-box.tag-cloud-card a:nth-child(6n+3) { background:#e9f9ef; color:#3f9d63; border-color:#c8edcf; }
.sidebar .tag-cloud-box.tag-cloud-card a:nth-child(6n+4) { background:#fef6e3; color:#b07d2e; border-color:#f9e4b0; }
.sidebar .tag-cloud-box.tag-cloud-card a:nth-child(6n+5) { background:#f1ecfb; color:#7b5fc0; border-color:#d9cdf4; }
.sidebar .tag-cloud-box.tag-cloud-card a:nth-child(6n)   { background:#e6f7f8; color:#1799a0; border-color:#b9e6ea; }

.sidebar .tag-cloud-box.tag-cloud-card a .card-back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 13px;
    border-radius: 6px;
    background-color: #17a2b8;
    color: #fff;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

.sidebar .tag-cloud-box.tag-cloud-card a .card-front {
    backface-visibility: hidden;
}

.sidebar .tag-cloud-box.tag-cloud-card a:hover {
    transform: rotateY(180deg);
    box-shadow: 0 6px 14px rgba(23,162,184,0.25);
}