*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--tvprog-page-bg);
}

body {
    min-height: 100%;
    margin: 0;
    color: #000080;
    background: var(--tvprog-bg-radial-one), var(--tvprog-bg-radial-two), var(--tvprog-page-bg);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.4;
}

a {
    color: #0056d6;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.17em;
}

a:hover,
a:focus-visible {
    text-decoration-thickness: 0.13em;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

.tvprog-page {
    min-height: calc(100vh - 3.5rem);
    padding: 0.38rem 0 0.85rem;
}

.tvprog-container {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 0.42rem;
}

.tvprog-hero {
    max-width: 50rem;
    margin: 0 auto 0.48rem;
    text-align: center;
}

.tvprog-hero h1 {
    margin: 0.22rem 0 0.08rem;
    color: var(--tvprog-h1-color);
    font-size: var(--tvprog-h1-size);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.tvprog-lead {
    margin: 0;
    color: var(--tvprog-h2-color);
    font-size: var(--tvprog-h2-size);
    line-height: 1.32;
}

.tvprog-shell {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
}

.tvprog-nav {
    position: sticky;
    top: 0.18rem;
    z-index: 10;
    width: 100%;
    margin: 0 0 0.45rem;
}

.tvprog-nav-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0.18rem 0.28rem;
    color: var(--tvprog-nav-color);
    background: var(--tvprog-nav-bg);
    border: 1px solid var(--tvprog-nav-border);
    border-radius: 999rem;
    box-shadow: 0 0.32rem 0.9rem rgba(0, 0, 128, 0.07);
    backdrop-filter: blur(0.65rem);
}

.tvprog-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.92rem;
    min-width: 1.92rem;
    min-height: 1.82rem;
    padding: 0.08rem 0.18rem;
    color: var(--tvprog-nav-color);
    background: var(--tvprog-nav-btn-bg);
    border: 1px solid rgba(216, 208, 255, 0.9);
    border-radius: 999rem;
    font-size: var(--tvprog-nav-size);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.tvprog-nav-btn:hover,
.tvprog-nav-btn:focus-visible {
    background: var(--tvprog-nav-btn-hover-bg);
    border-color: var(--tvprog-nav-btn-active);
    transform: translateY(-0.03rem);
    outline: 0.14rem solid rgba(0, 86, 214, 0.18);
    outline-offset: 0.08rem;
}

.tvprog-nav-btn-active {
    color: var(--tvprog-nav-btn-active);
    border-color: var(--tvprog-nav-btn-active);
}

.tvprog-date-label {
    display: inline-flex;
    align-items: center;
    min-height: 1.82rem;
    padding: 0 0.46rem;
    color: var(--tvprog-nav-date-color);
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
}

.tvprog-calendar-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tvprog-date-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.01;
    pointer-events: none;
}

.tvprog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.52rem;
    align-items: start;
}

.tvprog-channel {
    min-width: 0;
    overflow: clip;
    color: var(--tvprog-fg);
    background: rgba(255, 255, 255, 0.66);
    border: var(--tvprog-card-border-width) solid var(--tvprog-card-border);
    border-radius: 0.95rem;
    box-shadow: var(--tvprog-card-shadow);
    backdrop-filter: blur(0.45rem);
}

.tvprog-channel-title {
    position: sticky;
    top: 2.58rem;
    z-index: 4;
    margin: 0;
    padding: 0.34rem 0.55rem;
    color: var(--tvprog-channel-color);
    background: var(--tvprog-channel-bg);
    border-bottom: 1px solid var(--tvprog-channel-border);
    font-size: var(--tvprog-channel-size);
    font-weight: var(--tvprog-channel-weight);
    line-height: 1.08;
    text-align: center;
    backdrop-filter: blur(0.5rem);
}

.tvprog-program-list {
    display: block;
    padding: 0.14rem 0.46rem 0.22rem;
    background: var(--tvprog-program-bg);
}

.tvprog-program {
    min-width: 0;
    margin: 0;
    padding: 0.16rem 0 0.12rem;
    color: var(--tvprog-program-color);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(216, 208, 255, 0.46);
    border-radius: 0;
    box-shadow: none;
}

.tvprog-program:last-child {
    border-bottom: 0;
}

.tvprog-program-line {
    display: flex;
    align-items: baseline;
    gap: 0;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.tvprog-program-time {
    flex: 0 0 auto;
    min-width: 3.04rem;
    color: var(--tvprog-time);
    font-size: 0.87rem;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    line-height: 1.18;
    text-align: right;
}
.tvprog-inline-space {
    flex: 0 0 0.28rem;
    width: 0.28rem;
    min-width: 0.28rem;
}
.tvprog-imdb-in-details [data-tvprog-imdb-space],
.tvprog-imdb-row:empty {
    display: none;
}

.tvprog-status-now .tvprog-program-time {
    color: var(--tvprog-now-time);
}

.tvprog-program-title {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    color: var(--tvprog-program-color);
    font-size: var(--tvprog-program-size);
    font-weight: var(--tvprog-program-weight);
    line-height: 1.22;
    text-align: left;
}

.tvprog-title-text {
    white-space: nowrap;
}

.tvprog-program-title-button {
    display: inline-flex;
    width: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0.28rem;
    text-decoration: none;
}

.tvprog-program-title-button:hover,
.tvprog-program-title-button:focus-visible {
    color: #0056d6;
    outline: 0.12rem solid rgba(0, 86, 214, 0.18);
    outline-offset: 0.06rem;
    text-decoration: underline;
    text-decoration-thickness: 0.07em;
    text-underline-offset: 0.14em;
}

.tvprog-status-now {
    color: var(--tvprog-now-fg);
    background: linear-gradient(90deg, rgba(255, 247, 168, 0.78) 0%, rgba(255, 247, 168, 0.26) 76%, transparent 100%);
    border-radius: 0.38rem;
    padding-left: 0.2rem;
    padding-right: 0.18rem;
}

.tvprog-status-now .tvprog-program-title {
    color: var(--tvprog-program-now-color);
    font-weight: var(--tvprog-program-now-weight);
}

.tvprog-status-past {
    opacity: 0.68;
}

.tvprog-imdb-row {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
}

.tvprog-imdb {
    display: inline-flex;
    align-items: center;
    min-height: 1.05rem;
    padding: 0 0.12rem;
    color: var(--tvprog-imdb-color);
    background: var(--tvprog-imdb-bg);
    border-radius: 0.22rem;
    font-size: var(--tvprog-imdb-size);
    font-weight: var(--tvprog-imdb-weight);
    line-height: 1.15;
    white-space: nowrap;
}

.tvprog-end-hidden [data-tvprog-end-time] {
    display: none;
}

.tvprog-title-truncated .tvprog-program-title {
    overflow: hidden;
}

.tvprog-title-truncated .tvprog-title-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tvprog-details {
    margin: 0.24rem 0 0.08rem 3.38rem;
    padding: 0.42rem 0.52rem;
    color: #000080;
    background: rgba(244, 240, 255, 0.9);
    border: 1px solid rgba(216, 208, 255, 0.92);
    border-radius: 0.62rem;
    font-size: 0.88rem;
    line-height: 1.4;
    cursor: pointer;
}

.tvprog-details:focus-visible {
    outline: 0.14rem solid rgba(0, 86, 214, 0.24);
    outline-offset: 0.08rem;
}

.tvprog-details p {
    margin: 0.12rem 0;
}

.tvprog-details p:first-child {
    margin-top: 0;
}

.tvprog-details p:last-child {
    margin-bottom: 0;
}

.tvprog-full-title strong {
    font-weight: 800;
}

.tvprog-details-imdb {
    cursor: default;
}

.tvprog-progress {
    position: relative;
    width: 100%;
    height: var(--tvprog-progress-height);
    margin-top: 0.15rem;
    overflow: hidden;
    background: var(--tvprog-progress-bg);
    border-radius: var(--tvprog-progress-radius);
}

.tvprog-progress-fill {
    display: block;
    height: 100%;
    background: var(--tvprog-progress-fill);
    border-radius: inherit;
}

.tvprog-progress-now .tvprog-progress-fill {
    box-shadow: var(--tvprog-progress-now-shadow);
}

.tvprog-progress-past .tvprog-progress-fill {
    background: var(--tvprog-progress-past);
}

.tvprog-progress-future .tvprog-progress-fill {
    background: var(--tvprog-progress-future);
}

.tvprog-empty {
    max-width: 42rem;
    margin: 0.35rem auto;
    padding: 0.62rem 0.78rem;
    color: #000080;
    text-align: center;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #d8d0ff;
    border-radius: 0.82rem;
    box-shadow: 0 0.42rem 1.1rem rgba(0, 0, 128, 0.06);
}

.tvprog-footer {
    padding: 0.68rem 0.45rem 1rem;
    color: var(--tvprog-footer-color);
    font-size: var(--tvprog-footer-size);
    text-align: center;
}

.tvprog-footer p,
.tvprog-footer-extra {
    margin: 0;
}

.tvprog-footer-main a {
    color: inherit;
    font-weight: 650;
    text-decoration: none;
}

.tvprog-footer-main a:hover,
.tvprog-footer-main a:focus-visible {
    color: #0056d6;
    text-decoration: underline;
}

.tvprog-footer-updated {
    color: var(--tvprog-updated-color);
    font-size: var(--tvprog-updated-size);
    line-height: 1.35;
}

.tvprog-footer-main + .tvprog-footer-updated,
.tvprog-footer-updated + .tvprog-footer-main,
.tvprog-footer-extra + .tvprog-footer-updated,
.tvprog-footer-updated + .tvprog-footer-extra {
    margin-top: 0.18rem;
}

.tvprog-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
}

img {
    max-width: 100%;
    height: auto;
}

@media (min-width: 34rem) {
    .tvprog-container {
        padding: 0 0.65rem;
    }

    .tvprog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 58rem) {
    .tvprog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 78rem) {
    .tvprog-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 25rem) {
    .tvprog-container {
        padding: 0 0.3rem;
    }

    .tvprog-nav-inner {
        gap: 0.13rem;
        padding: 0.15rem 0.22rem;
    }

    .tvprog-nav-btn {
        width: 1.72rem;
        min-width: 1.72rem;
        min-height: 1.72rem;
    }

    .tvprog-date-label {
        padding: 0 0.34rem;
        font-size: 0.86rem;
    }

    .tvprog-program-list {
        padding-left: 0.28rem;
        padding-right: 0.28rem;
    }

    .tvprog-program-time {
        min-width: 2.82rem;
        font-size: 0.84rem;
    }

    .tvprog-details {
        margin-left: 0;
        font-size: 0.86rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto;
        transition-duration: 0.001ms;
        animation-duration: 0.001ms;
        animation-iteration-count: 1;
    }
}