/* =====================================================================
 * 歌词打轴工具 · song-lyric-sync.css
 * 母题：磁带机 —— 复古棕机身、奶油窗口与旋转卷轴
 * 深色主题：复用 :root[data-theme="dark"]，不自建主题按钮
 * ===================================================================== */

.hc--sls {
    --hc-a: #8a5a2b;            /* 复古棕 */
    --hc-a-soft: #f3e9db;
    --sls-body: #e9ddc8;
    --sls-cream: #fbf6ea;
    --sls-glow: #c98b3f;
}

:root[data-theme="dark"] .hc--sls {
    --hc-a: #d9ab74;
    --hc-a-soft: #32271a;
    --sls-body: #2a2216;
    --sls-cream: #1e1a12;
    --sls-glow: #e2b45e;
}

/* ---------- 首屏：磁带 ---------- */
.sls-hero {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 28px;
    align-items: center;
    margin-top: 26px;
}
.sls-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.sls-tape {
    background: var(--sls-body);
    border: 1px solid var(--hc-line);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--hc-shadow-sm);
    display: flex;
    align-items: center;
    gap: 14px;
}
.sls-reel {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--sls-cream);
    border: 3px solid var(--sls-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.sls-reel i {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 3px solid var(--sls-glow);
    background: transparent;
}
.sls-window {
    flex: 1;
    height: 34px;
    border-radius: 8px;
    background: var(--sls-cream);
    border: 2px solid var(--sls-glow);
    position: relative;
    overflow: hidden;
}
.sls-window::after {
    content: '';
    position: absolute;
    left: 8%; right: 8%; top: 45%;
    height: 3px;
    background: var(--sls-glow);
    opacity: .5;
}

@media (max-width: 900px) {
    .sls-hero { grid-template-columns: 1fr; }
}

/* ---------- 卡片 ---------- */
.sls-card { padding: 18px; }
.sls-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 14px;
    margin-bottom: 12px;
}
@media (max-width: 760px) {
    .sls-grid { grid-template-columns: 1fr; }
}

/* ---------- 磁带机面板 ---------- */
.sls-deck { padding: 18px; }
.sls-tape-deck {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--sls-body);
    border-radius: 14px;
    padding: 18px;
    border: 1px solid var(--hc-line);
}
.sls-reel--play {
    width: 64px; height: 64px;
}
.sls-reel--play.is-spin i {
    animation: sls-spin 2.4s linear infinite;
}
@keyframes sls-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .sls-reel--play.is-spin i { animation: none; }
}
.sls-deck-main { flex: 1; min-width: 0; }
.sls-now {
    font-family: var(--hc-serif);
    font-size: 20px;
    color: var(--sls-cream);
    background: var(--hc-ink);
    border-radius: 8px;
    padding: 4px 14px;
    display: inline-block;
    letter-spacing: .06em;
}
.sls-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sls-tip { font-size: 12.5px; color: var(--hc-muted); margin-top: 8px; line-height: 1.7; }

#slsSeek { width: 100%; margin-top: 10px; accent-color: var(--sls-glow); }

/* ---------- 打轴表 ---------- */
.sls-shift {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.sls-shift label { font-size: 13px; color: var(--hc-ink-2); }
.sls-shift input {
    width: 90px;
    border: 1px solid var(--hc-line);
    border-radius: 6px;
    background: var(--hc-card);
    color: var(--hc-ink);
    padding: 4px 8px;
    font-size: 13px;
}
.hc--sls .hc-table td { vertical-align: middle; padding: 5px 8px; }
.sls-idx { font-family: var(--hc-serif); color: var(--hc-muted); }
.sls-time {
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 13px;
    white-space: nowrap;
    color: var(--hc-ink-2);
}
.sls-time.is-set { color: var(--hc-a); font-weight: 700; }
.sls-lyr { max-width: 320px; }
.sls-cur {
    background: var(--hc-a-soft) !important;
    box-shadow: 3px 0 0 var(--hc-a) inset;
}
.hc--sls .hc-table button {
    background: none;
    border: 1px solid var(--hc-line);
    border-radius: 6px;
    color: var(--hc-ink-2);
    font-size: 11.5px;
    padding: 2px 8px;
    cursor: pointer;
    margin: 0 3px 3px 0;
}
.hc--sls .hc-table button:hover { border-color: var(--hc-a); color: var(--hc-a); }