/* ===== 全局重置 & 布局 ===== */


.control-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.control-group button {
    padding: 10px 22px;
    border: none;
    background: #007aff;
    color: white;
    border-radius: 40px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    box-shadow: 0 4px 8px rgba(0, 122, 255, 0.2);
    letter-spacing: 0.3px;
}

.control-group button:hover {
    background: #005bbf;
}

.control-group button:active {
    transform: scale(0.96);
}

/* ===== FlipCounter 核心样式 ===== */
.flip-counter {
    display: flex;
    height: var(--digit-height, 60px);

    border-radius: 16px;
    /* background: #ffffffcc; */
    /* backdrop-filter: blur(4px); */
    /* box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06); */
    overflow: hidden;
    transition: padding 0.2s;
}

/* 每一列的容器：宽度动画 + 溢出隐藏 */
.flip-counter .slot-column {
    width: var(--digit-width, 20px);
    height: var(--digit-height, 60px);
    overflow: hidden;
    transition: width var(--speed, 0.6s) cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity var(--speed, 0.6s) ease;
    opacity: 1;
    flex-shrink: 0;
    position: relative;
}

/* 新列（插入动画）：宽度 0 → 正常 */
.flip-counter .slot-column.new {
    width: 0 !important;
    opacity: 0;
    margin: 0 !important;
}

/* 垂直滚动条：数字堆叠 */
.flip-counter .slot-strip {
    display: flex;
    flex-direction: column;
    transition: transform var(--speed, 0.6s) cubic-bezier(0.34, 1.2, 0.64, 1);
    will-change: transform;
}

/* 每个数字格 */
.flip-counter .slot-number {
    height: var(--digit-height, 60px);
    width: var(--digit-width, 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--digit-font-size, 40px);
    font-weight: 600;
    color: var(--digit-color, #1e293b);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    line-height: 1;
    user-select: none;
}

/* 懒加载隐藏 禁止display:none，使用透明度占位保留渲染层 */
.flip-counter.lazy-hidden{
  opacity:0;
  pointer-events:none;
}
.flip-counter.lazy-visible{
  opacity:1;
}