/* RekoNews editorial UI — intentionally flat, fast and theme-safe. */
:root {
    --rn-primary: #f05d40;
    --rn-primary-hover: #d94f34;
    --rn-page: #ffffff;
    --rn-surface: #ffffff;
    --rn-surface-2: #f0f1f3;
    --rn-text: #17181b;
    --rn-text-2: #4f5661;
    --rn-muted: #737b87;
    --rn-border: #dfe2e6;
    --rn-header: #ffffff;
    --rn-overlay: rgba(5, 7, 10, .82);
    --rn-radius: 8px;
    --rn-shadow: 0 2px 10px rgba(20, 24, 31, .06);
}

/* Notifications and support */
.reko-notification-toolbar,.reko-ticket-list-head{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--rn-border);border-radius:14px;background:var(--rn-surface)}
.reko-notification-toolbar>div:first-child,.reko-ticket-list-head>div{display:flex;flex-direction:column}.reko-notification-toolbar small,.reko-ticket-list-head small{color:var(--rn-muted)}
.reko-notification-list,.reko-ticket-list,.reko-ticket-thread{list-style:none;margin:0;padding:0}.reko-notification-item{position:relative;border-bottom:1px solid var(--rn-border)}
.reko-notification-item>a{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:13px;padding:16px;color:var(--rn-text)!important;text-decoration:none}.reko-notification-item.unRead{background:color-mix(in srgb,var(--rn-primary) 7%,var(--rn-surface))}
.reko-notification-avatar{position:relative;width:48px;height:48px}.reko-notification-avatar>img{width:48px;height:48px;border-radius:50%;object-fit:cover}.reko-notification-avatar>span{position:absolute;right:-4px;bottom:-5px}.reko-notification-avatar .icon-circle{width:23px;height:23px;display:grid;place-items:center;border:2px solid var(--rn-surface);border-radius:50%;font-size:9px;color:#fff}
.reko-notification-copy{min-width:0;line-height:1.4}.reko-notification-copy time{display:block;margin-top:5px;color:var(--rn-muted);font-size:.78rem}.reko-unread-dot{width:9px;height:9px;border-radius:50%;background:var(--rn-primary)}
.reko-ticket-list{margin-top:14px;border:1px solid var(--rn-border);border-radius:14px;overflow:hidden;background:var(--rn-surface)}.reko-ticket-list-item{padding:17px;border-bottom:1px solid var(--rn-border)}.reko-ticket-list-item:last-child{border-bottom:0}
.reko-ticket-thread{display:flex;flex-direction:column;gap:13px}.reko-ticket-message{max-width:88%;padding:16px 18px;border:1px solid var(--rn-border);border-radius:16px;background:var(--rn-surface)}.reko-ticket-message.is-staff{align-self:flex-start;border-top-left-radius:5px}.reko-ticket-message.is-member{align-self:flex-end;border-top-right-radius:5px;background:color-mix(in srgb,var(--rn-primary) 7%,var(--rn-surface))}
.reko-ticket-page #contactform{padding:18px;border:1px solid var(--rn-border);border-radius:14px;background:var(--rn-surface)}.reko-ticket-page #contactform textarea{border-radius:12px;background:var(--rn-surface-2);color:var(--rn-text)}
@media(max-width:767px){.reko-notification-item>a{padding:14px 10px}.reko-ticket-message{max-width:96%;padding:14px}.reko-ticket-list-head{align-items:flex-start}.reko-ticket-list-head .btn{white-space:nowrap}}

html[data-theme="dark"] {
    color-scheme: dark;
    --rn-page: #0b0d10;
    --rn-surface: #14171b;
    --rn-surface-2: #1b1f24;
    --rn-text: #f3f4f6;
    --rn-text-2: #c0c5cd;
    --rn-muted: #8f98a5;
    --rn-border: #292e35;
    --rn-header: #101216;
    --rn-overlay: rgba(0, 0, 0, .84);
    --rn-shadow: none;
}

html {
    background: var(--rn-page);
}

body:not(.admin-body) {
    min-height: 100vh;
    color: var(--rn-text);
    background: var(--rn-page);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    transition: background-color .15s ease, color .15s ease;
}

body:not(.admin-body) h1,
body:not(.admin-body) h2,
body:not(.admin-body) h3,
body:not(.admin-body) h4,
body:not(.admin-body) h5,
body:not(.admin-body) h6 {
    color: var(--rn-text);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 650;
    line-height: 1.18;
    letter-spacing: -.025em;
}

/* Typography balance: legacy templates frequently use Bootstrap's bold class,
   so normalize it to semibold and reserve heavier weight for key branding. */
body:not(.admin-body) strong,
body:not(.admin-body) b {
    font-weight: 600;
}

body:not(.admin-body) .font-weight-bold {
    font-weight: 600 !important;
}

body:not(.admin-body) .font-weight-bolder {
    font-weight: 650 !important;
}

body:not(.admin-body) .page_title,
body:not(.admin-body) .post_title {
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 650;
    line-height: 1.15;
}

body:not(.admin-body) h1 {
    font-size: clamp(25px, 3.2vw, 32px);
}

body:not(.admin-body) h2 {
    font-size: clamp(22px, 2.6vw, 27px);
}

body:not(.admin-body) h3 {
    font-size: clamp(19px, 2.1vw, 23px);
}

body:not(.admin-body) h4 {
    font-size: 19px;
}

body:not(.admin-body) h5 {
    font-size: 16px;
}

body:not(.admin-body) h6 {
    font-size: 14px;
}

body:not(.admin-body) .channel-cover h1,
body:not(.admin-body) .video-page-heading h1 {
    font-size: 26px !important;
    font-weight: 650 !important;
}

body:not(.admin-body) .channel-label,
body:not(.admin-body) .video-page-heading>span {
    font-weight: 650 !important;
}

body:not(.admin-body) .video-author {
    font-weight: 600 !important;
}

body:not(.admin-body) a {
    color: var(--rn-primary);
}

body:not(.admin-body) a:hover {
    color: var(--rn-primary-hover);
}

body:not(.admin-body) .text-dark,
body:not(.admin-body) .text-black {
    color: var(--rn-text) !important;
}

body:not(.admin-body) .text-muted,
body:not(.admin-body) .text-black-50 {
    color: var(--rn-muted) !important;
}

body:not(.admin-body) .bg-white {
    background: var(--rn-surface) !important;
}

body:not(.admin-body) .bg-light {
    background: var(--rn-surface-2) !important;
}

body:not(.admin-body) .bg-light:has(.page_title) {
    position: relative;
    color: var(--rn-text);
    background: var(--rn-page) !important;
    border: 0;
    box-shadow: none
}

body:not(.admin-body) .bg-light:has(.page_title)::before {
    display: none
}

body:not(.admin-body) .bg-light:has(.page_title) .container {
    position: relative;
    padding-top: 28px !important;
    padding-bottom: 24px !important;
    text-align: left !important
}

body:not(.admin-body) .bg-light:has(.page_title) .page_title {
    display: block !important;
    margin: 0 !important;
    color: var(--rn-text) !important;
    font-size: 29px;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.025em;
    text-align: left !important;
    text-shadow: none
}

body:not(.admin-body) .bg-light:has(.page_title) .text-black-50,
body:not(.admin-body) .bg-light:has(.page_title) .text-muted {
    color: var(--rn-text-2) !important
}

body:not(.admin-body) .bg-light:has(.page_title) a:not(.btn) {
    color: var(--rn-primary)
}

.page-heading-highlight {
    display: block;
    margin-bottom: 3px;
    color: var(--rn-primary);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .16em;
    text-align: left !important
}

.page-heading-description {
    max-width: 620px;
    margin: 7px 0 0;
    color: var(--rn-text-2);
    font-size: 14px;
    line-height: 1.5;
    text-align: left !important
}

@media(min-width:768px) {
    body:not(.admin-body) .bg-light:has(.page_title) .reko-page-heading>* {
        max-width: calc(66.6667% - 12px)
    }

    body:not(.admin-body) .bg-light:has(.page_title) .reko-page-heading::after {
        display: none
    }
}

body:not(.admin-body) hr {
    border-color: var(--rn-border);
}

body:not(.admin-body) ::selection {
    color: #fff;
    background: var(--rn-primary);
}

@media (min-width: 1200px) {
    body:not(.admin-body) .container {
        max-width: 1080px;
    }
}

/* Header */
body:not(.admin-body) header.sticky-top {
    z-index: 1030;
}

body:not(.admin-body) header .navbar {
    min-height: 64px;
    background: var(--rn-header) !important;
    border-bottom: 1px solid var(--rn-border);
    box-shadow: none !important;
}

body:not(.admin-body) .navbar-brand {
    min-height: 64px;
    display: inline-flex;
    align-items: center;
}

body:not(.admin-body) .rn-logo-dark {
    display: none;
}

html[data-theme="dark"] body:not(.admin-body) .rn-logo-light {
    display: none;
}

html[data-theme="dark"] body:not(.admin-body) .rn-logo-dark {
    display: inline-block;
}

html[data-theme="dark"] body:not(.admin-body) header .navbar-toggler img {
    filter: invert(1);
}

html[data-theme="dark"] body:not(.admin-body) header .navbar-toggler svg {
    fill: var(--rn-text);
}

body:not(.admin-body) header .nav-link {
    position: relative;
    padding: 21px 13px !important;
    color: var(--rn-text-2) !important;
    font-size: 14px;
    font-weight: 600;
}

body:not(.admin-body) header .nav-link:hover,
body:not(.admin-body) header .nav-link.active {
    color: var(--rn-primary) !important;
}

body:not(.admin-body) header .nav-link.active {
    border: 0;
    box-shadow: none;
}

body:not(.admin-body) header .nav-link.active::after {
    position: absolute;
    right: 13px;
    bottom: 0;
    left: 13px;
    height: 3px;
    content: "";
    background: var(--rn-primary);
}

body:not(.admin-body) header .navbar-toggler,
body:not(.admin-body) header .btn-link {
    color: var(--rn-text) !important;
}

body:not(.admin-body) header .dropdown-menu {
    padding: 6px;
    color: var(--rn-text);
    background: var(--rn-surface) !important;
    border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius);
    box-shadow: var(--rn-shadow);
}

body:not(.admin-body) header .dropdown-item {
    color: var(--rn-text);
    border-radius: 5px;
}

body:not(.admin-body) header .dropdown-item:hover {
    color: var(--rn-primary);
    background: var(--rn-surface-2);
}

/* Accurate two-line ellipsis */
body:not(.admin-body) .text-ellipsis2,
body:not(.admin-body) .line-clamp-2,
body:not(.admin-body) .post-item-desc h3,
body:not(.admin-body) .book-scroll h5,
body:not(.admin-body) .book-grid h4,
body:not(.admin-body) .podcast-item-desc h3 {
    display: -webkit-box !important;
    overflow: hidden !important;
    max-height: none !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

body:not(.admin-body) .text-ellipsis2::after,
body:not(.admin-body) .hero-item .text-ellipsis2::after {
    display: none !important;
    content: none !important;
}

/* Controls */
body:not(.admin-body) .btn {
    min-height: 40px;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}

body:not(.admin-body) .btn-primary,
body:not(.admin-body) .bg-primary {
    color: #fff !important;
    background: var(--rn-primary) !important;
    border-color: var(--rn-primary) !important;
}

body:not(.admin-body) .btn-primary:hover {
    background: var(--rn-primary-hover) !important;
    border-color: var(--rn-primary-hover) !important;
}

body:not(.admin-body) .btn-outline-primary {
    color: var(--rn-primary) !important;
    background: transparent !important;
    border-color: var(--rn-primary) !important;
}

body:not(.admin-body) .btn-outline-primary:hover {
    color: #fff !important;
    background: var(--rn-primary) !important;
}

body:not(.admin-body) .btn-light,
body:not(.admin-body) .btn-secondary {
    color: var(--rn-text);
    background: var(--rn-surface-2);
    border-color: var(--rn-border);
}

body:not(.admin-body) .form-control,
body:not(.admin-body) .custom-select,
body:not(.admin-body) .input-group-text {
    min-height: 42px;
    color: var(--rn-text);
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-radius: 6px;
}

body:not(.admin-body) .form-control:focus,
body:not(.admin-body) .custom-select:focus {
    color: var(--rn-text);
    background: var(--rn-surface);
    border-color: var(--rn-primary);
    box-shadow: 0 0 0 3px rgba(240, 93, 64, .15);
}

body:not(.admin-body) .form-control::placeholder {
    color: var(--rn-muted);
}

/* Breaking-news hero */
body:not(.admin-body) .hero-list-container {
    margin: 14px -5px 24px;
}

body:not(.admin-body) .hero-list-item {
    padding: 5px;
}

body:not(.admin-body) .hero-item {
    overflow: hidden;
    border: 0;
    border-radius: var(--rn-radius) !important;
    background-color: var(--rn-surface-2);
    box-shadow: none !important;
}

body:not(.admin-body) .hero-item::after {
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, .02) 25%, var(--rn-overlay));
}

body:not(.admin-body) .hero-item .hero-item-desc {
    z-index: 1;
    max-width: 100%;
    padding: 20px;
    overflow: hidden;
    background: none;
}

body:not(.admin-body) .hero-item h3,
body:not(.admin-body) .hero-item p,
body:not(.admin-body) .hero-item a {
    color: #fff !important;
}

body:not(.admin-body) .hero-item h3 {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 8px;
    font-size: clamp(17px, 1.65vw, 21px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

body:not(.admin-body) .hero-item-type {
    top: 15px;
    left: 16px;
    padding: 4px 9px;
    background: rgba(0, 0, 0, .68);
    border-radius: 4px;
}

/* Feed: flat editorial rows */
body:not(.admin-body) .post-list {
    margin: 0;
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius);
    box-shadow: none;
}

body:not(.admin-body) .post-list-item {
    width: 100%;
    min-width: 0;
    gap: 16px;
    padding: 18px;
    overflow: hidden;
    border-bottom: 1px solid var(--rn-border);
}

body:not(.admin-body) .post-list-item:last-child {
    border-bottom: 0;
}

body:not(.admin-body) .post-item-image {
    width: 176px;
    height: 118px;
    flex: 0 0 176px;
    background-color: var(--rn-surface-2);
    border-radius: 6px;
}

body:not(.admin-body) .post-item-desc {
    width: 0;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 0;
    padding: 0;
    overflow: hidden;
}

body:not(.admin-body) .post-item-desc>a,
body:not(.admin-body) .post-item-desc h3,
body:not(.admin-body) .post-item-desc p {
    max-width: 100%;
}

body:not(.admin-body) .post-item-desc h3 {
    margin: 0 0 7px;
    color: var(--rn-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

body:not(.admin-body) .post-item-desc p {
    margin-bottom: 7px;
    color: var(--rn-text-2);
}

body:not(.admin-body) .post-item-desc a:visited h3 {
    color: var(--rn-muted);
}

/* Surfaces */
body:not(.admin-body) .card,
body:not(.admin-body) .profile-card,
body:not(.admin-body) .modal-content,
body:not(.admin-body) .sidebar_container {
    color: var(--rn-text);
    background: var(--rn-surface) !important;
    border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius);
    box-shadow: var(--rn-shadow);
}

body:not(.admin-body) .list-group-item {
    color: var(--rn-text);
    background: var(--rn-surface);
    border-color: var(--rn-border);
}

body:not(.admin-body) .list-group-item:hover {
    background: var(--rn-surface-2);
}

body:not(.admin-body) .modal-header,
body:not(.admin-body) .modal-footer {
    border-color: var(--rn-border);
}

body:not(.admin-body) .close {
    color: var(--rn-text);
    text-shadow: none;
}

body:not(.admin-body) .table {
    color: var(--rn-text);
    background: var(--rn-surface);
}

body:not(.admin-body) .table td,
body:not(.admin-body) .table th {
    border-color: var(--rn-border);
}

body:not(.admin-body) .breadcrumb {
    color: var(--rn-muted);
    background: var(--rn-surface-2);
    border-radius: 6px;
}

body:not(.admin-body) .badge {
    border-radius: 4px;
}

/* Books, podcasts, articles */
body:not(.admin-body) .book-item-image,
body:not(.admin-body) .book-cover-layout,
body:not(.admin-body) .podcast-detail .podcast-img,
body:not(.admin-body) .sm_featured_image {
    overflow: hidden;
    background: var(--rn-surface-2);
    border-radius: 6px;
    box-shadow: none !important;
}

body:not(.admin-body) .book-item-image img,
body:not(.admin-body) .book-cover-layout img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body:not(.admin-body) .articleBody {
    color: var(--rn-text-2);
    font-size: 16px;
    line-height: 1.75;
}

body:not(.admin-body) .articleBody img {
    height: auto;
    border-radius: 6px;
}

body:not(.admin-body) blockquote {
    color: var(--rn-text-2);
    background: var(--rn-surface-2);
    border-left: 4px solid var(--rn-primary);
}

/* Sidebar */
body:not(.admin-body) .account-sidebar {
    width: min(310px, 90vw);
    color: var(--rn-text-2);
    background: var(--rn-surface);
    border-right: 1px solid var(--rn-border);
    box-shadow: none !important;
}

body:not(.admin-body) .account-sidebar .nav-link {
    margin: 2px 8px;
    color: var(--rn-text-2) !important;
    border-radius: 5px;
}

body:not(.admin-body) .account-sidebar .nav-link:hover {
    color: var(--rn-primary) !important;
    background: var(--rn-surface-2);
}

body:not(.admin-body) .overlay {
    background: rgba(0, 0, 0, .65);
}

/* Immediate, consistently aligned primary navigation drawer */
body:not(.admin-body)>.account-sidebar,
body:not(.admin-body)>.overlay {
    animation: none !important;
    transition: none !important
}

body.reko-menu-open {
    overflow: hidden
}

body:not(.admin-body)>.account-sidebar .reko-account-nav-scroll {
    height: calc(100% - 180px);
    padding-bottom: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin
}

body:not(.admin-body)>.account-sidebar .nav-item {
    width: 100%;
    min-width: 0
}

body:not(.admin-body)>.account-sidebar .nav-link {
    width: 100%;
    display: flex !important;
    align-items: center;
    gap: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

body:not(.admin-body)>.account-sidebar .nav-link>i {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: flex-start;
    margin: 0
}

body:not(.admin-body)>.account-sidebar .nav-link>span:not(.badge):not(.unreadNotifi) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis
}

@media(min-width:992px) {
    body:not(.admin-body)>.account-sidebar .reko-account-nav-scroll {
        height: calc(100% - 206px);
        padding: 0 10px 18px
    }
}

@media(max-width:991.98px) {
    body:not(.admin-body)>.account-sidebar {
        width: min(320px, 88vw);
        box-shadow: 12px 0 35px rgba(15, 23, 42, .22) !important
    }

    body:not(.admin-body)>.account-sidebar .reko-account-nav-scroll {
        padding: 0 10px 14px
    }

    body:not(.admin-body)>.account-sidebar .reko-side-label {
        margin: 14px 10px 7px;
        color: var(--rn-muted);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase
    }

    body:not(.admin-body)>.account-sidebar .nav.divider {
        padding: 0 !important;
        border-top: 0
    }

    body:not(.admin-body)>.account-sidebar .nav-link {
        min-height: 44px;
        margin: 2px 0;
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 550
    }

    body:not(.admin-body)>.account-sidebar .nav-link>i {
        color: var(--rn-muted);
        font-size: 16px
    }

    body:not(.admin-body)>.account-sidebar .nav-link:hover,
    body:not(.admin-body)>.account-sidebar .nav-link:focus {
        color: var(--rn-primary) !important;
        background: var(--rn-surface-2)
    }
}

/* Cookie notice and footer */
body:not(.admin-body) .cookiePopup {
    top: auto;
    right: auto;
    left: 16px;
    bottom: 16px;
    width: min(340px, calc(100vw - 24px));
    padding: 14px 16px;
    color: var(--rn-text);
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
}

body:not(.admin-body) .cookiePopup p {
    margin: 0 0 9px;
    color: var(--rn-text-2);
    font-size: 13px;
    line-height: 1.45;
}

body:not(.admin-body) .cookiePopup button {
    min-height: 34px;
    padding: 6px 11px;
    color: #fff;
    background: var(--rn-primary);
    border: 0;
    border-radius: 5px;
    font-weight: 600;
}

body:not(.admin-body) footer {
    margin-top: 44px !important;
    color: var(--rn-muted);
    background: var(--rn-surface) !important;
    border-top: 1px solid var(--rn-border);
}

body:not(.admin-body) footer .nav-link {
    color: var(--rn-text-2);
}

body:not(.admin-body) .footer-social a {
    color: var(--rn-text-2);
}

body:not(.admin-body) .reko-site-footer {
    padding: 46px 0 0;
    text-align: left;
    background-image: none !important
}

.reko-footer-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(2, minmax(120px, .7fr)) minmax(210px, 1fr);
    gap: 38px;
    padding-bottom: 36px
}

.reko-footer-brand img {
    display: block;
    width: auto;
    max-width: 122px;
    height: 40px;
    object-fit: contain
}

.reko-footer-brand p,
.reko-footer-apps p {
    max-width: 280px;
    margin: 14px 0 17px;
    color: var(--rn-muted);
    font-size: 13px;
    line-height: 1.6
}

.reko-footer-social {
    display: flex;
    gap: 9px
}

body:not(.admin-body) .reko-footer-social a {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--rn-text-2);
    background: var(--rn-surface-2);
    border: 1px solid var(--rn-border);
    border-radius: 50%;
    font-size: 14px;
    transition: color .18s ease, border-color .18s ease, transform .18s ease
}

body:not(.admin-body) .reko-footer-social a:hover {
    color: var(--rn-primary);
    border-color: rgba(240, 93, 64, .45);
    text-decoration: none;
    transform: translateY(-2px)
}

.reko-footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px
}

.reko-footer-links h2,
.reko-footer-apps h2 {
    margin: 2px 0 8px;
    color: var(--rn-text);
    font-size: 14px;
    font-weight: 650
}

body:not(.admin-body) .reko-footer-links a {
    padding: 0;
    color: var(--rn-muted);
    font-size: 13px
}

body:not(.admin-body) .reko-footer-links a:hover,
body:not(.admin-body) .reko-footer-bottom a:hover {
    color: var(--rn-primary);
    text-decoration: none
}

.reko-footer-apps>div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.reko-footer-apps img {
    display: block;
    width: auto;
    height: 34px
}

.reko-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 18px;
    padding-bottom: 18px;
    color: var(--rn-muted);
    border-top: 1px solid var(--rn-border);
    font-size: 12px
}

body:not(.admin-body) .reko-footer-bottom a {
    color: var(--rn-text-2)
}

@media(max-width:767.98px) {
    body:not(.admin-body) .reko-site-footer {
        padding-top: 32px
    }

    .reko-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 22px;
        padding-bottom: 28px
    }

    .reko-footer-brand,
    .reko-footer-apps {
        grid-column: 1/-1
    }

    .reko-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px
    }
}

body:not(.admin-body) ul.floatingActionBar {
    right: 18px;
    bottom: 78px;
    z-index: 1111;
}

body:not(.admin-body) ul.floatingActionBar li {
    padding: 0;
}

body:not(.admin-body) .back-to-top {
    width: 46px;
    height: 46px;
    line-height: 46px;
    color: #fff;
    background: var(--rn-primary);
    border: 0;
    box-shadow: var(--rn-shadow);
    animation: none;
}

body:not(.admin-body) .reko-theme-toggle {
    right: 18px;
    bottom: 20px;
    z-index: 1111;
    width: 46px;
    height: 46px;
    color: var(--rn-primary);
    background: var(--rn-surface);
    border-color: var(--rn-border);
    box-shadow: var(--rn-shadow);
}

body:not(.admin-body) header .reko-header-theme-toggle {
    position: static !important;
    z-index: auto;
    width: 38px;
    height: 38px;
    display: inline-grid;
    flex: 0 0 38px;
    place-items: center;
    margin: 0 2px 0 10px;
    padding: 0;
    color: var(--rn-text-2);
    background: transparent;
    border: 1px solid var(--rn-border);
    border-radius: 50%;
    box-shadow: none;
    transform: none !important
}

body:not(.admin-body) header .reko-header-theme-toggle:hover {
    color: var(--rn-primary);
    background: var(--rn-surface-2);
    border-color: rgba(240, 93, 64, .45)
}

/* Dedicated people discovery */
.people-page-heading {
    max-width: 650px;
    margin-bottom: 28px
}

.people-page-heading>span {
    color: var(--rn-primary);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .16em
}

.people-page-heading h1 {
    margin: 3px 0 7px;
    font-size: 29px;
    font-weight: 650
}

.people-page-heading p {
    margin: 0;
    color: var(--rn-text-2)
}

.people-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
}

.person-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius)
}

.person-card-profile {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    flex: 1;
    color: var(--rn-text) !important
}

.person-card-profile:hover {
    color: var(--rn-text) !important;
    text-decoration: none
}

.person-card-profile img {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    object-fit: cover;
    border-radius: 50%;
    background: var(--rn-surface-2)
}

.person-card-copy {
    min-width: 0;
    display: block
}

.person-card-copy strong,
.person-card-copy small,
.person-card-copy>span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.person-card-copy strong {
    color: var(--rn-text);
    font-size: 15px
}

.person-card-copy small,
.person-card-copy>span {
    color: var(--rn-muted);
    font-size: 12px
}

.person-card .followBtn {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 10px
}

/* Channel directory */
.channels-heading {
    max-width: 620px;
    margin-bottom: 24px;
}

.channels-heading>span {
    color: var(--rn-primary);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .16em;
}

.channels-heading h1 {
    margin: 2px 0 6px;
    font-size: 29px;
    font-weight: 650;
}

.channels-heading p {
    margin: 0;
    color: var(--rn-text-2);
}

.channels-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.channel-card {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 16px 42px 16px 16px;
    color: var(--rn-text) !important;
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-radius: var(--rn-radius);
}

.channel-card:hover {
    color: var(--rn-text) !important;
    text-decoration: none;
    border-color: var(--rn-primary);
}

.channel-card-image {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background: var(--rn-primary);
    border-radius: 12px;
    font-size: 20px;
}

.channel-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.channel-card-copy {
    min-width: 0;
    display: block;
}

.channel-card-copy strong {
    display: block;
    overflow: hidden;
    color: var(--rn-text);
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.channel-card-copy small {
    display: block;
    margin: 2px 0 4px;
    color: var(--rn-primary);
    font-weight: 600;
}

.channel-card-copy>span {
    display: -webkit-box;
    overflow: hidden;
    color: var(--rn-muted);
    font-size: 13px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.channel-card-arrow {
    position: absolute;
    right: 16px;
    color: var(--rn-muted);
}

/* Short videos inserted into the For You feed */
.for-you-shorts {
    display: block;
    width: 100%;
    margin: 22px 0;
    padding: 4px 0 18px;
    overflow: hidden;
    border-bottom: 1px solid var(--rn-border);
}

.for-you-channels {
    padding: 18px 0;
    border-bottom: 1px solid var(--rn-border);

}

.for-you-shorts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 12px;
}

.for-you-shorts-head strong {
    display: block;
    color: var(--rn-text);
    font-size: 16px;
    font-weight: 600;
}

.for-you-shorts-head span {
    display: block;
    color: var(--rn-muted);
    font-size: 12px;
}

.for-you-shorts-head a {
    font-size: 12px;
    font-weight: 600;
}

.for-you-shorts-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 16px 5px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.for-you-short-card {
    position: relative;
    width: 142px;
    height: 218px;
    flex: 0 0 142px;
    overflow: hidden;
    color: #fff !important;
    background: #111;
    border-radius: 8px;
    scroll-snap-align: start;
}

.for-you-short-card>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .9;
}

.for-you-short-card::after {
    position: absolute;
    inset: 38% 0 0;
    content: "";
    background: linear-gradient(transparent, rgba(0, 0, 0, .9));
}

.for-you-short-play {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(0, 0, 0, .62);
    border-radius: 50%;
    font-size: 11px;
}

.for-you-short-copy {
    position: absolute;
    z-index: 2;
    right: 10px;
    bottom: 10px;
    left: 10px;
}

.for-you-short-copy strong {
    display: -webkit-box;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.for-you-short-copy small {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #ddd;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.for-you-shorts-loading {
    padding: 35px 0;
    color: var(--rn-muted);
}

@media (max-width: 991.98px) {
    body:not(.admin-body) header .nav-link {
        padding: 12px !important;
    }

    body:not(.admin-body) header .nav-link.active::after {
        display: none;
    }

    body:not(.admin-body) .sidebar_container {
        margin-top: 18px;
    }
}

@media (max-width: 767.98px) {
    body:not(.admin-body) {
        font-size: 14px;
    }

    body:not(.admin-body) .container {
        padding-right: 10px;
        padding-left: 10px;
    }

    body:not(.admin-body) .hero-list-container {
        margin: 10px 0 18px;
    }

    body:not(.admin-body) .hero-list-item {
        padding: 0;
    }

    body:not(.admin-body) .hero-item {
        border-radius: 6px !important;
    }

    body:not(.admin-body) .hero-item .hero-item-desc {
        padding: 16px;
    }

    body:not(.admin-body) .hero-item h3 {
        font-size: 17px;
    }

    body:not(.admin-body) .post-list {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    body:not(.admin-body) .post-list-item {
        gap: 12px;
        padding: 14px 10px;
    }

    body:not(.admin-body) .post-item-image {
        width: 106px;
        height: 86px;
        flex-basis: 106px;
        border-radius: 5px;
    }

    body:not(.admin-body) .post-item-desc h3 {
        margin-bottom: 4px;
        font-size: 15px;
    }

    body:not(.admin-body) .post-item-desc p {
        display: none;
    }

    body:not(.admin-body) .cookiePopup {
        right: 70px;
        bottom: 8px;
        left: 8px;
        width: auto;
        padding: 11px 12px;
    }

    body:not(.admin-body) ul.floatingActionBar {
        right: 13px;
        bottom: 66px;
    }

    body:not(.admin-body) .back-to-top {
        width: 42px;
        height: 42px;
        line-height: 42px;
    }

    body:not(.admin-body) .reko-theme-toggle {
        right: 13px;
        bottom: 14px;
        width: 42px;
        height: 42px;
    }

    body:not(.admin-body) .cookiePopup p {
        margin-bottom: 7px;
    }

    body:not(.admin-body) footer {
        margin-top: 28px !important;
    }

    .channels-grid {
        grid-template-columns: 1fr;
    }

    .channels-heading h1 {
        font-size: 25px;
    }

    .channel-card {
        padding: 13px 38px 13px 13px;
    }

    .for-you-short-card {
        width: 124px;
        height: 194px;
        flex-basis: 124px;
    }

    .people-grid {
        grid-template-columns: 1fr
    }

    .people-page-heading h1 {
        font-size: 25px
    }

    .person-card {
        padding: 13px
    }
}

@media (min-width:768px) and (max-width:1100px) {
    .people-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 380px) {
    body:not(.admin-body) .post-item-image {
        width: 92px;
        height: 78px;
        flex-basis: 92px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Shared Facebook-style reaction control */
.reko-reactions {
    position: relative;
    display: flex;
    align-items: center;
    gap: .35rem;
    min-height: 36px;
    margin-top: .45rem;
    color: var(--reko-muted, #667085)
}

.reko-reaction-main {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 0;
    background: transparent;
    color: inherit;
    padding: .35rem .5rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer
}

.reko-reaction-main:hover {
    background: rgba(127, 127, 127, .1)
}

.reko-reaction-main img {
    width: 21px;
    height: 21px;
    object-fit: contain
}

.reko-reaction-empty-icon {
    width: 21px;
    color: currentColor;
    font-size: 20px;
    line-height: 1;
    text-align: center
}

.reko-reactions-compact .reko-reaction-empty-icon {
    width: 25px;
    font-size: 24px
}

.video-reaction-control .reko-reaction-empty-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(12, 16, 23, .72);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    font-size: 16px
}

.reko-reaction-count {
    font-size: .78rem
}

.reko-reaction-picker {
    position: absolute;
    left: 0;
    bottom: 38px;
    z-index: 25;
    display: flex;
    gap: .2rem;
    padding: .4rem .5rem;
    background: var(--reko-surface, #fff);
    border: 1px solid var(--reko-border, #e6e8ec);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: .16s ease
}

.reko-reactions.picker-open .reko-reaction-picker,
.reko-reactions:hover .reko-reaction-picker {
    opacity: 1;
    visibility: visible;
    transform: none
}

.reko-reaction-option {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: transform .14s
}

.reko-reaction-option:hover {
    transform: translateY(-5px) scale(1.16)
}

.reko-reaction-option img {
    width: 30px;
    height: 30px;
    object-fit: contain
}

.reko-reactions.is-loading {
    opacity: .55;
    pointer-events: none
}

/* Article comment threads */
.reko-comments-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--rn-border)
}

.reko-comments-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px
}

.reko-comments-heading span {
    display: block;
    color: var(--rn-primary);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .15em
}

.reko-comments-heading h2 {
    margin: 2px 0 0;
    color: var(--rn-text);
    font-size: 20px;
    font-weight: 650
}

.reko-comments-heading>strong {
    min-width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--rn-primary);
    background: rgba(240, 93, 64, .08);
    border: 1px solid rgba(240, 93, 64, .22);
    border-radius: 50%;
    font-size: 11px
}

.reko-comment-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0
}

.reko-comment {
    border: 0 !important;
    background: transparent !important;
    padding: .55rem 0 !important
}

.reko-comment-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .7rem
}

.reko-comment-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover
}

.reko-comment-bubble {
    background: var(--rn-surface-2);
    border: 1px solid var(--rn-border);
    border-radius: 5px 14px 14px 14px;
    padding: .75rem .9rem
}

.reko-comment-head {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    flex-wrap: wrap
}

.reko-comment-author {
    font-size: .88rem;
    font-weight: 650;
    color: inherit
}

.reko-comment-time {
    font-size: .72rem;
    color: var(--reko-muted, #667085)
}

.reko-comment-text {
    font-size: .9rem;
    line-height: 1.55;
    margin: .32rem 0 0;
    overflow-wrap: anywhere
}

.reko-comment-actions {
    display: flex;
    align-items: center;
    gap: .2rem;
    min-height: 32px;
    padding: 3px 0 0 .25rem
}

.reko-comment-actions .btn {
    font-size: .76rem;
    font-weight: 600;
    padding: .2rem .35rem
}

.reko-comment-actions .reko-reactions {
    margin: 0;
    position: relative;
    flex: 0 0 auto
}

.reko-comment-actions .reko-reaction-main {
    min-width: 36px !important;
    min-height: 30px !important;
    padding: 2px 5px !important;
    gap: 5px
}

.reko-comment-actions .reko-reaction-main img {
    width: 21px !important;
    height: 21px !important
}

.reko-comment-actions .reko-reaction-empty-icon {
    width: 21px !important;
    font-size: 19px !important
}

.reko-comment-actions .reko-reaction-main span {
    font-size: 11px !important
}

.reko-comment-actions .reko-reaction-picker {
    right: auto !important;
    left: 0 !important;
    bottom: 33px !important;
    gap: 2px !important;
    padding: 6px 7px !important
}

.reko-comment-actions .reko-reaction-option {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important
}

.reko-comment-actions .reko-reaction-option img {
    width: 31px !important;
    height: 31px !important
}

.reko-comment-replies {
    list-style: none;
    margin: .25rem 0 0 2.1rem;
    padding-left: .85rem;
    border-left: 2px solid var(--rn-border)
}

.reko-comment .loadReplies {
    margin: 5px 0 0 4px;
    padding: 3px 7px;
    color: var(--rn-primary);
    font-size: 11px;
    font-weight: 650
}

.reko-comments-empty {
    padding: 36px 15px;
    color: var(--rn-muted);
    text-align: center
}

.reko-comments-empty img {
    display: block;
    width: 68px !important;
    margin: 0 auto 12px;
    opacity: .8
}

.reko-comments-empty strong {
    display: block;
    color: var(--rn-text-2);
    font-size: 14px
}

.reko-comments-empty p {
    margin: 4px 0 0;
    font-size: 12px
}

[data-theme="dark"] .reko-reaction-picker,
[data-theme="dark"] .reko-comment-bubble,
body.dark-mode .reko-reaction-picker,
body.dark-mode .reko-comment-bubble {
    --reko-surface: #171b24;
    --reko-surface-soft: #171b24;
    --reko-border: #303744;
    color: #e7eaf0
}

@media(max-width:575px) {
    .reko-reaction-option img {
        width: 27px;
        height: 27px
    }

    .reko-comment-card {
        grid-template-columns: 34px minmax(0, 1fr)
    }

    .reko-comment-avatar {
        width: 34px;
        height: 34px
    }

    .reko-comment-replies {
        margin-left: 1rem
    }
}

/* Library catalogue and book detail */
.reko-library-page,
.reko-book-detail {
    color: var(--rn-text)
}

.reko-library-heading {
    margin-bottom: 0
}

.reko-library-shelf {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rn-border)
}

.reko-library-shelf-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 13px
}

.reko-library-shelf-head span {
    color: var(--rn-primary);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .15em
}

.reko-library-shelf-head h2 {
    margin: 2px 0 0;
    color: var(--rn-text);
    font-size: 18px;
    font-weight: 650
}

.reko-library-shelf-head>a {
    color: var(--rn-primary);
    font-size: 11px;
    font-weight: 650
}

.reko-book-rail {
    display: grid;
    grid-auto-columns: 150px;
    grid-auto-flow: column;
    gap: 13px;
    padding: 2px 1px 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin
}

.reko-book-card {
    min-width: 0;
    scroll-snap-align: start
}

.reko-book-cover {
    display: block;
    overflow: hidden;
    aspect-ratio: 3/4.25;
    background: var(--rn-surface-2) url(../images/Double-Ring.gif) center/35px no-repeat;
    border: 1px solid var(--rn-border);
    border-radius: 9px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .1)
}

.reko-book-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .22s ease
}

.reko-book-card:hover .reko-book-cover img {
    transform: scale(1.025)
}

.reko-book-copy {
    display: block;
    padding-top: 9px;
    color: var(--rn-text) !important
}

.reko-book-copy:hover {
    text-decoration: none
}

.reko-book-copy h3 {
    display: -webkit-box;
    min-height: 36px;
    margin: 0 0 6px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2
}

.reko-book-copy>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--rn-muted);
    font-size: 10px
}

.reko-book-copy>div>span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.reko-book-copy>div>strong {
    color: #e8a500;
    font-weight: 650
}

.reko-book-copy>div>strong i {
    margin-right: 3px
}

.reko-book-detail {
    padding-top: 28px;
    padding-bottom: 35px
}

.reko-book-detail>.row>[class*="col-md-7"] {
    padding: 24px !important;
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-radius: 15px
}

.reko-book-detail .cover-image {
    overflow: hidden;
    aspect-ratio: 3/4.25;
    background-color: var(--rn-surface-2) !important;
    border: 1px solid var(--rn-border);
    border-radius: 10px !important;
    box-shadow: 0 9px 24px rgba(15, 23, 42, .13) !important
}

.reko-book-detail .cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.reko-book-detail .post_title {
    color: var(--rn-text) !important;
    font-size: 25px !important;
    line-height: 1.24
}

.reko-book-detail .book-info {
    background: var(--rn-surface-2) !important;
    border: 1px solid var(--rn-border);
    border-radius: 10px
}

.reko-book-detail .book-info li {
    border-color: var(--rn-border)
}

.reko-book-detail .book-info h2 {
    font-size: 19px
}

@media(max-width:767.98px) {
    .reko-book-rail {
        grid-auto-columns: 138px
    }

    .reko-book-detail {
        padding-top: 12px
    }

    .reko-book-detail::before {
        display: none !important
    }

    .reko-book-detail>.row>[class*="col-md-7"] {
        padding: 18px 12px !important;
        border-right: 0;
        border-left: 0;
        border-radius: 0
    }

    .reko-book-detail .post_title {
        font-size: 22px !important
    }
}

/* Editorial library grid: distinct from the homepage book rail. */
.reko-library-page .reko-library-shelf {
    margin-bottom: 22px;
    padding: 18px;
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-radius: 14px
}

.reko-library-page .reko-library-shelf-head {
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rn-border)
}

.reko-library-page .reko-book-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 12px;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none
}

.reko-library-page .reko-book-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 13px;
    min-height: 132px;
    padding: 10px;
    background: var(--rn-surface-2);
    border: 1px solid transparent;
    border-radius: 11px;
    transition: border-color .18s ease, transform .18s ease
}

.reko-library-page .reko-book-card:hover {
    border-color: rgba(240, 93, 64, .32);
    transform: translateY(-2px)
}

.reko-library-page .reko-book-cover {
    width: 92px;
    height: 122px;
    align-self: start;
    box-shadow: 0 5px 13px rgba(15, 23, 42, .12)
}

.reko-library-page .reko-book-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0
}

.reko-library-page .reko-book-copy h3 {
    min-height: 0;
    margin-bottom: 11px;
    font-size: 14px;
    line-height: 1.4
}

.reko-library-page .reko-book-copy>div {
    justify-content: flex-start;
    flex-wrap: wrap;
    font-size: 11px
}

@media(max-width:991.98px) {
    .reko-library-page .reko-book-rail {
        grid-template-columns: 1fr
    }
}

@media(max-width:575.98px) {
    .reko-library-page .reko-library-shelf {
        padding: 14px 10px;
        border-right: 0;
        border-left: 0;
        border-radius: 0
    }

    .reko-library-page .reko-book-card {
        grid-template-columns: 78px minmax(0, 1fr);
        min-height: 112px;
        padding: 8px
    }

    .reko-library-page .reko-book-cover {
        width: 78px;
        height: 104px
    }
}

/* Profile identity */
.profile-hero {
    position: relative;
    color: var(--rn-text);
    background: var(--rn-page);
    border-bottom: 0
}

.profile-hero::before {
    display: none
}

.profile-hero .container {
    padding-top: 28px !important;
    padding-bottom: 24px !important;
    text-align: left
}

.profile-hero .container::before {
    display: block;
    margin-bottom: 3px;
    color: var(--rn-primary);
    content: "PROFILE";
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .16em
}

.profile-hero .page_title {
    color: var(--rn-text) !important;
    font-size: 29px !important;
    text-shadow: none
}

.profile-hero .d-flex {
    align-items: center
}

.profile-hero .btn-light {
    color: var(--rn-text) !important
}

@media(min-width:768px) {
    .profile-hero .container>.d-flex {
        max-width: calc(66.6667% - 12px);
        padding-bottom: 15px;
        border-bottom: 1px solid var(--rn-border)
    }
}

.reko-profile-card {
    overflow: hidden;
    border: 1px solid var(--rn-border) !important;
    border-radius: 14px !important;
    background: var(--rn-surface) !important;
    box-shadow: var(--rn-shadow) !important
}

.reko-profile-card .profile-card-image {
    padding-top: 24px;
    background: linear-gradient(135deg, rgba(240, 93, 64, .18), transparent)
}

.reko-profile-card .profile-card-image img {
    width: 112px !important;
    height: 112px !important;
    border: 4px solid var(--rn-surface);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15)
}

.reko-profile-card .profile-card-body {
    padding: 20px !important
}

.reko-profile-card .profile-card-body h2 {
    font-size: 20px
}

/* Feed actions: metadata/actions left, Facebook-style reaction right */
.reko-post-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding-top: 7px;
}

.reko-post-actions-left {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0
}

.reko-post-actions-right {
    margin-left: auto
}

.reko-post-actions .reko-reactions {
    margin: 0;
    justify-content: flex-end
}

.reko-post-actions-right .reko-reaction-picker {
    right: 0;
    left: auto
}

.reko-post-meta {
    margin-top: 9px
}

.reko-post-actions-right {
    display: flex;
    align-items: center;
    gap: 3px
}

.reko-reaction-proof {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--rn-muted);
    font-size: 10px
}

.reko-reaction-proof-icons {
    display: flex
}

.reko-reaction-proof-icons img {
    width: 19px;
    height: 19px;
    margin-right: -5px;
    object-fit: contain;
    border: 2px solid var(--rn-surface);
    border-radius: 50%
}

.reko-reaction-proof-icons:empty {
    display: none
}

.reko-reactions-compact .reko-reaction-main {
    min-height: 32px;
    padding: 4px 7px;
    color: var(--rn-text-2)
}

.reko-reactions-compact .reko-reaction-main img {
    width: 19px;
    height: 19px
}

.reko-count-action {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 4px 7px !important;
    font-size: 14px !important;
    border-radius: 999px
}

.reko-count-action span {
    font-size: 12px;
    color: var(--rn-muted)
}

/* Followable channel cards */
.channel-card {
    display: flex !important;
    align-items: center;
    padding: 16px !important
}

.channel-card-link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
    color: var(--rn-text) !important
}

.channel-card-link:hover {
    text-decoration: none
}

.channel-card-follow {
    flex: 0 0 auto;
    margin-left: 10px;
    padding: 7px 10px;
    color: var(--rn-primary);
    background: transparent;
    border: 1px solid var(--rn-primary);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600
}

.channel-card-follow.is-following {
    color: var(--rn-text-2);
    border-color: var(--rn-border)
}

@media(max-width:575px) {
    .reko-reaction-proof>span:last-child {
        max-width: 125px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .channel-card {
        align-items: flex-start !important
    }

    .channel-card-follow span {
        display: none
    }

}

@media(max-width:575px) {

    body:not(.admin-body) .bg-light:has(.page_title) .container,
    .profile-hero .container {
        padding-top: 22px !important;
        padding-bottom: 18px !important
    }

    body:not(.admin-body) .bg-light:has(.page_title) .page_title,
    .profile-hero .page_title {
        font-size: 25px !important
    }
}

/* Desktop application shell: permanent left navigation */
.reko-desktop-side-brand {
    display: none
}

@media(min-width:992px) {
    html body:not(.admin-body) {
        padding-left: 272px
    }

    body:not(.admin-body)>header {
        margin-left: 0
    }

    body:not(.admin-body)>header .navbar {
        min-height: 64px;
        border-bottom: 1px solid var(--rn-border);
        box-shadow: none !important
    }

    body:not(.admin-body)>header .navbar>.container {
        max-width: none;
        padding-right: 28px;
        padding-left: 28px
    }

    body:not(.admin-body)>header .navbar-brand,
    body:not(.admin-body)>header .navbar-collapse {
        display: none !important
    }

    body:not(.admin-body)>.account-sidebar {
        display: block !important;
        width: 272px;
        height: 100vh;
        color: #aeb8c7;
        background: #101722 !important;
        border-right: 1px solid #202b3a;
        box-shadow: none !important;
        overflow: hidden;
        z-index: 1040
    }

    body:not(.admin-body)>.account-sidebar .reko-desktop-side-brand {
        height: 76px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 12px 22px;
        color: #fff !important;
        border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    body:not(.admin-body)>.account-sidebar .reko-desktop-side-brand img {
        width: 112px;
        max-height: 38px;
        object-fit: contain;
        object-position: left center;
        filter: brightness(0) invert(1)
    }

    body:not(.admin-body)>.account-sidebar .reko-desktop-side-brand span {
        margin-top: 2px;
        color: #718096;
        font-size: 10px;
        letter-spacing: .08em;
        text-transform: uppercase
    }

    body:not(.admin-body)>.account-sidebar>.p-3 {
        padding: 17px 18px !important
    }

    body:not(.admin-body)>.account-sidebar .navbar-toggler {
        display: none
    }

    body:not(.admin-body)>.account-sidebar .follow-user-desc h5 a {
        color: #fff !important
    }

    body:not(.admin-body)>.account-sidebar #search-engine {
        padding: 0 14px 14px !important
    }

    body:not(.admin-body)>.account-sidebar #search-engine .form-control {
        color: #e5e7eb;
        background: #182231;
        border-color: #2a384a
    }

    body:not(.admin-body)>.account-sidebar>div[style*="calc"] {
        height: calc(100% - 218px) !important;
        scrollbar-width: thin;
        scrollbar-color: #344054 transparent
    }

    body:not(.admin-body)>.account-sidebar .divider {
        border-color: rgba(255, 255, 255, .07)
    }

    body:not(.admin-body)>.account-sidebar .nav-link {
        margin: 2px 8px;
        padding: 10px 12px;
        color: #aeb8c7;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 550
    }

    body:not(.admin-body)>.account-sidebar .nav-link:hover {
        color: #fff;
        background: #1c2838;
        text-decoration: none
    }

    body:not(.admin-body)>.account-sidebar .nav-link i {
        color: #718096;
        font-size: 15px
    }

    body:not(.admin-body)>.account-sidebar .nav-link:hover i {
        color: var(--rn-primary)
    }

    body:not(.admin-body)>.overlay {
        display: none !important
    }

    body:not(.admin-body)>.reko-theme-toggle {
        right: 24px
    }
}

/* Social-media profile */
.social-profile-hero {
    margin-bottom: 0;
    background: var(--rn-surface);
    border-bottom: 1px solid var(--rn-border)
}

.social-profile-cover {
    height: 190px;
    background: linear-gradient(120deg, #101827 0%, #263a62 62%, var(--rn-primary) 160%);
    position: relative;
    overflow: hidden
}

.social-profile-cover::after {
    position: absolute;
    right: -8%;
    bottom: -90%;
    width: 430px;
    height: 300px;
    content: "";
    background: radial-gradient(circle, rgba(240, 93, 64, .42), transparent 65%)
}

.social-profile-content {
    position: relative;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 20px
}

.social-profile-avatar-wrap {
    position: relative;
    width: 142px;
    height: 142px;
    margin-top: -70px
}

.social-profile-avatar-wrap>img {
    width: 142px;
    height: 142px;
    object-fit: cover;
    background: var(--rn-surface-2);
    border: 5px solid var(--rn-surface);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18)
}

.social-profile-status {
    position: absolute;
    right: 10px;
    bottom: 12px;
    width: 18px;
    height: 18px;
    background: #98a2b3;
    border: 3px solid var(--rn-surface);
    border-radius: 50%
}

.social-profile-status.online {
    background: #12b76a
}

.social-profile-main {
    min-width: 0;
    padding: 18px 0 0
}

.social-profile-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px
}

.social-profile-name-row h1 {
    margin: 0;
    font-size: 25px !important
}

.social-profile-name-row>div>span {
    color: var(--rn-muted);
    font-size: 13px
}

.social-profile-actions {
    display: flex;
    gap: 7px
}

.social-profile-actions .btn {
    min-height: 38px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600
}

.social-profile-bio {
    max-width: 680px;
    margin: 16px 0 8px;
    color: var(--rn-text-2);
    line-height: 1.55
}

.social-profile-bio p {
    margin: 0
}

.social-profile-details {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: var(--rn-muted);
    font-size: 12px
}

.social-profile-details i {
    margin-right: 4px
}

.social-profile-stats {
    display: flex;
    gap: 24px;
    margin-top: 14px;
    color: var(--rn-muted);
    font-size: 13px
}

.social-profile-stats a,
.social-profile-stats span {
    color: var(--rn-muted)
}

.social-profile-stats strong {
    color: var(--rn-text);
    font-size: 15px
}

.social-profile-tabs {
    display: flex;
    gap: 26px;
    margin-top: 17px
}

.social-profile-tabs a {
    position: relative;
    padding: 12px 2px;
    color: var(--rn-muted);
    font-size: 13px;
    font-weight: 600
}

.social-profile-tabs a.active {
    color: var(--rn-text)
}

.social-profile-tabs a.active::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    content: "";
    background: var(--rn-primary);
    border-radius: 3px 3px 0 0
}

.social-profile-legacy {
    display: none !important
}

.social-profile-feed {
    max-width: 760px
}

@media(max-width:767px) {
    .social-profile-cover {
        height: 125px
    }

    .social-profile-content {
        display: block;
        padding-bottom: 0
    }

    .social-profile-avatar-wrap {
        width: 100px;
        height: 100px;
        margin-top: -50px
    }

    .social-profile-avatar-wrap>img {
        width: 100px;
        height: 100px
    }

    .social-profile-main {
        padding-top: 10px
    }

    .social-profile-name-row {
        align-items: center
    }

    .social-profile-name-row h1 {
        font-size: 21px !important
    }

    .social-profile-actions .btn {
        min-height: 34px;
        padding: 6px 10px
    }

    .social-profile-bio {
        margin-top: 12px
    }

    .social-profile-stats {
        gap: 16px
    }

    .social-profile-tabs {
        margin-top: 12px
    }
}

/* Refined desktop rail and 80/20 content/sidebar layout */
@media(min-width:992px) {
    html body:not(.admin-body) {
        padding-left: 256px
    }

    body:not(.admin-body)>.account-sidebar {
        width: 256px;
        background: linear-gradient(180deg, #0d1420, #121c2a 58%, #0d1520) !important
    }

    body:not(.admin-body)>.account-sidebar .reko-desktop-side-brand {
        height: 84px;
        padding: 16px 20px;
        background: rgba(255, 255, 255, .025)
    }

    body:not(.admin-body)>.account-sidebar .reko-desktop-side-brand img {
        width: 124px;
        max-height: 42px;
        filter: none
    }

    body:not(.admin-body)>.account-sidebar>.p-3 {
        margin: 10px 12px 12px;
        padding: 12px !important;
        background: #172231;
        border: 1px solid rgba(255, 255, 255, .06);
        border-radius: 12px
    }

    body:not(.admin-body)>.account-sidebar .follow-user-icon img {
        width: 44px !important;
        height: 44px;
        object-fit: cover;
        border: 2px solid rgba(255, 255, 255, .18)
    }

    body:not(.admin-body)>.account-sidebar .follow-user-desc {
        padding-left: 54px !important
    }

    body:not(.admin-body)>.account-sidebar .follow-user-desc h5 {
        font-size: 14px
    }

    body:not(.admin-body)>.account-sidebar #search-engine {
        padding: 0 12px 14px !important
    }

    body:not(.admin-body)>.account-sidebar #search-engine .input-group {
        overflow: hidden;
        border: 1px solid #2a3a4d;
        border-radius: 10px;
        background: #172231
    }

    body:not(.admin-body)>.account-sidebar #search-engine .form-control {
        height: 42px;
        min-height: 42px;
        padding-left: 13px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none
    }

    body:not(.admin-body)>.account-sidebar #search-engine .btn {
        width: 42px;
        color: #fff;
        background: var(--rn-primary);
        border: 0;
        border-radius: 0
    }

    body:not(.admin-body)>.account-sidebar>div[style*="calc"] {
        height: calc(100% - 232px) !important;
        padding: 0 5px 15px
    }

    body:not(.admin-body)>.account-sidebar .nav.divider {
        margin: 0 7px 9px;
        padding: 8px 0 !important;
        border-top: 1px solid rgba(255, 255, 255, .065)
    }

    body:not(.admin-body)>.account-sidebar .nav-link {
        display: flex;
        align-items: center;
        min-height: 42px;
        margin: 2px 3px;
        padding: 9px 11px;
        color: #a9b5c5;
        border-radius: 9px;
        font-size: 13px;
        font-weight: 550;
        transition: background .14s, color .14s, transform .14s
    }

    body:not(.admin-body)>.account-sidebar .nav-link:hover {
        color: #fff;
        background: #202d3d;
        transform: translateX(2px)
    }

    body:not(.admin-body)>.account-sidebar .nav-link i {
        width: 25px !important;
        color: #718096;
        font-size: 14px !important
    }

    body:not(.admin-body)>.account-sidebar .nav-link:hover i {
        color: #ff8a72
    }

    body:not(.admin-body)>.account-sidebar #more_category {
        background: rgba(255, 255, 255, .025) !important;
        border-radius: 9px
    }

    body:not(.admin-body)>.account-sidebar>ul:last-child {
        display: none
    }

    body:not(.admin-body) .row:has(> .col-md-8):has(> .col-md-4)>.col-md-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
        padding-right: 18px !important;
        padding-left: 0 !important
    }

    body:not(.admin-body) .row:has(> .col-md-8):has(> .col-md-4)>.col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        padding-right: 0 !important;
        padding-left: 18px !important
    }

    body:not(.admin-body) .row:has(> .col-md-8):has(> .col-md-4)>.col-md-4 .card {
        border-radius: 8px
    }

    body:not(.admin-body)>.container,
    body:not(.admin-body)>main.container,
    body:not(.admin-body)>.bg-light>.container,
    body:not(.admin-body)>section>.container,
    body:not(.admin-body)>.profile-hero>.container,
    body:not(.admin-body)>.social-profile-hero>.container {
        width: 90%;
        max-width: none !important;
        margin-right: auto;
        margin-left: auto;
        padding-right: 26px !important;
        padding-left: 26px !important
    }
}

/* Larger, clearer post engagement controls */
.reko-post-actions {
    min-height: 49px;
    padding-top: 9px
}

.reko-post-actions-right {
    gap: 7px
}

.reko-reactions-compact .reko-reaction-main,
.reko-count-action {
    min-width: 48px;
    min-height: 40px !important;
    justify-content: center;
    gap: 6px !important;
    padding: 6px 10px !important;
    color: var(--rn-text-2) !important;
    background: var(--rn-surface-2) !important;
    border: 1px solid var(--rn-border) !important;
    border-radius: 12px !important
}

.reko-reactions-compact .reko-reaction-main:hover,
.reko-count-action:hover {
    color: var(--rn-primary) !important;
    background: rgba(240, 93, 64, .09) !important;
    border-color: rgba(240, 93, 64, .38) !important;
    text-decoration: none
}

.reko-reactions-compact .reko-reaction-main img {
    width: 28px !important;
    height: 28px !important;
    filter: none
}

.reko-reactions-compact .reko-reaction-main span,
.reko-count-action span {
    font-size: 13px !important;
    font-weight: 600;
    color: inherit
}

.reko-count-action i {
    font-size: 19px
}

.reko-reaction-proof-icons img {
    width: 23px;
    height: 23px
}

.reko-reaction-picker {
    padding: 7px 9px
}

.reko-reaction-option img {
    width: 36px;
    height: 36px
}

@media(max-width:575px) {
    .reko-post-actions-right {
        gap: 4px
    }

    .reko-reactions-compact .reko-reaction-main,
    .reko-count-action {
        min-width: 42px;
        min-height: 38px !important;
        padding: 5px 7px !important
    }

    .reko-reactions-compact .reko-reaction-main img {
        width: 23px !important;
        height: 23px !important
    }

    .reko-count-action i {
        font-size: 17px
    }
}

/* High-contrast desktop navigation */
@media(min-width:992px) {
    body:not(.admin-body)>.account-sidebar {
        color: #eef2f7 !important;
        background: #0d1521 !important;
        border-right-color: #26364a !important
    }

    body:not(.admin-body)>.account-sidebar .reko-desktop-side-brand {
        background: #111d2c;
        border-bottom-color: #2b3a4c
    }

    body:not(.admin-body)>.account-sidebar .reko-desktop-side-brand span {
        color: #b8c4d2 !important
    }

    body:not(.admin-body)>.account-sidebar>.p-3 {
        background: #192638 !important;
        border-color: #314258 !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .18)
    }

    body:not(.admin-body)>.account-sidebar .follow-user-desc h5,
    body:not(.admin-body)>.account-sidebar .follow-user-desc h5 a {
        color: #fff !important
    }

    body:not(.admin-body)>.account-sidebar .follow-user-desc a {
        color: #ffb4a5 !important;
        font-weight: 400;
        font-size: 12px;
    }

    body:not(.admin-body)>.account-sidebar #search-engine .input-group {
        background: #fff !important;
        border: 2px solid #f4c430 !important;
        box-shadow: 0 5px 16px rgba(0, 0, 0, .2)
    }

    body:not(.admin-body)>.account-sidebar #search-engine .form-control {
        color: #172033 !important;
        background: #fff !important
    }

    body:not(.admin-body)>.account-sidebar #search-engine .form-control::placeholder {
        color: #667085 !important
    }

    body:not(.admin-body)>.account-sidebar #search-engine .btn {
        color: #1f2937 !important;
        background: #ffc107 !important;
        border-left: 1px solid #e0a800 !important
    }

    body:not(.admin-body)>.account-sidebar #search-engine .btn:hover {
        background: #ffca2c !important
    }

    body:not(.admin-body)>.account-sidebar .nav.divider {
        border-color: #2b3b4f !important
    }

    body:not(.admin-body)>.account-sidebar .nav-link {
        color: #e0e7ef !important
    }

    body:not(.admin-body)>.account-sidebar .nav-link i {
        color: #aebed0 !important
    }

    body:not(.admin-body)>.account-sidebar .nav-link .text-primary,
    body:not(.admin-body)>.account-sidebar .nav-link .text-twitter {
        color: #ff9b86 !important
    }

    body:not(.admin-body)>.account-sidebar .nav-link:hover,
    body:not(.admin-body)>.account-sidebar .nav-link:focus {
        color: #fff !important;
        background: #26364a !important
    }

    body:not(.admin-body)>.account-sidebar .nav-link:hover i {
        color: #ffc107 !important
    }

    body:not(.admin-body)>.account-sidebar .badge-danger {
        color: #fff;
        background: #e5484d
    }

    body:not(.admin-body)>.account-sidebar #more_category {
        background: #172334 !important;
        border: 1px solid #2b3b4f
    }
}

/* Mobile scale pass: compact media, readable metadata, consistent controls. */
@media(max-width:575.98px) {
    body:not(.admin-body) header .navbar {
        min-height: 54px
    }

    body:not(.admin-body) header .navbar>.container {
        position: relative;
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) 36px 34px;
        align-items: center;
        gap: 4px;
        padding-right: 8px !important;
        padding-left: 8px !important
    }

    body:not(.admin-body) header .navbar-brand {
        min-height: 54px !important;
        height: 54px;
        justify-self: center;
        margin: 0;
        padding: 0
    }

    body:not(.admin-body) header .navbar-brand .rn-logo-light,
    body:not(.admin-body) header .navbar-brand .rn-logo-dark {
        width: 92px !important;
        height: 31px !important
    }

    body:not(.admin-body) header .navbar-brand>.text-black-50 {
        display: none
    }

    body:not(.admin-body) header .navbar-toggler {
        width: 36px;
        height: 36px;
        display: inline-grid;
        flex: 0 0 36px;
        place-items: center;
        padding: 7px !important;
        border: 0
    }

    body:not(.admin-body) header .notify-menu,
    body:not(.admin-body) header #showSearch {
        margin: 0 !important
    }

    body:not(.admin-body) header #showSearch {
        position: absolute;
        right: 46px;
        z-index: 2;
        display: inline-grid !important;
        color: var(--rn-text) !important;
        visibility: visible;
        opacity: 1
    }

    body:not(.admin-body) header #showSearch svg {
        display: block;
        fill: currentColor
    }

    body:not(.admin-body) header .navbar-toggler img {
        width: 22px !important;
        height: 22px !important
    }

    body:not(.admin-body) header .navbar-toggler svg {
        width: 19px;
        height: 19px
    }

    body:not(.admin-body) header .reko-header-theme-toggle {
        position: absolute !important;
        right: 8px;
        z-index: 2;
        display: inline-grid !important;
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        margin-left: 4px;
        margin: 0;
        font-size: 13px;
        visibility: visible;
        opacity: 1
    }

    .reko-headlines-heading {
        gap: 8px;
        margin-top: 12px;
        padding-bottom: 8px
    }

    .reko-headlines-heading>div:first-child>span,
    .popular-books-heading>div:first-child>span {
        font-size: 9.5px
    }

    .reko-headlines-heading h1,
    .popular-books-heading h2 {
        font-size: 18px !important
    }

    .reko-headlines-heading p {
        max-width: 230px;
        font-size: 10.5px
    }

    .reko-headlines-heading>a,
    .popular-books-all {
        padding: 6px 8px;
        font-size: 10px
    }

    body:not(.admin-body) .reko-headlines .hero-list-item,
    body:not(.admin-body) .reko-headlines .hero-list-item:first-child {
        width: min(76vw, 294px) !important;
        min-width: min(76vw, 294px);
        flex-basis: min(76vw, 294px)
    }

    body:not(.admin-body) .reko-headlines .hero-item,
    body:not(.admin-body) .reko-headlines .hero-list-item:first-child .hero-item {
        aspect-ratio: 16/9
    }

    body:not(.admin-body) .reko-headlines .hero-item-desc,
    body:not(.admin-body) .reko-headlines .hero-list-item:first-child .hero-item-desc {
        padding: 12px !important
    }

    body:not(.admin-body) .reko-headlines .hero-item h3,
    body:not(.admin-body) .reko-headlines .hero-list-item:first-child .hero-item h3 {
        font-size: 15px
    }

    body:not(.admin-body) .reko-headlines .hero-item p {
        font-size: 10.5px
    }

    body:not(.admin-body) .reko-headlines .hero-item-type {
        padding: 5px 8px;
        font-size: 9.5px
    }

    .popular-books-section {
        padding: 16px 0
    }

    .popular-books-heading {
        gap: 10px;
        margin-bottom: 13px
    }

    .popular-books-section .horizon-scrollmenu {
        gap: 10px;
        padding-bottom: 7px
    }

    .popular-books-section .book-scroll,
    .popular-books-section .book-item-image {
        width: 106px;
        flex-basis: 106px
    }

    .popular-books-section .book-item-image {
        height: 148px;
        margin-bottom: 7px
    }

    .popular-books-section .book-item-image span {
        right: 5px;
        bottom: 5px;
        font-size: 9px
    }

    .book-scroll-copy h3 {
        font-size: 12.5px !important
    }

    .book-scroll-copy small {
        font-size: 10px
    }

    body:not(.admin-body) .post-list-item {
        gap: 10px;
        padding: 12px 0
    }

    body:not(.admin-body) .post-list-item>a.post-item-image {
        width: 100px;
        height: 74px;
        flex-basis: 100px
    }

    body:not(.admin-body) .post-item-desc h3 {
        font-size: 14px;
        line-height: 1.28
    }

    body:not(.admin-body) .reko-post-meta {
        margin-top: 7px;
        font-size: 10.5px !important
    }

    body:not(.admin-body) .reko-post-actions {
        min-height: 34px;
        margin-top: 3px;
        padding-top: 4px
    }

    body:not(.admin-body) .reko-reaction-proof {
        display: none
    }

    .reko-reactions-compact .reko-reaction-main,
    .reko-count-action {
        min-width: 34px !important;
        min-height: 32px !important;
        gap: 4px !important;
        padding: 4px 6px !important;
        border-radius: 7px !important
    }

    .reko-reactions-compact .reko-reaction-main img {
        width: 20px !important;
        height: 20px !important
    }

    .reko-count-action i {
        font-size: 15px
    }

    .reko-count-action span,
    .reko-reactions-compact .reko-reaction-main span {
        font-size: 10.5px !important
    }
}

/* Open, Facebook-style engagement controls */
.reko-reactions-compact .reko-reaction-main,
.reko-count-action {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.reko-reactions-compact .reko-reaction-main:hover,
.reko-reactions-compact .reko-reaction-main:focus,
.reko-count-action:hover,
.reko-count-action:focus {
    color: var(--rn-primary) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.reko-reaction-picker {
    gap: 5px !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .24) !important;
}

.reko-reaction-option img {
    width: 46px !important;
    height: 46px !important;
}

.reko-reaction-option:hover {
    transform: translateY(-7px) scale(1.18) !important;
}

@media (max-width: 575px) {
    .reko-reaction-picker {
        gap: 3px !important;
        padding: 8px 10px !important;
    }

    .reko-reaction-option img {
        width: 39px !important;
        height: 39px !important;
    }
}

/* Purpose-built desktop navigation rail */
.reko-side-label {
    margin: 12px 18px 6px;
    color: var(--rn-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase
}

@media (min-width: 992px) {
    html body:not(.admin-body) {
        padding-left: 248px;
    }

    body:not(.admin-body)>.account-sidebar {
        width: 248px;
        background: #111827 !important;
        border-right: 1px solid #243044 !important;
    }

    body:not(.admin-body)>.account-sidebar .reko-desktop-side-brand {
        height: 78px;
        padding: 17px 20px;
        background: #111827;
        border-bottom: 1px solid #243044;
    }

    body:not(.admin-body)>.account-sidebar .reko-desktop-side-brand img {
        width: 118px;
    }

    body:not(.admin-body)>.account-sidebar .reko-desktop-side-brand span {
        margin-top: 3px;
        color: #94a3b8 !important;
        font-size: 9px;
        letter-spacing: .12em;
    }

    body:not(.admin-body)>.account-sidebar>.p-3 {
        margin: 0;
        padding: 17px 18px 13px !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0;
        box-shadow: none !important;
    }

    body:not(.admin-body)>.account-sidebar .follow-user {
        min-height: 46px;
    }

    body:not(.admin-body)>.account-sidebar .follow-user-icon img {
        width: 42px !important;
        height: 42px;
        border: 2px solid #475569;
    }

    body:not(.admin-body)>.account-sidebar .follow-user-desc {
        padding-top: 2px;
        padding-left: 52px !important;
    }

    body:not(.admin-body)>.account-sidebar .follow-user-desc h5 {
        margin-bottom: 3px !important;
        font-size: 13px;
        font-weight: 650;
    }

    body:not(.admin-body)>.account-sidebar .follow-user-desc>div>a {
        display: inline-flex;
        align-items: center;
        color: #94a3b8 !important;
        font-size: 11px;
        font-weight: 400;
    }

    body:not(.admin-body)>.account-sidebar #search-engine {
        padding: 0 16px 16px !important;
    }

    body:not(.admin-body)>.account-sidebar #search-engine .input-group {
        overflow: hidden;
        background: #1e293b !important;
        border: 1px solid #334155 !important;
        border-radius: 9px;
        box-shadow: none;
    }

    body:not(.admin-body)>.account-sidebar #search-engine .form-control {
        height: 39px;
        min-height: 39px;
        color: #f8fafc !important;
        background: transparent !important;
        font-size: 12px;
    }

    body:not(.admin-body)>.account-sidebar #search-engine .form-control::placeholder {
        color: #94a3b8 !important;
    }

    body:not(.admin-body)>.account-sidebar #search-engine .btn {
        width: 40px;
        color: #111827 !important;
        background: #ffc107 !important;
        border: 0 !important;
    }

    body:not(.admin-body)>.account-sidebar>div[style*="calc"] {
        height: calc(100% - 206px) !important;
        padding: 0 10px 18px;
    }

    body:not(.admin-body)>.account-sidebar .reko-side-label {
        margin: 12px 12px 7px;
        color: #64748b;
        font-size: 9px;
        font-weight: 750;
        letter-spacing: .16em;
        text-transform: uppercase;
    }

    body:not(.admin-body)>.account-sidebar .nav.divider {
        margin: 0 0 8px;
        padding: 0 !important;
        border: 0 !important;
    }

    body:not(.admin-body)>.account-sidebar .nav-link {
        position: relative;
        min-height: 40px;
        margin: 2px 0;
        padding: 9px 11px;
        color: #cbd5e1 !important;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 570;
        transform: none;
    }

    body:not(.admin-body)>.account-sidebar .nav-link i {
        width: 27px !important;
        color: #94a3b8 !important;
        font-size: 14px !important;
    }

    body:not(.admin-body)>.account-sidebar .nav-link:hover,
    body:not(.admin-body)>.account-sidebar .nav-link:focus,
    body:not(.admin-body)>.account-sidebar .nav-link.active {
        color: #fff !important;
        background: #1e293b !important;
        transform: none;
    }

    body:not(.admin-body)>.account-sidebar .nav-link:hover::before,
    body:not(.admin-body)>.account-sidebar .nav-link.active::before {
        position: absolute;
        top: 9px;
        bottom: 9px;
        left: 0;
        width: 3px;
        content: "";
        background: var(--rn-primary);
        border-radius: 0 3px 3px 0;
    }

    body:not(.admin-body)>.account-sidebar .nav-link:hover i,
    body:not(.admin-body)>.account-sidebar .nav-link.active i {
        color: #ffc107 !important;
    }

    body:not(.admin-body)>.account-sidebar #more_category {
        background: #0f172a !important;
        border: 1px solid #263449;
        border-radius: 8px;
    }
}

/* Editorial headline grid */
body:not(.admin-body) .reko-headlines {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
    grid-template-rows: repeat(2, 205px);
    gap: 12px;
    margin: 18px 0 26px !important
}

body:not(.admin-body) .reko-headlines .hero-list-item {
    float: none;
    width: auto !important;
    padding: 0 !important;
    min-width: 0
}

body:not(.admin-body) .reko-headlines .hero-list-item:first-child {
    grid-row: 1/3
}

body:not(.admin-body) .reko-headlines .hero-item,
body:not(.admin-body) .reko-headlines .hero-list-item:first-child .hero-item {
    height: 100% !important;
    border-radius: 13px !important;
    transition: transform .2s ease, box-shadow .2s ease
}

body:not(.admin-body) .reko-headlines .hero-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .18) !important
}

body:not(.admin-body) .reko-headlines .hero-item::after {
    background: linear-gradient(180deg, rgba(5, 8, 15, .08) 20%, rgba(5, 8, 15, .86) 100%)
}

body:not(.admin-body) .reko-headlines .hero-item-desc {
    padding: 20px !important
}

body:not(.admin-body) .reko-headlines .hero-list-item:first-child .hero-item-desc {
    padding: 26px !important
}

body:not(.admin-body) .reko-headlines .hero-item h3 {
    margin: 7px 0 7px;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 650
}

body:not(.admin-body) .reko-headlines .hero-list-item:first-child .hero-item h3 {
    max-width: 680px;
    font-size: 23px;
    line-height: 1.18
}

body:not(.admin-body) .reko-headlines .hero-item .badge {
    padding: 4px 7px;
    color: #fff;
    background: var(--rn-primary);
    border-radius: 4px;
    font-size: 9px;
    letter-spacing: .04em
}

body:not(.admin-body) .reko-headlines .hero-item-type {
    top: 13px;
    left: 14px;
    padding: 5px 9px;
    background: rgba(10, 15, 25, .72);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase
}

body:not(.admin-body) .reko-headlines .hero-item-type i {
    color: #ffc107
}

@media(max-width:767px) {
    body:not(.admin-body) .reko-headlines {
        display: block;
        margin: 10px -4px 20px !important
    }

    body:not(.admin-body) .reko-headlines .hero-list-item:first-child .hero-item h3 {
        font-size: 18px
    }

    body:not(.admin-body) .reko-headlines .hero-item {
        height: 230px !important
    }
}

/* Rebuilt contextual news sidebar */
.reko-news-sidebar {
    display: grid;
    gap: 16px;
    margin-top: 16px
}

.reko-side-module {
    overflow: hidden;
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-radius: 12px
}

.reko-module-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 16px 12px
}

.reko-module-heading>div>span {
    display: block;
    color: var(--rn-primary);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .15em
}

.reko-module-heading h2 {
    margin: 2px 0 0;
    font-size: 15px !important;
    font-weight: 650
}

.reko-module-heading>i {
    color: var(--rn-primary);
    font-size: 17px
}

.reko-module-heading>a {
    font-size: 10px;
    font-weight: 650
}

.reko-sidebar-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 80px;
    color: var(--rn-muted);
    font-size: 11px
}

.reko-sidebar-loading img {
    width: 28px;
    height: 28px
}

.reko-sidebar-story {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) 58px;
    gap: 9px;
    align-items: center;
    padding: 11px 14px;
    color: var(--rn-text) !important;
    border-top: 1px solid var(--rn-border)
}

.reko-sidebar-story:hover {
    background: var(--rn-surface-2);
    text-decoration: none
}

.reko-sidebar-story-rank {
    color: var(--rn-primary);
    font-size: 10px;
    font-weight: 750
}

.reko-sidebar-story-copy {
    min-width: 0
}

.reko-sidebar-story-copy strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--rn-text);
    font-size: 11.5px;
    line-height: 1.35;
    font-weight: 620;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2
}

.reko-sidebar-story-copy small {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--rn-muted);
    font-size: 9px;
    white-space: nowrap;
    text-overflow: ellipsis
}

.reko-sidebar-story>img {
    width: 58px;
    height: 48px;
    object-fit: cover;
    background: var(--rn-surface-2);
    border-radius: 7px
}

.reko-sidebar-people {
    border-top: 1px solid var(--rn-border)
}

.reko-sidebar-person {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--rn-border)
}

.reko-sidebar-person:last-child {
    border-bottom: 0
}

.reko-sidebar-person-link {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    flex: 1;
    color: var(--rn-text) !important
}

.reko-sidebar-person-link:hover {
    text-decoration: none
}

.reko-sidebar-person-link img {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    object-fit: cover;
    border-radius: 50%
}

.reko-sidebar-person-link span {
    min-width: 0
}

.reko-sidebar-person-link strong,
.reko-sidebar-person-link small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.reko-sidebar-person-link strong {
    font-size: 11.5px
}

.reko-sidebar-person-link small {
    color: var(--rn-muted);
    font-size: 9px
}

.reko-sidebar-person>.followBtn {
    padding: 5px 8px;
    color: var(--rn-primary);
    background: transparent;
    border: 1px solid rgba(240, 93, 64, .48);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 650
}

.reko-topic-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 14px 15px
}

.reko-topic-cloud a {
    padding: 6px 9px;
    color: var(--rn-text-2) !important;
    background: var(--rn-surface-2);
    border: 1px solid var(--rn-border);
    border-radius: 999px;
    font-size: 9.5px
}

.reko-topic-cloud a:hover {
    color: var(--rn-primary) !important;
    border-color: rgba(240, 93, 64, .4);
    text-decoration: none
}

.reko-sidebar-empty {
    padding: 15px;
    color: var(--rn-muted);
    font-size: 11px;
    text-align: center
}

@media(max-width:991px) {
    .reko-news-sidebar {
        margin-top: 20px
    }

    .reko-sidebar-story {
        grid-template-columns: 28px minmax(0, 1fr) 72px
    }

    .reko-sidebar-story>img {
        width: 72px;
        height: 54px
    }
}

/* Unclipped reaction tray */
body:not(.admin-body) .post-list-item:has(.reko-reactions) {
    overflow: visible !important
}

.reko-reactions {
    isolation: isolate
}

.reko-reaction-picker {
    display: flex !important;
    flex-flow: row nowrap !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    border-radius: 999px !important
}

.reko-reaction-option {
    display: grid !important;
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    place-items: center;
    padding: 0 !important
}

.reko-reaction-option img {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    max-width: none !important;
    object-fit: contain !important
}

.reko-post-actions-right .reko-reaction-picker {
    right: 0 !important;
    left: auto !important
}

/* Short-video watch rail details */
.for-you-shorts-head {
    padding: 17px 18px 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .09)
}

.for-you-shorts-heading {
    display: flex;
    align-items: center;
    gap: 11px
}

.for-you-shorts-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--rn-primary);
    border-radius: 11px;
    box-shadow: 0 7px 17px rgba(240, 93, 64, .32);
    font-size: 12px
}

.for-you-shorts-title {
    display: block
}

.for-you-shorts-title strong {
    display: block;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 650 !important
}

.for-you-shorts-title small {
    display: block;
    margin-top: 2px;
    color: #9dacbf;
    font-size: 10px
}

.for-you-shorts-all {
    padding: 7px 10px;
    color: #fff !important;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    font-size: 10px !important
}

.for-you-shorts-all:hover {
    background: rgba(255, 255, 255, .14);
    text-decoration: none
}

.for-you-shorts-track {
    gap: 12px !important;
    padding: 16px 18px 5px !important;
    scrollbar-color: #46566c transparent
}

.for-you-short-card {
    width: 174px !important;
    height: 276px !important;
    flex: 0 0 174px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 13px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .3) !important;
    transition: transform .18s ease, border-color .18s ease
}

.for-you-short-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, .4) !important;
    text-decoration: none
}

.for-you-short-card>img {
    opacity: 1 !important;
    transition: transform .35s ease
}

.for-you-short-card:hover>img {
    transform: scale(1.045)
}

.for-you-short-card::after {
    inset: 20% 0 0 !important;
    background: linear-gradient(transparent, rgba(3, 7, 14, .92)) !important
}

.for-you-short-duration {
    position: absolute;
    z-index: 3;
    top: 10px;
    left: 10px;
    padding: 4px 7px;
    color: #fff;
    background: rgba(5, 9, 16, .72);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 6px;
    font-size: 8px;
    font-style: normal
}

.for-you-short-play {
    top: 50% !important;
    right: 50% !important;
    width: 46px !important;
    height: 46px !important;
    transform: translate(50%, -50%);
    background: rgba(240, 93, 64, .92) !important;
    border: 3px solid rgba(255, 255, 255, .88);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .3);
    font-size: 13px !important
}

.for-you-short-copy {
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important
}

.for-you-short-copy strong {
    min-height: 36px;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important
}

.for-you-short-author {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 7px;
    align-items: center;
    margin-top: 9px
}

.for-you-short-author img {
    width: 25px;
    height: 25px;
    grid-row: 1/3;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 50%
}

.for-you-short-author small {
    overflow: hidden;
    color: #e5e7eb !important;
    font-size: 8.5px;
    white-space: nowrap;
    text-overflow: ellipsis
}

.for-you-short-author em {
    color: #9dacbf;
    font-size: 8px;
    font-style: normal
}

.for-you-shorts-loading {
    color: #9dacbf !important
}

@media(max-width:575px) {
    .reko-reaction-option {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important
    }

    .reko-reaction-option img {
        width: 37px !important;
        height: 37px !important
    }

    .for-you-shorts-head {
        padding: 14px !important
    }

    .for-you-shorts-track {
        padding: 14px 14px 4px !important
    }

    .for-you-short-card {
        width: 158px !important;
        height: 252px !important;
        flex-basis: 158px !important
    }

    .for-you-shorts-title small {
        max-width: 150px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
}

/* Stable sticky wrapper for sidebar.php */
@media(min-width:768px) {
    body:not(.admin-body) .sticky-top:has(> .reko-news-sidebar) {
        position: sticky !important;
        top: 70px !important;
        align-self: flex-start;
        max-height: calc(100vh - 84px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--rn-border) transparent
    }

    body:not(.admin-body) .reko-news-sidebar {
        position: static;
        top: auto;
        bottom: auto;
        max-height: none;
        margin-top: 0;
        padding: 2px 7px 14px 1px;
        overflow: visible
    }

    body:not(.admin-body) .sticky-top:has(> .reko-news-sidebar)::-webkit-scrollbar {
        width: 6px
    }

    body:not(.admin-body) .sticky-top:has(> .reko-news-sidebar)::-webkit-scrollbar-track {
        background: transparent
    }

    body:not(.admin-body) .sticky-top:has(> .reko-news-sidebar)::-webkit-scrollbar-thumb {
        background: var(--rn-border);
        border-radius: 999px
    }

    body:not(.admin-body) .sticky-top:has(> .reko-news-sidebar)::-webkit-scrollbar-thumb:hover {
        background: var(--rn-muted)
    }
}

@media(max-width:767px) {
    body:not(.admin-body) .reko-news-sidebar {
        position: static;
        max-height: none;
        padding: 0;
        overflow: visible
    }
}

/* Explicit sidebar top/bottom access */
.reko-sidebar-jump {
    display: none
}

@media(min-width:768px) {
    .reko-sidebar-jump {
        position: sticky;
        z-index: 8;
        left: 50%;
        width: max-content;
        display: flex;
        align-items: center;
        gap: 5px;
        margin-right: auto;
        margin-left: auto;
        padding: 5px 9px;
        color: var(--rn-text-2);
        background: var(--rn-surface);
        border: 1px solid var(--rn-border);
        border-radius: 999px;
        box-shadow: 0 5px 15px rgba(15, 23, 42, .1);
        font-size: 9px;
        font-weight: 650
    }

    .reko-sidebar-jump:hover {
        color: var(--rn-primary);
        border-color: rgba(240, 93, 64, .4)
    }

    .reko-sidebar-jump-top {
        top: 2px;
        margin-bottom: 7px
    }

    .reko-sidebar-jump-bottom {
        bottom: 2px;
        margin-top: 7px
    }
}

/* Platform-style Top Stories */
.reko-headlines-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 26px 0 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--rn-border)
}

.reko-headlines-heading>div>span {
    display: block;
    color: var(--rn-primary);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .16em
}

.reko-headlines-heading h1 {
    margin: 3px 0 3px;
    font-size: 24px !important;
    font-weight: 650
}

.reko-headlines-heading p {
    margin: 0;
    color: var(--rn-text-2);
    font-size: 12px
}

.reko-headlines-heading>a {
    flex: 0 0 auto;
    padding: 7px 10px;
    color: var(--rn-primary);
    border: 1px solid rgba(240, 93, 64, .35);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 650
}

.reko-headlines-heading>a:hover {
    background: rgba(240, 93, 64, .07);
    text-decoration: none
}

body:not(.admin-body) .reko-headlines {
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr);
    gap: 10px;
    margin-top: 0 !important
}

body:not(.admin-body) .reko-headlines .hero-item,
body:not(.admin-body) .reko-headlines .hero-list-item:first-child .hero-item {
    border: 1px solid var(--rn-border);
    border-top: 3px solid var(--rn-primary);
    border-radius: 8px !important;
    box-shadow: none !important
}

body:not(.admin-body) .reko-headlines .hero-item:hover {
    transform: none;
    border-color: rgba(240, 93, 64, .5);
    box-shadow: none !important
}

body:not(.admin-body) .reko-headlines .hero-item::after {
    background: linear-gradient(180deg, rgba(15, 23, 42, .03) 15%, rgba(15, 23, 42, .94) 100%)
}

body:not(.admin-body) .reko-headlines .hero-item-type {
    color: #fff;
    background: var(--rn-primary);
    border: 0;
    border-radius: 4px;
    backdrop-filter: none
}

body:not(.admin-body) .reko-headlines .hero-item-type i {
    color: #fff
}

body:not(.admin-body) .reko-headlines .hero-item .badge {
    color: var(--rn-primary) !important;
    background: #fff;
    border: 0
}

@media(max-width:767px) {
    .reko-headlines-heading {
        align-items: flex-start;
        margin-top: 18px
    }

    .reko-headlines-heading h1 {
        font-size: 21px !important
    }

    .reko-headlines-heading p {
        max-width: 240px
    }

    .reko-headlines-heading>a {
        margin-top: 3px
    }

    .reko-headlines {
        margin-right: 0 !important;
        margin-left: 0 !important
    }
}

/* Clean, open homepage short-video section */
.for-you-shorts-head {
    padding: 0 0 15px !important;
    border-bottom: 1px solid var(--rn-border) !important
}

.for-you-shorts-heading {
    gap: 12px
}

.for-you-shorts-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: none
}

.for-you-shorts-title strong {
    color: var(--rn-text) !important;
    font-size: 22px !important;
    line-height: 1.15 !important
}

.for-you-shorts-title small {
    margin-top: 4px;
    color: var(--rn-muted) !important;
    font-size: 12px
}

.for-you-shorts-all {
    color: var(--rn-primary) !important;
    background: transparent !important;
    border-color: rgba(240, 93, 64, .38) !important;
    font-size: 11px !important
}

.for-you-shorts-all:hover {
    background: rgba(240, 93, 64, .07) !important
}

.for-you-shorts-track {
    gap: 15px !important;
    padding: 17px 1px 8px !important
}

.for-you-short-card {
    width: 198px !important;
    height: 310px !important;
    flex: 0 0 198px !important;
    border: 1px solid var(--rn-border) !important;
    border-radius: 11px !important;
    box-shadow: 0 7px 20px rgba(15, 23, 42, .13) !important
}

.for-you-short-card:hover {
    border-color: rgba(240, 93, 64, .5) !important
}

.for-you-short-copy {
    right: 14px !important;
    bottom: 14px !important;
    left: 14px !important
}

.for-you-short-copy strong {
    min-height: 46px;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 650 !important
}

.for-you-short-author {
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 8px;
    margin-top: 11px
}

.for-you-short-author img {
    width: 30px;
    height: 30px
}

.for-you-short-author small {
    font-size: 10px
}

.for-you-short-author em {
    font-size: 9px
}

.for-you-short-play {
    width: 52px !important;
    height: 52px !important;
    font-size: 15px !important
}

@media(max-width:575px) {
    .for-you-shorts {
        width: 100% !important;
        margin: 18px 0 !important;
        padding-bottom: 12px !important
    }

    .for-you-shorts-head {
        padding-bottom: 12px !important
    }

    .for-you-shorts-title strong {
        font-size: 19px !important
    }

    .for-you-shorts-title small {
        font-size: 10px
    }

    .for-you-shorts-track {
        gap: 11px !important;
        padding-top: 13px !important
    }

    .for-you-short-card {
        width: 174px !important;
        height: 278px !important;
        flex-basis: 174px !important
    }

    .for-you-short-copy strong {
        min-height: 40px;
        font-size: 14px !important
    }
}

/* Compact Top Stories footprint */
.reko-headlines-heading {
    margin-top: 18px;
    margin-bottom: 10px;
    padding-bottom: 10px
}

.reko-headlines-heading h1 {
    font-size: 21px !important
}

.reko-headlines-heading p {
    font-size: 11px
}

body:not(.admin-body) .reko-headlines {
    grid-template-rows: repeat(2, 145px);
    gap: 8px;
    margin-bottom: 20px !important
}

body:not(.admin-body) .reko-headlines .hero-item-desc {
    padding: 14px !important
}

body:not(.admin-body) .reko-headlines .hero-list-item:first-child .hero-item-desc {
    padding: 18px !important
}

body:not(.admin-body) .reko-headlines .hero-list-item:first-child .hero-item h3 {
    font-size: 19px
}

body:not(.admin-body) .reko-headlines .hero-item h3 {
    font-size: 13.5px;
    margin-bottom: 3px
}

body:not(.admin-body) .reko-headlines .hero-item p {
    font-size: 9px;
    margin-bottom: 0
}

body:not(.admin-body) .reko-headlines .hero-item p.text-ellipsis2 {
    display: none !important
}

body:not(.admin-body) .reko-headlines .hero-item-type {
    top: 9px;
    left: 9px;
    padding: 4px 7px;
    font-size: 8px
}

/* Stable mobile Top Stories rail */
@media(max-width:767.98px) {
    .reko-headlines-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 12px;
        margin: 15px 0 10px;
        padding: 0 2px 10px
    }

    .reko-headlines-heading h1 {
        margin-top: 2px;
        font-size: 19px !important;
        line-height: 1.2
    }

    .reko-headlines-heading p {
        display: -webkit-box;
        max-width: 250px;
        overflow: hidden;
        font-size: 11px;
        line-height: 1.4;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2
    }

    .reko-headlines-heading>a {
        margin: 0 0 1px;
        padding: 6px 9px;
        white-space: nowrap
    }

    body:not(.admin-body) .reko-headlines {
        width: 100%;
        display: flex !important;
        grid-template: none;
        gap: 10px;
        margin: 0 0 18px !important;
        padding: 0 2px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-padding-left: 2px;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin
    }

    body:not(.admin-body) .reko-headlines::after {
        display: none
    }

    body:not(.admin-body) .reko-headlines .hero-list-item,
    body:not(.admin-body) .reko-headlines .hero-list-item:first-child {
        width: min(76vw, 294px) !important;
        min-width: min(76vw, 294px);
        flex: 0 0 min(76vw, 294px);
        padding: 0 !important;
        scroll-snap-align: start
    }

    body:not(.admin-body) .reko-headlines .hero-item,
    body:not(.admin-body) .reko-headlines .hero-list-item:first-child .hero-item {
        width: 100%;
        height: auto !important;
        aspect-ratio: 16/9;
        border-top-width: 2px
    }

    body:not(.admin-body) .reko-headlines .hero-item-desc,
    body:not(.admin-body) .reko-headlines .hero-list-item:first-child .hero-item-desc {
        padding: 12px !important;
        overflow: hidden
    }

    body:not(.admin-body) .reko-headlines .hero-item h3,
    body:not(.admin-body) .reko-headlines .hero-list-item:first-child .hero-item h3 {
        display: -webkit-box;
        margin: 5px 0 0;
        overflow: hidden;
        font-size: 15px;
        line-height: 1.28;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2
    }

    body:not(.admin-body) .reko-headlines .waiting_top_post {
        min-height: 0;
        height: 190px;
        display: grid;
        place-items: center;
        background: var(--rn-surface-2);
        border: 1px solid var(--rn-border);
        border-radius: 8px
    }

    body:not(.admin-body) .reko-headlines .waiting_top_post img {
        width: 32px;
        height: 32px
    }

    body:not(.admin-body) .reko-headlines .hero-item p {
        font-size: 10.5px
    }

    body:not(.admin-body) .reko-headlines .hero-item-type {
        padding: 5px 8px;
        font-size: 9.5px
    }
}

/* Cleaner editorial post rows */
body:not(.admin-body) .post-list {
    background: transparent;
    border: 0;
    border-radius: 0
}

body:not(.admin-body) .post-list-item {
    align-items: flex-start;
    gap: 18px;
    margin: 0;
    padding: 18px 4px;
    border: 0;
    border-bottom: 1px solid var(--rn-border);
    background: transparent
}

body:not(.admin-body) .post-list-item>a.post-item-image {
    order: 2;
    width: 176px;
    height: 118px;
    flex: 0 0 176px;
    margin: 0 0 0 auto !important;
    border-radius: 8px !important;
    box-shadow: none !important
}

body:not(.admin-body) .post-item-desc {
    order: 1;
    min-width: 0
}

body:not(.admin-body) .post-item-desc h3 {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 650
}

body:not(.admin-body) .post-item-desc p {
    margin: 5px 0 0;
    font-size: 12.5px;
    line-height: 1.5
}

body:not(.admin-body) .reko-post-meta {
    margin-top: 10px;
    font-size: 10.5px !important
}

body:not(.admin-body) .reko-post-actions {
    min-height: 39px;
    margin-top: 5px;
    padding-top: 6px
}

body:not(.admin-body) .reko-reaction-proof {
    font-size: 10px
}

.reko-reactions-compact .reko-reaction-main,
.reko-count-action {
    min-width: 38px !important;
    min-height: 34px !important;
    padding: 3px 6px !important
}

.reko-reactions-compact .reko-reaction-main img {
    width: 23px !important;
    height: 23px !important
}

.reko-count-action i {
    font-size: 16px
}

.reko-count-action span,
.reko-reactions-compact .reko-reaction-main span {
    font-size: 11px !important
}

@media(max-width:575px) {
    body:not(.admin-body) .post-list-item {
        gap: 11px;
        padding: 14px 0
    }

    body:not(.admin-body) .post-list-item>a.post-item-image {
        width: 100px;
        height: 74px;
        flex-basis: 100px
    }

    body:not(.admin-body) .post-item-desc h3 {
        font-size: 14px
    }

    body:not(.admin-body) .post-item-desc p {
        display: none
    }
}

/* Rebuilt Popular Books rail */
.popular-books-section {
    padding: 24px 0 22px;
    background: var(--rn-surface-2);
    border-top: 1px solid var(--rn-border);
    border-bottom: 1px solid var(--rn-border)
}

.popular-books-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px
}

.popular-books-heading>div:first-child>span {
    display: block;
    color: var(--rn-primary);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .16em
}

.popular-books-heading h2 {
    margin: 3px 0 2px;
    font-size: 21px !important
}

.popular-books-heading p {
    margin: 0;
    color: var(--rn-text-2);
    font-size: 11px
}

.popular-books-all {
    padding: 7px 10px;
    color: var(--rn-primary);
    border: 1px solid rgba(240, 93, 64, .35);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 650
}

.popular-books-all:hover {
    background: rgba(240, 93, 64, .07);
    text-decoration: none
}

.popular-books-section .horizon-scrollmenu {
    display: flex;
    gap: 16px;
    padding: 2px 1px 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity
}

.popular-books-section .book-scroll {
    width: 142px;
    flex: 0 0 142px;
    margin: 0;
    white-space: normal;
    scroll-snap-align: start
}

.popular-books-section .book-item-image {
    position: relative;
    width: 142px;
    height: 196px;
    display: block;
    overflow: hidden;
    margin: 0 0 9px;
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-radius: 8px;
    box-shadow: 0 7px 16px rgba(15, 23, 42, .1)
}

.popular-books-section .book-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.popular-books-section .book-item-image span {
    position: absolute;
    right: 7px;
    bottom: 7px;
    padding: 4px 7px;
    color: #fff;
    background: var(--rn-primary);
    border-radius: 4px;
    font-size: 8px;
    font-weight: 650
}

.book-scroll-copy {
    display: block;
    color: var(--rn-text) !important
}

.book-scroll-copy:hover {
    text-decoration: none
}

.book-scroll-copy h3 {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    font-size: 12.5px !important;
    line-height: 1.35;
    font-weight: 650;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2
}

.book-scroll-copy small {
    display: block;
    margin-top: 4px;
    color: var(--rn-muted);
    font-size: 9px
}

@media(max-width:575px) {
    .popular-books-section {
        padding: 16px 0
    }

    .popular-books-heading p {
        display: none
    }

    .popular-books-section .horizon-scrollmenu {
        gap: 12px
    }

    .popular-books-section .book-scroll,
    .popular-books-section .book-item-image {
        width: 106px;
        flex-basis: 106px
    }

    .popular-books-section .book-item-image {
        height: 148px
    }

    .popular-books-heading {
        gap: 10px;
        margin-bottom: 13px
    }

    .popular-books-heading h2 {
        font-size: 18px !important
    }

    .popular-books-section .horizon-scrollmenu {
        gap: 10px;
        padding-bottom: 7px
    }

    .book-scroll-copy small {
        font-size: 10px
    }
}

/* Publication CTA and viewport-safe reaction tray */
body:not(.admin-body) header .dropdown-menu .add-publication-link {
    width: auto;
    margin: 5px 8px;
    font-weight: 650
}

body:not(.admin-body) header .dropdown-menu .add-publication-link:hover {
    background: var(--rn-primary-hover) !important
}

.reko-reactions:hover:not(.picker-open) .reko-reaction-picker {
    opacity: 0 !important;
    visibility: hidden !important
}

.reko-reactions.picker-open .reko-reaction-picker {
    z-index: 9999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important
}

.reko-reaction-option {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important
}

.reko-reaction-option img {
    width: 40px !important;
    height: 40px !important
}

.reko-reaction-picker {
    gap: 4px !important;
    padding: 8px 10px !important
}

@media(max-width:575px) {
    .reko-reaction-option {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important
    }

    .reko-reaction-option img {
        width: 33px !important;
        height: 33px !important
    }

    .reko-reaction-picker {
        gap: 2px !important;
        padding: 7px 8px !important
    }
}

/* Restore anchored Facebook-style reaction behavior */
.reko-reaction-picker {
    position: absolute !important;
    top: auto !important;
    right: 0 !important;
    bottom: 44px !important;
    left: auto !important;
    width: max-content !important;
    transform: translateY(5px) !important
}

.reko-reactions:hover .reko-reaction-picker,
.reko-reactions.picker-open .reko-reaction-picker {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important
}

.reko-reactions:not(:hover):not(.picker-open) .reko-reaction-picker {
    opacity: 0 !important;
    visibility: hidden !important
}

.reko-post-actions,
.reko-post-actions-right,
.reko-reactions {
    overflow: visible !important
}

@media(max-width:575px) {
    .reko-reaction-picker {
        right: -4px !important;
        bottom: 41px !important
    }
}

/* Let the reaction tray escape the post copy column without affecting text clamping. */
body:not(.admin-body) .post-list-item:has(.reko-reactions) .post-item-desc,
body:not(.admin-body) .post-list-item:has(.reko-reactions) .reko-post-actions,
body:not(.admin-body) .post-list-item:has(.reko-reactions) .reko-post-actions-right {
    overflow: visible !important;
}

/* Article detail: platform-aligned editorial layout */
.reko-article-page {
    max-width: 1280px;
    padding-top: 22px;
    padding-bottom: 42px
}

.reko-article-layout {
    margin-right: -12px;
    margin-left: -12px
}

.reko-article-main,
.reko-article-sidebar {
    padding-right: 12px !important;
    padding-left: 12px !important
}

.reko-article-card {
    padding: 28px;
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-radius: 14px
}

.reko-article-card .bulletList {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 12px;
    padding: 0;
    white-space: normal
}

.reko-article-card .bulletList li {
    margin: 0;
    padding: 0;
    list-style: none
}

.reko-article-card .bulletList a {
    color: var(--rn-primary) !important;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .02em
}

.reko-article-card .post_title {
    margin: 0 !important;
    color: var(--rn-text) !important;
    font-size: clamp(28px, 3.2vw, 46px) !important;
    line-height: 1.12 !important;
    font-weight: 680 !important;
    letter-spacing: -.025em
}

.reko-article-card .follow-user {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    margin: 18px 0 !important;
    padding: 0;
    background: transparent;
    border: 0
}

.reko-article-card .follow-user-desc a {
    color: var(--rn-text) !important
}

.reko-article-card .follow-user-desc>div:last-child {
    margin-bottom: 0 !important;
    color: var(--rn-muted) !important
}

.reko-article-card .full_featured_image {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16/9;
    margin: 20px 0 !important;
    padding: 0 !important;
    background-size: cover;
    background-position: center;
    border: 0 !important;
    border-radius: 11px !important;
    box-shadow: none !important
}

.reko-article-card .articleBody {
    color: var(--rn-text-2);
    font-size: 17px !important;
    line-height: 1.78 !important
}

.reko-article-card .articleBody p {
    margin-bottom: 1.25em
}

.reko-article-card .articleBody img {
    max-width: 100%;
    height: auto;
    border-radius: 9px
}

.reko-article-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--rn-border);
    border-bottom: 1px solid var(--rn-border)
}

.reko-article-actions .share_list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0
}

.reko-article-actions .share_list li {
    margin: 0;
    list-style: none
}

.reko-article-actions .btn {
    min-height: 36px;
    padding: 7px 10px;
    background: transparent;
    border: 1px solid var(--rn-border);
    border-radius: 8px;
    color: var(--rn-text-2)
}

.reko-article-actions .btn:hover {
    color: var(--rn-primary);
    border-color: rgba(240, 93, 64, .45)
}

.reko-article-actions .article-reaction {
    margin-left: auto !important;
    overflow: visible
}

.reko-article-sidebar>.sticky-top {
    top: 78px !important
}

.reko-article-page #listen_position {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 14px 0;
    pointer-events: auto
}

.reko-article-page .listen_container {
    position: static !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto !important;
    height: auto !important;
    padding: 8px 11px !important;
    transform: none !important;
    background: var(--rn-surface-2) !important;
    border: 1px solid var(--rn-border) !important;
    border-radius: 999px !important;
    box-shadow: none !important
}

.reko-article-page #app_listen {
    padding: 0 !important
}

@media(max-width:767.98px) {
    .reko-article-page {
        padding-top: 8px
    }

    .reko-article-card {
        padding: 18px 14px;
        border-right: 0;
        border-left: 0;
        border-radius: 0
    }

    .reko-article-card .post_title {
        font-size: 27px !important
    }

    .reko-article-card .articleBody {
        font-size: 16px !important;
        line-height: 1.7 !important
    }

    .reko-article-actions {
        align-items: flex-start;
        flex-direction: column
    }

    .reko-article-actions .article-reaction {
        margin-left: 0 !important
    }

    .reko-article-sidebar {
        padding-top: 0 !important
    }
}

/* Short videos: same surfaces, typography and light/dark modes as the platform */
.video-page {
    height: calc(100dvh - 58px);
    min-height: 560px;
    padding: 26px 20px 64px;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--rn-text);
    background: var(--rn-bg);
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--rn-border) transparent
}

.video-page::-webkit-scrollbar {
    width: 7px
}

.video-page::-webkit-scrollbar-track {
    background: transparent
}

.video-page::-webkit-scrollbar-thumb {
    background: var(--rn-border);
    border-radius: 999px
}

.video-page-heading {
    max-width: 620px;
    margin: 0 auto 18px;
    padding: 0 4px
}

.video-page-heading span {
    color: var(--rn-primary);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .18em
}

.video-page-heading h1 {
    margin: 3px 0 4px;
    color: var(--rn-text);
    font-size: 28px !important;
    font-weight: 680 !important;
    letter-spacing: -.02em
}

.video-page-heading p {
    margin: 0;
    color: var(--rn-muted);
    font-size: 12px
}

.video-feed {
    max-width: 620px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 22px
}

.video-loading {
    text-align: center;
    padding: 80px 0
}

.video-loading img {
    height: 52px
}

.video-card {
    position: relative;
    width: 100%;
    height: calc(100dvh - 112px);
    min-height: 540px;
    max-height: 780px;
    overflow: hidden;
    background: #101216;
    border: 1px solid var(--rn-border);
    border-radius: 15px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
    scroll-snap-align: center;
    scroll-snap-stop: always
}

.video-card video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

.video-card:after {
    content: "";
    position: absolute;
    inset: 34% 0 0;
    background: linear-gradient(transparent, rgba(3, 7, 12, .92));
    pointer-events: none
}

.video-overlay {
    position: absolute;
    z-index: 2;
    right: 82px;
    bottom: 22px;
    left: 20px;
    color: #fff
}

.video-author {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 650
}

.video-author:hover {
    color: var(--rn-primary) !important;
    text-decoration: none
}

.video-author img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 50%
}

.video-caption {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3
}

.video-actions {
    position: absolute;
    z-index: 4;
    right: 14px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center
}

.video-action {
    min-width: 46px;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 0;
    text-shadow: 0 2px 8px #000;
    cursor: pointer
}

.video-action i {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background: rgba(12, 16, 23, .72);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    font-size: 16px;
    transition: .18s
}

.video-action:hover i,
.video-action.is-active i {
    background: var(--rn-primary);
    transform: scale(1.06)
}

.video-action small {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 10px
}

.video-reaction-control {
    position: relative;
    overflow: visible
}

.video-reaction-control .reko-reactions {
    display: block
}

.video-reaction-control .reko-reaction-main {
    min-width: 48px !important;
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    padding: 0 !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important
}

.video-reaction-control .reko-reaction-main img {
    width: 50px !important;
    height: 50px !important;
    margin: -3px auto;
    padding: 1px;
    background: rgba(12, 16, 23, .72);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%
}

.video-reaction-control .reko-reaction-main span {
    color: #fff !important;
    font-size: 10px !important;
    text-shadow: 0 2px 8px #000
}

.video-reaction-control .reko-reaction-picker {
    right: 0 !important;
    bottom: 53px !important
}

.video-sound {
    position: absolute;
    z-index: 3;
    top: 15px;
    right: 15px;
    width: 42px;
    height: 42px;
    color: #fff;
    background: rgba(12, 16, 23, .7);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%
}

.video-play {
    position: absolute;
    z-index: 3;
    top: 46%;
    left: 50%;
    opacity: 0;
    color: #fff;
    font-size: 3rem;
    text-shadow: 0 3px 15px #000;
    transform: translate(-50%, -50%);
    pointer-events: none
}

.video-card.is-paused .video-play {
    opacity: .9
}

.video-end {
    padding: 24px;
    color: var(--rn-muted);
    text-align: center
}

.video-toast {
    position: fixed;
    z-index: 1100;
    bottom: 28px;
    left: 50%;
    padding: 10px 16px;
    opacity: 0;
    color: var(--rn-text);
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-radius: 99px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .2);
    transform: translate(-50%, 20px);
    transition: .2s;
    pointer-events: none
}

.video-toast.show {
    opacity: 1;
    transform: translate(-50%, 0)
}

.video-comments {
    position: fixed;
    z-index: 1090;
    inset: 0;
    display: none;
    background: rgba(4, 8, 14, .65)
}

.video-comments.open {
    display: block
}

.video-comments-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(440px, 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--rn-text);
    background: var(--rn-surface);
    border-left: 1px solid var(--rn-border);
    box-shadow: -15px 0 45px rgba(0, 0, 0, .2)
}

.video-comments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px;
    border-bottom: 1px solid var(--rn-border)
}

.video-comments-head h2 {
    margin: 0;
    font-size: 16px !important
}

.video-comments-close {
    color: var(--rn-text);
    background: transparent;
    border: 0;
    font-size: 20px
}

.video-comments-list {
    flex: 1;
    overflow: auto;
    padding: 8px 18px
}

.video-comment-row {
    display: flex;
    gap: 10px;
    padding: 13px 0;
    border-bottom: 1px solid var(--rn-border)
}

.video-comment-row img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 50%
}

.video-comment-row strong {
    font-size: 12px
}

.video-comment-row p {
    margin: 3px 0 0;
    color: var(--rn-text-2);
    font-size: 13px;
    overflow-wrap: anywhere
}

.video-comment-empty {
    padding: 60px 15px;
    color: var(--rn-muted);
    text-align: center
}

.video-comment-form {
    display: flex;
    gap: 8px;
    padding: 13px;
    border-top: 1px solid var(--rn-border)
}

.video-comment-form input {
    min-width: 0;
    flex: 1;
    padding: 10px 14px;
    color: var(--rn-text);
    background: var(--rn-surface-2);
    border: 1px solid var(--rn-border);
    border-radius: 99px
}

.video-comment-form button {
    padding: 8px 15px;
    color: #fff;
    background: var(--rn-primary);
    border: 0;
    border-radius: 99px;
    font-weight: 650
}

@media(max-width:575.98px) {
    .video-page {
        height: calc(100dvh - 52px);
        min-height: 520px;
        padding: 14px 0 34px
    }

    .video-page-heading {
        padding: 0 15px
    }

    .video-page-heading h1 {
        font-size: 23px !important
    }

    .video-feed {
        gap: 12px
    }

    .video-card {
        height: calc(100dvh - 78px);
        min-height: 500px;
        max-height: none;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        scroll-snap-align: center
    }

    .video-overlay {
        bottom: 16px;
        left: 15px
    }

    .video-toast {
        bottom: 70px
    }

    .video-comments-panel {
        top: auto;
        bottom: 0;
        height: 74%;
        border-top: 1px solid var(--rn-border);
        border-left: 0;
        border-radius: 18px 18px 0 0
    }

    .video-reaction-control .reko-reaction-picker {
        right: -2px !important
    }
}

/* Creator activity and analytics workspace */
.reko-activity-page {
    max-width: 1280px;
    padding-top: 18px;
    padding-bottom: 48px
}

.reko-activity-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 4px 0 20px;
    padding: 22px 24px;
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-left: 4px solid var(--rn-primary);
    border-radius: 12px
}

.reko-activity-heading>div>span,
.reko-panel-head>div>span {
    display: block;
    color: var(--rn-primary);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .17em
}

.reko-activity-heading h1 {
    margin: 3px 0 3px;
    color: var(--rn-text);
    font-size: clamp(25px, 3vw, 35px) !important;
    font-weight: 680 !important;
    letter-spacing: -.025em
}

.reko-activity-heading p {
    margin: 0;
    color: var(--rn-muted);
    font-size: 12px
}

.reko-activity-heading-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 13px;
    color: #fff !important;
    background: var(--rn-primary);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 650
}

.reko-activity-heading-action:hover {
    background: var(--rn-primary-hover);
    text-decoration: none
}

.reko-metric-grid {
    margin-right: -8px;
    margin-left: -8px
}

.reko-metric-grid .m-store-icon {
    min-height: 154px;
    overflow: hidden;
    background: var(--rn-surface) !important;
    border: 1px solid var(--rn-border) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    color: var(--rn-text) !important;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease
}

.reko-metric-grid a.m-store-icon:hover {
    border-color: rgba(240, 93, 64, .45) !important;
    transform: translateY(-2px)
}

.reko-metric-grid .card-body {
    position: relative;
    padding: 17px !important
}

.reko-metric-grid .card-body:after {
    display: none !important
}

.reko-metric-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    color: var(--rn-primary);
    background: rgba(240, 93, 64, .09);
    border-radius: 9px;
    font-size: 14px
}

.reko-metric-grid .card-body p {
    color: var(--rn-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em
}

.reko-metric-grid .card-body h2 {
    margin-top: 5px !important;
    color: var(--rn-text) !important;
    font-size: clamp(20px, 2.1vw, 29px) !important;
    font-weight: 680 !important;
    letter-spacing: -.025em
}

.reko-activity-panel {
    height: 100%;
    overflow: hidden;
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-radius: 12px
}

.reko-panel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 19px;
    border-bottom: 1px solid var(--rn-border)
}

.reko-panel-head h2 {
    margin: 3px 0 0;
    color: var(--rn-text);
    font-size: 17px !important;
    font-weight: 660 !important
}

.reko-panel-head>small {
    color: var(--rn-muted);
    font-size: 10px
}

.reko-activity-panel .chart-container {
    height: 350px;
    padding: 18px 18px 12px
}

.reko-performance-list {
    margin: 0;
    border: 0 !important
}

.reko-performance-list .list-group-item {
    min-height: 58px;
    gap: 14px;
    padding: 12px 17px;
    background: transparent;
    border-color: var(--rn-border);
    transition: background .15s ease
}

.reko-performance-list .list-group-item:hover {
    background: var(--rn-surface-2)
}

.reko-performance-list .list-group-item>a {
    min-width: 0;
    overflow: hidden;
    flex: 1;
    color: var(--rn-text-2) !important;
    font-size: 12px;
    font-weight: 590;
    white-space: nowrap;
    text-overflow: ellipsis
}

.reko-performance-list .badge {
    min-width: 45px;
    padding: 6px 9px;
    color: var(--rn-primary);
    background: rgba(240, 93, 64, .1);
    border-radius: 999px;
    font-size: 10px
}

.reko-payment-page>.nav-pills {
    gap: 6px;
    margin: 0 0 14px;
    padding: 6px;
    background: var(--rn-surface-2);
    border: 1px solid var(--rn-border);
    border-radius: 10px
}

.reko-payment-page>.nav-pills .nav-link {
    padding: 8px 14px;
    color: var(--rn-muted);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 650
}

.reko-payment-page>.nav-pills .nav-link.active {
    color: #fff;
    background: var(--rn-primary)
}

.reko-payment-page>.tab-content {
    padding: 22px;
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-radius: 12px
}

.reko-payment-page label {
    color: var(--rn-text-2);
    font-size: 11px;
    font-weight: 650
}

.reko-payment-page .form-control,
.reko-payment-page .custom-select {
    min-height: 44px;
    color: var(--rn-text);
    background: var(--rn-surface-2);
    border-color: var(--rn-border);
    border-radius: 8px
}

.reko-payment-page .btn-success {
    padding: 9px 16px;
    background: var(--rn-primary);
    border-color: var(--rn-primary);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 650
}

.reko-payment-page>h1 {
    margin: 28px 0 12px !important;
    color: var(--rn-text);
    font-size: 19px !important
}

.reko-payment-page>.list-group {
    overflow: hidden;
    border: 1px solid var(--rn-border);
    border-radius: 12px
}

.reko-payment-page>.list-group .list-group-item {
    background: var(--rn-surface);
    border-color: var(--rn-border)
}

.reko-activity-page+.footer,
.reko-activity-page~footer {
    margin-top: 0 !important
}

[data-theme="dark"] .reko-metric-icon,
body.dark-mode .reko-metric-icon {
    background: rgba(240, 93, 64, .15)
}

@media(max-width:767.98px) {
    .reko-activity-page {
        padding-top: 10px
    }

    .reko-activity-heading {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px
    }

    .reko-activity-heading-action {
        align-self: stretch;
        justify-content: center
    }

    .reko-metric-grid .m-store-icon {
        min-height: 135px
    }

    .reko-metric-icon {
        margin-bottom: 13px
    }

    .reko-activity-panel .chart-container {
        height: 290px;
        padding: 12px 8px
    }

    .reko-panel-head {
        padding: 14px
    }

    .reko-performance-list .list-group-item {
        padding: 11px 13px
    }
}

/* View-post audio control and comment composer */
.reko-article-page .listen_container {
    min-height: 52px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 7px 14px 7px 8px !important;
    color: var(--rn-text) !important;
    background: var(--rn-surface) !important;
    border: 1px solid var(--rn-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .08) !important;
    cursor: default
}

.reko-article-page #app_listen {
    width: auto;
    min-width: 38px;
    height: 38px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--rn-primary) !important;
    background: rgba(240, 93, 64, .1);
    border-radius: 8px
}

.reko-article-page #voice-controls-pane {
    width: auto !important;
    display: block !important
}

.reko-article-page #voice-controls {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 2px
}

.reko-article-page #voice-controls svg {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px;
    color: var(--rn-primary) !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important
}

.reko-article-page #voice-controls svg:hover {
    color: var(--rn-primary-hover) !important
}

.reko-listen-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    line-height: 1.15
}

.reko-listen-label strong {
    color: var(--rn-text);
    font-size: 11px;
    font-weight: 680
}

.reko-listen-label small {
    color: var(--rn-muted);
    font-size: 9px
}

body:has(.reko-comment-composer) {
    padding-bottom: 82px
}

.reko-comment-composer {
    z-index: 1025;
    left: 0;
    background: rgba(255, 255, 255, .94);
    border-top: 1px solid var(--rn-border);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .08);
    backdrop-filter: blur(12px)
}

[data-theme="dark"] .reko-comment-composer,
body.dark-mode .reko-comment-composer {
    background: rgba(17, 24, 39, .94)
}

.reko-comment-composer>.container {
    max-width: 920px
}

.reko-comment-composer .comment-holder {
    min-height: 72px;
    display: flex;
    align-items: flex-end;
    gap: 11px;
    padding: 11px 0;
    background: transparent !important
}

.reko-comment-composer .comment-image {
    position: static;
    width: 42px;
    flex: 0 0 42px;
    padding-bottom: 2px
}

.reko-comment-composer .comment-image:before {
    display: none
}

.reko-comment-composer .comment-image img {
    position: static;
    width: 40px;
    height: 40px;
    display: block;
    object-fit: cover;
    border: 1px solid var(--rn-border);
    border-radius: 50% !important
}

.reko-comment-composer .comment-textarea {
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex: 1;
    padding: 0
}

.reko-comment-composer .comment-textarea .inputLayout {
    height: 46px;
    min-height: 46px;
    max-height: 120px;
    flex: 1;
    padding: 12px 15px !important;
    overflow-y: auto;
    color: var(--rn-text);
    background: var(--rn-surface-2);
    border: 1px solid var(--rn-border);
    border-radius: 10px !important;
    font-size: 13px;
    line-height: 20px;
    resize: none;
    box-shadow: none
}

.reko-comment-composer .comment-textarea .inputLayout::placeholder {
    color: var(--rn-muted)
}

.reko-comment-composer .comment-textarea .inputLayout:focus {
    background: var(--rn-surface);
    border-color: var(--rn-primary);
    box-shadow: 0 0 0 3px rgba(240, 93, 64, .12)
}

.reko-comment-composer .comment-textarea #sendBtn {
    position: static;
    min-width: 76px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    color: #fff;
    background: var(--rn-primary);
    border: 0;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 680
}

.reko-comment-composer .comment-textarea #sendBtn:hover {
    background: var(--rn-primary-hover)
}

.reko-comment-composer .comment-replyer {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: auto;
    padding: 7px 0 !important;
    background: var(--rn-primary) !important;
    font-size: 11px
}

@media(min-width:992px) {
    .reko-comment-composer {
        left: 248px
    }
}

@media(max-width:575.98px) {
    body:has(.reko-comment-composer) {
        padding-bottom: 72px
    }

    .reko-comment-composer>.container {
        padding: 0 10px
    }

    .reko-comment-composer .comment-holder {
        min-height: 64px;
        gap: 8px;
        padding: 8px 0
    }

    .reko-comment-composer .comment-image {
        width: 36px;
        flex-basis: 36px
    }

    .reko-comment-composer .comment-image img {
        width: 35px;
        height: 35px
    }

    .reko-comment-composer .comment-textarea .inputLayout {
        height: 44px;
        min-height: 44px;
        padding: 11px 12px !important
    }

    .reko-comment-composer .comment-textarea #sendBtn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0
    }

    .reko-comment-composer .comment-textarea #sendBtn span {
        display: none
    }

    .reko-listen-label small {
        display: none
    }
}

/* Compact homepage short-video heading */
.for-you-shorts-head {
    min-height: 0 !important;
    align-items: center !important;
    padding: 0 0 12px !important
}

.for-you-shorts-heading {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0
}

.for-you-shorts-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    display: grid !important;
    flex: 0 0 30px !important;
    place-items: center !important;
    padding: 0 !important;
    color: var(--rn-primary) !important;
    background: rgba(240, 93, 64, .1) !important;
    border: 1px solid rgba(240, 93, 64, .2) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    font-size: 9px !important;
    line-height: 1 !important
}

.for-you-shorts-icon i {
    display: block !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: 9px !important;
    line-height: 1 !important;
    transform: translateX(1px)
}

.for-you-shorts-title {
    min-width: 0 !important;
    line-height: 1.2 !important
}

.for-you-shorts-title strong {
    margin: 0 !important;
    color: var(--rn-text) !important;
    font-size: 18px !important;
    font-weight: 660 !important;
    line-height: 1.2 !important;
    letter-spacing: -.015em
}

.for-you-shorts-title small {
    margin-top: 2px !important;
    color: var(--rn-muted) !important;
    font-size: 10px !important;
    line-height: 1.3 !important
}

@media(max-width:575px) {
    .for-you-shorts-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        flex-basis: 28px !important
    }

    .for-you-shorts-title strong {
        font-size: 16px !important
    }
}

/* Followable hashtag header */
.reko-hashtag-hero {
    padding: 22px 0;
    background: var(--rn-surface);
    border-top: 1px solid var(--rn-border);
    border-bottom: 1px solid var(--rn-border)
}

.reko-hashtag-hero>.container {
    display: flex;
    align-items: center;
    gap: 15px
}

.reko-hashtag-mark {
    width: 52px;
    height: 52px;
    display: grid;
    flex: 0 0 52px;
    place-items: center;
    color: var(--rn-primary);
    background: rgba(240, 93, 64, .1);
    border: 1px solid rgba(240, 93, 64, .2);
    border-radius: 12px;
    font-size: 21px
}

.reko-hashtag-copy {
    min-width: 0;
    flex: 1
}

.reko-hashtag-copy>span {
    display: block;
    color: var(--rn-primary);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .17em
}

.reko-hashtag-copy h1 {
    overflow: hidden;
    margin: 2px 0 3px;
    color: var(--rn-text);
    font-size: clamp(24px, 3vw, 34px) !important;
    font-weight: 680 !important;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis
}

.reko-hashtag-copy p {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--rn-muted);
    font-size: 10px
}

.reko-hashtag-copy p strong {
    color: var(--rn-text-2);
    font-weight: 650
}

.reko-hashtag-copy p i {
    width: 3px;
    height: 3px;
    background: var(--rn-border);
    border-radius: 50%
}

.reko-tag-follow {
    min-width: 104px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    color: #fff;
    background: var(--rn-primary);
    border: 1px solid var(--rn-primary);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 680;
    cursor: pointer;
    transition: .15s ease
}

.reko-tag-follow:hover {
    background: var(--rn-primary-hover);
    border-color: var(--rn-primary-hover)
}

.reko-tag-follow.is-following {
    color: var(--rn-text-2);
    background: var(--rn-surface-2);
    border-color: var(--rn-border)
}

.reko-tag-follow.is-following:hover {
    color: var(--rn-primary);
    border-color: rgba(240, 93, 64, .45)
}

.reko-tag-follow.is-loading {
    opacity: .6;
    cursor: wait
}

@media(max-width:575.98px) {
    .reko-hashtag-hero {
        padding: 16px 0
    }

    .reko-hashtag-hero>.container {
        gap: 10px;
        padding-right: 12px !important;
        padding-left: 12px !important
    }

    .reko-hashtag-mark {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 10px;
        font-size: 17px
    }

    .reko-hashtag-copy h1 {
        font-size: 22px !important
    }

    .reko-tag-follow {
        min-width: 42px;
        width: 42px;
        padding: 0
    }

    .reko-tag-follow span {
        display: none
    }
}

/* Complete profile content navigation */
.social-profile-aspects {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(82px, 1fr));
    gap: 0;
    margin-top: 18px !important;
    overflow-x: auto;
    border-top: 1px solid var(--rn-border);
    scrollbar-width: thin
}

.social-profile-aspects>a {
    position: relative;
    min-width: 82px;
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 6px;
    align-items: center;
    padding: 12px 10px !important;
    color: var(--rn-muted) !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    font-size: 10px !important;
    text-decoration: none !important
}

.social-profile-aspects>a i {
    grid-row: 1/3;
    color: var(--rn-muted);
    font-size: 13px
}

.social-profile-aspects>a span {
    color: inherit;
    font-weight: 650
}

.social-profile-aspects>a strong {
    color: var(--rn-text-2);
    font-size: 9px;
    font-weight: 600
}

.social-profile-aspects>a:hover {
    color: var(--rn-text) !important;
    background: var(--rn-surface-2)
}

.social-profile-aspects>a.active {
    color: var(--rn-primary) !important;
    border-bottom-color: var(--rn-primary) !important
}

.social-profile-aspects>a.active i {
    color: var(--rn-primary)
}

.social-profile-feed {
    min-width: 0;
    padding-top: 10px;
}

.social-profile-feed .post-list-item.udex-feed .bulletList:before {
    content: 'RSS FEED';
    display: inline-block;
    margin-right: 7px;
    color: var(--rn-primary);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .11em
}

@media(max-width:767.98px) {
    .social-profile-aspects {
        grid-template-columns: repeat(7, 92px);
        margin-right: -12px !important;
        margin-left: -12px !important;
        padding: 0 8px
    }

    .social-profile-aspects>a {
        min-width: 92px
    }

    .social-profile-feed:before {
        padding: 0 10px
    }
}

/* Guaranteed RSS discovery inside the homepage stream */
.for-you-rss {
    display: block;
    width: 100%;
    margin: 20px 0;
    padding: 18px 0;
    border-top: 1px solid var(--rn-border);
    border-bottom: 1px solid var(--rn-border)
}

.for-you-rss-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 13px
}

.for-you-rss-head>div>span {
    display: block;
    color: var(--rn-primary);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .16em
}

.for-you-rss-head h2 {
    margin: 3px 0 0;
    color: var(--rn-text);
    font-size: 18px !important;
    font-weight: 660 !important
}

.for-you-rss-head>a {
    color: var(--rn-primary) !important;
    font-size: 10px;
    font-weight: 650
}

.for-you-rss-track {
    display: flex;
    gap: 11px;
    overflow-x: auto;
    padding: 2px 1px 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin
}

.for-you-rss-card {
    width: 220px;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 10px;
    flex: 0 0 220px;
    padding: 9px;
    color: var(--rn-text) !important;
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-radius: 9px;
    scroll-snap-align: start
}

.for-you-rss-card:hover {
    border-color: rgba(240, 93, 64, .4);
    text-decoration: none
}

.for-you-rss-card>img {
    width: 70px;
    height: 76px;
    object-fit: cover;
    background: var(--rn-surface-2);
    border-radius: 6px
}

.for-you-rss-copy {
    min-width: 0;
    display: flex;
    flex-direction: column
}

.for-you-rss-copy small,
.for-you-rss-copy em {
    overflow: hidden;
    color: var(--rn-muted);
    font-size: 8px;
    font-style: normal;
    white-space: nowrap;
    text-overflow: ellipsis
}

.for-you-rss-copy strong {
    display: -webkit-box;
    overflow: hidden;
    margin: 5px 0;
    color: var(--rn-text);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 630;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3
}

.for-you-rss-copy em {
    margin-top: auto
}

.for-you-rss-loading {
    padding: 30px;
    color: var(--rn-muted);
    font-size: 10px
}

@media(max-width:575.98px) {
    .for-you-rss {
        margin: 15px 0;
        padding: 14px 0
    }

    .for-you-rss-head h2 {
        font-size: 16px !important
    }

    .for-you-rss-head>a {
        font-size: 0
    }

    .for-you-rss-head>a i {
        font-size: 11px
    }

    .for-you-rss-card {
        width: 205px;
        flex-basis: 205px
    }
}

.for-you-channel-card {
    position: relative;
    display: block !important;
    width: 230px !important;
    flex-basis: 230px !important;
    padding: 10px !important
}

.for-you-channel-link {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    color: var(--rn-text) !important;
    text-decoration: none !important
}

.for-you-channel-link>img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    background: var(--rn-surface-2);
    border-radius: 50%
}

.for-you-channel-card .for-you-rss-copy strong {
    margin: 1px 0 3px;
    font-size: 12px;
    -webkit-line-clamp: 1;
    line-clamp: 1
}

.for-you-channel-card .for-you-rss-copy small,
.for-you-channel-card .for-you-rss-copy em {
    font-size: 9px
}

.for-you-channel-card>.channel-card-follow {
    position: static;
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 9px;
    padding: 0;
    color: #fff;
    background: var(--rn-primary);
    border: 1px solid var(--rn-primary);
    border-radius: 7px;
    font-size: 9px;
    font-weight: 650
}

.for-you-channel-card>.channel-card-follow.is-following {
    color: var(--rn-text-2);
    background: var(--rn-surface-2);
    border-color: var(--rn-border)
}

/* Readable content and sidebar scale */
body:not(.admin-body) .post-item-desc p {
    font-size: 14px !important;
    line-height: 1.58 !important
}

body:not(.admin-body) .reko-post-meta {
    font-size: 12px !important;
    line-height: 1.45 !important
}

body:not(.admin-body) .reko-reaction-proof {
    font-size: 12px !important
}

body:not(.admin-body) .reko-count-action {
    min-width: 42px !important;
    min-height: 38px !important;
    padding: 5px 8px !important
}

body:not(.admin-body) .reko-count-action i {
    font-size: 18px !important
}

body:not(.admin-body) .reko-count-action span,
body:not(.admin-body) .reko-reactions-compact .reko-reaction-main span {
    font-size: 12px !important
}

body:not(.admin-body) .reko-reactions-compact .reko-reaction-main {
    min-height: 38px !important
}

body:not(.admin-body) .reko-reactions-compact .reko-reaction-main img {
    width: 25px !important;
    height: 25px !important
}

.reko-news-sidebar {
    gap: 18px !important
}

.reko-side-module {
    border-radius: 13px !important
}

.reko-module-heading {
    padding: 17px 17px 14px !important
}

.reko-module-heading>div>span {
    font-size: 10px !important;
    letter-spacing: .14em !important
}

.reko-module-heading h2 {
    font-size: 17px !important;
    line-height: 1.25 !important
}

.reko-module-heading>i {
    font-size: 19px !important
}

.reko-module-heading>a {
    font-size: 11px !important
}

.reko-sidebar-story {
    grid-template-columns: 28px minmax(0, 1fr) 72px !important;
    gap: 11px !important;
    min-height: 82px;
    padding: 13px 15px !important
}

.reko-sidebar-story-rank {
    font-size: 12px !important
}

.reko-sidebar-story-copy strong {
    font-size: 14px !important;
    line-height: 1.38 !important;
    font-weight: 620 !important
}

.reko-sidebar-story-copy small {
    margin-top: 5px !important;
    font-size: 11px !important
}

.reko-sidebar-story>img {
    width: 72px !important;
    height: 58px !important;
    border-radius: 8px !important
}

.reko-sidebar-person {
    gap: 10px !important;
    padding: 12px 15px !important
}

.reko-sidebar-person-link {
    gap: 10px !important
}

.reko-sidebar-person-link img {
    width: 43px !important;
    height: 43px !important;
    flex-basis: 43px !important
}

.reko-sidebar-person-link strong {
    font-size: 13px !important;
    line-height: 1.35 !important
}

.reko-sidebar-person-link small {
    margin-top: 2px;
    font-size: 11px !important
}

.reko-sidebar-person>.followBtn {
    padding: 6px 10px !important;
    font-size: 11px !important
}

.reko-topic-cloud {
    gap: 8px !important;
    padding: 0 15px 17px !important
}

.reko-topic-cloud a {
    padding: 7px 10px !important;
    font-size: 11.5px !important
}

.reko-sidebar-loading,
.reko-sidebar-empty {
    font-size: 11.5px !important
}

@media(max-width:575.98px) {
    body:not(.admin-body) .post-item-desc h3 {
        font-size: 15.5px !important
    }

    body:not(.admin-body) .post-item-desc p {
        font-size: 13px !important
    }

    body:not(.admin-body) .reko-post-meta {
        font-size: 11px !important
    }

    .reko-sidebar-story-copy strong {
        font-size: 13.5px !important
    }
}

/* Unified publications and complete profile collections */
.social-profile-feed .post-list-item.udex-feed .bulletList:before {
    display: none !important;
    content: none !important
}

.social-profile-collections {
    padding-bottom: 40px
}

.profile-collection {
    margin-top: 26px;
    scroll-margin-top: 80px
}

.profile-collection-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 14px
}

.profile-collection-head span {
    display: block;
    color: var(--rn-primary);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .16em
}

.profile-collection-head h2 {
    margin: 3px 0 0;
    color: var(--rn-text);
    font-size: 19px !important;
    font-weight: 660 !important
}

.profile-phone-track,
.profile-book-track,
.profile-topic-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 2px 1px 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin
}

.profile-phone-card {
    position: relative;
    width: 180px;
    aspect-ratio: 9/16;
    flex: 0 0 180px;
    overflow: hidden;
    color: #fff !important;
    background: #101216;
    border: 1px solid var(--rn-border);
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .16);
    scroll-snap-align: start
}

.profile-phone-card>img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.profile-phone-card:after {
    content: '';
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(transparent, rgba(3, 7, 12, .9))
}

.profile-phone-card>span {
    position: absolute;
    z-index: 2;
    right: 12px;
    bottom: 13px;
    left: 12px
}

.profile-phone-card strong {
    display: -webkit-box;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2
}

.profile-phone-card small {
    display: block;
    margin-top: 5px;
    color: #d4d8df;
    font-size: 9px
}

.profile-book-card {
    width: 142px;
    flex: 0 0 142px;
    color: var(--rn-text) !important;
    scroll-snap-align: start
}

.profile-book-card:hover {
    text-decoration: none
}

.profile-book-card img {
    width: 142px;
    height: 198px;
    display: block;
    object-fit: cover;
    background: var(--rn-surface-2);
    border: 1px solid var(--rn-border);
    border-radius: 8px
}

.profile-book-card strong {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2
}

.profile-book-card small {
    display: block;
    margin-top: 3px;
    color: var(--rn-muted);
    font-size: 9px
}

.profile-topic-track {
    flex-wrap: wrap;
    overflow: visible
}

.profile-topic-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    color: var(--rn-text-2) !important;
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-radius: 9px
}

.profile-topic-chip:hover {
    border-color: rgba(240, 93, 64, .4);
    text-decoration: none
}

.profile-topic-chip>i {
    color: var(--rn-primary)
}

.profile-topic-chip strong,
.profile-topic-chip small {
    display: block
}

.profile-topic-chip strong {
    font-size: 11px
}

.profile-topic-chip small {
    margin-top: 1px;
    color: var(--rn-muted);
    font-size: 8px
}

/* All short-video surfaces use a recognisable phone-like 9:16 frame. */
.for-you-short-card {
    width: 180px !important;
    height: auto !important;
    aspect-ratio: 9/16 !important;
    flex: 0 0 180px !important
}

.video-feed {
    max-width: 420px !important
}

.video-card {
    width: min(100%, 420px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 9/16 !important;
    margin-right: auto;
    margin-left: auto
}

@media(max-width:575.98px) {
    .profile-phone-card {
        width: 164px;
        flex-basis: 164px;
        border-radius: 15px
    }

    .profile-book-card,
    .profile-book-card img {
        width: 126px
    }

    .profile-book-card {
        flex-basis: 126px
    }

    .profile-book-card img {
        height: 176px
    }

    .video-feed {
        max-width: 100% !important
    }

    .video-card {
        width: 100% !important;
        aspect-ratio: 9/16 !important
    }

    .for-you-short-card {
        width: 164px !important;
        flex-basis: 164px !important
    }
}

/* Final readability pass: content, inserted rails and news sidebar */
body:not(.admin-body) .post-item-desc h3 {
    font-size: 19px !important;
    line-height: 1.35 !important;
    font-weight: 630 !important
}

body:not(.admin-body) .post-item-desc p {
    font-size: 15px !important;
    line-height: 1.62 !important
}

body:not(.admin-body) .post-item-desc .bulletList,
body:not(.admin-body) .post-item-desc .bulletList a {
    font-size: 12.5px !important;
    line-height: 1.4 !important
}

body:not(.admin-body) .reko-post-meta {
    font-size: 13px !important
}

body:not(.admin-body) .reko-reaction-proof {
    font-size: 13px !important
}

body:not(.admin-body) .reko-count-action span,
body:not(.admin-body) .reko-reactions-compact .reko-reaction-main span {
    font-size: 13px !important
}

/* RekoPad book discovery and website preview */
.rekopad-library-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: 20px 0 8px;
    padding: 20px 22px;
    border: 1px solid rgba(240, 93, 64, .24);
    border-radius: 18px;
    background: linear-gradient(125deg, rgba(240, 93, 64, .09), var(--rn-surface) 58%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06)
}

.rekopad-library-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--rn-primary);
    color: #fff;
    font-size: 21px
}

.rekopad-library-banner span,
.rekopad-chapter-preview header>span,
.rekopad-preview-gate span,
.rekopad-kicker {
    display: block;
    color: var(--rn-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em
}

.rekopad-library-banner h2 {
    margin: 3px 0;
    font-size: 20px;
    color: var(--rn-text)
}

.rekopad-library-banner p {
    margin: 0;
    color: var(--rn-muted);
    font-size: 13px
}

.reko-book-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--rn-text-2);
    font-size: 12px;
    font-weight: 700
}

.reko-book-rating i {
    color: #f5a623
}

.rekopad-chapter-preview {
    margin: 28px 0;
    border: 1px solid var(--rn-border);
    border-radius: 18px;
    background: var(--rn-surface);
    overflow: hidden
}

.rekopad-chapter-preview>header {
    padding: 24px 28px;
    border-bottom: 1px solid var(--rn-border);
    background: var(--rn-surface-2)
}

.rekopad-chapter-preview h2 {
    margin: 5px 0;
    font-size: 25px;
    color: var(--rn-text)
}

.rekopad-chapter-preview header p {
    margin: 0;
    color: var(--rn-muted);
    font-size: 12px
}

.rekopad-chapter-preview>article {
    padding: 28px;
    color: var(--rn-text-2);
    font-family: Georgia, serif;
    font-size: 17px;
    line-height: 1.9;
    white-space: normal
}

.rekopad-preview-gate {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 25px 28px;
    border-top: 1px solid rgba(240, 93, 64, .3);
    background: linear-gradient(135deg, rgba(240, 93, 64, .12), var(--rn-surface-2))
}

.rekopad-preview-gate>i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rn-primary);
    color: #fff
}

.rekopad-preview-gate h3 {
    margin: 4px 0;
    font-size: 17px;
    color: var(--rn-text)
}

.rekopad-preview-gate p {
    margin: 0;
    color: var(--rn-muted);
    font-size: 12px
}

.rekopad-download-page {
    padding: 55px 0;
    background: var(--rn-bg)
}

.rekopad-download-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    align-items: center;
    gap: 55px;
    max-width: 1050px;
    margin: auto;
    padding: 50px;
    border: 1px solid var(--rn-border);
    border-radius: 24px;
    background: var(--rn-surface);
    box-shadow: 0 24px 65px rgba(15, 23, 42, .09)
}

.rekopad-download-card h1 {
    margin: 8px 0 14px;
    color: var(--rn-text);
    font-size: 40px;
    line-height: 1.1
}

.rekopad-download-card p {
    color: var(--rn-muted);
    font-size: 16px;
    line-height: 1.7
}

.rekopad-download-card ul {
    list-style: none;
    margin: 22px 0;
    padding: 0
}

.rekopad-download-card li {
    margin: 10px 0;
    color: var(--rn-text-2)
}

.rekopad-download-card li i {
    width: 26px;
    color: var(--rn-primary)
}

.rekopad-phone {
    min-height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border: 8px solid #161b26;
    border-radius: 42px;
    background: linear-gradient(160deg, #161b26, #30203e);
    color: #fff;
    box-shadow: 0 25px 45px rgba(15, 23, 42, .25);
    text-align: center
}

.rekopad-phone>i {
    font-size: 60px;
    color: var(--rn-primary)
}

.rekopad-phone strong {
    margin-top: 18px;
    font-size: 30px
}

.rekopad-phone span {
    margin-top: 7px;
    color: #cbd5e1;
    font-size: 12px
}

.rekopad-store-pending {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 460px;
    padding: 13px 15px;
    border: 1px solid var(--rn-border);
    border-radius: 12px;
    background: var(--rn-surface-2)
}

.rekopad-store-pending>i {
    color: var(--rn-primary);
    font-size: 23px
}

.rekopad-store-pending strong,
.rekopad-store-pending small {
    display: block
}

.rekopad-store-pending small {
    margin-top: 3px;
    color: var(--rn-muted)
}

@media(max-width:767px) {
    .rekopad-library-banner {
        grid-template-columns: auto 1fr;
        padding: 16px
    }

    .rekopad-library-banner .btn {
        grid-column: 1/-1
    }

    .rekopad-preview-gate {
        grid-template-columns: auto 1fr;
        padding: 20px
    }

    .rekopad-preview-gate .btn {
        grid-column: 1/-1
    }

    .rekopad-chapter-preview>header,
    .rekopad-chapter-preview>article {
        padding: 20px
    }

    .rekopad-chapter-preview>article {
        font-size: 16px;
        line-height: 1.8
    }

    .rekopad-download-card {
        grid-template-columns: 1fr;
        padding: 28px 20px
    }

    .rekopad-download-card h1 {
        font-size: 31px
    }

    .rekopad-phone {
        min-height: 390px
    }
}

body:not(.admin-body) .reko-count-action i {
    font-size: 19px !important
}

.reko-module-heading {
    padding: 18px !important
}

.reko-module-heading>div>span {
    font-size: 11px !important
}

.reko-module-heading h2 {
    font-size: 18.5px !important
}

.reko-module-heading>a {
    font-size: 12.5px !important
}

.reko-sidebar-story {
    grid-template-columns: 30px minmax(0, 1fr) 78px !important;
    min-height: 92px;
    padding: 15px 16px !important
}

.reko-sidebar-story-rank {
    font-size: 13px !important
}

.reko-sidebar-story-copy strong {
    font-size: 15.5px !important;
    line-height: 1.4 !important;
    font-weight: 610 !important
}

.reko-sidebar-story-copy small {
    font-size: 12.5px !important;
    line-height: 1.35 !important
}

.reko-sidebar-story>img {
    width: 78px !important;
    height: 64px !important
}

.reko-sidebar-person {
    padding: 14px 16px !important
}

.reko-sidebar-person-link img {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important
}

.reko-sidebar-person-link strong {
    font-size: 14.5px !important;
    font-weight: 610 !important
}

.reko-sidebar-person-link small {
    font-size: 12.5px !important
}

.reko-sidebar-person>.followBtn {
    padding: 7px 11px !important;
    font-size: 12px !important
}

.reko-topic-cloud a {
    padding: 8px 11px !important;
    font-size: 13px !important
}

.reko-sidebar-loading,
.reko-sidebar-empty {
    font-size: 13px !important
}

.for-you-rss-head>div>span,
.for-you-shorts-title small {
    font-size: 11px !important
}

.for-you-rss-head h2,
.for-you-shorts-title strong {
    font-size: 19px !important
}

.for-you-rss-head>a,
.for-you-shorts-all {
    font-size: 12px !important
}

.for-you-channel-card .for-you-rss-copy strong {
    font-size: 14px !important
}

.for-you-channel-card .for-you-rss-copy small,
.for-you-channel-card .for-you-rss-copy em {
    font-size: 11px !important
}

.for-you-channel-card>.channel-card-follow {
    height: 34px;
    font-size: 11px
}

.for-you-short-copy strong {
    font-size: 15px !important
}

.for-you-short-author small {
    font-size: 11px !important
}

.for-you-short-author em {
    font-size: 10px !important
}

@media(max-width:575.98px) {
    body:not(.admin-body) .post-item-desc h3 {
        font-size: 16.15px !important
    }

    body:not(.admin-body) .post-item-desc p {
        font-size: 14px !important
    }

    body:not(.admin-body) .reko-post-meta {
        font-size: 12px !important
    }

    .reko-sidebar-story-copy strong {
        font-size: 15px !important
    }

    .reko-sidebar-story-copy small {
        font-size: 12px !important
    }

    .for-you-rss-head h2,
    .for-you-shorts-title strong {
        font-size: 17px !important
    }
}

/* Compact channel discovery cards: profile first, action secondary. */
.for-you-rss-track {
    gap: 10px !important;
    padding-bottom: 10px !important;
    scrollbar-color: var(--rn-border) transparent
}

.for-you-rss-track::-webkit-scrollbar {
    height: 5px
}

.for-you-rss-track::-webkit-scrollbar-thumb {
    background: var(--rn-border);
    border-radius: 999px
}

.for-you-channel-link {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 9px !important
}

/* Sidebar is supporting content: compact relative to the main feed. */
.reko-news-sidebar {
    gap: 14px !important
}

.reko-side-module {
    border-radius: 11px !important
}

.reko-module-heading {
    padding: 14px 15px 12px !important
}

.reko-module-heading>div>span {
    font-size: 9px !important
}

.reko-module-heading h2 {
    font-size: 16px !important
}

.reko-module-heading>i {
    font-size: 17px !important
}

.reko-module-heading>a {
    font-size: 10.5px !important
}

.reko-sidebar-story {
    grid-template-columns: 25px minmax(0, 1fr) 64px !important;
    gap: 9px !important;
    min-height: 76px !important;
    padding: 11px 13px !important
}

.reko-sidebar-story-rank {
    font-size: 10.5px !important
}

.reko-sidebar-story-copy strong {
    font-size: 13.5px !important;
    line-height: 1.36 !important;
    font-weight: 600 !important
}

.reko-sidebar-story-copy small {
    margin-top: 4px !important;
    font-size: 10.5px !important
}

.reko-sidebar-story>img {
    width: 64px !important;
    height: 52px !important;
    border-radius: 7px !important
}

.reko-sidebar-person {
    gap: 8px !important;
    padding: 10px 13px !important
}

.reko-sidebar-person-link {
    gap: 8px !important
}

.reko-sidebar-person-link img {
    width: 39px !important;
    height: 39px !important;
    flex-basis: 39px !important
}

.reko-sidebar-person-link strong {
    font-size: 12.5px !important;
    font-weight: 600 !important
}

.reko-sidebar-person-link small {
    font-size: 10.5px !important
}

.reko-sidebar-person>.followBtn {
    padding: 5px 8px !important;
    font-size: 10px !important
}

.reko-topic-cloud {
    gap: 6px !important;
    padding: 0 13px 14px !important
}

.reko-topic-cloud a {
    padding: 6px 9px !important;
    font-size: 11px !important
}

.reko-sidebar-loading,
.reko-sidebar-empty {
    font-size: 11px !important
}

@media(max-width:575.98px) {
    .reko-sidebar-story-copy strong {
        font-size: 13px !important
    }

    .reko-sidebar-story-copy small {
        font-size: 10px !important
    }
}

/* Give the publication stream more room than its supporting sidebar. */
@media(min-width:992px) {
    body:not(.admin-body) .row:has(.reko-news-sidebar)>[class*="col-md-8"] {
        flex: 0 0 72% !important;
        max-width: 72% !important
    }

    body:not(.admin-body) .row:has(.reko-news-sidebar)>[class*="col-md-4"] {
        flex: 0 0 28% !important;
        max-width: 28% !important;
        padding-left: 14px !important
    }

    body:not(.admin-body) .row:has(.reko-news-sidebar) .reko-news-sidebar {
        width: 100%;
        min-width: 0
    }
}

/* Homepage channel discovery: compact cards and subscription controls. */
.for-you-channels .for-you-rss-head {
    align-items: flex-end !important;
    gap: 18px !important
}

.for-you-channel-head-actions {
    display: flex !important;
    align-items: center;
    gap: 8px
}

.for-you-channel-head-actions>a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 11px;
    color: var(--rn-primary) !important;
    border: 1px solid rgba(240, 93, 64, .3);
    border-radius: 999px;
    background: transparent;
    font-size: 12px;
    font-weight: 650;
    text-decoration: none
}

.for-you-channel-head-actions>a:hover {
    background: rgba(240, 93, 64, .08)
}

.for-you-channel-head-actions .for-you-my-channels {
    color: var(--rn-text-2) !important;
    border-color: var(--rn-border)
}

.for-you-channels .for-you-rss-track {
    gap: 12px !important;
    padding: 4px 2px 8px !important;
    scrollbar-width: none !important
}

.for-you-channels .for-you-rss-track::-webkit-scrollbar {
    display: none !important
}

.for-you-channels .for-you-channel-card {
    flex: 0 0 200px !important;
    width: 200px !important;
    min-height: 112px !important;
    padding: 12px !important;
    border-radius: 13px !important
}

.for-you-channels .for-you-channel-link {
    gap: 10px !important
}

.for-you-channels .for-you-channel-link>img {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important
}

.for-you-channels .for-you-channel-card>.channel-card-follow {
    width: auto !important;
    min-width: 82px !important;
    height: 30px !important;
    margin: 9px 0 0 56px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important
}

@media(max-width:575.98px) {
    .for-you-channels .for-you-rss-head {
        align-items: center !important
    }

    .for-you-channel-head-actions {
        gap: 5px
    }

    .for-you-channel-head-actions>a {
        width: 34px;
        min-height: 34px;
        padding: 0;
        font-size: 0
    }

    .for-you-channel-head-actions>a i {
        font-size: 12px
    }

    .for-you-channels .for-you-channel-card {
        flex-basis: 184px !important;
        width: 184px !important
    }
}

/* Help center and settings */
.help-center-page,
.settings-page {
    color: var(--rn-text)
}

.help-center-heading,
.settings-heading {
    margin-bottom: 24px
}

.help-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 34px
}

.help-quick-actions>a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--rn-border);
    border-radius: 14px;
    background: var(--rn-surface);
    color: var(--rn-text) !important;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease
}

.help-quick-actions>a:hover {
    transform: translateY(-2px);
    border-color: rgba(240, 93, 64, .45);
    box-shadow: 0 10px 28px rgba(20, 29, 43, .08)
}

.help-quick-actions>a>i:first-child {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(240, 93, 64, .1);
    color: var(--rn-primary);
    font-size: 17px
}

.help-quick-actions>a>span {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column
}

.help-quick-actions strong {
    font-size: 14px;
    font-weight: 650
}

.help-quick-actions small {
    margin-top: 3px;
    color: var(--rn-text-3);
    font-size: 11.5px;
    line-height: 1.4
}

.help-quick-actions>a>i:last-child {
    color: var(--rn-text-3);
    font-size: 11px
}

.help-faq-section,
.help-contact-section {
    padding: 28px;
    border: 1px solid var(--rn-border);
    border-radius: 16px;
    background: var(--rn-surface)
}

.help-contact-section {
    margin-top: 20px
}

.help-section-heading>span,
.help-contact-card>span {
    color: var(--rn-primary);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .15em
}

.help-section-heading h2 {
    margin: 5px 0 4px;
    color: var(--rn-text);
    font-size: 23px;
    font-weight: 680
}

.help-section-heading p {
    margin: 0;
    color: var(--rn-text-3);
    font-size: 13px
}

.help-faq-category {
    margin: 24px 0 9px;
    color: var(--rn-text-2);
    font-size: 13px;
    font-weight: 700
}

.help-faq-card {
    margin-bottom: 8px !important;
    overflow: hidden;
    border: 1px solid var(--rn-border) !important;
    border-radius: 11px !important;
    background: var(--rn-surface-2) !important
}

.help-faq-card .card-header {
    padding: 0;
    border: 0;
    background: transparent
}

.help-faq-card .card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 17px;
    color: var(--rn-text) !important;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none
}

.help-faq-card .card-link i {
    color: var(--rn-primary);
    font-size: 10px;
    transition: transform .18s
}

.help-faq-card .card-link[aria-expanded=true] i {
    transform: rotate(180deg)
}

.help-faq-card .card-body {
    padding: 0 17px 17px;
    color: var(--rn-text-2);
    font-size: 13px;
    line-height: 1.7
}

.help-faq-card .card-body p:last-child {
    margin-bottom: 0
}

.help-contact-grid {
    margin-top: 22px
}

.help-response-notice {
    border: 1px solid rgba(255, 193, 7, .3);
    border-radius: 10px;
    background: rgba(255, 193, 7, .09);
    color: var(--rn-text-2);
    font-size: 12px
}

.help-ticket-form {
    padding: 20px;
    border: 1px solid var(--rn-border);
    border-radius: 14px;
    background: var(--rn-surface-2)
}

.help-ticket-form label {
    margin-bottom: 6px;
    color: var(--rn-text-2);
    font-size: 11.5px;
    font-weight: 650
}

.help-ticket-form .form-control {
    margin-bottom: 16px !important;
    border-color: var(--rn-border);
    border-radius: 9px;
    background: var(--rn-surface);
    color: var(--rn-text);
    font-size: 13px
}

.help-ticket-form .form-control:focus {
    border-color: var(--rn-primary);
    box-shadow: 0 0 0 3px rgba(240, 93, 64, .11)
}

.help-form-actions {
    display: flex;
    align-items: center;
    gap: 8px
}

.help-form-actions .btn {
    min-height: 38px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 650
}

.help-contact-card {
    height: 100%;
    padding: 22px;
    border-radius: 14px;
    background: var(--rn-sidebar-bg, #111a2b);
    color: #fff
}

.help-contact-card h3 {
    margin: 7px 0 5px;
    font-size: 18px;
    font-weight: 650
}

.help-contact-card>p {
    color: rgba(255, 255, 255, .65);
    font-size: 12px;
    line-height: 1.5
}

.help-contact-card .contact_list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none
}

.help-contact-card .contact_list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-top: 1px solid rgba(255, 255, 255, .1)
}

.help-contact-card .contact_list_icon img {
    width: 28px;
    height: 28px;
    object-fit: contain
}

.help-contact-card .contact_list_desc h3 {
    margin: 0;
    color: rgba(255, 255, 255, .6);
    font-size: 10px;
    text-transform: uppercase
}

.help-contact-card .contact_list_desc a {
    color: #fff !important;
    font-size: 12px
}

.settings-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 20px;
    align-items: start
}

.settings-nav {
    position: sticky;
    top: 82px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    border: 1px solid var(--rn-border);
    border-radius: 14px;
    background: var(--rn-surface)
}

.settings-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 9px;
    color: var(--rn-text-2) !important;
    font-size: 12.5px;
    font-weight: 570;
    text-decoration: none
}

.settings-nav a i {
    width: 18px;
    color: var(--rn-text-3);
    text-align: center
}

.settings-nav a:hover,
.settings-nav a.active {
    background: rgba(240, 93, 64, .09);
    color: var(--rn-primary) !important
}

.settings-nav a:hover i,
.settings-nav a.active i {
    color: var(--rn-primary)
}

.settings-content {
    display: grid;
    gap: 15px
}

.settings-panel {
    scroll-margin-top: 88px;
    overflow: hidden;
    border: 1px solid var(--rn-border);
    border-radius: 15px;
    background: var(--rn-surface)
}

.settings-panel-heading {
    display: flex;
    gap: 13px;
    padding: 21px;
    border-bottom: 1px solid var(--rn-border)
}

.settings-panel-icon,
.settings-option-icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(240, 93, 64, .1);
    color: var(--rn-primary)
}

.settings-panel-heading h2 {
    margin: 0 0 3px;
    color: var(--rn-text);
    font-size: 18px;
    font-weight: 680
}

.settings-panel-heading p,
.settings-option-copy p {
    margin: 0;
    color: var(--rn-text-3);
    font-size: 12px;
    line-height: 1.45
}

.settings-options {
    margin: 0;
    padding: 0;
    list-style: none
}

.settings-options>li {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 21px;
    border-bottom: 1px solid var(--rn-border)
}

.settings-options>li:last-child {
    border-bottom: 0
}

.settings-option-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--rn-surface-2);
    color: var(--rn-text-3);
    font-size: 13px
}

.settings-option-copy {
    flex: 1;
    min-width: 0
}

.settings-option-copy h3 {
    margin: 0 0 3px;
    color: var(--rn-text);
    font-size: 13.5px;
    font-weight: 640
}

.settings-options .custom-switch {
    margin-left: auto;
    padding-left: 2.55rem
}

.settings-options .custom-control-label:before {
    border-color: var(--rn-border);
    background: var(--rn-surface-2)
}

.settings-options .custom-control-input:checked~.custom-control-label:before {
    border-color: var(--rn-primary);
    background: var(--rn-primary)
}

.settings-voice-option {
    align-items: flex-start !important
}

.settings-voice-option .input-group {
    max-width: 520px;
    margin-top: 12px
}

.settings-voice-option .custom-select {
    border-color: var(--rn-border);
    background-color: var(--rn-surface);
    color: var(--rn-text);
    font-size: 12px
}

.settings-voice-option .btn {
    font-size: 11.5px;
    font-weight: 650
}

@media(max-width:767.98px) {
    .help-quick-actions {
        grid-template-columns: 1fr
    }

    .help-faq-section,
    .help-contact-section {
        padding: 19px
    }

    .help-contact-card {
        margin-top: 14px
    }

    .settings-layout {
        grid-template-columns: 1fr
    }

    .settings-nav {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .settings-panel-heading,
    .settings-options>li {
        padding: 16px
    }

    .settings-heading,
    .help-center-heading {
        margin-bottom: 18px
    }
}

@media(max-width:420px) {
    .settings-nav {
        grid-template-columns: 1fr
    }

    .help-form-actions {
        align-items: stretch;
        flex-direction: column
    }

    .help-form-actions .btn {
        width: 100%
    }

    .settings-options>li {
        align-items: flex-start
    }

    .settings-options .custom-switch {
        margin-top: 8px
    }
}

/* Homepage publication stream: 7/5 content and sidebar split. */
@media(min-width:768px) {
    body:not(.admin-body) .reko-feed-column {
        flex: 0 0 58.333333% !important;
        max-width: 58.333333% !important
    }

    body:not(.admin-body) .reko-sidebar-column {
        flex: 0 0 41.666667% !important;
        max-width: 41.666667% !important;
        padding-left: 12px !important
    }
}

/* Slightly shorter primary sidebar search control. */
body:not(.admin-body)>.account-sidebar #search-engine .input-group,
body:not(.admin-body)>.account-sidebar #search-engine .form-control,
body:not(.admin-body)>.account-sidebar #search-engine .btn {
    height: 35px !important;
    min-height: 35px !important
}

body:not(.admin-body)>.account-sidebar #search-engine .form-control {
    padding-top: 6px !important;
    padding-bottom: 6px !important
}

body:not(.admin-body)>.account-sidebar #search-engine .btn {
    width: 38px !important;
    padding: 0 !important
}

/* Slightly more compact desktop post-list actions. */
@media(min-width:768px) {
    body:not(.admin-body) .post-list .reko-post-actions-right {
        gap: 5px
    }

    body:not(.admin-body) .post-list .reko-reactions-compact .reko-reaction-main,
    body:not(.admin-body) .post-list .reko-count-action {
        min-width: 36px !important;
        min-height: 34px !important;
        padding: 3px 5px !important
    }

    body:not(.admin-body) .post-list .reko-count-action i {
        font-size: 17px !important
    }

    body:not(.admin-body) .post-list .reko-reactions-compact .reko-reaction-main img {
        width: 22px !important;
        height: 22px !important
    }

    body:not(.admin-body) .post-list .reko-reaction-empty-icon {
        width: 22px;
        font-size: 20px
    }

    body:not(.admin-body) .post-list .reko-count-action span,
    body:not(.admin-body) .post-list .reko-reactions-compact .reko-reaction-main span {
        font-size: 12px !important
    }
}

/* Profile publications and tabbed social network. */
.reko-edit-profile-page {
    max-width: 920px
}

.reko-edit-profile-card {
    margin-top: 20px;
    padding: 26px;
    background: var(--rn-surface);
    border: 1px solid var(--rn-border);
    border-radius: 16px;
    box-shadow: 0 8px 26px rgba(15, 23, 42, .06)
}

.reko-profile-photo-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--rn-border)
}

.reko-profile-photo-row #imgArea {
    position: relative;
    flex: 0 0 100px;
    overflow: hidden;
    background: var(--rn-surface-2);
    border: 3px solid var(--rn-surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--rn-border)
}

.reko-profile-photo-row #imgArea>img {
    width: 100%;
    height: 100%;
    display: block;
    padding: 0 !important;
    object-fit: cover;
    border: 0 !important
}

.reko-profile-photo-row #imgChange {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(15, 23, 42, .42);
    opacity: 0;
    transition: opacity .18s ease
}

.reko-profile-photo-row #imgArea:hover #imgChange {
    opacity: 1
}

.reko-profile-photo-copy {
    min-width: 0;
    flex: 1
}

.reko-profile-photo-copy h2 {
    margin: 0 0 5px;
    color: var(--rn-text);
    font-size: 20px;
    font-weight: 650
}

.reko-profile-photo-copy p {
    max-width: 520px;
    margin: 0 0 12px;
    color: var(--rn-muted);
    font-size: 13px;
    line-height: 1.5
}

.reko-photo-upload-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 7px 11px;
    color: var(--rn-primary);
    background: rgba(240, 93, 64, .08);
    border: 1px solid rgba(240, 93, 64, .25);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer
}

.reko-edit-profile-form label:not(.custom-control-label) {
    margin-bottom: 7px;
    color: var(--rn-text-2);
    font-size: 12px;
    font-weight: 650
}

.reko-edit-profile-form .form-control {
    min-height: 44px;
    border-radius: 8px
}

.reko-edit-profile-form textarea.form-control {
    min-height: 105px;
    resize: vertical
}

.reko-edit-profile-form .form-control[readonly] {
    color: var(--rn-muted);
    background: var(--rn-surface-2)
}

.reko-edit-profile-form .form-group>small,
.reko-field-help {
    display: block;
    margin-top: 6px;
    color: var(--rn-muted) !important;
    font-size: 11px
}

.reko-edit-profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--rn-border)
}

.reko-edit-profile-actions .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 650
}

@media(max-width:575.98px) {
    .reko-edit-profile-card {
        padding: 18px 14px;
        border-right: 0;
        border-left: 0;
        border-radius: 0
    }

    .reko-profile-photo-row {
        align-items: flex-start;
        gap: 15px
    }

    .reko-profile-photo-row #imgArea {
        width: 78px !important;
        height: 78px !important;
        flex-basis: 78px
    }

    .reko-profile-photo-copy h2 {
        font-size: 17px
    }

    .reko-edit-profile-actions .btn {
        flex: 1
    }
}

.profile-network {
    scroll-margin-top: 88px;
    margin: 18px 0 34px;
    padding: 22px;
    border: 1px solid var(--rn-border);
    border-radius: 16px;
    background: var(--rn-surface)
}

.profile-network-tabs {
    display: flex;
    gap: 7px;
    margin: 17px 0;
    padding: 5px;
    border: 1px solid var(--rn-border);
    border-radius: 12px;
    background: var(--rn-surface-2)
}

.profile-network-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 13px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--rn-text-2);
    font-size: 12px;
    font-weight: 620;
    cursor: pointer
}

.profile-network-tabs button i {
    color: var(--rn-text-3)
}

.profile-network-tabs button strong {
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--rn-surface);
    color: var(--rn-text-3);
    font-size: 9.5px
}

.profile-network-tabs button.active {
    background: var(--rn-surface);
    color: var(--rn-primary);
    box-shadow: 0 3px 12px rgba(20, 29, 43, .07)
}

.profile-network-tabs button.active i {
    color: var(--rn-primary)
}

.profile-network-content {
    position: relative;
    min-height: 90px
}

.profile-network-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
}

.profile-network-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--rn-border);
    border-radius: 11px;
    background: var(--rn-surface-2)
}

.profile-network-person>a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    color: var(--rn-text) !important;
    text-decoration: none
}

.profile-network-person img {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    object-fit: cover
}

.profile-network-person a>span {
    display: flex;
    min-width: 0;
    flex-direction: column
}

.profile-network-person strong {
    overflow: hidden;
    color: var(--rn-text);
    font-size: 12.5px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap
}

.profile-network-person small {
    margin-top: 2px;
    color: var(--rn-text-3);
    font-size: 10.5px
}

.profile-network-person>.btn {
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 650
}

.profile-network-topic {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--rn-border);
    border-radius: 11px;
    background: var(--rn-surface-2);
    color: var(--rn-text) !important;
    text-decoration: none
}

.profile-network-topic>i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(240, 93, 64, .1);
    color: var(--rn-primary)
}

.profile-network-topic>span {
    display: flex;
    flex-direction: column
}

.profile-network-topic strong {
    font-size: 12.5px;
    font-weight: 650
}

.profile-network-topic small {
    color: var(--rn-text-3);
    font-size: 10.5px
}

.profile-network-loading {
    display: none;
    padding: 25px;
    text-align: center
}

.profile-network-loading img {
    width: 42px;
    height: 42px
}

.profile-network-empty {
    grid-column: 1/-1;
    margin: 0;
    padding: 28px;
    color: var(--rn-text-3);
    text-align: center;
    font-size: 12px
}

@media(max-width:767.98px) {
    .profile-network {
        padding: 16px
    }

    .profile-network-tabs {
        overflow-x: auto;
        scrollbar-width: none
    }

    .profile-network-tabs::-webkit-scrollbar {
        display: none
    }

    .profile-network-tabs button {
        flex: 0 0 auto
    }

    .profile-network-list {
        grid-template-columns: 1fr
    }
}

/* Profile videos use a true grid instead of a horizontal phone rail. */
.profile-video-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px
}

.profile-video-card {
    display: block;
    overflow: hidden;
    border: 1px solid var(--rn-border);
    border-radius: 12px;
    background: var(--rn-surface);
    color: var(--rn-text) !important;
    text-decoration: none
}

.profile-video-poster {
    position: relative;
    display: block;
    aspect-ratio: 9/14;
    overflow: hidden;
    background: #111827
}

.profile-video-poster>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s
}

.profile-video-card:hover .profile-video-poster>img {
    transform: scale(1.035)
}

.profile-video-poster>i {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .58);
    color: #fff;
    font-size: 12px;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(5px)
}

.profile-video-poster>small {
    position: absolute;
    right: 7px;
    bottom: 7px;
    padding: 3px 6px;
    border-radius: 5px;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 9px
}

.profile-video-copy {
    display: flex;
    flex-direction: column;
    padding: 10px
}

.profile-video-copy strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--rn-text);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.profile-video-copy small {
    margin-top: 4px;
    color: var(--rn-text-3);
    font-size: 10px
}

.feed-view-page {
    max-width: 920px
}

/* Feed detail mirrors the article detail hierarchy and responsive shell. */
.reko-feed-article .followBtn {
    position: absolute;
    right: 0;
    min-height: 34px;
    font-size: 11px;
    font-weight: 700
}

.reko-feed-article .follow-user-icon img {
    width: 40px;
    height: 40px;
    object-fit: cover
}

.reko-feed-article .follow-user-desc {
    min-width: 0;
    padding-right: 90px
}

.reko-feed-article .reko-feed-body {
    margin-top: 22px;
    overflow-wrap: anywhere;
    white-space: normal
}

.reko-feed-article .reko-feed-body>p:last-child {
    margin-bottom: 0
}

.reko-feed-detail-media {
    display: grid;
    gap: 4px;
    margin-top: 22px;
    overflow: hidden;
    border-radius: 11px
}

.reko-feed-detail-media.is-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.reko-feed-media-item {
    position: relative;
    display: block;
    width: 100%;
    min-height: 220px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--rn-surface-2);
    cursor: pointer
}

.reko-feed-media-item img {
    width: 100%;
    height: 100%;
    max-height: 620px;
    object-fit: cover
}

.reko-feed-detail-media.is-grid .reko-feed-media-item {
    aspect-ratio: 1/1
}

.reko-feed-media-item>i {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0,0,0,.66);
    color: #fff;
    transform: translate(-50%,-50%)
}

.reko-feed-stats {
    display: flex;
    gap: 18px;
    padding: 12px 2px 0;
    color: var(--rn-muted);
    font-size: 12px
}

.reko-feed-stats i {
    margin-right: 6px
}

.reko-feed-detail-page .feed-comments-section {
    max-width: none;
    margin: 28px 0 0
}

.reko-feed-modal-image {
    display: block;
    width: 100%;
    max-height: 88vh;
    object-fit: contain;
    background: #0e1116
}

@media(max-width:767.98px) {
    .reko-feed-detail-page {
        padding-right: 0;
        padding-left: 0
    }

    .reko-feed-detail-media {
        margin-right: -14px;
        margin-left: -14px;
        border-radius: 0
    }

    .reko-feed-media-item {
        min-height: 180px
    }

    .reko-feed-stats,
    .reko-feed-detail-page .reko-article-actions,
    .reko-feed-detail-page .feed-comments-section {
        margin-right: 14px;
        margin-left: 14px
    }
}

.feed-view-card {
    overflow: hidden;
    border: 1px solid var(--rn-border);
    border-radius: 16px;
    background: var(--rn-surface);
    color: var(--rn-text)
}

.feed-view-author {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 20px;
    border-bottom: 1px solid var(--rn-border)
}

.feed-view-author>a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--rn-text) !important;
    text-decoration: none
}

.feed-view-author img {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    object-fit: cover
}

.feed-view-author a>span {
    display: flex;
    min-width: 0;
    flex-direction: column
}

.feed-view-author strong {
    font-size: 13px;
    font-weight: 650
}

.feed-view-author small {
    margin-top: 2px;
    color: var(--rn-text-3);
    font-size: 10.5px
}

.feed-view-label {
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(240, 93, 64, .1);
    color: var(--rn-primary);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase
}

.feed-view-body {
    padding: 24px 20px;
    color: var(--rn-text);
    font-size: 16px;
    line-height: 1.7;
    white-space: normal
}

.feed-view-body p:last-child {
    margin-bottom: 0
}

.feed-view-media {
    display: grid;
    gap: 2px;
    padding: 0 20px 20px
}

.feed-view-media.multiple {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.feed-view-media img {
    width: 100%;
    max-height: 620px;
    border-radius: 10px;
    object-fit: cover
}

.feed-view-media a {
    position: relative
}

.feed-view-media a>i {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    transform: translate(-50%, -50%)
}

.feed-view-footer {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 20px;
    border-top: 1px solid var(--rn-border);
    color: var(--rn-text-3);
    font-size: 11px
}

.feed-view-footer button {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--rn-text-2);
    font-size: 11px;
    font-weight: 650
}

@media(max-width:991.98px) {
    .profile-video-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(max-width:575.98px) {
    .profile-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px
    }

    .feed-view-body {
        padding: 19px 15px;
        font-size: 15px
    }

    .feed-view-author,
    .feed-view-footer {
        padding-right: 15px;
        padding-left: 15px
    }

    .feed-view-media {
        padding: 0 15px 15px
    }
}

/* Stateful profile and bookmark tabs, inspired by Flutter tab transitions. */
.profile-content-tabs {
    position: relative;
    padding-top: 2px;
    overflow: visible
}

.profile-content-tabs a,
.profile-content-tabs button {
    transition: color .2s ease, background-color .2s ease, transform .2s ease
}

.profile-content-tabs .active {
    transform: none
}

.profile-tab-panel,
.saved-tab-panel,
.connection-panel {
    display: none;
    opacity: 0
}

.profile-tab-panel.active,
.saved-tab-panel.active,
.connection-panel.active {
    display: block;
    animation: rekoTabIn .18s ease forwards
}

@keyframes rekoTabIn {
    to {
        opacity: 1
    }
}

.bookmark-content-tabs {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 18px;
    margin-bottom: 2px;
    padding: 5px;
    border: 1px solid var(--rn-border);
    border-radius: 12px;
    background: var(--rn-surface-2)
}

.bookmark-content-tabs button {
    min-height: 38px;
    padding: 8px 18px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--rn-text-2);
    font-size: 12px;
    font-weight: 650
}

.bookmark-content-tabs button.active {
    background: var(--rn-surface);
    color: var(--rn-primary);
    box-shadow: 0 3px 12px rgba(20, 29, 43, .08)
}

.saved-tab-panel {
    min-height: 180px
}

.saved-video-grid {
    margin-bottom: 32px
}

.saved-video-loading {
    display: none;
    padding: 35px
}

.saved-video-loading img {
    width: 45px
}

.saved-video-empty {
    display: none;
    padding: 35px;
    color: var(--rn-text-3);
    text-align: center;
    font-size: 12px
}

.saved-tab-panel.row.active {
    display: flex
}

.connections-page {
    max-width: 1080px
}

.connections-tabs {
    margin: 20px 0
}

.connection-panel {
    min-height: 180px
}

.connection-channel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
}

.connection-channel-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--rn-border);
    border-radius: 12px;
    background: var(--rn-surface)
}

.connection-channel-card>a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    color: var(--rn-text) !important;
    text-decoration: none
}

.connection-channel-card img {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    object-fit: cover
}

.connection-channel-card a>span {
    display: flex;
    min-width: 0;
    flex-direction: column
}

.connection-channel-card strong {
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap
}

.connection-channel-card small {
    color: var(--rn-text-3);
    font-size: 10.5px
}

.connection-channel-card button {
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid var(--rn-border);
    border-radius: 999px;
    background: transparent;
    color: var(--rn-text-2);
    font-size: 10px;
    font-weight: 650
}

@media(max-width:767.98px) {

    .social-profile-tabs,
    .bookmark-content-tabs {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none
    }

    .social-profile-tabs::-webkit-scrollbar,
    .bookmark-content-tabs::-webkit-scrollbar {
        display: none
    }

    .social-profile-tabs a,
    .bookmark-content-tabs button {
        flex: 0 0 auto
    }

    .social-profile-tabs a {
        min-height: 44px;
        display: inline-flex;
        align-items: center
    }

    .connections-tabs {
        overflow-x: auto;
        scrollbar-width: none
    }

    .connections-tabs::-webkit-scrollbar {
        display: none
    }

    .connections-tabs button {
        flex: 0 0 auto
    }

    .connection-channel-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:420px) {
    .bookmark-content-tabs {
        display: flex
    }

    .bookmark-content-tabs button {
        flex: 1;
        padding-right: 12px;
        padding-left: 12px
    }
}

/* Mixed history video rows. */
.mixed-history-video {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
    padding: 16px !important
}

.mixed-history-video-poster {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16/10;
    border-radius: 10px;
    background: #111827
}

.mixed-history-video-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.mixed-history-video-poster>i {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 11px;
    transform: translate(-50%, -50%)
}

.mixed-history-video-poster>small {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 3px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 9px
}

.mixed-history-video-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center
}

.mixed-history-video-copy>span {
    color: var(--rn-primary);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .13em
}

.mixed-history-video-copy a {
    color: var(--rn-text) !important;
    text-decoration: none
}

.mixed-history-video-copy h3 {
    display: -webkit-box;
    overflow: hidden;
    margin: 6px 0 5px;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.mixed-history-video-copy small {
    color: var(--rn-text-3);
    font-size: 10.5px
}

@media(max-width:575.98px) {
    .mixed-history-video {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 11px;
        padding: 12px !important
    }

    .mixed-history-video-copy h3 {
        font-size: 14px
    }
}

/* Authentication, library detail and history surfaces */
.reko-auth-page {
    max-width: 480px !important;
}

.reko-auth-shell {
    display: block;
    border: 1px solid var(--rn-border, #e2e5e9);
    border-radius: 14px !important;
    background: var(--rn-card, #fff);
    box-shadow: none;
}

.reko-auth-shell .auto_bg {
    display: none;
}

.reko-auth-shell>.col-md-6 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

.reko-auth-shell .auth-content {
    padding: 34px !important;
    background: var(--rn-card, #fff) !important;
    color: var(--rn-text, #16181d);
    max-height: none;
    overflow: visible;
    border-bottom: 0;
}

.reko-auth-shell .auth-content::after {
    display: none;
}

.reko-auth-shell h1 {
    margin-bottom: 8px !important;
    font-size: 1.65rem;
    font-weight: 650;
}

.reko-auth-kicker {
    display: none;
}

.reko-auth-lead {
    margin: 0 0 24px;
    color: var(--rn-text-3, #707887);
    font-size: .94rem;
}

.reko-auth-shell .form-group {
    margin-bottom: 14px;
}

.reko-auth-shell .form-control,
.reko-auth-shell .custom-select {
    height: 46px;
    border: 1px solid var(--rn-border, #dfe3e8) !important;
    border-radius: 8px;
    background: var(--rn-card, #fff);
    color: inherit;
}

.reko-auth-shell .input-group-prepend {
    display: none;
}

.reko-auth-shell .input-group .form-control {
    border-radius: 8px !important;
}

.reko-auth-shell .btn-block {
    min-height: 46px;
    border-radius: 8px;
    font-weight: 650;
}

.reko-auth-links {
    margin-top: 18px;
    color: var(--rn-text-3, #707887);
    font-size: .9rem;
}

.reko-content-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--reko-border, #e1e5ea);
    margin: 0 8px 20px
}

.reko-content-tabs button {
    border: 0;
    background: transparent;
    color: var(--reko-muted, #687180);
    padding: 13px 20px;
    font-weight: 700;
    border-bottom: 3px solid transparent
}

.reko-content-tabs button.active {
    color: #f45b40;
    border-bottom-color: #f45b40
}

.reko-content-tabs i {
    margin-right: 7px
}

.reko-book-detail>.row>.reko-feed-column {
    background: var(--reko-card, #fff);
    border: 1px solid var(--reko-border, #e1e5ea);
    border-radius: 20px;
    padding: 28px !important
}

.reko-book-detail .cover-image {
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 18px 35px rgba(20, 25, 35, .2) !important
}

.reko-book-detail .book-info {
    border: 1px solid var(--reko-border, #e1e5ea);
    border-radius: 14px;
    background: var(--reko-surface, #f6f7f9)
}

.reko-book-detail .share_list .btn {
    border-radius: 999px
}

.feed-comments-section {
    max-width: 820px;
    margin: 24px auto
}

.feed-comment-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 22px
}

.feed-comment-form>img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover
}

.feed-comment-form textarea {
    min-height: 48px;
    max-height: 110px;
    border-radius: 14px;
    resize: vertical
}

.feed-comment-form .btn {
    height: 46px;
    border-radius: 12px
}

.feed-comment-form .btn span {
    margin-left: 7px
}

.feed-comments-more {
    display: block;
    margin: auto
}

@media(max-width:767px) {
    .reko-auth-page {
        padding-top: 20px !important
    }

    .reko-auth-shell .auth-content {
        padding: 24px !important
    }

    .reko-book-detail>.row>.reko-feed-column {
        border-radius: 0;
        padding: 20px 15px !important
    }

    .reko-content-tabs {
        position: sticky;
        top: 62px;
        background: var(--reko-card, #fff);
        z-index: 5;
        margin-left: 0;
        margin-right: 0
    }

    .feed-comment-form .btn span {
        display: none
    }
}
/* Books and comics */
.reko-library-page{background:#fff;color:#17191d;min-height:70vh}
.reko-library-intro{border-bottom:1px solid #e5e7eb;padding:42px 0 34px;background:#f6f7f9}
.reko-library-intro>.container{display:flex;align-items:end;justify-content:space-between;gap:32px}
.reko-eyebrow{display:block;color:#f1543f;font-size:12px;font-weight:800;letter-spacing:0;text-transform:uppercase;margin-bottom:7px}
.reko-library-intro h1{font-size:40px;line-height:1.08;margin:0 0 10px;font-weight:800}
.reko-library-intro p{color:#666d78;font-size:17px;margin:0}
.reko-library-app-link{display:flex;align-items:center;gap:12px;color:#17191d;border-left:3px solid #f1543f;padding:8px 0 8px 16px;min-width:190px}
.reko-library-app-link:hover{color:#f1543f;text-decoration:none}
.reko-library-app-link>i:first-child{font-size:22px}
.reko-library-app-link>i:last-child{margin-left:auto}
.reko-library-app-link span{display:flex;flex-direction:column;font-weight:800;line-height:1.25}
.reko-library-app-link small{font-weight:500;color:#777e87}
.reko-library-feature{display:grid;grid-template-columns:190px minmax(0,620px);gap:36px;align-items:center;padding-top:42px;padding-bottom:42px;border-bottom:1px solid #e5e7eb}
.reko-library-feature-cover{display:block;aspect-ratio:2/3;background:#eceff2;overflow:hidden;border-radius:4px;box-shadow:0 12px 24px rgba(18,24,33,.16)}
.reko-library-feature-cover img{width:100%;height:100%;object-fit:cover}
.reko-library-feature-copy h2{font-size:31px;line-height:1.15;font-weight:800;margin:0 0 12px}
.reko-library-feature-copy>p{color:#626a75;line-height:1.65;margin:0 0 14px}
.reko-library-meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:#747b84;font-size:13px;margin-bottom:20px}
.reko-library-meta .fa-star,.reko-library-card-copy .fa-star{color:#e5a600}
.reko-library-catalog{padding-top:38px;padding-bottom:60px}
.reko-library-toolbar{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:18px}
.reko-library-toolbar h2{font-size:27px;line-height:1.15;font-weight:800;margin:0}
.reko-library-toolbar p{color:#7b818a;margin:4px 0 0;font-size:13px}
.reko-library-search{width:min(100%,300px);height:42px;border:1px solid #d8dce2;display:flex;align-items:center;gap:10px;padding:0 13px;border-radius:4px;margin:0;background:#fff}
.reko-library-search:focus-within{border-color:#f1543f;box-shadow:0 0 0 3px rgba(241,84,63,.1)}
.reko-library-search input{border:0;outline:0;width:100%;font-size:14px;background:transparent}
.reko-library-filters{display:flex;gap:7px;overflow:auto;padding:0 0 20px;scrollbar-width:thin}
.reko-library-filters button{white-space:nowrap;border:1px solid #dfe2e6;background:#fff;color:#505761;padding:7px 12px;border-radius:4px;font-size:13px;font-weight:700}
.reko-library-filters button.active{background:#202329;border-color:#202329;color:#fff}
.reko-library-filters button span{opacity:.65;margin-left:3px}
.reko-library-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px 20px}
.reko-library-card[hidden]{display:none}
.reko-library-card-cover{display:block;position:relative;aspect-ratio:2/3;background:#edf0f2;overflow:hidden;border-radius:4px}
.reko-library-card-cover img{width:100%;height:100%;object-fit:cover;transition:transform .2s ease}
.reko-library-card:hover .reko-library-card-cover img{transform:scale(1.025)}
.reko-library-card-cover>span{position:absolute;left:8px;bottom:8px;background:rgba(20,23,28,.86);color:#fff;padding:4px 7px;border-radius:3px;font-size:10px;font-weight:800;text-transform:uppercase}
.reko-library-card-copy{padding-top:11px}
.reko-library-card-copy h3{font-size:15px;line-height:1.3;font-weight:800;margin:0 0 4px}
.reko-library-card-copy h3 a{color:#1d2025}
.reko-library-card-copy p{font-size:12px;color:#767d87;margin:0 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reko-library-card-copy>div{display:flex;gap:13px;color:#686f78;font-size:11px;font-weight:700}
.reko-library-empty{text-align:center;padding:60px 20px;color:#777e87}
.reko-library-empty i{font-size:24px;color:#f1543f;margin-bottom:12px}
.reko-library-empty h3{color:#202329;font-size:19px;font-weight:800;margin:0 0 5px}

/* Book detail: calm product hierarchy over the legacy content/actions. */
.reko-book-detail{padding-top:30px}
.reko-book-detail>.row>.reko-feed-column{padding-top:0!important}
.reko-book-detail>.row>.reko-feed-column>.row:first-child{align-items:start;background:#f6f7f9;border-top:3px solid #f1543f;padding:28px 14px;margin:0 0 30px}
.reko-book-detail .cover-image{aspect-ratio:2/3;max-width:230px;min-height:0!important;border-radius:4px!important;box-shadow:0 12px 26px rgba(18,24,33,.16)!important}
.reko-book-detail .cover-image img{width:100%;height:100%;object-fit:cover}
.reko-book-detail .post_title{font-size:30px;line-height:1.15;font-weight:800;color:#191c21}
.reko-book-detail .book-info{background:#fff!important;border:1px solid #e0e3e7;border-radius:4px!important}
.reko-book-detail .book-info li{padding:10px 6px}
.reko-book-detail .book-info h2{font-size:19px!important}
.reko-book-detail .book-info p{font-size:11px;text-transform:uppercase;font-weight:700}
.reko-book-detail .btn-lg{font-size:14px;padding:12px}
.reko-book-detail .tagButton{border-radius:3px}
.reko-book-detail .rekopad-chapter-preview{border-radius:4px}

@media(max-width:991px){
 .reko-library-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:767px){
 .reko-library-intro{padding:25px 0 22px}
 .reko-library-intro>.container{align-items:start;flex-direction:column;gap:18px}
 .reko-library-intro h1{font-size:29px}
 .reko-library-intro p{font-size:14px;line-height:1.5}
 .reko-library-app-link{width:100%;border-left:0;border-top:1px solid #dfe2e6;padding:14px 0 0}
 .reko-library-feature{grid-template-columns:116px minmax(0,1fr);gap:18px;padding-top:26px;padding-bottom:28px}
 .reko-library-feature-copy h2{font-size:21px}
 .reko-library-feature-copy>p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.5}
 .reko-library-meta{gap:5px 10px;font-size:11px;margin-bottom:13px}
 .reko-library-meta span:first-child{width:100%}
 .reko-library-feature-copy .btn{font-size:12px;padding:8px 11px}
 .reko-library-catalog{padding-top:28px}
 .reko-library-toolbar{align-items:stretch;flex-direction:column;gap:14px}
 .reko-library-search{width:100%}
 .reko-library-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px}
 .reko-library-card-copy h3{font-size:13px}
 .reko-book-detail{padding-top:0}
 .reko-book-detail::before{display:none!important}
 .reko-book-detail>.row>.reko-feed-column>.row:first-child{padding:22px 8px 20px;margin-left:-8px;margin-right:-8px}
 .reko-book-detail .cover-image{max-width:142px!important}
 .reko-book-detail .post_title{font-size:24px;text-align:left;margin-top:4px}
 .reko-book-detail .book-info h2{font-size:17px!important}
}
@media(max-width:420px){
 .reko-library-feature{grid-template-columns:96px minmax(0,1fr);gap:14px}
 .reko-library-feature-copy h2{font-size:18px}
 .reko-library-feature-copy>p{display:none}
 .reko-library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
}

/* Library v2: use the same content measure and column rhythm as editorial pages. */
.reko-library-page{background:var(--rn-bg,#fff)}
.reko-library-heading{margin-bottom:20px}
.reko-library-heading h1{font-size:29px}
.reko-library-app-strip{display:flex;align-items:center;gap:12px;margin-bottom:24px;padding:13px 14px;border:1px solid var(--rn-border,#e2e5e9);border-left:3px solid var(--rn-primary,#f1543f);border-radius:4px;background:var(--rn-card,#fff);color:var(--rn-text,#202329)}
.reko-library-app-strip:hover{color:var(--rn-primary,#f1543f);text-decoration:none}
.reko-library-app-strip>i:first-child{display:grid;place-items:center;width:34px;height:34px;background:#f1543f;color:#fff;border-radius:4px;flex:0 0 34px}
.reko-library-app-strip>i:last-child{margin-left:auto}
.reko-library-app-strip span{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.reko-library-app-strip strong{font-size:13px}
.reko-library-app-strip small{font-size:11px;color:var(--rn-text-3,#777e87);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reko-library-lead{display:grid;grid-template-columns:138px minmax(0,1fr);gap:22px;padding:20px 0 26px;border-top:1px solid var(--rn-border,#e2e5e9);border-bottom:1px solid var(--rn-border,#e2e5e9)}
.reko-library-lead-cover{display:block;aspect-ratio:2/3;border-radius:4px;overflow:hidden;background:#eceff2;box-shadow:0 7px 16px rgba(18,24,33,.14)}
.reko-library-lead-cover img{width:100%;height:100%;object-fit:cover}
.reko-library-lead>div>span{display:block;color:var(--rn-primary,#f1543f);font-size:10px;font-weight:750;margin-bottom:5px}
.reko-library-lead h2{font-size:23px;line-height:1.18;font-weight:750;margin:0 0 8px}
.reko-library-lead h2 a{color:var(--rn-text,#202329)}
.reko-library-lead p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:0 0 10px;color:var(--rn-text-2,#626a75);font-size:13px;line-height:1.55}
.reko-library-lead small{display:block;color:var(--rn-text-3,#777e87);font-size:11px;margin-bottom:13px}
.reko-library-read{font-size:12px;font-weight:750;color:var(--rn-primary,#f1543f)}
.reko-library-read i{margin-left:5px}
.reko-library-catalog{padding:26px 0 50px}
.reko-library-toolbar{align-items:center;gap:12px;margin-bottom:14px}
.reko-library-toolbar h2{font-size:20px;font-weight:750}
.reko-library-search{width:190px;height:37px}
.reko-library-filters{padding-bottom:18px}
.reko-library-filters button{padding:6px 10px;font-size:11px}
.reko-library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 16px}
.reko-library-card-cover{border-radius:4px}
.reko-library-card-copy{padding-top:9px}
.reko-library-card-copy h3{font-size:14px}

@media(max-width:767px){
 .reko-library-page>.container{padding-top:22px!important}
 .reko-library-heading{padding:0 2px;margin-bottom:17px}
 .reko-library-heading h1{font-size:26px}
 .reko-library-heading p{font-size:13px}
 .reko-library-app-strip{margin:0 2px 20px;padding:11px 12px}
 .reko-library-lead{grid-template-columns:106px minmax(0,1fr);gap:15px;padding:18px 2px 22px}
 .reko-library-lead h2{font-size:19px}
 .reko-library-lead p{-webkit-line-clamp:2;font-size:12px}
 .reko-library-lead small{margin-bottom:8px}
 .reko-library-catalog{padding-top:23px}
 .reko-library-toolbar{align-items:stretch;gap:11px}
 .reko-library-toolbar h2{font-size:19px}
 .reko-library-search{width:100%;height:39px}
 .reko-library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 13px}
 .reko-library-card-copy h3{font-size:13px}
}

/* Book view v2 */
.reko-book-legacy-summary{display:none!important}
.reko-book-detail>.row>.reko-feed-column{padding:0 8px 40px!important;border:0;border-radius:0;background:transparent}
.reko-book-view{background:var(--rn-card,#fff);border-bottom:1px solid var(--rn-border,#e2e5e9);margin-bottom:28px}
.reko-book-view-main{display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px;align-items:center;padding:26px 0 22px}
.reko-book-view-cover{aspect-ratio:2/3;overflow:hidden;border-radius:4px;background:#eceff2;box-shadow:0 10px 24px rgba(18,24,33,.18)}
.reko-book-view-cover img{width:100%;height:100%;object-fit:cover}
.reko-book-view-type{display:block;color:var(--rn-primary,#f1543f);font-size:10px;font-weight:800;margin-bottom:7px}
.reko-book-view-copy h1{font-size:29px;line-height:1.15;font-weight:800;margin:0 0 14px;color:var(--rn-text,#181b20)}
.reko-book-view-author{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;color:var(--rn-text-2,#565e69);font-size:13px;margin-bottom:13px}
.reko-book-view-author:hover{text-decoration:none;color:var(--rn-primary,#f1543f)}
.reko-book-view-author img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.reko-book-view-author span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reko-book-view-author i{color:#1d9bf0}
.reko-book-view-rating{display:flex;align-items:center;gap:6px;font-size:13px}
.reko-book-view-rating i{color:#e4a600}
.reko-book-view-rating strong{color:var(--rn-text,#202329)}
.reko-book-view-rating span{color:var(--rn-text-3,#777e87)}
.reko-book-view-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-top:1px solid var(--rn-border,#e2e5e9);border-bottom:1px solid var(--rn-border,#e2e5e9)}
.reko-book-view-stats>div{padding:14px 16px;border-right:1px solid var(--rn-border,#e2e5e9)}
.reko-book-view-stats>div:last-child{border-right:0}
.reko-book-view-stats dt{color:var(--rn-text-3,#777e87);font-size:10px;font-weight:700;text-transform:uppercase;margin-bottom:2px}
.reko-book-view-stats dd{font-size:16px;font-weight:800;color:var(--rn-text,#202329);margin:0}
.reko-book-view-actions{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:18px 0}
.reko-book-view-actions .btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border-radius:4px;font-size:13px;font-weight:750}
.reko-book-view-actions .btn-light{border:1px solid var(--rn-border,#dfe3e8);background:transparent;color:var(--rn-text-2,#565e69)}
.reko-book-view-about{padding:4px 0 26px}
.reko-book-view-about h2{font-size:17px;font-weight:800;margin:0 0 10px}
.reko-book-view-description{color:var(--rn-text-2,#5e6671);font-size:14px;line-height:1.7}
.reko-book-view-description p:last-child{margin-bottom:0}
.reko-book-view-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.reko-book-view-tags .tagButton{font-size:11px;padding:5px 8px;background:var(--rn-surface,#f3f5f7);border:1px solid var(--rn-border,#e2e5e9);color:var(--rn-text-2,#59616c);border-radius:3px}
.reko-book-detail .rekopad-chapter-preview{margin-top:0}

@media(max-width:767px){
 .reko-book-detail>.row>.reko-feed-column{padding:0 10px 32px!important}
 .reko-book-view{margin-bottom:22px}
 .reko-book-view-main{grid-template-columns:112px minmax(0,1fr);gap:16px;padding:20px 0 18px}
 .reko-book-view-cover{box-shadow:0 7px 17px rgba(18,24,33,.16)}
 .reko-book-view-copy h1{font-size:21px;line-height:1.2;margin-bottom:11px}
 .reko-book-view-author{font-size:12px;margin-bottom:10px}
 .reko-book-view-author img{width:27px;height:27px}
 .reko-book-view-rating{font-size:11px}
 .reko-book-view-stats>div{padding:12px 10px}
 .reko-book-view-stats dd{font-size:14px}
 .reko-book-view-actions{grid-template-columns:minmax(0,1fr) 42px 42px;padding:14px 0}
 .reko-book-view-actions .btn{min-height:42px;padding:8px}
 .reko-book-view-actions .btn-light span{display:none}
 .reko-book-view-about{padding-bottom:21px}
 .reko-book-view-description{font-size:13px;line-height:1.65}
}

@media(max-width:380px){
 .reko-book-view-main{grid-template-columns:96px minmax(0,1fr);gap:13px}
 .reko-book-view-copy h1{font-size:19px}
}