/* =============================================================================
   alsaudi.news — video section (2026-11-09): hub /video/, watch /video/<id>/,
   homepage band, article card + rail module. Loaded only where video UI prints
   (inc/asu-video.php). The site's own pieces: the navy "prism" stage and glass
   cards of «مقالات ذات صلة», rail modules, section headers, desk colours, the
   logo ribbon.
   ============================================================================= */

.asu-vid-page {
    padding-block: 28px 56px;
}

/* -----------------------------------------------------------------------------
   Stage — the prism of the related section, for video
   ----------------------------------------------------------------------------- */
.asu-vid-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 26px 30px 30px;
    border-radius: 30px;
    color: #FFFFFF;
    background:
        radial-gradient(55% 120% at 100% 0%, rgba(214, 51, 122, 0.36), transparent 62%),
        radial-gradient(50% 120% at 0% 100%, rgba(43, 188, 196, 0.3), transparent 62%),
        radial-gradient(40% 70% at 45% 115%, rgba(246, 161, 30, 0.2), transparent 70%),
        linear-gradient(180deg, #1D1D3C 0%, #121229 100%);
    box-shadow: 0 30px 60px -40px rgba(20, 20, 43, 0.9);
}
.asu-vid-stage::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    height: 3px;
    background: var(--asu-ribbon, linear-gradient(90deg, #3F6DB8, #2BBCC4, #F6A11E, #EE6424, #D6337A));
}
.asu-vid-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-end: 20px;
}
.asu-vid-badge {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.asu-vid-head__x {
    flex: 1;
    min-width: 0;
}
.asu-vid-head__t {
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 700;
    line-height: 1.3;
    color: #FFFFFF !important;
}
.asu-vid-top .asu-vid-head__t {
    font-size: 32px !important;
}
.asu-vid-head__s {
    margin: 3px 0 0 !important;
    font-size: 14px;
    line-height: 1.6;
    color: #B9B9D8;
}
.asu-vid-more {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-block: 8px;
    padding-inline: 16px 12px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}
.asu-vid-more:hover {
    background: rgba(255, 255, 255, 0.2);
}
.asu-vid-upd {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    color: #D8D8EC;
    background: rgba(255, 255, 255, 0.08);
}
.asu-vid-upd__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E0413F;
    animation: asu-pulse 1.8s ease-out infinite;
}

/* -----------------------------------------------------------------------------
   Player — a facade button; the iframe takes its place on click
   ----------------------------------------------------------------------------- */
.asu-vid-box {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    background: #0E0E1F;
}
.asu-vid-box--short {
    aspect-ratio: 9 / 16;
    border-radius: 14px;
}
.asu-vid-play,
.asu-vid-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.asu-vid-play {
    display: block;
    margin: 0;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
}
.asu-vid-play::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 30, 0.45));
    pointer-events: none;
}
.asu-vid-play:focus-visible {
    outline: 3px solid #FFFFFF !important;
    outline-offset: -7px !important;
}
.asu-vid-play img,
.asu-vid-pic img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0 !important;
    object-fit: cover;
    border-radius: 0 !important;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.asu-vid-play:hover img,
.asu-vid-card__a:hover .asu-vid-pic img,
.asu-vid-row:hover .asu-vid-pic img {
    transform: scale(1.035);
}
.asu-vid-mark {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #FFFFFF;
    background: rgba(209, 64, 133, 0.94);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2), 0 12px 28px -10px rgba(0, 0, 0, 0.7);
    transition: transform 0.25s ease;
}
.asu-vid-mark svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}
.asu-vid-play:hover .asu-vid-mark,
.asu-vid-card__a:hover .asu-vid-mark {
    transform: scale(1.08);
}
.asu-vid-pic .asu-vid-mark,
.asu-vid-box--short .asu-vid-mark {
    width: 44px;
    height: 44px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2), 0 8px 20px -8px rgba(0, 0, 0, 0.7);
}
.asu-vid-pic .asu-vid-mark svg,
.asu-vid-box--short .asu-vid-mark svg {
    width: 18px;
    height: 18px;
}
.asu-vid-len {
    position: absolute;
    inset-block-end: 8px;
    inset-inline-end: 8px;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    color: #FFFFFF;
    background: rgba(10, 10, 30, 0.78);
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   Cards, rows, Shorts
   ----------------------------------------------------------------------------- */
.asu-vid-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 18px) / 4);
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    margin-block: -6px -8px !important;
    margin-inline: -4px !important;
    padding: 6px 4px 8px !important;
    list-style: none !important;
}
.asu-vid-strip::-webkit-scrollbar {
    display: none;
}
.asu-vid-strip > li {
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
}
.asu-vid-strip--shorts {
    grid-auto-columns: calc((100% - 5 * 16px) / 6);
    gap: 16px;
}
.asu-vid-card__a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit !important;
    text-decoration: none !important;
}
.asu-vid-pic {
    position: relative;
    display: block;
    flex: none;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: #ECEDF4;
}
.asu-vid-card__b {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-block: 10px 2px;
}
.asu-vid-desk {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--c, #D14085);
}
.asu-vid-card__t,
.asu-vid-row__t,
.asu-vid-short__t {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0 !important;
    font-size: 14.5px !important;
    font-weight: 600;
    line-height: 1.6;
    color: var(--asu-ink-2, #2A2C40);
    transition: color 0.2s ease;
}
.asu-vid-card__t {
    -webkit-line-clamp: 3;
    font-size: 15.5px !important;
    font-weight: 700;
    color: var(--asu-ink, #14142B);
}
.asu-vid-card__a:hover .asu-vid-card__t,
.asu-vid-row:hover .asu-vid-row__t {
    color: var(--c, #D14085);
}
.asu-vid-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin-block-start: auto;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--asu-quiet, #6E7287);
}
.asu-vid-meta > * + *::before {
    content: "·";
    margin-inline-end: 8px;
}
.asu-vid-ch {
    font-size: 12.5px;
    color: var(--asu-quiet, #6E7287);
}
.asu-vid-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.asu-vid-list > li {
    margin: 0;
}
.asu-vid-list > li + li {
    border-block-start: 1px solid var(--asu-hair, rgba(30, 30, 58, 0.09));
}
.asu-vid-row {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding-block: 11px;
    color: inherit !important;
    text-decoration: none !important;
}
.asu-vid-row .asu-vid-pic {
    border-radius: 10px;
}
.asu-vid-row .asu-vid-len {
    inset-block-end: 5px;
    inset-inline-end: 5px;
    font-size: 11px;
}
.asu-vid-row__x {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.asu-vid-row time {
    font-size: 12px;
    color: var(--asu-quiet, #6E7287);
}
.asu-vid-short {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.asu-vid-short__t {
    margin-block-start: 4px !important;
    font-size: 13.5px !important;
}

/* Strip steps (shown by js/asu-video.js only when the strip overflows) */
.asu-vid-steps {
    flex: none;
    display: flex;
    gap: 8px;
}
.asu-vid-steps[hidden] {
    display: none;
}
.asu-vid-step {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: grid;
    place-items: center;
    padding: 0 !important;
    border: 1px solid var(--asu-border, #E5E7EB) !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    color: var(--asu-ink, #14142B) !important;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.asu-vid-step:hover {
    border-color: #D14085 !important;
    color: #D14085 !important;
}
.asu-vid-step:focus-visible,
.asu-vid-card__a:focus-visible,
.asu-vid-row:focus-visible,
.asu-vid-more:focus-visible {
    outline: 2px solid #3F6DB8;
    outline-offset: 3px;
    border-radius: 12px;
}
.asu-vid-step:focus-visible {
    border-radius: 50% !important;
}

/* On the stage: glass cards, light text */
.asu-vid-stage .asu-vid-card__a {
    padding: 10px 10px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s ease, background 0.35s ease;
}
.asu-vid-stage .asu-vid-card__a:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.3);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.06));
}
.asu-vid-stage .asu-vid-card__b {
    padding-inline: 4px;
}
.asu-vid-stage .asu-vid-pic {
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.06);
}
.asu-vid-stage .asu-vid-card__t,
.asu-vid-stage .asu-vid-card__a:hover .asu-vid-card__t,
.asu-vid-stage .asu-vid-row__t {
    color: #FFFFFF;
}
.asu-vid-stage .asu-vid-row:hover .asu-vid-row__t {
    color: #FFD3E6;
}
.asu-vid-stage .asu-vid-desk {
    color: color-mix(in srgb, var(--c, #D14085) 45%, #FFFFFF);
}
.asu-vid-stage .asu-vid-meta,
.asu-vid-stage .asu-vid-ch,
.asu-vid-stage .asu-vid-row time {
    color: #A9A9C8;
}
.asu-vid-stage .asu-vid-list > li + li {
    border-color: rgba(255, 255, 255, 0.1);
}
.asu-vid-stage .asu-vid-step {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
.asu-vid-stage .asu-vid-step:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}
.asu-vid-stage .asu-vid-card__a:focus-visible,
.asu-vid-stage .asu-vid-row:focus-visible,
.asu-vid-stage .asu-vid-more:focus-visible,
.asu-vid-stage .asu-vid-step:focus-visible,
.asu-vid-lead__t a:focus-visible {
    outline-color: #FFFFFF;
}

/* -----------------------------------------------------------------------------
   Homepage band (after «تصفح الأقسام»)
   ----------------------------------------------------------------------------- */
/* «أقسام متنوعة» below is white too and brings its own 48px. */
.asu-vid-band {
    padding-block: 48px 8px;
    background: var(--asu-white, #FFFFFF);
}

/* -----------------------------------------------------------------------------
   Hub — /video/
   ----------------------------------------------------------------------------- */
.asu-vid-top__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}
.asu-vid-top__grid--solo {
    grid-template-columns: minmax(0, 1fr);
}
.asu-vid-lead .asu-vid-box {
    border-radius: 18px;
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.8);
}
.asu-vid-lead .asu-vid-meta {
    margin-block-start: 14px;
}
.asu-vid-lead__t {
    margin: 6px 0 0 !important;
    font-size: 23px !important;
    font-weight: 700;
    line-height: 1.55;
}
.asu-vid-lead__t a {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
.asu-vid-lead__t a:hover {
    color: #FFD3E6 !important;
}
.asu-vid-next {
    min-width: 0;
    padding: 14px 16px 6px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}
.asu-vid-next__t {
    margin: 0 0 4px !important;
    font-size: 16px !important;
    font-weight: 700;
    color: #FFFFFF !important;
}
.asu-vid-next .asu-vid-row {
    grid-template-columns: 120px minmax(0, 1fr);
    padding-block: 10px;
}
.asu-vid-empty {
    margin: 4px 0 0 !important;
    font-size: 16px;
    color: #D8D8EC;
}
.asu-vid-empty a {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}
.asu-vid-sec {
    margin-block-start: 44px;
}
.asu-vid-shead {
    gap: 12px;
}

/* -----------------------------------------------------------------------------
   Watch — /video/<id>/ (the article page's main | rail)
   ----------------------------------------------------------------------------- */
.asu-vid-watch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 364px;
    gap: 44px;
    align-items: start;
}
.asu-vid-watch__main {
    min-width: 0;
}
.asu-vid-badge-desk {
    text-decoration: none !important;
}
.asu-vid-watch__t {
    margin: 0 0 10px !important;
    font-size: 30px !important;
    font-weight: 700;
    line-height: 1.45;
    color: var(--asu-text-heading, #0F1218);
}
.asu-vid-meta--watch {
    margin: 0 0 18px !important;
    padding-block-end: 14px;
    border-block-end: 1px solid var(--asu-border, #E5E7EB);
    font-size: 14px;
}
.asu-vid-meta--watch .asu-vid-ch {
    font-size: 14px;
    font-weight: 700;
    color: var(--asu-text-heading, #0F1218);
}
.asu-vid-box--watch {
    border-radius: 18px;
    box-shadow: 0 24px 48px -32px rgba(20, 20, 43, 0.7);
}
.asu-vid-watch__d {
    margin: 20px 0 0 !important;
    font-size: 17px;
    line-height: 1.85;
    color: var(--asu-text, #1A1A2E);
}
.asu-vid-cov {
    margin-block-start: 36px;
}
.asu-vid-mod .asu-vid-row {
    grid-template-columns: 112px minmax(0, 1fr);
}
.asu-vid-mod .asu-vid-row:hover .asu-vid-row__t {
    color: var(--mod, #D14085);
}
html[data-theme="dark"] .asu-vid-mod .asu-vid-row:hover .asu-vid-row__t {
    color: color-mix(in srgb, var(--mod, #D14085) 55%, #FFFFFF);
}
/* Rail rows keep one height, so the room held while the headline-bleed guard
   defers the list is exact. */
.asu-vid-list--rail .asu-vid-row {
    height: 86px;
    padding-block: 0;
}
.asu-vid-list--rail:has(> template.hbg-defer) {
    min-height: calc(var(--n, 3) * 87px);
}

/* -----------------------------------------------------------------------------
   Article — the matched video inside the body
   ----------------------------------------------------------------------------- */
.asu-vid-fig {
    margin: 30px 0 !important;
    padding: 10px 10px 16px;
    border-radius: 22px;
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(214, 51, 122, 0.3), transparent 62%),
        radial-gradient(50% 90% at 0% 100%, rgba(43, 188, 196, 0.24), transparent 62%),
        linear-gradient(180deg, #1D1D3C 0%, #121229 100%);
    box-shadow: 0 24px 48px -34px rgba(20, 20, 43, 0.9);
}
.asu-vid-fig .asu-vid-box {
    border-radius: 14px;
}
.asu-vid-fig .asu-vid-fig__c {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 !important;
    padding: 14px 8px 0;
    text-align: start;
}
.asu-vid-fig__k {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    color: #F6B04A;
}
.asu-vid-fig .asu-vid-fig__t {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    color: #FFFFFF !important;
    text-decoration: none !important;
}
.asu-vid-fig .asu-vid-fig__t:hover {
    color: #FFD3E6 !important;
}
.asu-vid-fig .asu-vid-meta,
.asu-vid-fig .asu-vid-ch {
    color: #A9A9C8;
}

/* -----------------------------------------------------------------------------
   Article — «شاهد» line, «فيديو الرياضة», the mini player (2026-11-10)
   ----------------------------------------------------------------------------- */
.asu-vid-also {
    margin: 22px 0 !important;
}
.asu-vid-also__a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--asu-primary-bg, #FBEDF3);
    color: var(--asu-ink, #14142B) !important;
    line-height: 1.6;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}
.asu-vid-also__a:hover {
    background: #F6DAE7;
}
.asu-vid-also__k {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-block: 4px;
    padding-inline: 10px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    background: #D14085;
}
.asu-vid-also__t {
    flex: 1;
    min-width: 0;
    font-size: 15.5px;
    font-weight: 600;
}
.asu-vid-also__len {
    flex: none;
    font-size: 13px;
    color: var(--asu-quiet, #6E7287);
    font-variant-numeric: tabular-nums;
}
.asu-vid-art {
    margin-block: 30px 6px;
}
.asu-vid-art .asu-vid-stage {
    padding: 22px 22px 24px;
    border-radius: 24px;
}
.asu-vid-art .asu-vid-head {
    margin-block-end: 16px;
}
.asu-vid-art .asu-vid-head__t {
    font-size: 21px !important;
}
.asu-vid-strip--art {
    grid-auto-columns: calc((100% - 2 * 14px) / 3);
    gap: 14px;
}
.asu-vid-strip--art-shorts {
    grid-auto-columns: calc((100% - 4 * 12px) / 5);
    gap: 12px;
}
.asu-vid-art__sh {
    margin: 22px 0 10px !important;
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
}
.asu-vid-art .asu-vid-short__t {
    color: #FFFFFF;
    font-size: 13.5px !important;
}
.asu-vid-why.is-topic {
    color: #F6B04A;
}
.asu-vid-frame.is-docked {
    position: fixed;
    inset: auto;
    inset-block-end: 20px;
    inset-inline-end: 20px;
    z-index: 9990;
    width: 360px;
    height: 203px;
    border-radius: 12px;
    background: #000000;
    box-shadow: 0 22px 44px -14px rgba(10, 10, 30, 0.65);
}
.asu-vid-x {
    position: fixed;
    inset-block-end: 231px;
    inset-inline-end: 20px;
    z-index: 9991;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border: 0;
    border-radius: 50%;
    color: #FFFFFF;
    background: #1E1E3A;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
.asu-vid-x:focus-visible {
    outline: 2px solid #D14085;
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .asu-vid-strip {
        grid-auto-columns: calc((100% - 2 * 18px) / 3);
    }
    .asu-vid-strip--shorts {
        grid-auto-columns: calc((100% - 4 * 16px) / 5);
    }
    .asu-vid-top__grid {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}
@media (max-width: 991px) {
    .asu-vid-top__grid,
    .asu-vid-watch {
        grid-template-columns: minmax(0, 1fr);
    }
    .asu-vid-watch {
        gap: 32px;
    }
    .asu-vid-stage {
        padding: 22px 20px 24px;
        border-radius: 24px;
    }
    .asu-vid-strip {
        grid-auto-columns: calc((100% - 18px) / 2.2);
    }
    .asu-vid-strip--shorts {
        grid-auto-columns: calc((100% - 3 * 16px) / 3.6);
    }
    .asu-vid-watch__t {
        font-size: 26px !important;
    }
}
@media (max-width: 767px) {
    .asu-vid-band {
        padding-block: 32px 4px;
    }
    .asu-vid-steps {
        display: none !important;
    }
}
@media (max-width: 640px) {
    .asu-vid-page {
        padding-block-start: 18px;
    }
    .asu-vid-stage {
        margin-inline: -4px;
        padding: 20px 14px 18px;
    }
    .asu-vid-head {
        flex-wrap: wrap;
        margin-block-end: 16px;
    }
    .asu-vid-badge {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .asu-vid-head__t {
        font-size: 21px !important;
    }
    .asu-vid-top .asu-vid-head__t {
        font-size: 26px !important;
    }
    .asu-vid-head__s {
        font-size: 13px;
    }
    .asu-vid-top .asu-vid-head__x {
        flex-basis: calc(100% - 52px);
    }
    .asu-vid-upd {
        order: 3;
        margin-inline-start: 52px;
    }
    .asu-vid-strip {
        grid-auto-columns: 78%;
        gap: 14px;
    }
    .asu-vid-strip--shorts {
        grid-auto-columns: 44%;
        gap: 12px;
    }
    .asu-vid-mark {
        width: 56px;
        height: 56px;
    }
    .asu-vid-lead__t {
        font-size: 19px !important;
    }
    .asu-vid-next {
        padding: 12px 12px 4px;
    }
    .asu-vid-row,
    .asu-vid-next .asu-vid-row {
        grid-template-columns: 116px minmax(0, 1fr);
    }
    .asu-vid-watch__t {
        font-size: 22px !important;
    }
    .asu-vid-watch__d {
        font-size: 16px;
    }
    .asu-vid-fig {
        margin-inline: -4px !important;
    }
}

/* -----------------------------------------------------------------------------
   Night mode (the theme's blanket rules colour every span/p/a)
   ----------------------------------------------------------------------------- */
html[data-theme="dark"] .asu-vid-stage,
html[data-theme="dark"] .asu-vid-fig {
    background:
        radial-gradient(55% 120% at 100% 0%, rgba(214, 51, 122, 0.3), transparent 62%),
        radial-gradient(50% 120% at 0% 100%, rgba(43, 188, 196, 0.24), transparent 62%),
        linear-gradient(180deg, #1B2638 0%, #111A28 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .asu-vid-card__t,
html[data-theme="dark"] .asu-vid-row__t,
html[data-theme="dark"] .asu-vid-short__t,
html[data-theme="dark"] .asu-vid-watch__t,
html[data-theme="dark"] .asu-vid-meta--watch .asu-vid-ch {
    color: #F3F4F6;
}
html[data-theme="dark"] .asu-vid-meta,
html[data-theme="dark"] .asu-vid-meta > span,
html[data-theme="dark"] .asu-vid-ch,
html[data-theme="dark"] .asu-vid-row time {
    color: #9CA3AF;
}
html[data-theme="dark"] .asu-vid-desk {
    color: color-mix(in srgb, var(--c, #D14085) 55%, #FFFFFF);
}
html[data-theme="dark"] .asu-vid-head__s {
    color: #B9B9D8;
}
html[data-theme="dark"] .asu-vid-upd,
html[data-theme="dark"] .asu-vid-empty {
    color: #D8D8EC;
}
html[data-theme="dark"] .asu-vid-len {
    color: #FFFFFF;
}
html[data-theme="dark"] .asu-vid-pic {
    background: #243044;
}
html[data-theme="dark"] .asu-vid-also__a {
    background: #243044;
    color: #F3F4F6 !important;
}
html[data-theme="dark"] .asu-vid-also__t {
    color: #F3F4F6;
}
html[data-theme="dark"] .asu-vid-art .asu-vid-short__t,
html[data-theme="dark"] .asu-vid-art__sh {
    color: #FFFFFF;
}
html[data-theme="dark"] .asu-vid-fig__k {
    color: #F6B04A;
}
html[data-theme="dark"] .asu-vid-step {
    border-color: #2D3748 !important;
    background: #1A2332 !important;
    color: #E5E7EB !important;
}
html[data-theme="dark"] .asu-vid-meta--watch {
    border-color: #2D3748;
}

@media (max-width: 767px) {
    .asu-vid-frame.is-docked {
        inset-inline-end: 12px;
        inset-block-end: calc(80px + env(safe-area-inset-bottom, 0px));
        width: 58vw;
        height: calc(58vw * 9 / 16);
    }
    .asu-vid-x {
        inset-inline-end: 12px;
        inset-block-end: calc(88px + env(safe-area-inset-bottom, 0px) + 58vw * 9 / 16);
    }
}
@media (max-width: 640px) {
    .asu-vid-strip--art {
        grid-auto-columns: 78%;
    }
    .asu-vid-strip--art-shorts {
        grid-auto-columns: 40%;
    }
    .asu-vid-art .asu-vid-stage {
        padding: 18px 14px 20px;
        border-radius: 20px;
    }
    .asu-vid-also__len {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .asu-vid-strip {
        scroll-behavior: auto;
    }
    .asu-vid-upd__dot {
        animation: none;
    }
    .asu-vid-play img,
    .asu-vid-pic img,
    .asu-vid-mark,
    .asu-vid-stage .asu-vid-card__a {
        transition: none;
    }
    .asu-vid-play:hover img,
    .asu-vid-card__a:hover .asu-vid-pic img,
    .asu-vid-row:hover .asu-vid-pic img,
    .asu-vid-play:hover .asu-vid-mark,
    .asu-vid-card__a:hover .asu-vid-mark,
    .asu-vid-stage .asu-vid-card__a:hover {
        transform: none;
    }
}