/* ============ OneNav 热榜快捷栏 v1.1.12 ============ */

.hotbar-container {
    width: 100%;
    max-width: var(--main-max-width, 1200px);
    margin: 2px auto 12px !important;
    padding: var(--hotbar-container-padding, 5px) !important;
    box-sizing: border-box;
    background: rgba(255, 255, 255, var(--cp-header-opacity, 1)) !important;
    border-radius: var(--hotbar-container-radius, 10px) !important;
    position: relative;
    z-index: 10;
}
/* 夜间模式容器背景 */
.io-black-mode .hotbar-container {
    background: rgba(30, 30, 30, var(--cp-header-opacity, 1)) !important;
    border-radius: var(--hotbar-container-radius, 10px) !important;
}
.hotbar-modules {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) !important;
    gap: 8px !important;
    padding: var(--hotbar-grid-padding, 5px) !important;
    background: var(--main-bg-color, #fff) !important;
    border-radius: var(--hotbar-grid-radius, 12px) !important;
}
.hotbar-module {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--hotbar-icon-gap, 4px) !important;
    padding: 8px 6px 8px 10px !important;
    background: transparent !important;
    color: var(--muted-color, #607D8B) !important;
    border-radius: var(--cp-card-radius, 10px) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
    border: 1px solid rgba(230, 232, 234, 0.6) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    position: relative;
}
/* 彩色左边框 - 新顺序：黄、绿、红、蓝、橙、紫、青、粉、橙红、浅绿、黄、深蓝 */
.hotbar-module:nth-child(1)  { border-color: #FFC107 !important; }
.hotbar-module:nth-child(2)  { border-color: #4CAF50 !important; }
.hotbar-module:nth-child(3)  { border-color: #FF6B6B !important; }
.hotbar-module:nth-child(4)  { border-color: #2196F3 !important; }
.hotbar-module:nth-child(5)  { border-color: #FF9800 !important; }
.hotbar-module:nth-child(6)  { border-color: #9C27B0 !important; }
.hotbar-module:nth-child(7)  { border-color: #00BCD4 !important; }
.hotbar-module:nth-child(8)  { border-color: #E91E63 !important; }
.hotbar-module:nth-child(9)  { border-color: #FF5722 !important; }
.hotbar-module:nth-child(10) { border-color: #8BC34A !important; }
.hotbar-module:nth-child(11) { border-color: #FFC107 !important; }
.hotbar-module:nth-child(12) { border-color: #3F51B5 !important; }
.hotbar-module:hover {
    transform: translateY(calc(-1 * var(--cp-hover-float-px, 2px))) !important;
    border-color: var(--theme-color, #339900) !important;
    background: var(--main-bg-color, #fff) !important;
    color: var(--theme-color, #339900) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
}
.hotbar-icon {
    width: 20px !important;
    height: 20px !important;
    border-radius: var(--hotbar-icon-radius, 8px) !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
}
.hotbar-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* 夜间模式 */
.io-black-mode .hotbar-container {
    background: rgba(30, 30, 30, var(--cp-header-opacity, 1)) !important;
    border-radius: var(--hotbar-container-radius, 10px) !important;
}
.io-black-mode .hotbar-modules {
    background: var(--main-bg-color, #2d2d2d) !important;
}
.io-black-mode .hotbar-module {
    background: transparent !important;
    border-color: rgba(80, 80, 80, 0.6) !important;
    color: var(--muted-color, #aaa) !important;
}
.io-black-mode .hotbar-module:hover {
    color: var(--theme-color, #339900) !important;
    border-color: var(--theme-color, #339900) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.35) !important;
}

/* ============ 手机端：不显示 ============ */
@media (max-width: 767.98px) {
    .hotbar-container {
        display: none !important;
    }
}

/* ============ 平板端：5列 ============ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hotbar-modules {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}