/* ===== 课堂投屏大倒计时 class-timer ===== */
.ct-setup {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}
.ct-task-input {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    color: var(--c-text);
    background: var(--c-surface-soft);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    outline: none;
    text-align: center;
}
.ct-task-input:focus { border-color: #4b47c4; box-shadow: 0 0 0 3px rgba(75,71,196,.15); }

.ct-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.ct-seg button {
    height: 43px;
    border-radius: 12px;
    border: 1px solid var(--c-border);
    background: var(--c-surface-soft);
    color: var(--c-text-sub);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .16s ease;
}
.ct-seg button:hover { border-color: #4b47c4; color: #4b47c4; }
.ct-seg button.is-active {
    background: linear-gradient(135deg, rgba(75,71,196,.16), rgba(75,71,196,.07));
    border-color: rgba(75,71,196,.55);
    color: #3f3ab0;
}

.ct-preset-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ct-preset-label { font-size: 12.5px; color: var(--c-text-muted); margin-right: 2px; }
.ct-preset {
    height: 36px;
    padding: 0 14px;
    border-radius: 99px;
    border: 1px solid var(--c-border);
    background: var(--c-surface-soft);
    color: var(--c-text-sub);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
}
.ct-preset:hover { border-color: #4b47c4; color: #4b47c4; }
.ct-preset.is-on {
    background: #4b47c4;
    border-color: #4b47c4;
    color: #fff;
}
.ct-custom {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--c-text-sub);
    margin-left: 4px;
}
.ct-custom input {
    width: 62px; height: 36px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--c-text);
    background: var(--c-surface-soft);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    -moz-appearance: textfield;
}
.ct-custom input::-webkit-outer-spin-button, .ct-custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 舞台 */
.ct-stage {
    border-radius: 20px;
    border: 1px solid var(--c-border);
    background: var(--c-surface-soft);
    padding: 30px 20px;
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}
.ct-ring-wrap { position: relative; width: min(360px, 78vw); aspect-ratio: 1; }
.ct-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ct-ring-bg { fill: none; stroke: var(--c-border); stroke-width: 10; }
.ct-ring-fg {
    fill: none;
    stroke: #4b47c4;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 678.58;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .4s linear, stroke .3s ease;
}
.ct-stage-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding: 0 20px;
}
.ct-task-show { font-size: 14px; font-weight: 700; color: var(--c-text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-time {
    font-size: clamp(54px, 12vw, 88px);
    font-weight: 900;
    line-height: 1.1;
    color: #3f3ab0;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.ct-state { font-size: 13px; color: var(--c-text-muted); }

.ct-stage.is-run .ct-ring-fg { stroke: #4b47c4; }
.ct-stage.is-run .ct-time { color: #3f3ab0; }
.ct-stage.is-done .ct-ring-fg { stroke: #ff5a5f; }
.ct-stage.is-done .ct-time { color: #ff3b42; animation: ctPulse .8s ease infinite alternate; }
.ct-stage.is-end .ct-ring-fg { stroke: #34c759; }
.ct-stage.is-end .ct-time { color: #1f9d43; }
@keyframes ctPulse { from { transform: scale(1); } to { transform: scale(1.06); } }

.ct-btns { display: flex; gap: 12px; }
.ct-mainbtn { flex: 1; height: 54px; font-size: 17px; font-weight: 800; }
.ct-btns .btn-ghost { width: 130px; font-weight: 700; }

/* 全屏层 */
.ct-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(160deg, #171c38 0%, #0d1128 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.ct-overlay-close {
    position: absolute;
    top: 22px; right: 26px;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}
.ct-overlay-close:hover { background: rgba(255,255,255,.2); }
.ct-overlay-inner { text-align: center; padding: 20px; }
.ct-ov-task { font-size: clamp(20px, 3.4vw, 34px); font-weight: 700; color: rgba(255,255,255,.75); margin-bottom: 10px; }
.ct-ov-time {
    font-size: clamp(120px, 26vw, 300px);
    font-weight: 900;
    line-height: 1.05;
    color: #8e8aff;
    font-variant-numeric: tabular-nums;
}
.ct-overlay-inner.is-run .ct-ov-time { color: #9b97ff; }
.ct-overlay-inner.is-done .ct-ov-time { color: #ff6b70; animation: ctPulse .8s ease infinite alternate; }
.ct-overlay-inner.is-end .ct-ov-time { color: #5fe884; }
.ct-ov-state { font-size: clamp(15px, 2.4vw, 22px); color: rgba(255,255,255,.55); min-height: 30px; margin: 8px 0 30px; }
.ct-ov-go {
    border: none;
    background: linear-gradient(135deg, #6c6af5, #4b47c4);
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    font-family: inherit;
    padding: 18px 76px;
    border-radius: 99px;
    cursor: pointer;
    box-shadow: 0 14px 44px rgba(75,71,196,.5);
}
.ct-ov-go:active { transform: scale(.97); }

@media (max-width: 760px) {
    .ct-btns { flex-wrap: wrap; }
    .ct-mainbtn { flex-basis: 100%; }
    .ct-btns .btn-ghost { width: calc(50% - 6px); }
}