/* dom2vse.ru v1.5.0 */

/* Header — reproduce the approved mockup proportions without copying its logo. */
@media(min-width:901px){
    .vse-header__row{
        gap:18px!important;
    }
    .vse-brand{
        min-width:150px!important;
        margin-right:14px!important;
    }
    .vse-nav{
        gap:7px!important;
    }
    .vse-nav a{
        padding:10px 13px!important;
        border-radius:12px!important;
    }
    .vse-nav__today{
        display:inline-flex!important;
        align-items:center!important;
        gap:7px!important;
        padding:10px 15px!important;
        background:#f2f6ff!important;
        color:#4d6fc4!important;
        box-shadow:inset 0 0 0 1px rgba(98,140,245,.035)!important;
    }
    .vse-nav__today svg{
        width:18px!important;
        height:18px!important;
        flex:0 0 18px!important;
        fill:none!important;
        stroke:#5f83e5!important;
        stroke-width:1.8!important;
        stroke-linecap:round!important;
        stroke-linejoin:round!important;
    }
    .vse-nav__today:hover,
    .vse-nav__today.is-active{
        background:#edf3ff!important;
        color:#395fae!important;
    }
}

/* Broadcast icon from the approved mockup. */
.vse-onair__head h2{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
}
.vse-onair__live-icon{
    display:inline-grid!important;
    place-items:center!important;
    width:20px!important;
    height:20px!important;
    color:#ff6e82!important;
    flex:0 0 20px!important;
}
.vse-onair__live-icon svg{
    display:block!important;
    width:20px!important;
    height:20px!important;
    fill:currentColor!important;
    stroke:currentColor!important;
    stroke-width:1.65!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
}
.vse-onair__live-icon svg path{
    fill:none!important;
}

/* Categories — exactly three cards per row on desktop. */
@media(min-width:1021px){
    .vse-category .vse-grid{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:22px!important;
    }
}
@media(min-width:621px) and (max-width:1020px){
    .vse-category .vse-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}
@media(max-width:620px){
    .vse-category .vse-grid{
        grid-template-columns:1fr!important;
    }
}

/* Same-day cards: animated lift + rear shadow. */
.vse-same-day__item{
    position:relative!important;
    transform:translateY(0);
    transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,border-color .22s ease,background-color .22s ease!important;
    will-change:transform;
}
@media(hover:hover) and (pointer:fine){
    .vse-same-day__item:hover{
        transform:translateY(-4px)!important;
        border-color:#d8deef!important;
        box-shadow:0 14px 30px rgba(37,49,86,.13),0 4px 10px rgba(37,49,86,.07)!important;
        z-index:2;
    }
}

/* Profile settings is a button, styled exactly like the old link. */
.vse-profile-settings-jump{
    appearance:none!important;
    border:0!important;
    background:transparent!important;
    color:inherit!important;
    font:inherit!important;
    font-weight:inherit!important;
    cursor:pointer!important;
    padding:0!important;
}
.vse-profile-settings-jump:hover{
    color:#557bd2!important;
}
#profile-settings{
    scroll-margin-top:104px;
}

/* Rendering/performance: skip layout/paint of offscreen cards where supported. */
@supports(content-visibility:auto){
    .vse-category .vse-card,
    .vse-feed .vse-card{
        content-visibility:auto;
        contain-intrinsic-size:320px 360px;
    }
}

/* Hide accidental fallback copyright blocks from another skin.
 * Our own .vse-footer is not affected.
 */
body>.copyright,
.vse-main>.copyright{
    display:none!important;
}

@media(prefers-reduced-motion:reduce){
    .vse-same-day__item{
        transition:none!important;
    }
    .vse-same-day__item:hover{
        transform:none!important;
    }
}

/* dom2vse.ru v1.5.1 — approved header colors + actual calendar from "Сегодня" */

/* Category names in the mockup are neutral dark gray, not blue/near-black. */
.vse-nav .vse-nav__category{
    color:#3f424a!important;
    font-weight:600!important;
    letter-spacing:-.01em!important;
}
.vse-nav .vse-nav__category:hover,
.vse-nav .vse-nav__category.is-active{
    color:#30343d!important;
    background:#f7f8fb!important;
}

/* "Сегодня" is now a real button opening the calendar. */
.vse-header-calendar{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
}
.vse-nav .vse-nav__today{
    appearance:none!important;
    border:0!important;
    font:inherit!important;
    font-weight:650!important;
    cursor:pointer!important;
    white-space:nowrap!important;
}
@media(min-width:901px){
    .vse-nav .vse-nav__today{
        min-height:42px!important;
        padding:10px 15px!important;
        background:#f1f5ff!important;
        color:#456ac3!important;
        border-radius:13px!important;
        box-shadow:none!important;
    }
    .vse-nav .vse-nav__today:hover,
    .vse-nav .vse-nav__today[aria-expanded="true"]{
        background:#eaf1ff!important;
        color:#365dad!important;
    }
}

/* Compact floating calendar panel. Native date input opens the OS/browser calendar. */
.vse-header-calendar__popover{
    position:absolute!important;
    z-index:1600!important;
    top:calc(100% + 12px)!important;
    left:0!important;
    width:310px!important;
    padding:16px!important;
    border:1px solid #e1e7f2!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 18px 48px rgba(42,56,91,.16),0 5px 16px rgba(42,56,91,.08)!important;
}
.vse-header-calendar__popover[hidden]{
    display:none!important;
}
.vse-header-calendar__top{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin-bottom:12px!important;
}
.vse-header-calendar__top strong{
    color:#242a36!important;
    font-size:14px!important;
    font-weight:750!important;
}
.vse-header-calendar__close{
    display:grid!important;
    place-items:center!important;
    width:28px!important;
    height:28px!important;
    padding:0!important;
    border:0!important;
    border-radius:9px!important;
    background:#f5f7fb!important;
    color:#687287!important;
    cursor:pointer!important;
    font-size:20px!important;
    line-height:1!important;
}
.vse-header-calendar__form{
    display:grid!important;
    gap:7px!important;
}
.vse-header-calendar__form>label{
    color:#7b8495!important;
    font-size:11px!important;
    font-weight:750!important;
    text-transform:uppercase!important;
    letter-spacing:.07em!important;
}
.vse-header-calendar__form>div{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:8px!important;
}
.vse-header-calendar__form input{
    min-width:0!important;
    height:42px!important;
    padding:0 10px!important;
    border:1px solid #dce3ef!important;
    border-radius:11px!important;
    background:#fbfcff!important;
    color:#313743!important;
    outline:0!important;
}
.vse-header-calendar__form input:focus{
    border-color:#9fb8f2!important;
    box-shadow:0 0 0 3px rgba(98,140,245,.1)!important;
}
.vse-header-calendar__form button{
    height:42px!important;
    padding:0 14px!important;
    border:0!important;
    border-radius:11px!important;
    background:#628cf5!important;
    color:#fff!important;
    font-weight:750!important;
    cursor:pointer!important;
}
.vse-header-calendar__form button:hover{
    background:#537ee8!important;
}

/* Keep the visual distance from the logo like the approved mockup. */
@media(min-width:901px){
    .vse-brand{
        margin-right:22px!important;
    }
    .vse-nav{
        gap:12px!important;
    }
}

/* Mobile: calendar panel fills the navigation width instead of overflowing. */
@media(max-width:900px){
    .vse-header-calendar{
        width:100%!important;
        display:block!important;
    }
    .vse-nav .vse-nav__today{
        width:100%!important;
        display:flex!important;
        justify-content:flex-start!important;
        padding:12px!important;
        border-radius:12px!important;
        background:#f1f5ff!important;
        color:#456ac3!important;
    }
    .vse-header-calendar__popover{
        position:relative!important;
        top:auto!important;
        left:auto!important;
        width:100%!important;
        margin-top:8px!important;
        box-shadow:0 10px 28px rgba(42,56,91,.10)!important;
    }
    .vse-nav .vse-nav__category{
        width:100%!important;
        padding:12px!important;
    }
}

/* dom2vse.ru v1.5.2 — one native calendar, no double popover */

/* Disable the old custom-popover model from v1.5.1. */
.vse-header-calendar__popover{
    display:none!important;
}

/*
 * The native <input type=date> is stretched over the visible control.
 * Therefore one click opens exactly one browser calendar and nothing else.
 */
.vse-native-date-trigger{
    position:relative!important;
    cursor:pointer!important;
    user-select:none!important;
}
.vse-native-date-trigger>input[type="date"][data-vse-calendar-input]{
    position:absolute!important;
    inset:0!important;
    z-index:5!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    opacity:0!important;
    cursor:pointer!important;
    color:transparent!important;
    background:transparent!important;
}
.vse-native-date-trigger>input[type="date"][data-vse-calendar-input]::-webkit-calendar-picker-indicator{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    cursor:pointer!important;
}

/* Header Today stays exactly as the approved blue pill. */
.vse-nav .vse-header-calendar.vse-nav__today{
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
}

/* Category calendar remains visually a button, but no longer navigates on click. */
.vse-category-calendar{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    cursor:pointer!important;
    text-decoration:none!important;
}
.vse-category-calendar:focus-within{
    border-color:#9fb8f2!important;
    box-shadow:0 0 0 3px rgba(98,140,245,.10)!important;
}

@media(max-width:900px){
    .vse-nav .vse-header-calendar.vse-nav__today{
        width:100%!important;
    }
}

/* dom2vse.ru v1.5.4 — styled episode calendar */

/* Header "Сегодня" is a link, not a date picker. */
.vse-nav .vse-nav__today-link{
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
    text-decoration:none!important;
    cursor:pointer!important;
}
@media(min-width:901px){
    .vse-nav .vse-nav__today-link{
        min-height:42px!important;
        padding:10px 15px!important;
        background:#f1f5ff!important;
        color:#456ac3!important;
        border-radius:13px!important;
    }
    .vse-nav .vse-nav__today-link:hover{
        background:#e9f0ff!important;
        color:#355dab!important;
    }
}
@media(max-width:900px){
    .vse-nav .vse-nav__today-link{
        width:100%!important;
        padding:12px!important;
        justify-content:flex-start!important;
        background:#f1f5ff!important;
        color:#456ac3!important;
        border-radius:12px!important;
    }
}

/* Old browser date-trigger elements are no longer used. */
.vse-category-calendar,
.vse-header-calendar__popover{
    display:none!important;
}

/* Calendar wrapper */
.vse-episode-calendar-wrap{
    position:relative!important;
    display:inline-flex!important;
    margin-left:auto!important;
}

/* Visible category calendar button */
.vse-category-calendar-button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    cursor:pointer!important;
    white-space:nowrap!important;
    text-decoration:none!important;
}
.vse-category-calendar-button svg{
    width:16px!important;
    height:16px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.8!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
}
.vse-category-calendar-button[aria-expanded="true"]{
    border-color:#a9bef1!important;
    background:#f4f7ff!important;
    color:#456ac3!important;
    box-shadow:0 0 0 3px rgba(98,140,245,.08)!important;
}

/* Floating calendar */
.vse-episode-calendar{
    position:absolute!important;
    z-index:1700!important;
    top:calc(100% + 10px)!important;
    right:0!important;
    width:330px!important;
    padding:14px!important;
    border:1px solid #e3e8f2!important;
    border-radius:18px!important;
    background:
        radial-gradient(circle at 100% 0%, rgba(242,219,255,.34), transparent 34%),
        radial-gradient(circle at 0% 100%, rgba(222,233,255,.48), transparent 34%),
        #fff!important;
    box-shadow:
        0 22px 55px rgba(42,55,87,.16),
        0 7px 18px rgba(42,55,87,.08)!important;
    transform-origin:top right!important;
    animation:vseCalendarIn .16s ease-out!important;
}
.vse-episode-calendar[hidden]{
    display:none!important;
}

@keyframes vseCalendarIn{
    from{opacity:0;transform:translateY(-5px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

/* Month header */
.vse-episode-calendar__header{
    display:grid!important;
    grid-template-columns:36px 1fr 36px!important;
    align-items:center!important;
    gap:8px!important;
    margin-bottom:12px!important;
}
.vse-episode-calendar__month{
    display:block!important;
    text-align:center!important;
    color:#242a36!important;
    font-size:15px!important;
    font-weight:800!important;
    line-height:1.25!important;
    text-transform:capitalize!important;
}
.vse-episode-calendar__arrow{
    display:grid!important;
    place-items:center!important;
    width:36px!important;
    height:36px!important;
    padding:0!important;
    border:1px solid #e4e9f3!important;
    border-radius:11px!important;
    background:rgba(255,255,255,.86)!important;
    color:#64708a!important;
    cursor:pointer!important;
    transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease!important;
}
.vse-episode-calendar__arrow:hover:not(:disabled){
    background:#f3f6ff!important;
    border-color:#cad7f4!important;
    color:#456ac3!important;
    transform:translateY(-1px)!important;
}
.vse-episode-calendar__arrow:disabled{
    opacity:.28!important;
    cursor:default!important;
}
.vse-episode-calendar__arrow svg{
    width:17px!important;
    height:17px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:2!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
}

/* Week labels */
.vse-episode-calendar__weekdays{
    display:grid!important;
    grid-template-columns:repeat(7,1fr)!important;
    gap:4px!important;
    margin-bottom:5px!important;
}
.vse-episode-calendar__weekdays span{
    display:grid!important;
    place-items:center!important;
    height:25px!important;
    color:#929bab!important;
    font-size:10px!important;
    font-weight:750!important;
    text-transform:uppercase!important;
}

/* Day grid */
.vse-episode-calendar__days{
    display:grid!important;
    grid-template-columns:repeat(7,1fr)!important;
    gap:4px!important;
}
.vse-episode-calendar__day{
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    aspect-ratio:1/1!important;
    min-width:0!important;
    padding:0!important;
    border:0!important;
    border-radius:11px!important;
    background:transparent!important;
    color:#3f4654!important;
    cursor:pointer!important;
    font-size:12px!important;
    font-weight:650!important;
    transition:background .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease!important;
}
.vse-episode-calendar__day:hover:not(:disabled){
    background:#eef3ff!important;
    color:#3e67c4!important;
    transform:translateY(-1px)!important;
}
.vse-episode-calendar__day.is-today{
    box-shadow:inset 0 0 0 1.5px #9db6ee!important;
    color:#456ac3!important;
}
.vse-episode-calendar__day.is-selected{
    background:linear-gradient(135deg,#7197f4,#8d83ef)!important;
    color:#fff!important;
    box-shadow:0 6px 14px rgba(92,120,214,.22)!important;
}
.vse-episode-calendar__day.is-outside{
    color:#c0c5cf!important;
}
.vse-episode-calendar__day:disabled{
    color:#d5d8df!important;
    cursor:not-allowed!important;
    background:transparent!important;
    transform:none!important;
}

/* Footer */
.vse-episode-calendar__footer{
    display:flex!important;
    justify-content:flex-end!important;
    margin-top:10px!important;
    padding-top:10px!important;
    border-top:1px solid #edf0f5!important;
}
.vse-episode-calendar__footer button{
    height:34px!important;
    padding:0 12px!important;
    border:0!important;
    border-radius:10px!important;
    background:#f1f5ff!important;
    color:#456ac3!important;
    cursor:pointer!important;
    font-size:12px!important;
    font-weight:750!important;
}
.vse-episode-calendar__footer button:hover{
    background:#e8efff!important;
}

/* Mobile */
@media(max-width:700px){
    .vse-episode-calendar-wrap{
        width:100%!important;
        margin-left:0!important;
    }
    .vse-category-calendar-button{
        width:100%!important;
    }
    .vse-episode-calendar{
        right:auto!important;
        left:0!important;
        width:min(330px,calc(100vw - 32px))!important;
        transform-origin:top left!important;
    }
}