.yc-rcr {
    position:relative;
    min-width:0;
    border:1px solid var(--diver);
    border-radius:var(--largeradius);
    background:var(--surface-color);
    transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition);
}

.yc-rcr-ln {
    width:100%;
    min-width:0;
    min-height:215px;
    display:flex;
    flex-direction:column;
    padding:23px;
    color:inherit;
    text-decoration:none;
}

.yc-rcr-tag {
    width:max-content;
    max-width:100%;
    margin-bottom:12px;
    padding:5px 9px;
    border-radius:8px;
    background:color-mix(in srgb,var(--uicolor) 7%,var(--surface-color));
    color:var(--uicolor);
    font-size:10px;
    font-weight:800;
    line-height:1.5;
    overflow-wrap:anywhere;
}

.yc-rcr h3 {
    min-width:0;
    margin:0;
    color:var(--primary-text);
    font-size:15px;
    font-weight:600;
    line-height:1.65;
    overflow-wrap:anywhere;
}

.yc-rcr-met {
    min-width:0;
    display:flex;
    flex-wrap:wrap;
    gap:8px 14px;
    margin-top:14px;
    padding-bottom:17px;
    color:var(--secondarytext);
    font-size:12px;
    line-height:1.6;
}

.yc-rcr-met span {
    min-width:0;
    display:flex;
    align-items:center;
    gap:6px;
    overflow-wrap:anywhere;
}

.yc-rcr-met i {
    flex:0 0 auto;
    color: var(--uicolor2);
}

.yc-rcr-ft {
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:auto;
    padding-top:15px;
    border-top:1px solid var(--diver);
}

.yc-rcr-ft strong {
    min-width:0;
    color:var(--uicolor);
    font-family:var(--f-number);
    font-size:13px;
    font-weight:700;
    line-height:1.4;
    direction:ltr;
    unicode-bidi:isolate;
    overflow-wrap:anywhere;
}

.yc-rcr-ft span {
    min-width:0;
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--uicolor2);
    font-size:11px;
    font-weight:800;
    line-height:1.4;
    text-align:start;
    overflow-wrap:anywhere;
}

.yc-rcr-ft i {
    flex:0 0 auto;
    transition:transform var(--transition);
}

/* =========================
   Direction Support
========================= */

html[dir="ltr"] .yc-rcr-ft i {
    transform:rotate(180deg);
}

/* =========================
   Focus & Interaction
========================= */

.yc-rcr-ln:focus-visible {
    outline:3px solid color-mix(in srgb,var(--uicolor) 24%,transparent);
    outline-offset:3px;
}

@media (hover:hover) and (pointer:fine) {
    .yc-rcr:hover {
        transform:translateY(-4px);
        border-color:color-mix(in srgb,var(--uicolor) 24%,var(--diver));
        box-shadow:0 18px 38px rgb(var(--primary-text-code) / 8%);
    }

    .yc-rcr:hover .yc-rcr-ft i {
        transform:translateX(-4px);
    }

    html[dir="ltr"] .yc-rcr:hover .yc-rcr-ft i {
        transform:rotate(180deg) translateX(-4px);
    }
}

/* =========================
   Tablet Responsive
========================= */

@media only screen and (max-width:900px) {
    .yc-rcr-ln {
        height:100%;
        min-height:205px;
        padding:20px;
    }

    .yc-rcr-met {
        gap:7px 12px;
    }
}

/* =========================
   Mobile App Experience
========================= */

@media only screen and (max-width:767px) {
    .yc-rcr {
        border-radius:17px;
        box-shadow:0 10px 26px rgb(var(--primary-text-code) / 5%);
    }

    .yc-rcr-ln {
        height:100%;
        min-height:0;
        padding:18px;
        -webkit-tap-highlight-color:transparent;
    }

    .yc-rcr-tag {
        min-height:28px;
        display:inline-flex;
        align-items:center;
        margin-bottom:12px;
        padding:5px 10px;
        border-radius:9px;
        font-size:11px;
    }

    .yc-rcr h3 {
        font-size:16px;
        line-height:1.55;
    }

    .yc-rcr-met {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        margin-top:14px;
        padding-bottom:16px;
        font-size:12px;
        line-height:1.45;
    }

    .yc-rcr-met span {
        width:100%;
        min-height:42px;
        align-items:center;
        padding:8px 10px;
        border:1px solid color-mix(in srgb,var(--uicolor) 8%,var(--diver));
        border-radius:10px;
        background:color-mix(in srgb,var(--uicolor) 2.5%,var(--surface-color));
    }

    .yc-rcr-met i {
        font-size:12px;
    }

    .yc-rcr-ft {
        gap:10px;
        padding-top:14px;
    }

    .yc-rcr-ft strong {
        flex:0 1 auto;
        font-size:14px;
        white-space:nowrap;
    }

    .yc-rcr-ft span {
        min-height:42px;
        flex:0 0 auto;
        justify-content:center;
        padding:8px 11px;
        border:1px solid color-mix(in srgb,var(--uicolor2) 10%,var(--diver));
        border-radius:10px;
        background:color-mix(in srgb,var(--uicolor2) 7%,var(--surface-color));
        font-size:11.5px;
    }

    .yc-rcr-ft > span:only-child {
        margin-inline-start:auto;
    }
}

/* =========================
   Carousel Mobile Cards
========================= */

@media only screen and (max-width:600px) {
    .yc-rcr-ln {
        height:100%;
    }
}

/* =========================
   Small Mobile Adjustments
========================= */

@media only screen and (max-width:390px) {
    .yc-rcr {
        border-radius:15px;
    }

    .yc-rcr-ln {
        padding:16px;
    }

    .yc-rcr-tag {
        margin-bottom:11px;
    }

    .yc-rcr h3 {
        font-size:15.5px;
    }

    .yc-rcr-met {
        grid-template-columns:minmax(0,1fr);
        gap:7px;
        margin-top:12px;
        padding-bottom:14px;
    }

    .yc-rcr-met span {
        min-height:40px;
        padding:7px 9px;
    }

    .yc-rcr-ft {
        align-items:stretch;
        flex-direction:column;
        gap:9px;
        padding-top:12px;
    }

    .yc-rcr-ft strong {
        width:100%;
        font-size:14px;
    }

    .yc-rcr-ft span,
    .yc-rcr-ft > span:only-child {
        width:100%;
        min-height:44px;
        justify-content:space-between;
        margin-inline-start:0;
        padding:9px 11px;
        font-size:12px;
    }
}

@media only screen and (max-width:340px) {
    .yc-rcr-ln {
        padding:14px;
    }

    .yc-rcr-tag {
        min-height:26px;
        padding-inline:9px;
        font-size:10.5px;
    }

    .yc-rcr h3 {
        font-size:15px;
        line-height:1.5;
    }

    .yc-rcr-met span {
        padding-inline:8px;
        font-size:11.5px;
    }

    .yc-rcr-ft span,
    .yc-rcr-ft > span:only-child {
        padding-inline:10px;
        font-size:11.5px;
    }
}

/* =========================
   Touch & Motion Preferences
========================= */

@media (hover:none) and (pointer:coarse) {
    .yc-rcr:hover {
        transform:none;
        border-color:var(--diver);
        box-shadow:0 10px 26px rgb(var(--primary-text-code) / 5%);
    }
}

@media (prefers-reduced-motion:reduce) {
    .yc-rcr,
    .yc-rcr-ft i {
        transition:none;
    }
}