/* 开始样式定义区域 */
/* ==========================================
   设计系统：CSS 变量 (支持主题切换)
   ========================================== */
:root {
    /* 深色模式 (默认) */
    --bg-overlay: rgba(0, 0, 0, 0.15); /* 降低黑色遮罩浓度，让壁纸色彩释放 */
    --text-main: #ffffff;
    --text-dim: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.4);
    --card-bg: rgba(255, 255, 255, 0.1);
    --card-border: rgba(255, 255, 255, 0.2);
    --card-hover-bg: rgba(255, 255, 255, 0.2);
    --top-bar-bg: linear-gradient(135deg, rgba(20, 20, 20, 0.4), rgba(0, 0, 0, 0.1));
    --search-bg: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] {
    /* 浅色模式 */
    --bg-overlay: rgba(255, 255, 255, 0.1); /* 降低白色遮罩浓度 */
    --text-main: #1a1a1a;
    --text-dim: #333333;
    --text-muted: rgba(0, 0, 0, 0.5);
    --card-bg: rgba(255, 255, 255, 0.6);
    --card-border: rgba(255, 255, 255, 0.3);
    --card-hover-bg: rgba(255, 255, 255, 0.8);
    --top-bar-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
    --search-bg: rgba(255, 255, 255, 0.7);
}

/* 自定义半透明窄滚动条 */
::-webkit-scrollbar {
    width: 6px;
    /* 窄度 */
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
    /* 轨道背景完全透明 */
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    /* 半透明滑块默认样式 */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
    /* 悬停时稍微加深 */
}

/*
基础重置与字体
*/
* {
    /* 彻底消除安卓端和移动端浏览器点击元素自带的蓝色高亮图块，保持纯净手感 */
    -webkit-tap-highlight-color: transparent;
}

body {
    /* 对主体内容进行样式设置 */
    margin: 0;
    /* 清除浏览器默认的外边距 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* 背景图现在由 JavaScript 动态设置，这里给默认回退设置 */
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text-main);
    display: block;
    min-height: calc(100vh + 80px);
    /* 增加 80px 的溢出高度以保证即使在书签很少的屏幕上也能完美完成自动向下滑动 */
    /* 添加背景切换的平滑过渡效果 */
    transition: background-image 0.8s ease-in-out, color 0.3s ease;
}

/* 压暗一点背景，让文字更清晰（相当于之前的 opacity: 50） */
body::before {
    /* 使用伪元素创建一个遮罩层 */
    content: '';
    /* 必须设置 content 伪元素才生效 */
    position: fixed;
    /* 固定位置 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 覆盖全屏 */
    background: var(--bg-overlay);
    /* 设置半透明黑色背景（0.4 为透明度） */
    z-index: -1;
    /* 确保遮罩层在背景图之上，但在文字内容之下 */
    transition: background 0.3s ease;
}

/* 主容器 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    padding-top: clamp(80px, 12vh, 140px);
    /* 【修复】增加顶部间距：防止固定在顶部的 top-bar 遮挡时钟 */
    position: relative;
    z-index: 10;
    /* 确保容器内容总是在背景图层之上 */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 【修复】使用 flex 强制确保时钟、搜索框、古诗词完美水平居中 */
    text-align: center;
}

/* 顶部信息栏合并打包容器 */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 30px;
    box-sizing: border-box;
    display: flex;
    /* 两侧散开分布 */
    justify-content: space-between;
    align-items: center;
    z-index: 20;
    transition: transform 0.4s ease, opacity 0.4s ease, background 0.3s ease;
    /* 整体联动平滑过渡 */
    pointer-events: none;
    /* 中间间隙放通点击流 */

    background: var(--top-bar-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* 极细底边 */
}

.top-bar>* {
    pointer-events: auto;
    /* 容器内的子级恢复实心点击 */
}

/* 根据滚动状态隐藏顶部栏（向上滑动或初始状态时显示） */
.top-bar.hidden-top {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* 右侧工具栏：天气 + 主题开关 */
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}




/* 标题样式 */
h1 {
    font-size: 1.6rem;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* 时钟样式 */
.clock {
    font-size: clamp(3.5rem, 11vh, 7.5rem);
    /* 调整字号：减小一点使其更精致 */
    font-weight: 500;
    /* 加粗一点，让时钟信息更突出挺拔 */
    margin-top: clamp(30px, 8vh, 80px);
    /* 与顶部导航栏自适用距离 */
    margin-bottom: clamp(20px, 4vh, 40px);
    /* 底部自适应距离 */
    letter-spacing: 2px;
    text-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    /* 文字阴影 */
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    /* 偏向使用有设计感的字体 */
}

/* 天气组件样式 */
.weather-board {
    font-size: 1rem;
    font-weight: 300;
    opacity: 0.9;
    color: var(--text-dim);
}

/* 页面滚动隐藏头部 */
body.hide-header .top-bar {
    transform: translateY(-80px) !important;
    opacity: 0 !important;
}

/* 删除了移动端强制左对齐的 media query，让整个页面保留等比例的居中缩放逻辑 */

/* 入场动画基础类 - 透明且向下位移 */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 激活状态 - 恢复原样 */
.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}

/* 为不同元素设置级联延迟，产生错落感 */
#clock {
    transition-delay: 0.1s;
}

.weather-board {
    transition-delay: 0.2s;
}

.search-section {
    transition-delay: 0.3s;
}

.grid {
    transition-delay: 0.4s;
}

/* 导航卡片网格 */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    /* 更容易挤上同一排 */
    gap: clamp(15px, 2vw, 30px);
    /* 网格间隙自适应 */
    margin-top: clamp(10px, 2vh, 20px);
    width: 100%;
    /* 【修复】由于外层变成了 flex，需要指定 100% 宽度才能撑满 */
}

/* 高级毛玻璃卡片效果 */
.card {
    background: var(--card-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--card-border);
    padding: 25px 30px;
    box-sizing: border-box;
    /* 确保所有卡片统一样式 */
    height: 100%;
    /* 强制填满网格单元，确保由于内容不一致引起的高度不匹配问题被修复 */
    /* 【优化2】左右 padding 调大 */
    border-radius: 20px;
    text-decoration: none;
    color: var(--text-main);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    text-align: left;
    /* 【优化2】从居中对齐改为左对齐 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    /* 核心：为内部的绝对定位菜单按钮提供参考 */
}

.card:hover {
    transform: translateY(-8px);
    background: var(--card-hover-bg);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.2);
}

/* 拖拽动画状态 */
.card.dragging {
    opacity: 0.5;
    transform: scale(0.95);
    box-shadow: none;
    z-index: 100;
}

/* 拖拽悬停状态：提示落脚点 */
.card.drag-over {
    border: 2px dashed rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

/* 卡片右上角浮动菜单按钮 */
.card-menu-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 1.2rem;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s, color 0.2s;
    z-index: 10;
}

.card:hover .card-menu-btn {
    opacity: 1;
    /* 鼠标移入卡片时显示按钮 */
}

.card-menu-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-main);
}

/* 卡片浮动菜单下拉框 */
.card-menu-dropdown {
    position: absolute;
    top: 50px;
    right: 15px;
    background: rgba(30, 30, 30, 0.85);
    /* 深色磨砂质感 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.2s, transform 0.2s;
}

.card-menu-dropdown.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.card-menu-dropdown button {
    background: transparent;
    border: none;
    color: #fff;
    padding: 8px 15px;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
    white-space: nowrap;
}

.card-menu-dropdown button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.card-menu-dropdown button.delete-btn {
    color: #ff4d4f;
    /* 删除按钮警示红 */
}

.card-menu-dropdown button.delete-btn:hover {
    background: rgba(255, 77, 79, 0.1);
}

.card:hover {
    transform: translateY(-8px);
    background: var(--card-hover-bg);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.2);
}

.card h3 {
    margin: 0 0 8px 0;
    /* 调整与描述的行间距 */
    font-size: 1.2rem;
    /* 【优化3】放大标题字号 */
    font-weight: 600;
    /* 【优化3】加粗标题字重 */
}

.card p {
    margin: 0;
    font-size: 0.9rem;
    /* 缩小描述字号 */
    color: var(--text-muted);
    /* 【优化3】改为浅灰色，极大增强层级感 */
    line-height: 1.4;
    /* 【优化3】增加行高使阅读更舒适 */
}

/* 动态书签：添加按钮卡片 */
.add-card {
    border: 2px dashed var(--card-border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    color: var(--text-dim);
}

.add-card:hover {
    border-color: var(--text-main);
    color: var(--text-main);
    background: var(--card-hover-bg);
}

.add-icon {
    font-size: 2.5rem;
    font-weight: 300;
}

/* 【优化4】页脚样式：跟随内容滑动，位于最底部 */
.footer {
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-top: clamp(30px, 6vh, 60px);
    /* 自适应间距，避免在大屏幕太空旷，在小屏幕太局促 */
    padding-bottom: 30px;
    /* 底部留白 */
}

.footer p {
    margin: 4px 0;
}

.footer a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.footer a:hover {
    color: var(--text-main);
    border-bottom-color: var(--text-main);
}

.search-section {
    position: relative;
    z-index: 150;
    margin-bottom: clamp(8px, 1.5vh, 15px);
    /* 搜索与标签分类自适应间距 */
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* 搜索历史下拉框 */
.search-history-dropdown {
    position: absolute;
    /* top: dynamic via script.js */
    left: 0;
    width: 100%;
    background: var(--search-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--card-border);
    border-top: none;
    /* 移除顶部边框以无缝接壤 */
    border-radius: 0 0 20px 20px;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.2);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    text-align: left;
    box-sizing: border-box;
    max-height: 300px;
    overflow-y: auto;
}

.search-history-dropdown.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.search-history-dropdown li {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: var(--text-main);
    transition: background 0.2s;
    font-size: 0.95rem;
}

.search-history-dropdown li:hover {
    background: rgba(255, 255, 255, 0.1);
}

.search-history-dropdown .history-text {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 15px;
}

.search-history-dropdown .history-delete {
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.search-history-dropdown .history-delete:hover {
    background: rgba(255, 77, 79, 0.2);
    color: #ff4d4f;
}

/* 搜索框外层包裹盒：胶囊形内联设计 */
.search-wrapper {
    display: flex;
    align-items: center;
    background: var(--search-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--card-border);
    border-radius: 30px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.search-wrapper:focus-within {
    border-color: var(--text-main);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

/* 图标型引擎选择器 (新版 Firefox style search engine left icon) */
.engine-selector {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px 0 20px;
    cursor: pointer;
    height: 100%;
}

.engine-selector img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    transition: transform 0.2s ease;
}

.engine-selector:hover img {
    transform: scale(1.1);
}

.engine-dropdown {
    position: absolute;
    top: 45px;
    left: 10px;
    background: var(--search-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    list-style: none;
    padding: 8px 0;
    margin: 0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.engine-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.engine-dropdown li {
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--text-main);
    transition: background 0.2s;
    font-size: 0.9rem;
    white-space: nowrap;
}

.engine-dropdown li:hover {
    background: rgba(255, 255, 255, 0.15);
}

.engine-dropdown li img {
    width: 18px;
    height: 18px;
}

/* 搜索输入框：去除原有边框，与 wrapper 融合 */
.search-input {
    width: 100%;
    padding: 12px 25px 12px 10px;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 1rem;
    outline: none;
    box-sizing: border-box;
}

.search-input::placeholder {
    color: var(--text-muted);
}

/* 搜索提交按钮 */
.search-btn {
    background: transparent;
    border: none;
    color: var(--text-main);
    padding: 8px 20px;
    font-size: 1.1rem;
    cursor: pointer;
    outline: none;
    transition: transform 0.2s ease;
}

.search-btn:hover {
    transform: scale(1.2);
    /* 鼠标悬停时轻微放大，反馈明确 */
}

/* 随机诗词显示容器 */
.poem-container {
    margin-top: 20px;
    font-size: 1.05rem;
    color: var(--text-dim);
    letter-spacing: 1px;
    font-weight: 300;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    transition: color 0.3s ease;
    cursor: default;
    /* 纯展示文本 */
    font-family: "STKaiti", "KaiTi", serif;
    /* 采用楷体或衬线体增加古典韵味 */
}

.poem-container:hover {
    color: #ffffff;
}

/* ==========================================
   自定义标签页添加弹窗 (Modal)
   ========================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    transform: translateY(30px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.modal-overlay.active .modal {
    transform: translateY(0) scale(1);
}

.modal h2 {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.5rem;
    text-align: center;
}

.modal-group {
    margin-bottom: 20px;
}

.modal-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--text-dim);
}

.modal-group input {
    width: 100%;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    color: var(--text-main);
    font-size: 1rem;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.modal-group input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.4);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
}

.modal-btn {
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.modal-btn.cancel {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--card-border);
}

.modal-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}

.modal-btn.save {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.modal-btn.save:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* ==========================================
   8. 分类标签导航 (Tab Bar) - 左对齐 + 紧凑布局
   ========================================== */
.tab-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 5px;
    width: 100%;
    padding: 0;
    overflow: visible;
    position: relative;
    z-index: 100;
}



/* 单个分类标签 */
.tab-item {
    position: relative;
    padding: 7px 18px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: var(--text-dim);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.tab-item:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-main);
}

.tab-item.active {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--text-main);
    font-weight: 600;
}

/* 标签内的菜单按钮 */
.tab-menu-btn {
    opacity: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    line-height: 1;
}

.tab-item:hover .tab-menu-btn {
    opacity: 0.6;
}

.tab-menu-btn:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.15);
}

/* 新建分类按钮 (+) - 居中对齐 */
.add-tab-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.add-tab-btn:hover {
    border-color: var(--text-main);
    color: var(--text-main);
    background: var(--card-hover-bg);
    transform: rotate(90deg);
}

/* 标签下拉菜单：向下弹出（与卡片菜单一致） */
.tab-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: rgba(30, 30, 30, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 5px;
    min-width: 90px;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.tab-dropdown.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.tab-dropdown button {
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.15s;
}

.tab-dropdown button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* 适配手机端页面，将大框强制优化为双列布局且略微缩小内边距 */
@media screen and (max-width: 768px) {
    .top-bar-right {
        gap: 10px;
    }
    .manage-actions {
        grid-template-columns: 1fr;
    }
    .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    .card {
        padding: 15px !important;
    }
    .card h3 {
        font-size: 1.1rem !important;
    }
    .card p {
        font-size: 0.85rem !important;
    }
}