/* Top Movies & Shows — tab switcher + ranked list. */

.services-add-btn {
    margin-left: auto; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--indigo); color: #fff; font-size: .85rem; text-decoration: none;
    transition: background .12s ease;
}
.services-add-btn:hover { background: color-mix(in srgb, var(--indigo) 85%, black); }

.page-head-group { margin-bottom: .2rem; }

.tm-tabs {
    display: flex; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius, 5px); margin-bottom: .2rem; overflow-x: auto; overflow-y: hidden;
    flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tm-tabs::-webkit-scrollbar { display: none; }
.tm-tab {
    flex-shrink: 0; text-align: center; padding: .5rem .7rem; text-decoration: none;
    color: var(--ink-soft); font-weight: 600; font-size: .78rem; position: relative;
    border-bottom: 2px solid transparent; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: .3rem;
}
.tm-tab-active { color: var(--indigo); border-bottom-color: var(--indigo); background: var(--indigo-soft, var(--paper)); }

.tm-list {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 5px);
    overflow: hidden;
}
.tm-row {
    display: flex; align-items: center; gap: .8rem;
    padding: .75rem .9rem; border-bottom: 1px solid var(--border);
}
.tm-row:last-child { border-bottom: none; }
.tm-rank {
    flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--indigo-soft, var(--paper)); color: var(--indigo);
    font-weight: 800; font-size: .9rem; font-family: var(--font-display);
}
.tm-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.tm-title { font-weight: 700; font-size: .92rem; color: var(--ink); }
.tm-note { font-size: .78rem; color: var(--ink-soft); }

.tm-updated { font-size: .78rem; margin: .5rem 0 0; }
.tm-caveat { font-size: .76rem; line-height: 1.5; margin-top: 1rem; }

@media (max-width: 480px) {
    .tm-rank { width: 2.1rem; height: 2.1rem; font-size: .8rem; }
    .tm-title { font-size: .86rem; }
}