/* ============================================================
   PAKET — Dark Telegram Neomorphism Theme
   Matte surfaces · no white glow · Matrix background via JS
   ============================================================ */

:root {
    --tg-bg: #0e1621;
    --tg-surface: #17212b;
    --tg-surface-2: #1c2733;
    --tg-surface-3: #242f3d;
    --tg-text: #e4ecf2;
    --tg-text-muted: #8b95a0;
    --tg-accent: #6ab3f3;
    --tg-accent-soft: #4a9ae8;
    --neo-dark: rgba(0, 0, 0, 0.5);
    --neo-light: rgba(255, 255, 255, 0.025);
    --neo-border: rgba(255, 255, 255, 0.06);
    --card-radius: 10px;
    --island-gap: 12px;
    --sidebar-gap: 16px;
    --page-gutter-mobile: 14px;
    --page-gutter-desktop: 8px;
}

/* ---- Base ---- */
html,
body {
    background-color: var(--tg-bg) !important;
    color: var(--tg-text) !important;
}

a {
    color: var(--tg-accent) !important;
}

a:hover {
    color: var(--tg-accent-soft) !important;
}

svg {
    fill: var(--tg-text-muted) !important;
}

/* ---- Navbar (Telegram dark) ---- */
.navbar,
.navbar-collapse,
.navbar-expand-lg .navbar-nav .dropdown-menu,
.navbar-light.bg-white,
.offcanvas-collapse.bg-white {
    background-color: var(--tg-surface) !important;
    border-color: var(--neo-border) !important;
}

.navbar {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
    border-bottom: 1px solid var(--neo-border) !important;
}

.nav-link,
.navbar-nav a,
.navbar-light .navbar-nav .nav-link {
    color: var(--tg-text) !important;
}

.nav-link:hover,
.navbar-light .navbar-nav .nav-link:hover {
    color: var(--tg-accent) !important;
}

.navbar-toggler svg {
    fill: var(--tg-text-muted) !important;
}

.dropdown-toggle::after {
    color: var(--tg-text-muted) !important;
}

.dropdown-menu {
    background-color: var(--tg-surface-2) !important;
    border: 1px solid var(--neo-border) !important;
    box-shadow: 6px 6px 14px var(--neo-dark), -2px -2px 6px var(--neo-light) !important;
}

.dropdown-item {
    color: var(--tg-text) !important;
}

.dropdown-item:active,
.dropdown-item:hover {
    background-color: var(--tg-surface-3) !important;
    color: var(--tg-accent) !important;
}

.offcanvas-title {
    color: var(--tg-text) !important;
}

.btn-close {
    filter: invert(0.75) !important;
}

.text-logo {
    color: var(--tg-text) !important;
}

.header svg {
    fill: var(--tg-text-muted) !important;
}

.header a {
    color: var(--tg-text) !important;
}

/* ---- Top bar — muted dark tones ---- */
.top-bar .color-1 { background-color: #1a2332 !important; }
.top-bar .color-2 { background-color: #1e2a3a !important; }
.top-bar .color-3 { background-color: #223040 !important; }
.top-bar .color-4 { background-color: #263648 !important; }
.top-bar .color-5 { background-color: #17212b !important; }

/* ---- Cards & content blocks (matte neomorphism) ---- */
.shadow-sm,
.bg-white,
.bg-category,
.bg-other,
.topics .topic-box,
.modal-body,
.matte-island {
    background-color: var(--tg-surface) !important;
    box-shadow: 3px 3px 9px var(--neo-dark), -2px -2px 5px var(--neo-light) !important;
    border: 1px solid var(--neo-border) !important;
    border-radius: var(--card-radius) !important;
}

/* Separate floating islands — not one merged panel */
.matte-island {
    margin-bottom: var(--island-gap) !important;
}

/* Right sidebar: transparent column, each block = separate island */
.col-md-3.sidebar-islands,
.col-md-3.ps-md-2.sidebar-islands {
    display: flex;
    flex-direction: column;
    gap: var(--sidebar-gap);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
}

.sidebar-islands > * {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin-bottom: 0 !important;
    box-sizing: border-box;
}

.sidebar-islands > .matte-island,
.sidebar-islands > .matte-embed {
    isolation: isolate;
}

/* Ads / embeds in sidebar — same island, padded, no white bleed to edges */
.sidebar-islands .matte-embed {
    padding: 12px !important;
    overflow: hidden;
    text-align: center;
}

.sidebar-islands .matte-embed img,
.sidebar-islands .matte-embed iframe,
.sidebar-islands .matte-embed ins,
.sidebar-islands .matte-embed > * {
    max-width: 100% !important;
    box-sizing: border-box;
}

.sidebar-islands .matte-embed img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.bg-category,
.bg-other {
    background-color: var(--tg-surface-2) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    box-shadow:
        5px 5px 12px var(--neo-dark),
        -3px -3px 8px var(--neo-light),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
}

.bg-other .section-title {
    border-bottom: none !important;
}

/* ---- Section / category titles — outline + gray-white gradient ---- */
.section-title,
h1.section-title,
h2.section-title,
h3.section-title {
    background: linear-gradient(90deg, #a8b0b8 0%, #eef2f6 42%, #c0c8d0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    border: 1px solid rgba(100, 110, 120, 0.12) !important;
    border-bottom: 1px solid rgba(100, 110, 120, 0.1) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    display: block !important;
    margin-bottom: 10px !important;
    clear: none !important;
    font-weight: 700 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.h1-title,
.h2-title {
    color: var(--tg-text) !important;
}

.letter {
    color: var(--tg-text-muted) !important;
}

/* ---- App list ---- */
.app-list .title {
    color: var(--tg-text) !important;
}

.app-list .developer {
    color: var(--tg-text-muted) !important;
}

.app-list .date {
    color: var(--tg-text-muted) !important;
}

.top-apps .app-title {
    color: var(--tg-text) !important;
}

.top-apps .developer {
    color: var(--tg-text-muted) !important;
}

.app-space {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---- App details ---- */
.app-details h1,
.app-details h2 {
    color: var(--tg-text) !important;
}

.app-details a {
    color: var(--tg-accent) !important;
}

.app-details .date,
.app-details .developer,
.app-details .review-data {
    color: var(--tg-text-muted) !important;
}

.app-details .review-data svg {
    fill: var(--tg-text-muted) !important;
}

.app-details .description {
    border-left-color: var(--tg-accent) !important;
    background-color: rgba(106, 179, 243, 0.06) !important;
    color: var(--tg-text) !important;
}

.app-details .version {
    color: var(--tg-accent) !important;
}

.app-description {
    color: var(--tg-text) !important;
}

/* ---- Buttons — soft matte volumetric ---- */
.download-btn,
.download-btn-sm,
.search-btn,
.add-comment,
.comment-button,
.submit-button,
.cookiealert .accept-cookies {
    background: linear-gradient(145deg, var(--tg-surface-3), var(--tg-surface)) !important;
    color: var(--tg-text) !important;
    border: 1px solid var(--neo-border) !important;
    border-bottom: 1px solid var(--neo-border) !important;
    border-radius: 10px !important;
    box-shadow: 4px 4px 10px var(--neo-dark), -2px -2px 6px var(--neo-light) !important;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.download-btn:hover,
.download-btn-sm:hover,
.search-btn:hover,
.add-comment:hover,
.comment-button:hover,
.submit-button:hover,
.cookiealert .accept-cookies:hover {
    background: linear-gradient(145deg, #2a3848, var(--tg-surface-2)) !important;
    color: var(--tg-accent) !important;
}

.download-btn:active,
.download-btn-sm:active,
.search-btn:active,
.add-comment:active,
.comment-button:active,
.submit-button:active {
    box-shadow: inset 3px 3px 8px var(--neo-dark), inset -1px -1px 4px var(--neo-light) !important;
}

.download-btn svg,
.download-btn-sm svg,
.search-btn svg {
    fill: var(--tg-text) !important;
}

.buy-btn {
    background: linear-gradient(145deg, #3d3520, #2a2518) !important;
    color: #e8d48a !important;
    border: 1px solid rgba(232, 212, 138, 0.15) !important;
    border-bottom: 1px solid rgba(232, 212, 138, 0.15) !important;
    border-radius: 10px !important;
    box-shadow: 4px 4px 10px var(--neo-dark), -2px -2px 6px var(--neo-light) !important;
}

/* ---- Favorites — no pink, professional matte ---- */
.smi .favorites,
.smi .col.favorites {
    background: linear-gradient(145deg, var(--tg-surface-3), var(--tg-surface-2)) !important;
    border-radius: 8px !important;
    border: 1px solid var(--neo-border) !important;
}

.favorites {
    background-color: transparent !important;
}

.add-favorites {
    background-color: transparent !important;
}

.heart-icon,
#heart {
    fill: var(--tg-text-muted) !important;
}

.smi .fav svg {
    fill: var(--tg-text-muted) !important;
}

.smi {
    color: var(--tg-text) !important;
}

/* Social share buttons — unified dark matte */
.smi .email    { background: linear-gradient(145deg, #2a2840, #1e1c30) !important; }
.smi .facebook { background: linear-gradient(145deg, #1a2848, #121e38) !important; }
.smi .linkedin { background: linear-gradient(145deg, #142838, #0e1e2a) !important; }
.smi .twitter  { background: linear-gradient(145deg, #142838, #0e2030) !important; }
.smi .whatsapp { background: linear-gradient(145deg, #1a3028, #122820) !important; }
.smi .rss      { background: linear-gradient(145deg, #382818, #281e10) !important; }

.smi > div {
    border-radius: 8px !important;
    border: 1px solid var(--neo-border) !important;
    box-shadow: 3px 3px 8px var(--neo-dark), -1px -1px 4px var(--neo-light) !important;
}

/* ---- Up/Down votes ---- */
.up-down .up {
    background: linear-gradient(145deg, #1a3028, #122820) !important;
    border-bottom: 1px solid var(--neo-border) !important;
}

.up-down .down {
    background: linear-gradient(145deg, #381820, #281018) !important;
    border-bottom: 1px solid var(--neo-border) !important;
}

/* ---- Forms ---- */
.form-control,
.form-select,
.search-form {
    background-color: var(--tg-surface-2) !important;
    color: var(--tg-text) !important;
    border: 1px solid var(--neo-border) !important;
    border-radius: 8px !important;
    box-shadow: inset 2px 2px 6px var(--neo-dark), inset -1px -1px 3px var(--neo-light) !important;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--tg-surface-3) !important;
    border-color: rgba(106, 179, 243, 0.3) !important;
    color: var(--tg-text) !important;
}

.form-control::placeholder {
    color: var(--tg-text-muted) !important;
}

/* ---- Tags ---- */
.tags {
    border-top-color: var(--neo-border) !important;
}

.tags span {
    color: var(--tg-text) !important;
}

.tags li a {
    background-color: var(--tg-surface-2) !important;
    color: var(--tg-text-muted) !important;
    border: 1px solid var(--neo-border) !important;
    border-radius: 6px !important;
}

.tags li a:hover {
    color: var(--tg-accent) !important;
    border-color: rgba(106, 179, 243, 0.25) !important;
}

.tags i {
    color: var(--tg-accent) !important;
}

.tags h3,
#review-title,
.review-title h4 {
    color: var(--tg-text) !important;
}

/* ---- Reviews ---- */
.review {
    border-top-color: var(--neo-border) !important;
}

.user-reviews .name {
    color: var(--tg-accent) !important;
}

.user-reviews .title,
.user-reviews .comment {
    color: var(--tg-text) !important;
}

.user-reviews .date {
    color: var(--tg-text-muted) !important;
    border-bottom-color: var(--tg-text-muted) !important;
}

.user-ratings .progress {
    background-color: var(--tg-surface-3) !important;
}

.user-ratings .progress-bar {
    background-color: var(--tg-accent) !important;
}

/* ---- Breadcrumbs ---- */
.breadcrumbs {
    color: var(--tg-text-muted) !important;
}

.breadcrumbs a {
    color: var(--tg-text) !important;
}

/* ---- Pagination ---- */
.pagination .page-link {
    background-color: var(--tg-surface-2) !important;
    color: var(--tg-text) !important;
    border: 1px solid var(--neo-border) !important;
    border-radius: 6px !important;
    margin: 0 2px !important;
}

.page-item.active .page-link {
    background: linear-gradient(145deg, var(--tg-surface-3), var(--tg-surface-2)) !important;
    color: var(--tg-accent) !important;
    box-shadow: inset 2px 2px 5px var(--neo-dark) !important;
}

/* ---- Footer ---- */
.footer-container,
.footer-copyright {
    background-color: var(--tg-surface) !important;
    color: var(--tg-text-muted) !important;
    border-top: 1px solid var(--neo-border) !important;
}

.footer-copyright {
    border-top-color: var(--neo-border) !important;
}

.footer-copyright a,
.page-footer a {
    color: var(--tg-text) !important;
}

.page-footer .section-head {
    color: var(--tg-text) !important;
}

.twitter-footer,
.facebook-footer,
.telegram-footer,
.youtube-footer {
    fill: var(--tg-text-muted) !important;
}

.submit-app {
    background-color: var(--tg-surface-2) !important;
    color: var(--tg-text-muted) !important;
    border: 1px solid var(--neo-border) !important;
}

/* ---- Modal ---- */
.modal-content {
    background-color: var(--tg-surface) !important;
    border: 1px solid var(--neo-border) !important;
    box-shadow: 8px 8px 20px var(--neo-dark) !important;
}

.modal-body {
    color: var(--tg-text) !important;
}

.modal-title {
    color: var(--tg-text) !important;
}

.close {
    color: var(--tg-text-muted) !important;
    text-shadow: none !important;
}

/* ---- jQuery UI autocomplete ---- */
.ui-widget.ui-widget-content {
    background-color: var(--tg-surface) !important;
    border: 1px solid var(--neo-border) !important;
    box-shadow: 6px 6px 14px var(--neo-dark) !important;
}

.ui-widget-content .ui-state-active {
    background-color: var(--tg-surface-3) !important;
    color: var(--tg-text) !important;
}

.ui-autocomplete img {
    border-color: var(--neo-border) !important;
}

/* ---- Topics & news ---- */
.topic-list h1,
.topic-list h2 {
    color: var(--tg-text) !important;
}

.topic-list .description {
    color: var(--tg-text-muted) !important;
}

.topics .topic-box a {
    color: var(--tg-text) !important;
}

.news-reading-time {
    background-color: var(--tg-surface-3) !important;
    color: var(--tg-text-muted) !important;
    border: 1px solid var(--neo-border) !important;
}

/* ---- Section icons ---- */
.section-icon {
    background-color: var(--tg-surface-3) !important;
    box-shadow: 2px 2px 5px var(--neo-dark) !important;
}

.section-icon svg {
    fill: var(--tg-accent) !important;
}

/* ---- Recommended terms ---- */
.recommended-terms {
    color: var(--tg-text) !important;
}

.recommended-terms a {
    background-color: var(--tg-surface-2) !important;
    color: var(--tg-text-muted) !important;
    border: 1px solid var(--neo-border) !important;
}

.recommended-terms a:hover {
    background-color: var(--tg-surface-3) !important;
    color: var(--tg-accent) !important;
}

/* ---- Notifications ---- */
#notificationsContainer .notification {
    background-color: var(--tg-surface-2) !important;
    border: 1px solid var(--neo-border) !important;
    box-shadow: 6px 6px 14px var(--neo-dark) !important;
}

.notification .pad .message {
    color: var(--tg-text) !important;
}

.notification .progressContainer .progress {
    background-color: var(--tg-surface-3) !important;
}

/* ---- Stars ---- */
.star,
.tmp_es {
    background-color: var(--tg-surface-3) !important;
}

.fullStar,
.tmp_fs {
    background-color: var(--tg-accent) !important;
}

.checked {
    fill: var(--tg-accent) !important;
}

.star-not-checked {
    fill: var(--tg-surface-3) !important;
}

.editor-star {
    fill: var(--tg-accent) !important;
}

/* ---- Swiper ---- */
.swiper-pagination-main .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.2) !important;
}

.swiper-pagination-main .swiper-pagination-bullet-active {
    background-color: var(--tg-accent) !important;
}

/* ---- Right column / sidebar ---- */
.right-column a {
    color: var(--tg-text) !important;
}

/* ---- Mobile offcanvas ---- */
@media (max-width: 991px) {
    .offcanvas-collapse {
        background-color: var(--tg-surface) !important;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5) !important;
    }

    .dropdown-menu {
        box-shadow: none !important;
        background-color: transparent !important;
        border: none !important;
    }
}

/* ---- Tooltip ---- */
.tooltip-inner {
    background-color: var(--tg-surface-3) !important;
    color: var(--tg-text) !important;
}

.tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: var(--tg-surface-3) !important;
}

.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: var(--tg-surface-3) !important;
}

/* ---- QR code ---- */
.show-qr-code svg {
    fill: var(--tg-text-muted) !important;
}

/* ---- License badge ---- */
.topic-list .license {
    background-color: var(--tg-surface-3) !important;
    color: var(--tg-accent) !important;
    border: 1px solid var(--neo-border) !important;
}

/* ---- Alert ---- */
.alert-no-record {
    color: var(--tg-text-muted) !important;
}

/* ---- Bootstrap utility overrides ---- */
.text-dark {
    color: var(--tg-text) !important;
}

.text-muted {
    color: var(--tg-text-muted) !important;
}

.bg-light {
    background-color: var(--tg-surface-2) !important;
}

h1, h2, h3, h4, h5, h6, p, li, span, label, td, th {
    color: inherit;
}

h4 {
    color: var(--tg-text) !important;
}

.qr-code.bg-white {
    background-color: var(--tg-surface) !important;
}

#left,
#right {
    background: var(--tg-surface-3) !important;
    border: 1px solid var(--neo-border) !important;
    box-shadow: 3px 3px 8px var(--neo-dark) !important;
}

#left svg,
#right svg {
    fill: var(--tg-text) !important;
}

.up-down small.text-dark {
    color: var(--tg-text) !important;
}

.browse a.text-dark {
    color: var(--tg-text) !important;
}

.browse a.text-dark:hover {
    color: var(--tg-accent) !important;
}

/* ============================================================
   App icons — matte raised frame, image stays sharp
   ============================================================ */
.app-icon-neo,
.app-list img.lazy,
.app-list img.rounded,
.app-list .row img,
.top-apps img,
.app-details .app-image,
.topic-list .image,
.topic-item .image,
.swiper-slide .logo {
    display: block;
    border-radius: 14% !important;
    border: 1px solid var(--neo-border) !important;
    background-color: var(--tg-surface-3) !important;
    box-shadow:
        5px 5px 12px rgba(0, 0, 0, 0.5),
        -2px -2px 6px rgba(255, 255, 255, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    filter: none !important;
    opacity: 1 !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    object-fit: cover;
}

.app-list a {
    display: block;
}

.app-list a:hover .app-icon-neo,
.app-list a:hover img,
.top-apps a:hover img {
    box-shadow:
        6px 6px 14px rgba(0, 0, 0, 0.55),
        -2px -2px 7px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

/* ============================================================
   Admin embeds: ads, news, topics, sliders, settings code
   Matte spectrum — inline admin colors won't break the theme
   ============================================================ */
.matte-embed,
.matte-content,
.matte-settings-inject {
    background-color: var(--tg-surface) !important;
    border: 1px solid var(--neo-border) !important;
    border-radius: var(--card-radius) !important;
    color: var(--tg-text) !important;
    box-shadow: 5px 5px 12px var(--neo-dark), -2px -2px 6px var(--neo-light) !important;
}

.matte-embed {
    padding: 12px;
    overflow: hidden;
}

.matte-content {
    padding: 4px 0;
}

.matte-settings-inject {
    padding: 0;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.matte-settings-inject > *:not(script):not(style):not(link):not(noscript) {
    background-color: var(--tg-surface) !important;
    border: 1px solid var(--neo-border) !important;
    border-radius: var(--card-radius) !important;
    padding: 10px;
    color: var(--tg-text) !important;
}

/* Slider from admin */
.swiper-main.matte-embed {
    padding: 0 !important;
    overflow: hidden;
}

.swiper-main .img-fluid,
.swiper-main .logo {
    filter: none !important;
    opacity: 1 !important;
}

/* Topic / news preview cards — proper grid gap, no overlap */
.row.topics {
    --bs-gutter-x: 1.25rem;
    margin-bottom: 0;
}

.topics > [class*="col-"] {
    margin-bottom: var(--island-gap) !important;
}

/* Bootstrap mb-3 on news cols — don't stack huge gaps */
.topics > .mb-3 {
    margin-bottom: var(--island-gap) !important;
}

.topics .col-md-4 > a,
.topics .col-md-6 > a,
.topics .col-12 > a {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: var(--card-radius);
    overflow: hidden;
    border: 1px solid var(--neo-border);
    box-shadow: 3px 3px 9px var(--neo-dark), -2px -2px 5px var(--neo-light);
    background: var(--tg-surface);
    margin-bottom: 0;
}

.topics img.rounded-top,
.matte-media {
    filter: none !important;
    opacity: 1 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.topics .topic-box {
    background-color: var(--tg-surface-2) !important;
    color: var(--tg-text) !important;
    border-top: 1px solid var(--neo-border) !important;
    padding: 8px 10px !important;
    font-size: 13px;
    line-height: 1.35;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Section bar: title + «Ещё» on ONE line (green mark fix) */
/* Flex header only for category islands — NOT sidebar top-apps */
.matte-island:not(.top-apps) > .m-1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
}

.matte-island.top-apps > .m-1 {
    display: block !important;
}

.matte-island:not(.top-apps) > .m-1 > a.more,
.matte-island:not(.top-apps) > .m-1 > a.float-end,
.matte-island:not(.top-apps) > .m-1 > a.float-start {
    order: 2;
    float: none !important;
    flex: 0 0 auto;
    margin: 0 0 8px 8px !important;
    white-space: nowrap;
}

.matte-island:not(.top-apps) > .m-1 > .section-title {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matte-island:not(.top-apps) > .m-1 > .row,
.matte-island:not(.top-apps) > .m-1 > .app-list {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
}

.section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    clear: both;
}

.section-bar .h2-title {
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-bar > a {
    flex: 0 0 auto;
    float: none !important;
    margin: 0 !important;
    white-space: nowrap;
}

[dir="rtl"] .section-bar {
    flex-direction: row-reverse;
}

[dir="rtl"] .matte-island:not(.top-apps) > .m-1 > a.more,
[dir="rtl"] .matte-island:not(.top-apps) > .m-1 > a.float-end,
[dir="rtl"] .matte-island:not(.top-apps) > .m-1 > a.float-start {
    margin: 0 8px 8px 0 !important;
}

.section-bar + .row.topics {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.h2-title {
    margin-top: 0;
    margin-bottom: 10px;
    padding: 0 2px;
    clear: none !important;
}

a.float-end.more,
a.float-end {
    padding: 0 2px;
}

/* Harmonize inline styles from admin HTML (matte spectrum) */
.matte-embed [style*="background-color"],
.matte-embed [style*="background:"],
.matte-content [style*="background-color"],
.matte-content [style*="background:"],
.matte-content [bgcolor],
.matte-embed [bgcolor] {
    background-color: var(--tg-surface-2) !important;
    background: var(--tg-surface-2) !important;
}

.matte-embed [style*="color:"],
.matte-content [style*="color:"] {
    color: var(--tg-text) !important;
}

.matte-embed table,
.matte-content table,
.matte-embed .table,
.matte-content .table {
    background-color: var(--tg-surface-2) !important;
    color: var(--tg-text) !important;
    border-color: var(--neo-border) !important;
}

.matte-embed td,
.matte-embed th,
.matte-content td,
.matte-content th {
    background-color: transparent !important;
    color: var(--tg-text) !important;
    border-color: var(--neo-border) !important;
}

.matte-embed h1,
.matte-embed h2,
.matte-embed h3,
.matte-embed h4,
.matte-content h1,
.matte-content h2,
.matte-content h3,
.matte-content h4 {
    color: var(--tg-text) !important;
}

.matte-embed p,
.matte-embed li,
.matte-embed span,
.matte-content p,
.matte-content li,
.matte-content span,
.matte-content div {
    color: inherit;
}

.matte-embed a,
.matte-content a {
    color: var(--tg-accent) !important;
}

.matte-embed img,
.matte-content img,
.matte-embed iframe,
.matte-content iframe,
.matte-embed video,
.matte-content video {
    filter: none !important;
    opacity: 1 !important;
    max-width: 100%;
}

.matte-embed img,
.matte-content img {
    border-radius: 8px;
    border: 1px solid var(--neo-border);
}

.matte-embed pre,
.matte-embed code,
.matte-content pre,
.matte-content code {
    background-color: var(--tg-surface-3) !important;
    color: var(--tg-text) !important;
    border: 1px solid var(--neo-border) !important;
    border-radius: 6px;
}

.matte-embed .btn,
.matte-content .btn,
.matte-embed button:not(.add-favorites),
.matte-content button:not(.add-favorites) {
    background: linear-gradient(145deg, var(--tg-surface-3), var(--tg-surface)) !important;
    color: var(--tg-text) !important;
    border: 1px solid var(--neo-border) !important;
    box-shadow: 3px 3px 8px var(--neo-dark), -1px -1px 4px var(--neo-light) !important;
}

.matte-embed input,
.matte-embed textarea,
.matte-embed select,
.matte-content input,
.matte-content textarea,
.matte-content select {
    background-color: var(--tg-surface-2) !important;
    color: var(--tg-text) !important;
    border-color: var(--neo-border) !important;
}

/* App description from admin */
.app-description .description {
    color: var(--tg-text) !important;
}

.app-description .description [style*="background"],
.app-description .description [style*="color"] {
    background: transparent !important;
    color: inherit !important;
}

/* Bootstrap alerts inside content */
.matte-content .alert,
.matte-embed .alert {
    background-color: var(--tg-surface-2) !important;
    color: var(--tg-text) !important;
    border-color: var(--neo-border) !important;
}

.alert-warning {
    background-color: var(--tg-surface-2) !important;
    color: var(--tg-text) !important;
    border-color: rgba(106, 179, 243, 0.2) !important;
}

/* ============================================================
   Layout calibration — mobile gutters & desktop spacing
   ============================================================ */
/* Only matte-island margin — avoid double gaps (red marks) */
.col-md-9 > .shadow-sm:not(.matte-island),
.col-md-9 > .matte-embed:not(.matte-island) {
    margin-bottom: var(--island-gap) !important;
}

.col-md-9 > .matte-embed.matte-island {
    margin-bottom: var(--island-gap) !important;
}

.col-md-9 .app-list.featured {
    row-gap: 10px;
}

.col-md-9 .app-list.featured > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}


/* App cell: [icon] [★★★★★ column] then title/developer below */
.app-feed-row,
.app-feed-row-list {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 4px;
    row-gap: 4px;
    align-items: start;
    margin: 0;
    text-align: left;
}

.app-feed-icon,
.app-feed-row-list .app-feed-icon {
    grid-column: 1;
    grid-row: 1;
    flex: 0 0 auto;
    width: 52px;
    max-width: 52px;
    align-self: start;
}

.app-feed-icon img {
    width: 100% !important;
    height: auto !important;
    max-width: 52px !important;
    display: block;
    margin: 0 !important;
}

/* Stars: one vertical column immediately right of the icon */
.app-feed-rating {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    line-height: 1;
    margin: 0;
    padding: 0;
    white-space: normal;
    overflow: visible;
    align-self: start;
}

.app-feed-rating .star,
.app-feed-rating svg,
.app-feed-rating .checked,
.app-feed-rating .star-not-checked,
.app-feed-rating .editor-star {
    float: none !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    margin: 0 !important;
}

.app-feed-rating .votes {
    display: block;
    font-size: 10px;
    line-height: 1;
    margin: 2px 0 0 !important;
    text-align: center;
    color: var(--tg-text-muted) !important;
}

.app-feed-meta,
.app-feed-row-list .app-feed-meta {
    grid-column: 1 / -1;
    grid-row: 2;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    align-self: start;
    padding-top: 2px;
}

.app-feed-meta .title {
    display: block;
    font-size: 13px;
    line-height: 1.25;
    margin: 0 0 3px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-feed-meta .developer,
.app-feed-meta .date {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    color: var(--tg-text-muted) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-grid-item {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Sidebar popular — icon | vertical stars | text */
.top-apps > .m-1 > a:not(.more):not(.float-end):not(.float-start) {
    display: block;
    width: 100%;
    clear: both;
}

.app-feed-row-list .app-feed-icon {
    width: 48px;
    max-width: 48px;
}

.app-feed-row-list .app-feed-icon img {
    max-width: 44px !important;
    width: 44px !important;
}

/* Lighter icon frames in dense grids (image stays sharp) */
.app-list.featured img,
.app-list .col-4 img {
    box-shadow:
        3px 3px 8px rgba(0, 0, 0, 0.45),
        -1px -1px 4px rgba(255, 255, 255, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Swiper must not break out of screen on mobile */
.swiper-container.swiper-main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100%;
}

.swiper-main.matte-embed {
    box-shadow: 3px 3px 9px var(--neo-dark), -2px -2px 5px var(--neo-light) !important;
}

.extend-navbar {
    padding-left: var(--page-gutter-mobile) !important;
    padding-right: var(--page-gutter-mobile) !important;
}

@media (max-width: 767.98px) {
    body .container.my-3,
    body > .container,
    .footer-container .container,
    .navbar .container {
        padding-left: var(--page-gutter-mobile) !important;
        padding-right: var(--page-gutter-mobile) !important;
    }

    .col-md-9,
    .col-md-3 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Don't zero padding on grid cols — breaks 3-column layout */
    .app-list.row > [class*="col-"],
    .app-list.featured > [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .col-md-9 .m-1,
    .shadow-sm .m-1 {
        padding-left: 4px;
        padding-right: 4px;
    }

    .matte-island,
    .shadow-sm.p-2 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .app-list.featured > [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* 3 per row + feed inside each cell */
    .app-list > .col-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-bottom: 10px !important;
    }

    .app-feed-row,
    .app-feed-row-list {
        grid-template-columns: auto 1fr;
        column-gap: 3px;
        row-gap: 3px;
    }

    .app-feed-icon {
        width: 36px;
        max-width: 36px;
    }

    .app-feed-icon img {
        max-width: 36px !important;
    }

    .app-feed-meta .title {
        font-size: 10px;
    }

    .app-feed-rating .star,
    .app-feed-rating svg {
        width: 8px !important;
        height: 8px !important;
        min-width: 8px !important;
        min-height: 8px !important;
    }

    .app-feed-rating {
        gap: 0;
    }

    .app-feed-meta .developer,
    .app-feed-meta .date {
        font-size: 9px;
    }

    .top-apps .col-3 {
        flex: 0 0 48px;
        max-width: 48px;
        width: 48px;
    }

    .top-apps img {
        max-width: 44px !important;
        width: 44px !important;
        height: 44px !important;
    }

    .section-title {
        padding: 5px 8px !important;
        margin-bottom: 8px !important;
        font-size: 14px;
    }

    .row.topics {
        --bs-gutter-x: 14px;
    }

    .topics > [class*="col-"] {
        padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
        padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
    }

    .topics .col-md-6,
    .topics .col-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .matte-embed {
        padding: 8px !important;
    }

    .col-md-3.sidebar-islands {
        margin-top: var(--island-gap) !important;
        padding-top: 0 !important;
        gap: var(--sidebar-gap);
    }

    .section-bar {
        margin-bottom: 8px;
    }
}

@media (min-width: 768px) {
    .extend-navbar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .container .row > .col-md-9.pe-md-2 {
        padding-right: 20px !important;
    }

    .container .row > .col-md-3.sidebar-islands {
        padding-left: 20px !important;
        padding-right: 10px !important;
        border-left: none !important;
    }

    .row.topics {
        --bs-gutter-x: 1.25rem;
    }

    .topics .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .topics .col-md-6 > a {
        margin-left: auto;
        margin-right: auto;
    }

    .app-icon-neo,
    .app-list img,
    .top-apps img {
        box-shadow:
            4px 4px 10px rgba(0, 0, 0, 0.48),
            -2px -2px 5px rgba(255, 255, 255, 0.035),
            inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    }
}

@media (min-width: 992px) {
    .container .row > .col-md-9.pe-md-2 {
        padding-right: 24px !important;
    }

    .container .row > .col-md-3.sidebar-islands {
        padding-left: 24px !important;
        padding-right: 12px !important;
    }

    .row.topics {
        --bs-gutter-x: 1.35rem;
    }

    .app-list.featured .col-md-1-5 {
        padding-left: 6px;
        padding-right: 6px;
    }
}