/* 主页特定样式 */

/* 历史记录和设置按钮定位样式 */
.top-corner-button {
    position: fixed;
    z-index: 10;
    background: #222;
    border: 1px solid #333;
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    transition: all 0.2s ease;
}

.top-corner-button:hover {
    background: #333;
    border-color: white;
}

/* 搜索区域样式 */
.search-box {
    height: 3.5rem;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.search-button {
    width: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: black;
    font-weight: 500;
    transition: background-color 0.2s;
}

.search-button:hover {
    background: #f0f0f0;
}

.search-input {
    flex: 1;
    background: #111;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    color: white;
    padding: 0 1.5rem;
    font-size: 1rem;
    outline: none;
    transition: background-color 0.2s;
}

.search-input:focus {
    background: #191919;
}

/* 最近搜索记录样式 */
.recent-search-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    margin: 0.25rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 0.5rem;
    color: #e5e7eb;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.recent-search-tag:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
}

/* 豆瓣区域样式 */
.douban-container {
    margin: 2rem auto;
    max-width: 1280px;
    padding: 0 0.5rem;
}

.douban-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.douban-toggle {
    display: flex;
    align-items: center;
    background: #222;
    border-radius: 9999px;
    padding: 0.25rem;
}

.douban-toggle-button {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 9999px;
}

.douban-toggle-button.active {
    background: #db2777;
    color: white;
}

.douban-toggle-button:not(.active) {
    color: #9ca3af;
}

.douban-toggle-button:not(.active):hover {
    color: white;
}

.douban-refresh-button {
    font-size: 0.875rem;
    padding: 0.25rem 0.75rem;
    background: #db2777;
    color: white;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.douban-refresh-button:hover {
    background: #be185d;
}

.douban-tags-container {
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.douban-tags {
    display: flex;
    gap: 0.5rem;
    min-width: max-content;
}

.douban-tag {
    padding: 0.25rem 0.75rem;
    background: rgba(219, 39, 119, 0.1);
    border: 1px solid rgba(219, 39, 119, 0.2);
    border-radius: 0.5rem;
    color: #f9a8d4;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.douban-tag:hover {
    background: rgba(219, 39, 119, 0.2);
    border-color: rgba(219, 39, 119, 0.4);
}

.douban-tag.active {
    background: #db2777;
    border-color: #db2777;
    color: white;
}

/* 搜索结果样式 */
.search-results-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 0.5rem;
}

.search-result-stats {
    text-align: right;
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}

/* 响应式网格布局 */
.search-results-grid {
    display: grid;
    gap: 1rem;
}

@media (max-width: 640px) {
    .search-results-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .search-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .search-results-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1025px) {
    .search-results-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 资源选择器样式 */
/* 下拉容器：添加圆角边框、分层和展开阴影的包裹器，模仿资源推荐卡片风格 */
.resource-select {
    display: inline-block;
    border-radius: 0.75rem; /* 与未展开时一致的圆角 */
    position: relative;
}

/* 给选择框一个覆盖层次的阴影和边框，让展开感更强 */
.resource-select select#resourceSelector {
    border-radius: 0.75rem; /* 与容器一致的圆角 */
}

/* 展开时的外圈高亮：利用 focus-within 捕获 select 聚焦 */
.resource-select:focus-within {
    box-shadow: 0 10px 24px rgba(0,0,0,0.35), 0 0 0 2px rgba(236, 72, 153, 0.35);
    border-color: transparent; /* 防止重叠描边 */
    z-index: 20; /* 确保投影不被周围元素遮挡 */
}

/* 伪下拉容器“封口”：仅做视觉承托效果，不影响交互 */
.resource-select::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 4px); /* 轻微上移，与选择框贴合 */
    height: 14px; /* 底部封口厚度 */
    background: linear-gradient(180deg, rgba(26,26,26,1) 0%, rgba(15,15,15,1) 100%);
    border: 1px solid #333; /* 与选择框一致的描边 */
    border-top: none; /* 顶部与选择框边缘合并 */
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem; /* 保持圆角风格 */
    box-shadow: 0 14px 28px rgba(0,0,0,0.35);
    opacity: 0;
    transform: translateY(-6px);
    transition: all .18s ease;
    pointer-events: none; /* 不阻挡原生下拉交互 */
    z-index: 5; /* 在选择框背后但高于背景 */
}
.resource-select:focus-within::after {
    opacity: 1;
    transform: translateY(0);
}

/* 美化首页资源选择下拉框，仅作用于该元素 */
#resourceSelector {
    -webkit-appearance: none; /* Safari/Chrome 隐藏原生箭头 */
    -moz-appearance: none;    /* Firefox 隐藏原生箭头 */
    appearance: none;         /* 标准属性 */

    /* 双层背景：自定义箭头 + 轻微质感渐变 */
    background-image:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239aa0a6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"),
        linear-gradient(180deg, rgba(42,42,42,0.95) 0%, rgba(30,30,30,0.95) 100%);
    background-position: right 0.75rem center, 0 0;
    background-repeat: no-repeat, no-repeat;
    background-size: 1.15em 1.15em, 100% 100%;

    /* 尺寸与间距 */
    min-height: 2.5rem;                /* 提升可点击性 */
    padding-right: 2.5rem;             /* 为箭头留出空间 */
    padding-left: 0.875rem;            /* 左侧留白 */
    border-radius: 0.75rem;            /* 略大圆角更柔和 */

    /* 文本可读性 */
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;

    /* 边框与阴影层次 */
    border: 1px solid #3a3a3a;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.04), /* 内描边提亮 */
      0 8px 20px rgba(0,0,0,0.25);            /* 外投影微浮起 */

    /* 交互动画 */
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, background-image .2s ease, transform .08s ease;

    /* 触摸与可读性优化 */
    -webkit-tap-highlight-color: transparent;
    color: #fff;
}

#resourceSelector:hover {
    border-color: #5a5a5a;
    background-image:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23c7c9cc' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"),
        linear-gradient(180deg, rgba(50,50,50,0.95) 0%, rgba(28,28,28,0.95) 100%);
}

#resourceSelector:active {
    transform: scale(0.995);
}

#resourceSelector:focus,
#resourceSelector:focus-visible {
    outline: none;
    border-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(236,72,153,0.35), inset 0 0 0 1px rgba(255,255,255,0.06);
    background-image:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"),
        linear-gradient(180deg, rgba(55,55,55,1) 0%, rgba(32,32,32,1) 100%);
}

#resourceSelector:disabled {
    cursor: not-allowed;
    opacity: .6;
    filter: grayscale(25%);
}

/* 选项面板颜色（受浏览器限制，尽力统一） */
#resourceSelector option {
    background: #111;
    color: #e5e7eb; /* tailwind text-gray-200 */
    padding: 0.5rem 0.75rem; /* 统一选项的内边距，使列表更易读 */
    font-size: 0.95rem;
}
#resourceSelector option:hover {
    background-color: #1f2937; /* tailwind gray-800 */
    color: #fff;
}
#resourceSelector option:checked {
    background-color: #374151; /* tailwind gray-700 */
    color: #fff;
}

/* 隐藏 IE/Edge 旧版的下拉箭头 */
#resourceSelector::-ms-expand {
    display: none;
}

/* 减少动画偏好时收敛动效 */
@media (prefers-reduced-motion: reduce) {
    #resourceSelector {
        transition: none;
    }
}

/* 自定义下拉组件（用于替代原生展开样式） */
.native-select-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.custom-select {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-select-trigger {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 2.25rem 0.5rem 0.875rem;
    border-radius: 0.75rem;
    background: linear-gradient(180deg, rgba(42,42,42,0.95) 0%, rgba(30,30,30,0.95) 100%);
    border: 1px solid #3a3a3a;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 8px 20px rgba(0,0,0,0.25);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .08s ease;
}

.custom-select-trigger:hover {
    border-color: #5a5a5a;
}

.custom-select-trigger:focus {
    outline: none;
    border-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(236,72,153,0.35), inset 0 0 0 1px rgba(255,255,255,0.06);
}

.custom-select .arrow {
    position: absolute;
    pointer-events: none;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.1rem;
    height: 1.1rem;
    color: #c7c9cc;
    transition: transform .2s ease;
}

.custom-select.open .arrow {
    transform: translateY(-50%) rotate(180deg);
}

.custom-select-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
    border: 1px solid #333;
    border-radius: 0.75rem;
    box-shadow: 0 16px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
    padding: 6px;
    z-index: 60;
    max-height: 320px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

.custom-select.open .custom-select-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.custom-select-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 10px;
    border-radius: 0.5rem;
    color: #e5e7eb;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.custom-select-option:hover {
    background-color: #1f2937;
    color: #fff;
}

.custom-select-option.active {
    background-color: #374151;
    color: #fff;
}

.custom-select-option .check {
    width: 14px;
    height: 14px;
    color: #93c5fd;
    opacity: 0;
}

.custom-select-option.active .check {
    opacity: 1;
}

/* 资源子区域样式 */
.resource-sub-area {
    transition: all 0.3s ease-in-out;
}

.resource-sub-area.hidden {
    display: none;
}

/* 刷新按钮渐变效果 */
#resource-refresh {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: all 0.3s ease;
}

#resource-refresh:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}