/* ========== 走马灯卡片 - 斜线设计 ========== */

.ticker-card {
    padding: 0 10px 0 0 ;
    background: var(--lovely-div-bg);
    margin-top: 0;
}

/* 面板：flex 容器，没有内边距，由子元素控制 */
.ticker-panel {
    display: flex;
    overflow: hidden;
}

/* ===== 斜线标签 ===== */
.ticker-prefix {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: var(--gap-small);
    background: var(--major-div-bg);
    white-space: nowrap;
    letter-spacing: 0.02em;
    min-width: 65px;
    font-size: var(--font-small);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
}

/* ===== 滚动区域 ===== */
.ticker-scroller {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: var(--gap-small);
}

/* 滚动轨道 */
.ticker-track {
    display: flex;
    animation: tickerScroll var(--duration, 60s) linear infinite;
    width: max-content; /*新增的*/
}

.ticker-card:hover .ticker-track {
    animation-play-state: paused;
}
/* ===== 按钮托盘和按钮 ===== */
/*复用main.css的基础btn-group和btn,  同时也有一些托盘和按钮的特殊设计，以适应走马灯效果*/

.ticker-group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: 0 6px 0 0; /* 组末尾间距 = 组内间距 */
}

.ticker-item {
    margin-right: 4px; /* 组内按钮间距 */
}

.ticker-item :lastchild{
    margin-right: 0; /* 最后一个不用 margin，由父容器 padding-right 控制 */
}


/* ===== 动画 ===== */
@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}