/* ================================================
   DAILYSPORTS.NET CLONE — DLE Theme
   Folder: varim
   ================================================ */

:root {
    --header-bg: #1a1a1a;
    --color-green: #e8192c;
    --color-green-dark: #c0111f;
    --color-bg: #f5f6fa;
    --color-white: #ffffff;
    --color-text: #1a1a1a;
    --color-text-muted: #6b7280;
    --color-text-light: #9ca3af;
    --color-border: #e5e7eb;
    --color-bg-elevated: #ffffff;
    --color-bg-card: #ffffff;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.12);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --header-h: 58px;
    --container: 1240px;
    --radius: 8px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; overscroll-behavior-x: none; }
body {
    font-family: var(--font);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; padding: 0; }

/* ── Skip-link a11y (CAB-POLISH Part 2 — WCAG 2.4.1) ─────────── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-green, #e8192c);
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    text-decoration: none;
    font: 600 14px/1 var(--font);
    border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus,
.skip-link:focus-visible {
    left: 0;
    outline: 2px solid #fff;
    outline-offset: -2px;
}
.sr-only-focusable {
    /* alias for compatibility */
    position: absolute; left: -9999px;
}
.sr-only-focusable:focus { left: 0; }

/* ---- Container ---- */
.dsn-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

/* ================================================
   HEADER
   ================================================ */
.dsn-header {
    background: var(--header-bg);
    color: rgba(255,255,255,0.75);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.dsn-header__inner {
    display: flex;
    align-items: center;
    height: var(--header-h);
    gap: 20px;
}

/* Logo */
.dsn-logo { flex-shrink: 0; }
.dsn-logo-img-link { flex-shrink: 0; }
.dsn-logo__text {
    font-size: 23px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
}
.dsn-logo__ball {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--color-green);
    border-radius: 50%;
    margin: 0 1px;
    font-style: normal;
    font-size: 12px;
    position: relative;
    overflow: hidden;
}
.dsn-logo__ball::before { content: '⚽'; font-size: 14px; }
.dsn-logo--footer .dsn-logo__text { font-size: 20px; }

/* Nav */
.dsn-nav { flex: 1; min-width: 0; }
.dsn-nav__list {
    display: flex;
    align-items: center;
    gap: 2px;
}
.dsn-nav__item { position: relative; }
.dsn-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 11px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    border-radius: 5px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.dsn-nav__link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.dsn-nav-live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e8192c;
    flex-shrink: 0;
    animation: navLivePulse 1.4s ease-in-out infinite;
}
@keyframes navLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .35; transform: scale(.65); }
}
.dsn-nav__link--arrow::after {
    content: '';
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.65;
    flex-shrink: 0;
}
.dsn-nav__item--active > .dsn-nav__link { color: var(--color-green); }

/* Dropdown — тёмный фон, т.к. выходит из тёмного хедера */
.dsn-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #2a2a2a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
    box-shadow: 0 8px 28px rgba(0,0,0,0.55);
    /* padding-top создаёт визуальный зазор без разрыва hover-зоны */
    padding: 10px 0 6px;
    z-index: 500;
}
/* Прозрачный мост — мышь не теряет hover при переходе из ссылки в дропдаун */
.dsn-nav__item--dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
    display: none;
}
.dsn-nav__item--dropdown:hover::after { display: block; }
.dsn-nav__item--dropdown:hover .dsn-dropdown { display: block; }
.dsn-dropdown li a {
    display: block;
    padding: 9px 16px;
    font-size: 14px;
    color: rgba(255,255,255,0.82);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.dsn-dropdown li a:hover { background: rgba(255,255,255,0.08); color: var(--color-green); }

/* Header controls */
.dsn-header__controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    position: relative;
}
.dsn-search-btn {
    min-width: 44px; min-height: 44px;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.8);
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.dsn-search-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

.dsn-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    min-height: 44px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 20px;
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.dsn-login-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
.dsn-login-btn--admin { border-color: var(--color-green); color: var(--color-green); }
.dsn-login-btn--admin:hover { background: rgba(232,25,44,0.10); }

/* ── Mobile horizontal nav bar ── */
.dsn-mobile-nav-bar {
    display: none;
    border-top: 1px solid rgba(255,255,255,.06);
}
.dsn-mnb-item {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.72);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    text-decoration: none;
}
.dsn-mnb-item:hover,
.dsn-mnb-item--active { color: #fff; border-bottom-color: #e8192c; }
.dsn-mnb-live-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #e8192c;
    margin-left: 4px;
    flex-shrink: 0;
    animation: navLivePulse 1.4s ease-in-out infinite;
}
@media (max-width: 900px) {
    .dsn-mobile-nav-bar {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
    }
    .dsn-mobile-nav-bar::-webkit-scrollbar { display: none; }
}

/* Search bar */
.dsn-search-bar {
    display: none;
    padding: 10px 0 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    position: relative;
}
.dsn-search-bar.open { display: block; }
.dsn-search-form { display: flex; gap: 8px; }
.dsn-search-input {
    flex: 1;
    padding: 10px 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 15px;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.15s;
}
.dsn-search-input::placeholder { color: rgba(255,255,255,0.4); }
.dsn-search-input:focus { border-color: var(--color-green); }
.dsn-search-submit {
    padding: 10px 22px;
    background: var(--color-green);
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: background 0.15s;
}
.dsn-search-submit:hover { background: var(--color-green-dark); }
.dsn-search-close {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.6);
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.dsn-search-close:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* ── Live Search Dropdown ───────────────────────── */
.dsn-search-dropdown {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: #1a1d2e;
    border: 1px solid rgba(255,255,255,.1);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 420px;
    overflow-y: auto;
    z-index: 200;
    box-shadow: 0 12px 24px rgba(0,0,0,.5);
}
.dsn-search-dropdown:empty { display: none; }
.dsn-sd-group { padding: 0; }
.dsn-sd-group__label {
    font-size: 10px; font-weight: 700; color: #4b5563;
    text-transform: uppercase; letter-spacing: .06em;
    padding: 10px 16px 4px;
}
.dsn-sd-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 16px;
    text-decoration: none;
    color: #d1d5db;
    transition: background .1s;
    border-radius: 0;
}
.dsn-sd-item:hover, .dsn-sd-item.active { background: rgba(255,255,255,.06); color: #f9fafb; }
.dsn-sd-item__img {
    width: 24px; height: 24px; object-fit: contain; flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
.dsn-sd-item__icon {
    width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
    color: #4b5563; flex-shrink: 0;
}
.dsn-sd-item__text { flex: 1; min-width: 0; }
.dsn-sd-item__title {
    font-size: 13px; font-weight: 600; color: #f3f4f6;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dsn-sd-item__sub {
    font-size: 11px; color: #6b7280; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dsn-sd-divider { height: 1px; background: rgba(255,255,255,.05); margin: 2px 0; }
.dsn-sd-empty { padding: 20px 16px; text-align: center; font-size: 13px; color: #6b7280; }

/* ================================================
   MAIN LAYOUT
   ================================================ */
.dsn-main { padding: 24px 0 48px; }
.dsn-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    align-items: start;
}
.dsn-layout > * { min-width: 0; }
.dsn-page-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
}
.dsn-breadcrumbs {
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--color-text-muted);
}
.dsn-breadcrumbs a { color: var(--color-text-muted); transition: color 0.15s; }
.dsn-breadcrumbs a:hover { color: var(--color-green); }
.dsn-breadcrumbs .speed_bar a,
.dsn-breadcrumbs .speed_bar span { color: var(--color-text-muted); }
.dsn-breadcrumbs .speed_bar a:hover { color: var(--color-green); }

/* Section header */
.dsn-section-header { margin-bottom: 20px; }
.dsn-section-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.dsn-filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.dsn-filter-tab {
    padding: 5px 14px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--color-text-muted);
    background: var(--color-white);
    transition: all 0.15s;
}
.dsn-filter-tab:hover,
.dsn-filter-tab.active {
    border-color: var(--color-green);
    color: var(--color-green);
    background: rgba(232,25,44,0.04);
}

/* ================================================
   NEWS FEED — COMPLEX GRID LAYOUT
   ================================================ */
/*
  Layout:
  — Card 1 (featured):   cols 1-4 of 6, rows 1-4
  — Cards 2-5 (compact): col 5-6 of 6, stacked
  — Cards 6+ (grid):     span 2 → 3 per row
*/
/* Generic page content wrapper (non-news pages: feedback, stats, pm, etc.) */
.dsn-page-content {
    width: 100%;
}

.dsn-news-feed {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    max-width: 100%;
}
.dsn-card:nth-child(1)  { grid-column: 1 / 5; grid-row: 1 / 5; }
.dsn-card:nth-child(2)  { grid-column: 5 / 7; grid-row: 1; }
.dsn-card:nth-child(3)  { grid-column: 5 / 7; grid-row: 2; }
.dsn-card:nth-child(4)  { grid-column: 5 / 7; grid-row: 3; }
.dsn-card:nth-child(5)  { grid-column: 5 / 7; grid-row: 4; }
.dsn-card:nth-child(n+6){ grid-column: span 2; }

/* ---- Base card ---- */
.dsn-card {
    background: var(--color-white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
}
.dsn-card:hover { box-shadow: var(--shadow-card-hover); }

/* Category badge */
.dsn-cat-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #fff;
    background: var(--color-green);
    white-space: nowrap;
}
.dsn-cat-badge--sm { font-size: 10px; padding: 2px 6px; }
.dsn-cat-badge--text { /* used inside card body */ }

/* Image wrap overlay badge */
.dsn-card__img-wrap {
    position: relative;
    display: block;
    overflow: hidden;
}
.dsn-card__img-wrap .dsn-cat-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1;
}
.dsn-card__img-wrap--noimg { background: linear-gradient(135deg, #2c3e50, #3498db); }

/* ---- FEATURED card (1st) ---- */
.dsn-card:nth-child(1) .dsn-card__img-wrap { height: 280px; }
.dsn-card:nth-child(1) .dsn-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.dsn-card:nth-child(1):hover .dsn-card__img { transform: scale(1.03); }
.dsn-card:nth-child(1) .dsn-card__img-wrap--noimg { height: 280px; }
.dsn-card:nth-child(1) .dsn-card__body { padding: 16px 18px; flex: 1; }
.dsn-card:nth-child(1) .dsn-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.dsn-card:nth-child(1) .dsn-card__time { font-size: 12px; color: var(--color-text-muted); }
.dsn-card:nth-child(1) .dsn-card__title { font-size: 21px; font-weight: 700; line-height: 1.3; }
.dsn-card:nth-child(1) .dsn-card__title a { color: var(--color-text); transition: color 0.15s; }
.dsn-card:nth-child(1) .dsn-card__title a:hover { color: var(--color-green); }
.dsn-card:nth-child(1) .dsn-card__excerpt { display: none; }
.dsn-card:nth-child(1) .dsn-card__footer { display: none; }

/* ---- COMPACT cards (2nd–5th) ---- */
.dsn-card:nth-child(2),
.dsn-card:nth-child(3),
.dsn-card:nth-child(4),
.dsn-card:nth-child(5) { flex-direction: row; align-items: stretch; }

.dsn-card:nth-child(2) .dsn-card__img-wrap,
.dsn-card:nth-child(3) .dsn-card__img-wrap,
.dsn-card:nth-child(4) .dsn-card__img-wrap,
.dsn-card:nth-child(5) .dsn-card__img-wrap {
    order: 2;
    flex-shrink: 0;
    width: 90px;
    overflow: hidden;
}
.dsn-card:nth-child(2) .dsn-card__img,
.dsn-card:nth-child(3) .dsn-card__img,
.dsn-card:nth-child(4) .dsn-card__img,
.dsn-card:nth-child(5) .dsn-card__img { width: 90px; height: 100%; object-fit: cover; }

.dsn-card:nth-child(2) .dsn-card__img-wrap--noimg,
.dsn-card:nth-child(3) .dsn-card__img-wrap--noimg,
.dsn-card:nth-child(4) .dsn-card__img-wrap--noimg,
.dsn-card:nth-child(5) .dsn-card__img-wrap--noimg { width: 90px; }

/* Hide overlay badge on compact, show inline */
.dsn-card:nth-child(2) .dsn-card__img-wrap .dsn-cat-badge,
.dsn-card:nth-child(3) .dsn-card__img-wrap .dsn-cat-badge,
.dsn-card:nth-child(4) .dsn-card__img-wrap .dsn-cat-badge,
.dsn-card:nth-child(5) .dsn-card__img-wrap .dsn-cat-badge { display: none; }

.dsn-card:nth-child(2) .dsn-card__body,
.dsn-card:nth-child(3) .dsn-card__body,
.dsn-card:nth-child(4) .dsn-card__body,
.dsn-card:nth-child(5) .dsn-card__body {
    order: 1;
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}
.dsn-card:nth-child(2) .dsn-card__meta,
.dsn-card:nth-child(3) .dsn-card__meta,
.dsn-card:nth-child(4) .dsn-card__meta,
.dsn-card:nth-child(5) .dsn-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.dsn-card:nth-child(2) .dsn-card__time,
.dsn-card:nth-child(3) .dsn-card__time,
.dsn-card:nth-child(4) .dsn-card__time,
.dsn-card:nth-child(5) .dsn-card__time { font-size: 11px; color: var(--color-text-muted); }

.dsn-card:nth-child(2) .dsn-card__title,
.dsn-card:nth-child(3) .dsn-card__title,
.dsn-card:nth-child(4) .dsn-card__title,
.dsn-card:nth-child(5) .dsn-card__title {
    font-size: 13px; font-weight: 600; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.dsn-card:nth-child(2) .dsn-card__title a,
.dsn-card:nth-child(3) .dsn-card__title a,
.dsn-card:nth-child(4) .dsn-card__title a,
.dsn-card:nth-child(5) .dsn-card__title a { color: var(--color-text); transition: color 0.15s; }
.dsn-card:nth-child(2) .dsn-card__title a:hover,
.dsn-card:nth-child(3) .dsn-card__title a:hover,
.dsn-card:nth-child(4) .dsn-card__title a:hover,
.dsn-card:nth-child(5) .dsn-card__title a:hover { color: var(--color-green); }

.dsn-card:nth-child(2) .dsn-card__excerpt,
.dsn-card:nth-child(3) .dsn-card__excerpt,
.dsn-card:nth-child(4) .dsn-card__excerpt,
.dsn-card:nth-child(5) .dsn-card__excerpt,
.dsn-card:nth-child(2) .dsn-card__footer,
.dsn-card:nth-child(3) .dsn-card__footer,
.dsn-card:nth-child(4) .dsn-card__footer,
.dsn-card:nth-child(5) .dsn-card__footer { display: none; }

/* ---- GRID cards (6+) ---- */
.dsn-card:nth-child(n+6) .dsn-card__img-wrap { height: 155px; }
.dsn-card:nth-child(n+6) .dsn-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.dsn-card:nth-child(n+6):hover .dsn-card__img { transform: scale(1.05); }
.dsn-card:nth-child(n+6) .dsn-card__img-wrap--noimg { height: 155px; }
.dsn-card:nth-child(n+6) .dsn-card__body { padding: 12px; flex: 1; }
.dsn-card:nth-child(n+6) .dsn-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 7px; }
.dsn-card:nth-child(n+6) .dsn-card__time { font-size: 12px; color: var(--color-text-muted); }
.dsn-card:nth-child(n+6) .dsn-card__title {
    font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dsn-card:nth-child(n+6) .dsn-card__title a { color: var(--color-text); transition: color 0.15s; }
.dsn-card:nth-child(n+6) .dsn-card__title a:hover { color: var(--color-green); }
.dsn-card:nth-child(n+6) .dsn-card__excerpt { display: none; }
.dsn-card:nth-child(n+6) .dsn-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid var(--color-bg);
}
.dsn-card__stats { display: flex; align-items: center; gap: 10px; }
.dsn-card__stat { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-text-muted); }

/* Pagination */
.dsn-pagination { margin-top: 28px; }
.dsn-pagination .navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.dsn-pagination .navigation a,
.dsn-pagination .navigation span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    padding: 8px 12px;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-white);
    transition: all 0.15s;
    text-decoration: none;
}
.dsn-pagination .navigation a:hover { border-color: var(--color-green); color: var(--color-green); }
.dsn-pagination .navigation a:focus-visible,
.dsn-pagination .navigation .dsn-pagination__arrow:focus-visible {
    outline: 2px solid var(--color-green, #0066ff);
    outline-offset: 2px;
}
.dsn-pagination .navigation .current-page,
.dsn-pagination .navigation .pages {
    background: var(--color-green);
    border-color: var(--color-green);
    color: #fff;
}
.dsn-pagination__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dsn-pagination__arrow[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.dsn-pagination__ellipsis {
    min-width: 32px !important;
    min-height: 44px;
    padding: 8px 4px !important;
    text-align: center;
    color: var(--color-text-muted, #94a3b8);
    user-select: none;
    border: none !important;
    background: transparent !important;
}

/* ================================================
   SIDEBAR
   ================================================ */
.dsn-sidebar { position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 20px; }

.dsn-widget { background: var(--color-white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.dsn-widget__head { padding: 14px 16px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.dsn-widget__title {
    font-size: 15px; font-weight: 700;
    display: flex; align-items: center; gap: 7px;
}
.dsn-widget__more { font-size: 12px; font-weight: 600; color: var(--color-green); text-decoration: none; }
.dsn-widget__more:hover { text-decoration: underline; }
.dsn-widget__body--transfers { padding: 0; }
.dsn-widget__body { padding: 16px; }
.dsn-widget__body--table { padding: 14px; }
.dsn-widget__body--pred { padding: 0; }
.dsn-widget__body--bk { padding: 0; }

/* ---- Predictions widget ---- */
.dsn-pw-match {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    color: inherit;
    transition: background .1s;
}
.dsn-pw-match:last-child { border-bottom: none; }
.dsn-pw-match:hover { background: #f9fafb; }
.dsn-pw-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.dsn-pw-time { font-size: 11px; font-weight: 700; color: #9ca3af; flex-shrink: 0; min-width: 34px; }
.dsn-pw-teams { flex: 1; min-width: 0; }
.dsn-pw-team {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
}
.dsn-pw-team img { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
.dsn-pw-odds { display: flex; gap: 4px; flex-shrink: 0; }
.dsn-pw-odd {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f3f4f6;
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 9px;
    color: #9ca3af;
    line-height: 1.2;
    min-width: 32px;
    text-align: center;
}
.dsn-pw-odd b { font-size: 11px; color: #111827; display: block; }
.dsn-pw-odd--x { background: #fef3c7; }
.dsn-pw-odd--x b { color: #92400e; }
.dsn-pw-empty { padding: 14px 16px; font-size: 12px; color: #9ca3af; text-align: center; }
.dsn-pw-match-wrap { border-bottom: 1px solid #f3f4f6; }
.dsn-pw-match-wrap:last-child { border-bottom: none; }
.dsn-pw-match-wrap .dsn-pw-match { border-bottom: none; }
.dsn-pw-bet-btn {
    display: block;
    margin: 0 10px 8px;
    padding: 5px 10px;
    background: linear-gradient(135deg, #1a7f37, #22a347);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    letter-spacing: .3px;
    transition: opacity .15s;
}
.dsn-pw-bet-btn:hover { opacity: .85; }

/* ---- Betting Sites widget ---- */
.dsn-bk-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid #f3f4f6;
}
.dsn-bk-row:last-of-type { border-bottom: none; }
.dsn-bk-rank {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: #f3f4f6;
    font-size: 11px;
    font-weight: 800;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dsn-bk-info { flex: 1; min-width: 0; }
.dsn-bk-name { font-size: 13px; font-weight: 700; color: #111827; }
.dsn-bk-bonus { font-size: 11px; color: #6b7280; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsn-bk-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.dsn-bk-stars { font-size: 11px; color: #f59e0b; letter-spacing: -1px; }
.dsn-bk-btn {
    display: inline-block;
    padding: 4px 10px;
    background: #e8192c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 5px;
    text-decoration: none;
    transition: background .15s;
}
.dsn-bk-btn:hover { background: #c41525; }
.dsn-bk-all {
    display: block;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #e8192c;
    text-decoration: none;
    text-align: center;
    border-top: 1px solid #f3f4f6;
}
.dsn-bk-all:hover { text-decoration: underline; }

/* ---- Top Leagues widget ---- */
.dsn-widget__body--leagues { padding: 8px 0; }
.dsn-league-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    text-decoration: none;
    color: var(--color-text);
    transition: background 0.12s;
}
.dsn-league-item:hover { background: rgba(0,0,0,0.03); }
.dsn-league-item__logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}
.dsn-league-item__name { font-size: 14px; font-weight: 500; }
.dsn-league-item__all {
    display: block;
    margin: 6px 16px 8px;
    padding: 8px 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    border: 1.5px solid var(--color-border);
    border-radius: 6px;
    transition: all 0.15s;
}
.dsn-league-item__all:hover { border-color: var(--color-green); color: var(--color-green); }

/* ---- Leagues dropdown with logos ---- */
.dsn-dropdown--leagues { min-width: 220px; }
.dsn-dropdown--leagues li a {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dsn-dropdown__league-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(255,255,255,0.92);
    border-radius: 5px;
    padding: 3px;
    box-sizing: content-box;
}
.dsn-dropdown__all-link {
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 4px;
}
.dsn-dropdown__all-link a {
    color: var(--color-green) !important;
    font-size: 13px !important;
    padding: 10px 16px !important;
}

/* ---- Teams dropdown ---- */
.dsn-dropdown--teams {
    min-width: 220px;
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) transparent;
}
.dsn-dropdown--teams li a {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dsn-dropdown__section-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.3);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 10px 16px 4px;
    pointer-events: none;
    border-top: 1px solid rgba(255,255,255,.06);
}
.dsn-dropdown--teams li:first-child.dsn-dropdown__section-label {
    border-top: none;
    padding-top: 6px;
}

/* Tournament table */
.dsn-league-select {
    width: 100%; padding: 8px 12px;
    border: 1px solid var(--color-border); border-radius: 6px;
    font-size: 13px; color: var(--color-text);
    background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none; appearance: none;
    margin-bottom: 12px; cursor: pointer; outline: none;
    font-family: var(--font);
}
.dsn-league-select:focus { border-color: var(--color-green); }

.dsn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dsn-table thead th {
    text-align: left; padding: 4px 4px 8px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
}
.dsn-table__th-mp, .dsn-table__th-pts { text-align: right; }
.dsn-table tbody tr { border-bottom: 1px solid #f3f4f6; transition: background 0.12s; }
.dsn-table tbody tr:hover { background: #f9fafb; }
.dsn-table tbody tr:last-child { border-bottom: none; }
.dsn-table td { padding: 7px 4px; vertical-align: middle; }
.dsn-table__num { color: var(--color-text-muted); font-size: 12px; width: 18px; }
.dsn-table__team { display: flex; align-items: center; gap: 7px; }
.dsn-table__team--link { text-decoration: none; cursor: pointer; }
.dsn-table__team--link:hover .dsn-table__team-name { color: var(--color-green); text-decoration: underline; }
.dsn-table__team-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dsn-table__team-logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.dsn-table__loading td { text-align: center; color: var(--color-text-muted); font-size: 13px; padding: 16px 0; }
.dsn-standings-error { font-size: 12px; color: #e05454; padding: 8px 0; }
.dsn-table__team-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.dsn-table__mp { text-align: right; color: var(--color-text-muted); font-size: 12px; }
.dsn-table__pts { text-align: right; font-weight: 700; }
.dsn-table__more {
    display: block; margin-top: 12px; text-align: right;
    font-size: 13px; color: var(--color-green); font-weight: 500;
    transition: opacity 0.15s;
}
.dsn-table__more:hover { opacity: 0.75; }

/* Top news */
.dsn-widget__body--topnews { counter-reset: topnews; }
.dsn-topnews-item { padding: 10px 0; border-bottom: 1px solid #f3f4f6; counter-increment: topnews; }
.dsn-topnews-item:last-child { border-bottom: none; padding-bottom: 0; }
.dsn-topnews-item__body {
    display: flex; align-items: flex-start; gap: 10px;
}
.dsn-topnews-item__body::before {
    content: counter(topnews);
    flex-shrink: 0; width: 22px; height: 22px;
    background: var(--color-green); color: #fff;
    border-radius: 50%;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.dsn-topnews-item__img-wrap { flex-shrink: 0; width: 52px; height: 40px; border-radius: 4px; overflow: hidden; }
.dsn-topnews-item__img { width: 100%; height: 100%; object-fit: cover; }
.dsn-topnews-item__text { flex: 1; min-width: 0; }
.dsn-topnews-item__title {
    display: block; font-size: 13px; font-weight: 500; line-height: 1.4;
    color: var(--color-text); transition: color 0.15s;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dsn-topnews-item__title:hover { color: var(--color-green); }
.dsn-topnews-item__meta { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }
.dsn-topnews-item__cat { font-weight: 600; }

/* Sidebar comments */
.dsn-sidebar-comment { padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.dsn-sidebar-comment:last-child { border-bottom: none; padding-bottom: 0; }
.dsn-sidebar-comment__meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; align-items: center; }
.dsn-sidebar-comment__author { font-weight: 600; color: var(--color-green); }
.dsn-sidebar-comment__news { color: var(--color-text-muted); transition: color 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; display: block; }
.dsn-sidebar-comment__news:hover,
.dsn-sidebar-comment__news a:hover { color: var(--color-green); }
.dsn-sidebar-comment__news a { color: inherit; text-decoration: none; }
.dsn-sidebar-comment__text {
    font-size: 13px; line-height: 1.45; color: var(--color-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Tags cloud */
.dsn-tags-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.dsn-tags-cloud a {
    padding: 4px 10px;
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: 20px; font-size: 12px; color: var(--color-text-muted);
    transition: all 0.15s;
}
.dsn-tags-cloud a:hover { border-color: var(--color-green); color: var(--color-green); background: rgba(232,25,44,0.04); }

/* ================================================
   FULL ARTICLE
   ================================================ */
.dsn-article-wrap { display: flex; flex-direction: column; gap: 24px; }
.dsn-article {
    background: var(--color-white);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow-card);
}
.dsn-article__cat { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dsn-article__title { font-size: 27px; font-weight: 800; line-height: 1.25; margin-bottom: 16px; }
.dsn-article__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    margin-bottom: 22px; padding-bottom: 18px;
    border-bottom: 1px solid var(--color-border);
    font-size: 13px; color: var(--color-text-muted);
}
.dsn-article__meta-item { display: flex; align-items: center; gap: 5px; }
.dsn-article__meta-item a { color: var(--color-text-muted); transition: color 0.15s; }
.dsn-article__meta-item a:hover { color: var(--color-green); }
.dsn-article__meta-sep { color: var(--color-text-light); }
.dsn-article__figure { margin-bottom: 24px; border-radius: var(--radius); overflow: hidden; }
.dsn-article__img { width: 100%; max-height: 480px; object-fit: cover; }
.dsn-article__content { font-size: 16px; line-height: 1.8; color: #2d3748; }
.dsn-article__content p { margin-bottom: 16px; }
.dsn-article__content h2 { font-size: 22px; font-weight: 700; margin: 28px 0 12px; }
.dsn-article__content h3 { font-size: 18px; font-weight: 600; margin: 22px 0 10px; }
.dsn-article__content img { border-radius: 6px; margin: 16px 0; max-width: 100%; }
.dsn-article__content a { color: var(--color-green); }
.dsn-article__content a:hover { text-decoration: underline; }
.dsn-article__content ul, .dsn-article__content ol { padding-left: 22px; margin-bottom: 16px; }
.dsn-article__content ul { list-style: disc; }
.dsn-article__content ol { list-style: decimal; }
.dsn-article__content li { margin-bottom: 6px; }
.dsn-article__content blockquote {
    border-left: 3px solid var(--color-green);
    padding: 12px 20px; background: #f0fdf4;
    margin: 20px 0; border-radius: 0 6px 6px 0;
    font-style: italic; color: #374151;
}
.dsn-article__tags {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border);
}
.dsn-article__tags-label { font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.dsn-article__tags a {
    padding: 4px 12px;
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: 20px; font-size: 13px; color: var(--color-text-muted);
    transition: all 0.15s;
}
.dsn-article__tags a:hover { border-color: var(--color-green); color: var(--color-green); }

/* Share */
.dsn-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.dsn-share__label { font-size: 14px; font-weight: 600; color: var(--color-text-muted); }
.dsn-share__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.dsn-share-btn {
    display: inline-flex !important; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 6px;
    font-size: 13px; font-weight: 600; color: #fff !important;
    text-decoration: none !important;
    transition: opacity 0.15s;
}
.dsn-share-btn:hover { opacity: 0.85; }
.dsn-share-btn--tw { background: #111 !important; }
.dsn-share-btn--fb { background: #1877f2 !important; }
.dsn-share-btn--tg { background: #229ed9 !important; }
.dsn-share-btn--wa { background: #25d366 !important; }

/* Article rating */
.dsn-article__rating { margin-top: 18px; }

/* ---- DLE Star Rating (type 1) ---- */
.rating, .unit-rating { width: 115px; height: 23px; }
.rating { font-size: 11px; }
.unit-rating, .unit-rating li a:hover, .unit-rating li.current-rating {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAACKBAMAAAAnGmX8AAAALVBMVEX///+RkZH+12L/w0//7cP/5aj+24X/+u7/9d2tra3Jycne3t7/zGn5+fnx8fHkdmbhAAACEUlEQVRIx+2UuUsDQRTGF+8bp4yiyKDRUhiNFikW73LxwsIiRETL4F2KilpYmFYQklIE0VYbIQQsY2kjWkbwfzDjzvhm3rzCJiCSr1p+SfY7HsT7w2rYp3ltQPO6HpqPDdA8GSVxPeckr+HcJ205T1D8gHPSeJbzPopz7hrvnk4sSL4wcboLdIpb6v0ZxuY+LGB/HRY2ubn2MeB1a5ukxtEUGkEp4bSVchtvhLzfORaE/NV7VCDnlFzJPSKPJmEcczpffhg4x13zvB2nVxXvDdP2oKNHU+FOAyi+r/xRgWn9sOVVRKv8/ycJmlc/0nx8iOYrMRLXC5EibYUIKN4iBGl8KMQoaSsEaZwTIo7Z3tHkoihpdX7mBOiysJSHhJYCWMDExho1JjfXPgP8ZG2T0zhub7SjecJpK+U23gz5iHMsHRJpLuTDzmoqjnNEJRXTbByTv/Gd48YD+WHgHHddtsMnrhb5MO0gih/b/7ZfQQWWA+WPCizph22vojKr7Y3mTec0L7bT/K6T5ukIbctYgbRlLEPxRsbOSVvGuimeZYw0ZiVh9vpwfyX5xfXDJ1CJDHVAQlOQtvXOxMYazSa/9UDvGqIOrWmNI/ZxXjS/xCOrjHjSZ3g7Wg1CmsZZ6Eq9P1LAR1RCXDaOpKGtOV2mGUaD48pGRXliFL8jTNuF4odB2tKoQDaj/FGBG/3w4f0LfQHtX5JXyZBVcwAAAABJRU5ErkJggg==);
    -webkit-background-size: 23px auto; background-size: 23px auto;
}
.unit-rating {
    list-style: none;
    margin: 0; padding: 0;
    position: relative;
    background-position: 0 -46px;
}
.unit-rating li { text-indent: -90000px; padding: 0; margin: 0; float: left; }
.unit-rating li a {
    display: block;
    width: 23px; height: 23px;
    text-decoration: none;
    border: 0 none !important;
    text-indent: -9000px;
    z-index: 17;
    position: absolute;
    padding: 0;
}
.unit-rating li a:hover { background-position: 0 -23px; z-index: 2; left: 0; }
.unit-rating a.r1-unit { left: 0; }
.unit-rating a.r1-unit:hover { width: 23px; }
.unit-rating a.r2-unit { left: 23px; }
.unit-rating a.r2-unit:hover { width: 46px; }
.unit-rating a.r3-unit { left: 46px; }
.unit-rating a.r3-unit:hover { width: 69px; }
.unit-rating a.r4-unit { left: 69px; }
.unit-rating a.r4-unit:hover { width: 92px; }
.unit-rating a.r5-unit { left: 92px; }
.unit-rating a.r5-unit:hover { width: 115px; }
.unit-rating li.current-rating {
    background-position: 0 0;
    position: absolute;
    height: 23px;
    display: block;
    text-indent: -9000px;
    z-index: 1;
    padding: 0;
}

/* ---- DLE Plus/Minus & Like/Dislike Rating (type 2,3,4) ---- */
.ratingplus { color: var(--color-green); }
.ratingminus { color: #e05454; }
.ratingzero { color: var(--color-text-muted); font-weight: 600; font-size: 14px; }
.ratingtypeplusminus { font-weight: 700; font-size: 15px; margin: 0 4px; }
.rate_plusminus, .rate_like-dislike {
    display: flex; align-items: center; gap: 10px;
}
.dsn-rating-plus, .dsn-rating-minus {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1.5px solid var(--color-border);
    color: var(--color-text-muted); text-decoration: none;
    font-size: 18px; font-weight: 600;
    transition: all 0.15s;
}
.dsn-rating-plus:hover { border-color: var(--color-green); color: var(--color-green); background: rgba(232,25,44,0.08); }
.dsn-rating-minus:hover { border-color: #e05454; color: #e05454; background: rgba(224,84,84,0.08); }

/* Article navigation */
.dsn-article__nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border);
}
.dsn-article__nav-item {
    padding: 12px 14px; background: var(--color-bg);
    border-radius: var(--radius); transition: background 0.15s;
}
.dsn-article__nav-item:hover { background: #e9ecef; }
.dsn-article__nav-label {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    color: var(--color-text-muted); margin-bottom: 5px; letter-spacing: 0.4px;
}
.dsn-article__nav-item--next .dsn-article__nav-label { justify-content: flex-end; }
.dsn-article__nav-title { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--color-text); }
.dsn-article__nav-title a { color: inherit; }
.dsn-article__nav-item--next { text-align: right; }

/* Related articles */
.dsn-related { background: var(--color-white); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-card); }
.dsn-related .dsn-section-title { margin-bottom: 16px; }
.dsn-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dsn-related-card { background: var(--color-bg); border-radius: 6px; overflow: hidden; transition: box-shadow 0.2s; }
.dsn-related-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.1); }
.dsn-related-card__img-wrap { display: block; overflow: hidden; height: 110px; }
.dsn-related-card__img-wrap--noimg { height: 110px; background: linear-gradient(135deg, #667eea, #764ba2); }
.dsn-related-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.dsn-related-card:hover .dsn-related-card__img { transform: scale(1.04); }
.dsn-related-card__body { padding: 10px; }
.dsn-related-card__title {
    display: block; font-size: 13px; font-weight: 600; line-height: 1.4;
    color: var(--color-text); margin-top: 6px; transition: color 0.15s;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dsn-related-card__title:hover { color: var(--color-green); }
.dsn-related-card__meta { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }

/* Comments */
.dsn-comments {
    background: var(--color-white); border-radius: var(--radius);
    padding: 24px; box-shadow: var(--shadow-card);
}
.dsn-comments__title {
    font-size: 18px; font-weight: 700; margin-bottom: 20px;
    display: flex; align-items: center; gap: 10px;
}
.dsn-comments__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; padding: 0 6px;
    background: var(--color-green); color: #fff;
    border-radius: 20px; font-size: 13px; font-weight: 700;
}
.dsn-comment { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--color-bg); }
.dsn-comment:last-child { border-bottom: none; }
.dsn-comment__avatar {
    flex-shrink: 0; width: 38px; height: 38px;
    border-radius: 50%; overflow: hidden; background: var(--color-green);
    display: flex; align-items: center; justify-content: center;
}
.dsn-comment__avatar { position: relative; }
.dsn-comment__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.dsn-comment__avatar-cover {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    border-radius: 50%;
}
.dsn-comment__avatar-cover + .dsn-comment__avatar-letter { display: none; }
.dsn-comment__avatar-letter { font-size: 15px; font-weight: 700; color: #fff; text-transform: uppercase; }
.dsn-comment__body { flex: 1; min-width: 0; }
.dsn-comment__header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 7px; }
.dsn-comment__author { font-size: 14px; font-weight: 600; }
.dsn-comment__date { font-size: 12px; color: var(--color-text-muted); }
.dsn-comment__edit, .dsn-comment__delete { font-size: 12px; color: var(--color-text-muted); transition: color 0.15s; }
.dsn-comment__edit:hover { color: var(--color-green); }
.dsn-comment__delete:hover { color: #e74c3c; }
.dsn-comment__news-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.dsn-comment__text { font-size: 14px; line-height: 1.65; color: #374151; }
.dsn-comment__images { margin-top: 8px; }
.dsn-comment__actions { display: flex; gap: 12px; margin-top: 6px; }
.dsn-comment__reply-btn {
    font-size: 12px; font-weight: 600;
    color: var(--color-text-muted); transition: color 0.15s;
}
.dsn-comment__reply-btn:hover { color: var(--color-green); }
.dsn-comment__complaint { font-size: 12px; color: var(--color-text-light); cursor: pointer; transition: color 0.15s; }
.dsn-comment__complaint:hover { color: #e74c3c; }

/* Breadcrumbs from speedbar.tpl */
.dsn-speedbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dsn-speedbar a { color: var(--color-text-muted); transition: color 0.15s; }
.dsn-speedbar a:hover { color: var(--color-green); }
.dsn-speedbar__sep { color: var(--color-text-light); }

/* ================================================
   FOOTER
   ================================================ */
.dsn-footer { background: var(--header-bg); color: rgba(255,255,255,0.7); padding: 44px 0 0; width: 100%; box-sizing: border-box; }
.dsn-footer > .dsn-container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.dsn-footer__grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr;
    gap: 36px; padding-bottom: 36px;
}
.dsn-footer__desc { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.45); margin: 12px 0 18px; }
.dsn-footer__social { display: flex; gap: 10px; }
.dsn-social-btn {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.08); border-radius: 50%;
    color: rgba(255,255,255,0.7);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.dsn-social-btn:hover { background: var(--color-green); color: #fff; }
.dsn-footer__col-title {
    font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 14px;
    text-transform: uppercase; letter-spacing: 0.6px;
}
.dsn-footer__links { display: flex; flex-direction: column; gap: 9px; }
.dsn-footer__links a { font-size: 14px; color: rgba(255,255,255,0.5); transition: color 0.15s; }
.dsn-footer__links a:hover { color: var(--color-green); }
.dsn-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 18px 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 13px; color: rgba(255,255,255,0.3);
}
.dsn-footer__bottom a { color: rgba(255,255,255,0.3); transition: color 0.15s; }
.dsn-footer__bottom a:hover { color: rgba(255,255,255,0.7); }
.dsn-footer__bottom-links { display: flex; gap: 20px; }

.dsn-footer__gambling {
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 12px 0;
    font-size: 12px;
    color: rgba(255,255,255,.35);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dsn-footer__gambling a { color: rgba(255,255,255,.4); text-decoration: underline; transition: color .15s; }
.dsn-footer__gambling a:hover { color: rgba(255,255,255,.7); }
.dsn-footer__gambling-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(232,25,44,.15); border: 1px solid rgba(232,25,44,.3);
    color: #e8192c; font-size: 11px; font-weight: 700;
    border-radius: 4px; padding: 1px 6px; flex-shrink: 0;
}

/* ── Responsible Gambling disclaimer bar (predictions/bookmakers pages) ── */
.dsn-rg-bar {
    background: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 12px;
    color: #6b7280;
    display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
    margin-bottom: 20px;
}
.dsn-rg-bar__badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(232,25,44,.08); border: 1px solid rgba(232,25,44,.2);
    color: #e8192c; font-size: 11px; font-weight: 700;
    border-radius: 4px; padding: 1px 6px; flex-shrink: 0;
}
.dsn-rg-bar a { color: #9ca3af; text-decoration: underline; }
.dsn-rg-bar a:hover { color: #e8192c; }

/* ================================================
   SCROLL TOP
   ================================================ */
.dsn-scroll-top {
    position: fixed; bottom: 24px; right: 24px;
    width: 42px; height: 42px;
    background: var(--color-green); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(232,25,44,0.40);
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity 0.2s, transform 0.2s, background 0.15s;
    z-index: 500;
}
.dsn-scroll-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dsn-scroll-top:hover { background: var(--color-green-dark); }

/* ================================================
   HOME WIDGETS (below news grid)
   ================================================ */
.dsn-home-widgets {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 28px;
    max-width: 100%;
    overflow-x: hidden;
}
.dsn-home-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.dsn-home-section__title {
    font-size: 17px;
    font-weight: 800;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.dsn-home-section__title svg { color: #e8192c; flex-shrink: 0; }
.dsn-home-section__more {
    font-size: 13px;
    font-weight: 600;
    color: #e8192c;
    text-decoration: none;
    white-space: nowrap;
}
.dsn-home-section__more:hover { text-decoration: underline; }

/* Prediction cards grid */
.dsn-home-pred-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.dsn-home-pred-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, border-color .15s;
}
.dsn-home-pred-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: #d1d5db; }
.dsn-home-pred-card-wrap { display: flex; flex-direction: column; }
.dsn-home-pred-card-wrap .dsn-home-pred-card { flex: 1; }
.dsn-home-pred-card__bet {
    display: block; text-align: center; padding: 7px 10px;
    background: linear-gradient(90deg,#16a34a,#15803d); color: #fff;
    font-size: 11px; font-weight: 700; text-decoration: none; border-radius: 0 0 10px 10px;
    letter-spacing: .02em; transition: opacity .15s;
}
.dsn-home-pred-card__bet:hover { opacity: .88; }
.dsn-home-pred-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 6px;
    background: #f9fafb;
    border-bottom: 1px solid #f3f4f6;
    gap: 6px;
}
.dsn-home-pred-card__league {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.dsn-home-pred-card__league img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.dsn-home-pred-card__league-name {
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dsn-home-pred-card__time {
    font-size: 11px;
    font-weight: 800;
    color: #111827;
    flex-shrink: 0;
}
.dsn-home-pred-card__teams {
    padding: 12px 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.dsn-home-pred-card__team {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
}
.dsn-home-pred-card__team img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.dsn-home-pred-card__team span { overflow: hidden; text-overflow: ellipsis; }
.dsn-home-pred-card__vs {
    font-size: 9px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-left: 24px;
}
.dsn-home-pred-card__odds {
    display: flex;
    border-top: 1px solid #f3f4f6;
}
.dsn-home-pred-card__odd {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7px 4px;
    font-size: 9px;
    color: #9ca3af;
    font-weight: 600;
    border-right: 1px solid #f3f4f6;
}
.dsn-home-pred-card__odd:last-child { border-right: none; }
.dsn-home-pred-card__odd b { font-size: 12px; font-weight: 800; color: #111827; margin-top: 1px; }
.dsn-home-pred-card__odd--x { background: #fffbeb; }
.dsn-home-pred-card__odd--x b { color: #92400e; }
.dsn-home-pred-loading, .dsn-home-pred-empty {
    grid-column: 1 / -1;
    padding: 24px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
}

/* Bookmakers list */
.dsn-home-bk-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.dsn-home-bk-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f3f4f6;
    transition: background .1s;
}
.dsn-home-bk-item:last-child { border-bottom: none; }
.dsn-home-bk-item:hover { background: #f9fafb; }
.dsn-home-bk-rank {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #f3f4f6;
    font-size: 12px;
    font-weight: 800;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dsn-home-bk-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #1a1d2e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.dsn-home-bk-info { flex: 1; min-width: 0; }
.dsn-home-bk-name { font-size: 14px; font-weight: 700; color: #111827; }
.dsn-home-bk-bonus { font-size: 12px; color: #6b7280; margin-top: 2px; }
.dsn-home-bk-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.dsn-home-bk-stars { font-size: 13px; color: #f59e0b; letter-spacing: -1px; }
.dsn-home-bk-btn {
    display: inline-block;
    padding: 5px 14px;
    background: #e8192c;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    transition: background .15s;
}
.dsn-home-bk-item:hover .dsn-home-bk-btn { background: #c41525; }

/* Responsive home widgets */
@media (max-width: 1100px) {
    .dsn-home-pred-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .dsn-home-pred-grid { grid-template-columns: repeat(3, 1fr); }
    .dsn-home-bk-item { padding: 12px 14px; gap: 10px; }
    .dsn-home-bk-logo { width: 32px; height: 32px; }
}
@media (max-width: 600px) {
    .dsn-home-pred-grid { grid-template-columns: repeat(2, 1fr); }
    .dsn-home-bk-bonus { display: none; }
}

/* ================================================
   RESPONSIVE — TABLET (≤1100px)
   ================================================ */
@media (max-width: 1100px) {
    .dsn-layout { grid-template-columns: 1fr 250px; }
    .dsn-footer__grid { grid-template-columns: 1fr 1fr; row-gap: 28px; }
}

/* ================================================
   RESPONSIVE — NARROW (≤900px)
   ================================================ */
@media (max-width: 900px) {
    .dsn-nav { display: none; }
    .dsn-nav.open {
        display: flex;
        position: fixed;
        top: var(--header-h);
        left: 0; right: 0; bottom: 0;
        background: var(--header-bg);
        z-index: 999;
        padding: 16px 20px;
        overflow-y: auto;
    }
    .dsn-nav.open .dsn-nav__list { flex-direction: column; gap: 0; width: 100%; }
    .dsn-nav.open .dsn-nav__link { padding: 13px 0; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,0.07); border-radius: 0; }
    .dsn-nav.open .dsn-dropdown { position: static; display: none; background: rgba(255,255,255,0.05); border-radius: 6px; box-shadow: none; margin: 4px 0 8px; }
    .dsn-nav.open .dsn-nav__item--dropdown.open > .dsn-dropdown { display: block; }
    .dsn-nav.open .dsn-dropdown li a { color: rgba(255,255,255,0.65); padding: 9px 14px; }

    .dsn-layout { grid-template-columns: 1fr; }
    .dsn-sidebar { position: static; }

    /* Reflow grid on tablet */
    .dsn-news-feed { grid-template-columns: repeat(4, 1fr); }
    .dsn-card:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
    .dsn-card:nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
    .dsn-card:nth-child(3) { grid-column: 3 / 5; grid-row: 2; }
    .dsn-card:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }
    .dsn-card:nth-child(5) { grid-column: 3 / 5; grid-row: 3; }
    .dsn-card:nth-child(n+6) { grid-column: span 2; }

    .dsn-related__grid { grid-template-columns: 1fr 1fr; }
}

/* ================================================
   RESPONSIVE — MOBILE (≤600px)
   ================================================ */
@media (max-width: 600px) {
    .dsn-news-feed { grid-template-columns: 1fr 1fr; gap: 12px; }
    .dsn-card:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
    .dsn-card:nth-child(2) { grid-column: 1; grid-row: auto; }
    .dsn-card:nth-child(3) { grid-column: 2; grid-row: auto; }
    .dsn-card:nth-child(4) { grid-column: 1; grid-row: auto; }
    .dsn-card:nth-child(5) { grid-column: 2; grid-row: auto; }
    .dsn-card:nth-child(n+6) { grid-column: span 1; }

    /* Compact → vertical on mobile */
    .dsn-card:nth-child(2), .dsn-card:nth-child(3),
    .dsn-card:nth-child(4), .dsn-card:nth-child(5) { flex-direction: column; }
    .dsn-card:nth-child(2) .dsn-card__img-wrap,
    .dsn-card:nth-child(3) .dsn-card__img-wrap,
    .dsn-card:nth-child(4) .dsn-card__img-wrap,
    .dsn-card:nth-child(5) .dsn-card__img-wrap { order: 0; width: 100%; height: 120px; }
    .dsn-card:nth-child(2) .dsn-card__img,
    .dsn-card:nth-child(3) .dsn-card__img,
    .dsn-card:nth-child(4) .dsn-card__img,
    .dsn-card:nth-child(5) .dsn-card__img { width: 100%; }
    .dsn-card:nth-child(2) .dsn-card__img-wrap--noimg,
    .dsn-card:nth-child(3) .dsn-card__img-wrap--noimg,
    .dsn-card:nth-child(4) .dsn-card__img-wrap--noimg,
    .dsn-card:nth-child(5) .dsn-card__img-wrap--noimg { width: 100%; }

    .dsn-article { padding: 16px; }
    .dsn-article__title { font-size: 21px; }
    .dsn-article__nav { grid-template-columns: 1fr; }
    .dsn-related__grid { grid-template-columns: 1fr; }
    .dsn-footer__grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ================================================
   RESPONSIVE — SMALL MOBILE (≤420px)
   ================================================ */
@media (max-width: 420px) {
    .dsn-container { padding: 0 12px; }
    .dsn-news-feed { grid-template-columns: 1fr; }
    .dsn-card:nth-child(1), .dsn-card:nth-child(2), .dsn-card:nth-child(3),
    .dsn-card:nth-child(4), .dsn-card:nth-child(5) { grid-column: 1; grid-row: auto; }
    .dsn-card:nth-child(n+6) { grid-column: 1; }
}

/* ================================================
   CARD — NO IMAGE FALLBACK
   ================================================ */
.dsn-card__img-wrap--noimg {
    background: linear-gradient(135deg, #1a2a3a 0%, #2c4a6e 100%);
    min-height: 120px;
    display: block;
}
.dsn-card:nth-child(1) .dsn-card__img-wrap--noimg { min-height: 280px; }
.dsn-card:nth-child(n+6) .dsn-card__img-wrap--noimg { min-height: 155px; }
.dsn-card:nth-child(2) .dsn-card__img-wrap--noimg,
.dsn-card:nth-child(3) .dsn-card__img-wrap--noimg,
.dsn-card:nth-child(4) .dsn-card__img-wrap--noimg,
.dsn-card:nth-child(5) .dsn-card__img-wrap--noimg { min-height: unset; width: 90px; min-width: 90px; }

/* ================================================
   LOGIN PANEL (login.tpl)
   ================================================ */
.dsn-login-panel { position: relative; }
.dsn-login-dropdown,
.dsn-user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 260px;
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    z-index: 400;
    padding: 18px;
    border: 1px solid var(--color-border);
}
.dsn-login-panel.open .dsn-login-dropdown,
.dsn-login-panel.open .dsn-user-dropdown { display: block; }
.dsn-user-dropdown__cabinet-btn {
    display: block;
    background: #e53935;
    color: #fff;
    text-align: center;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 12px;
    transition: opacity 0.15s;
}
.dsn-user-dropdown__cabinet-btn:hover { opacity: 0.85; color: #fff; }

/* Login form */
.dsn-form__soc { display: flex; gap: 8px; margin-bottom: 14px; }
.dsn-form__soc-btn {
    flex: 1; padding: 8px; border-radius: 6px;
    font-size: 13px; font-weight: 600; text-align: center;
    color: #fff; background: #4a76a8; transition: opacity 0.15s;
}
.dsn-form__soc-btn:hover { opacity: 0.85; }
.dsn-form__soc-btn--ya { background: #fc3f1d; }
.dsn-form__field { position: relative; margin-bottom: 10px; }
.dsn-form__field--pass { display: flex; align-items: center; gap: 0; }
.dsn-form__field--pass .dsn-form__input { border-radius: 6px 0 0 6px; border-right: none; }
.dsn-form__go {
    flex-shrink: 0;
    width: 40px; height: 40px;
    background: var(--color-green); color: #fff;
    border: none; border-radius: 0 6px 6px 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.15s;
}
.dsn-form__go:hover { background: var(--color-green-dark); }
.dsn-form__links {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; margin-top: 12px;
    padding-top: 12px; border-top: 1px solid var(--color-border);
}
.dsn-form__links a { color: var(--color-text-muted); transition: color 0.15s; }
.dsn-form__links a:hover { color: var(--color-green); }

/* User dropdown */
.dsn-user-dropdown__info {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 14px; border-bottom: 1px solid var(--color-border); margin-bottom: 8px;
}
.dsn-user-dropdown__avatar {
    flex-shrink: 0; text-decoration: none;
}
.dsn-user-dropdown__cover {
    display: block; width: 42px; height: 42px; border-radius: 50%;
    background: var(--color-green) center/cover no-repeat;
    font-size: 0; overflow: hidden;
}
.dsn-user-dropdown__admin a {
    font-size: 13px; color: var(--color-green); font-weight: 600; transition: opacity 0.15s;
}
.dsn-user-dropdown__admin a:hover { opacity: 0.75; }
.dsn-user-dropdown__menu { margin-bottom: 10px; }
.dsn-user-dropdown__menu li { border-bottom: 1px solid #f3f4f6; }
.dsn-user-dropdown__menu li:last-child { border-bottom: none; }
.dsn-user-dropdown__menu a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 0; font-size: 14px; color: var(--color-text); transition: color 0.15s;
}
.dsn-user-dropdown__menu a:hover { color: var(--color-green); }
.dsn-user-dropdown__pred-link { color: var(--color-green) !important; font-weight: 600; }
.dsn-user-dropdown__count {
    font-size: 12px; font-weight: 700; color: var(--color-text-muted);
}
.dsn-user-dropdown__foot {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 12px; border-top: 1px solid var(--color-border);
    font-size: 13px;
}
.dsn-user-dropdown__foot a { color: var(--color-text-muted); transition: color 0.15s; }
.dsn-user-dropdown__foot a:hover { color: var(--color-green); }
.dsn-pm-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 4px;
    background: #e74c3c; color: #fff;
    border-radius: 10px; font-size: 11px; font-weight: 700; margin-left: 5px;
}

/* Shared form input */
.dsn-form__input {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--color-border); border-radius: 6px;
    font-size: 14px; font-family: var(--font);
    color: var(--color-text); background: var(--color-white);
    outline: none; transition: border-color 0.15s;
    box-sizing: border-box;
}
.dsn-form__input:focus { border-color: var(--color-green); }
textarea.dsn-form__input { resize: vertical; min-height: 100px; }

/* Buttons */
.dsn-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 20px; border-radius: 6px;
    font-size: 14px; font-weight: 600; font-family: var(--font);
    cursor: pointer; border: 1px solid var(--color-border);
    background: var(--color-white); color: var(--color-text);
    transition: all 0.15s;
}
.dsn-btn:hover { border-color: var(--color-green); color: var(--color-green); }
.dsn-btn--green { background: var(--color-green); border-color: var(--color-green); color: #fff; }
.dsn-btn--green:hover { background: var(--color-green-dark); border-color: var(--color-green-dark); color: #fff; }

/* ── Unified buttons (CAB-REFACTOR Part 2) ─────────────────────────────── */
.btn, .cab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 15px;
    border-radius: var(--radius, 8px);
    font: 600 13px/1 var(--font);
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text);
    text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
    min-height: 36px;
    box-sizing: border-box;
}
.btn:focus-visible,
.cab-btn:focus-visible {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
}
.btn--primary, .cab-btn--primary {
    background: var(--color-green, #e8192c);
    color: #fff;
    border-color: var(--color-green, #e8192c);
}
.btn--primary:hover, .cab-btn--primary:hover {
    background: var(--color-green-dark, #c0111f);
    border-color: var(--color-green-dark, #c0111f);
}
.btn--ghost, .cab-btn--secondary, .cab-btn--ghost {
    background: var(--color-white, #fff);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn--ghost:hover, .cab-btn--secondary:hover, .cab-btn--ghost:hover {
    background: var(--color-bg);
}
.btn--danger,
.cab-btn--danger {
    background: transparent;
    color: #EF4444;
    border-color: #EF4444;
}
.btn--danger:hover,
.cab-btn--danger:hover {
    background: #EF4444;
    color: #fff;
}
.btn--sm, .cab-btn--sm {
    padding: 6px 12px;
    font-size: 12px;
    min-height: 32px;
}

/* ── Chips/pills (CAB-POLISH Part 2 — unification) ─────────── */
.chip,
.pill,
.cab-chip,
.cab-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font: 600 12px/1 var(--font);
    background: var(--color-bg, #f5f6fa);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.chip--primary,
.pill--primary {
    background: var(--color-green, #e8192c);
    color: #fff;
    border-color: var(--color-green, #e8192c);
}
.chip--win,
.pill--win {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
    border-color: #10B981;
}
.chip--loss,
.pill--loss {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
    border-color: #EF4444;
}

/* ── Unified cards (CAB-REFACTOR Part 2) ───────────────────────────────── */
/* .cab-card, .dsn-card — общая база (только то что уже есть у .dsn-card по style.css:466) */
.cab-card, .dsn-card {
    background: var(--color-bg-card, #fff);
    border-radius: var(--radius, 8px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,.08));
}
/* .cab-card specific — padding + border только для cabinet */
.cab-card {
    border: 1px solid var(--color-border, #e5e7eb);
    padding: 18px;
}

/* ── Global focus-visible (CAB-REFACTOR Part 2 — a11y-3) ──────────────── */
a:focus-visible,
button:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid #0066ff;
    outline-offset: 2px;
}

.dsn-form__row { display: flex; gap: 10px; }
.dsn-form__group { margin-bottom: 12px; }
.dsn-form__group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: var(--color-text-muted); }
.dsn-form__check-row { display: flex; gap: 8px; align-items: center; }
.dsn-form__check-row .dsn-form__input { flex: 1; }
.dsn-form__captcha { display: flex; gap: 10px; align-items: center; }
.dsn-form__submit-row { margin-top: 16px; }
.dsn-form__image-upload { margin-top: 8px; font-size: 13px; }
.dsn-form__image-upload a { color: var(--color-green); }

/* ================================================
   INFO BOX (info.tpl)
   ================================================ */
.dsn-info-box {
    padding: 14px 18px;
    background: #fef3cd; border: 1px solid #ffd966;
    border-radius: var(--radius); margin-bottom: 20px;
    font-size: 14px;
}
.dsn-info-box strong { display: block; margin-bottom: 4px; font-size: 15px; }

/* ================================================
   FORMS PAGE (registration, lostpassword)
   ================================================ */
.dsn-form-page {
    max-width: 480px; margin: 0 auto;
    background: var(--color-white); border-radius: var(--radius);
    padding: 32px; box-shadow: var(--shadow-card);
}
.dsn-form-page__title {
    font-size: 22px; font-weight: 700; margin-bottom: 24px;
    color: var(--color-text);
}
.dsn-form__list { display: flex; flex-direction: column; gap: 14px; }

/* ================================================
   COMMENT FORM (addcomments.tpl)
   ================================================ */
.dsn-comment-form {
    background: var(--color-white); border-radius: var(--radius);
    padding: 24px; box-shadow: var(--shadow-card); margin-top: 24px;
}
.dsn-comment-form__title { font-size: 17px; font-weight: 700; margin-bottom: 16px; }
.dsn-comment-form__body { display: flex; flex-direction: column; gap: 12px; }

/* ================================================
   FAST SEARCH RESULTS
   ================================================ */
.dsn-fastsearch-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-bottom: 1px solid var(--color-bg);
    transition: background 0.12s;
}
.dsn-fastsearch-item:hover { background: var(--color-bg); }
.dsn-fastsearch-item__img { width: 48px; height: 36px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.dsn-fastsearch-item__body { flex: 1; min-width: 0; }
.dsn-fastsearch-item__title { display: block; font-size: 13px; font-weight: 500; color: var(--color-text); transition: color 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsn-fastsearch-item__title:hover { color: var(--color-green); }
.dsn-fastsearch-item__cat { font-size: 11px; color: var(--color-text-muted); }

/* ================================================
   PAGE BOX (generic content wrapper)
   ================================================ */
.dsn-page-box {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 32px;
    margin-bottom: 24px;
}
.dsn-page-box__title {
    font-size: 22px; font-weight: 700; margin-bottom: 24px;
    color: var(--color-text);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

/* ================================================
   FORM COMPONENTS (shared across addnews, feedback, userinfo, pm)
   ================================================ */
.dsn-form { display: flex; flex-direction: column; gap: 16px; }
.dsn-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .dsn-form__row { grid-template-columns: 1fr; } }
.dsn-form__group { display: flex; flex-direction: column; gap: 6px; }
.dsn-form__label { font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.dsn-form__label--required::after { content: ' *'; color: var(--color-green); }
.dsn-form__input,
.dsn-form__textarea,
.dsn-form__select {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: 14px;
    padding: 9px 12px;
    transition: border-color 0.15s;
    width: 100%;
}
.dsn-form__input:focus,
.dsn-form__textarea:focus,
.dsn-form__select:focus { outline: none; border-color: var(--color-green); }
.dsn-form__textarea { resize: vertical; min-height: 120px; }
.dsn-form__checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); }
.dsn-form__captcha { display: flex; flex-direction: column; gap: 8px; }
.dsn-form__captcha img { border-radius: 4px; }
.dsn-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 8px; }
.dsn-form__divider { height: 1px; background: var(--color-border); margin: 8px 0; }
.dsn-form__note { font-size: 12px; color: var(--color-text-muted); }
.dsn-form__xfields { width: 100%; }

/* Buttons */
.dsn-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--color-green); color: #000;
    border: none; border-radius: 6px;
    font-family: var(--font-main); font-size: 14px; font-weight: 600;
    padding: 9px 20px; cursor: pointer;
    transition: opacity 0.15s;
    text-decoration: none;
}
.dsn-btn:hover { opacity: .85; }
.dsn-btn--outline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.dsn-btn--outline:hover { border-color: var(--color-green); color: var(--color-green); }
.dsn-btn--danger { background: #e84040; color: #fff; }
.dsn-btn--danger:hover { opacity: .85; }

/* ================================================
   TABS (userinfo.tpl)
   ================================================ */
.dsn-tabs__nav {
    display: flex; gap: 4px; border-bottom: 1px solid var(--color-border);
    margin-bottom: 24px; flex-wrap: wrap; align-items: center;
}
.dsn-tab {
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--color-text-muted); font-family: var(--font-main);
    font-size: 14px; font-weight: 500; padding: 10px 14px;
    cursor: pointer; transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}
.dsn-tab:hover { color: var(--color-text); }
.dsn-tab--active { color: var(--color-green); border-bottom-color: var(--color-green); }
.dsn-tab-pane { display: none; }
.dsn-tab-pane--active { display: block; }

/* ================================================
   USER INFO PAGE
   ================================================ */
.dsn-userinfo__header {
    display: flex; align-items: center; gap: 20px;
    padding-bottom: 24px; border-bottom: 1px solid var(--color-border);
    margin-bottom: 24px;
}
.dsn-userinfo__avatar-img {
    display: flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 50%;
    background-size: cover; background-position: center;
    background-color: var(--color-bg-elevated);
    font-size: 28px; font-weight: 700; color: var(--color-green);
    flex-shrink: 0;
}
.dsn-userinfo__name { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.dsn-userinfo__online { color: var(--color-green); font-size: 13px; font-weight: 500; }
.dsn-userinfo__offline { color: var(--color-text-muted); font-size: 13px; }
.dsn-userinfo__pm { margin-left: auto; }
.dsn-userinfo__list { list-style: none; padding: 0; margin: 0 0 20px; }
.dsn-userinfo__list li {
    display: flex; align-items: baseline; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--color-border);
}
.dsn-userinfo__key { color: var(--color-text-muted); font-size: 13px; min-width: 160px; flex-shrink: 0; }
.dsn-userinfo__val { font-size: 14px; color: var(--color-text); }
.dsn-userinfo__ignore { color: var(--color-green); font-size: 12px; text-decoration: none; }
.dsn-userinfo__section-title { font-size: 15px; font-weight: 600; margin: 20px 0 8px; }
.dsn-userinfo__signature { font-size: 13px; color: var(--color-text-muted); padding-left: 12px; border-left: 3px solid var(--color-border); }
.dsn-userinfo__social { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.dsn-userinfo__social-link {
    padding: 5px 12px; border-radius: 4px; font-size: 12px; font-weight: 500;
    text-decoration: none; background: var(--color-bg-elevated); color: var(--color-text);
    transition: background 0.15s;
}
.dsn-userinfo__social-link:hover { background: var(--color-border); }

/* ================================================
   PRIVATE MESSAGES
   ================================================ */
.dsn-pm__nav { display: flex; gap: 12px; margin-bottom: 16px; }
.dsn-pm__nav-item {
    padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
    background: var(--color-bg-elevated); color: var(--color-text-muted); cursor: pointer;
}
.dsn-pm__nav-item--active { background: var(--color-green-dim); color: var(--color-green); }
.dsn-pm__quota { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.dsn-pm__quota-text { font-size: 12px; color: var(--color-text-muted); }
.dsn-pm__list { margin-bottom: 24px; }
.dsn-pm__compose-title { font-size: 17px; font-weight: 600; margin-bottom: 16px; }
.dsn-pm__thread { margin-top: 16px; }
.dsn-pm__thread-title { font-size: 18px; font-weight: 700; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.dsn-pm__messages { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.dsn-pm__message {
    display: flex; gap: 14px;
    background: var(--color-bg-elevated); border-radius: 8px; padding: 16px;
}
.dsn-pm__avatar-img {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background-size: cover; background-position: center;
    background-color: var(--color-bg-card);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; color: var(--color-green);
}
.dsn-pm__online { width: 8px; height: 8px; border-radius: 50%; background: var(--color-green); display: inline-block; margin-left: 4px; }
.dsn-pm__message-body { flex: 1; min-width: 0; }
.dsn-pm__message-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.dsn-pm__message-author { font-weight: 600; color: var(--color-text); }
.dsn-pm__message-date { font-size: 12px; color: var(--color-text-muted); }
.dsn-pm__message-actions { display: flex; gap: 10px; margin-left: auto; }
.dsn-pm__action { font-size: 12px; color: var(--color-text-muted); text-decoration: none; transition: color 0.15s; }
.dsn-pm__action:hover, .dsn-pm__action--warn { color: var(--color-green); }
.dsn-pm__action--danger:hover { color: #e84040; }
.dsn-pm__message-text { font-size: 14px; line-height: 1.6; }
.dsn-pm__message-sig { margin-top: 10px; font-size: 12px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: 8px; }
.dsn-pm__reply-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }

/* ================================================
   SEARCH PAGE
   ================================================ */
.dsn-search-page__simple { display: flex; flex-direction: column; gap: 12px; }
.dsn-search-page__btns { display: flex; gap: 10px; }
.dsn-search-page__extended { display: flex; flex-direction: column; gap: 16px; }
.dsn-search-page__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .dsn-search-page__row { grid-template-columns: 1fr; } }
.dsn-search-page__col { display: flex; flex-direction: column; gap: 12px; }
.dsn-search-page__fieldset {
    border: 1px solid var(--color-border); border-radius: 8px; padding: 12px 16px;
}
.dsn-search-page__fieldset legend { font-size: 12px; font-weight: 600; color: var(--color-text-muted); padding: 0 6px; }
.dsn-search-page__msg { margin-top: 16px; font-size: 14px; color: var(--color-text-muted); }
/* DLE renders {searchfield} as <input id="story" name="story"> — style it like dsn-form__input */
#story,
input[name="story"] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-family: var(--font);
    font-size: 15px;
    padding: 10px 14px;
    width: 100%;
    transition: border-color 0.15s;
    outline: none;
    box-sizing: border-box;
}
#story:focus,
input[name="story"]:focus { border-color: var(--color-green); box-shadow: 0 0 0 3px rgba(232,25,44,.12); }
/* Search results grid — uniform 3-col, resets main-feed nth-child overrides */
.dsn-search-feed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 8px;
}
@media (max-width: 900px) { .dsn-search-feed { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dsn-search-feed { grid-template-columns: 1fr; } }
/* Reset ALL homepage nth-child card overrides for uniform search grid */
.dsn-search-feed .dsn-card:nth-child(n) {
    grid-column: span 1 !important;
    grid-row: unset !important;
    flex-direction: column !important;
    align-items: stretch !important;
}
.dsn-search-feed .dsn-card .dsn-card__img-wrap {
    order: 0 !important;
    width: 100% !important;
    height: 160px !important;
    flex-shrink: 0 !important;
}
.dsn-search-feed .dsn-card .dsn-card__img-wrap--noimg { height: 160px !important; width: 100% !important; }
.dsn-search-feed .dsn-card .dsn-card__img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.dsn-search-feed .dsn-card .dsn-card__img-wrap .dsn-cat-badge { display: block !important; }
.dsn-search-feed .dsn-card .dsn-card__body {
    order: 0 !important;
    flex: 1 !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
}
.dsn-search-feed .dsn-card .dsn-card__meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
}
.dsn-search-feed .dsn-card .dsn-card__time { font-size: 11px !important; color: var(--color-text-muted) !important; }
.dsn-search-feed .dsn-card .dsn-card__title { font-size: 14px !important; font-weight: 600 !important; line-height: 1.35 !important; }
.dsn-search-feed .dsn-card .dsn-card__title a { color: var(--color-text) !important; }
.dsn-search-feed .dsn-card .dsn-card__footer { display: flex !important; }
.dsn-search-result-item {
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: 8px; padding: 16px; margin-bottom: 12px;
}
.dsn-search-result-item__title { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.dsn-search-result-item__title a { color: var(--color-text); text-decoration: none; }
.dsn-search-result-item__title a:hover { color: var(--color-green); }
.dsn-search-result-item__text { font-size: 14px; color: var(--color-text-muted); margin-bottom: 10px; line-height: 1.5; }
.dsn-search-result-item__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--color-text-muted); flex-wrap: wrap; }
.dsn-search-result-item__edit { font-size: 12px; color: var(--color-green); text-decoration: none; }
.dsn-search-comment-item {
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: 8px; padding: 14px; margin-bottom: 10px;
}
.dsn-search-comment-item__news { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.dsn-search-comment-item__news a { color: var(--color-green); text-decoration: none; }
.dsn-search-comment-item__text { font-size: 13px; color: var(--color-text-muted); }

/* ================================================
   STATS PAGE
   ================================================ */
.dsn-stats__summary {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px;
}
@media (max-width: 700px) { .dsn-stats__summary { grid-template-columns: 1fr; } }
.dsn-stats__summary-item {
    background: var(--color-bg-elevated); border-radius: 8px; padding: 16px;
}
.dsn-stats__summary-item strong { display: block; font-size: 13px; color: var(--color-green); margin-bottom: 4px; }
.dsn-stats__summary-item span { font-size: 13px; color: var(--color-text-muted); }
.dsn-stats__groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 700px) { .dsn-stats__groups { grid-template-columns: 1fr; } }
.dsn-stats__group-title { font-size: 14px; font-weight: 700; color: var(--color-green); margin-bottom: 12px; }
.dsn-stats__list { list-style: none; padding: 0; margin: 0; }
.dsn-stats__list li {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: 13px;
}
.dsn-stats__list li strong { color: var(--color-text); }
.dsn-stats__db { font-size: 12px; color: var(--color-text-muted); margin-bottom: 20px; }
.dsn-stats__top-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.dsn-stats__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dsn-stats__table td, .dsn-stats__table th { padding: 8px 10px; border-bottom: 1px solid var(--color-border); }

/* ================================================
   TAGS CLOUD
   ================================================ */
.dsn-tags-cloud { line-height: 2.2; }
.dsn-tags-cloud a {
    display: inline-block; padding: 2px 10px; margin: 2px;
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
    border-radius: 20px; color: var(--color-text-muted); text-decoration: none;
    font-size: 13px; transition: all 0.15s;
}
.dsn-tags-cloud a:hover { background: var(--color-green-dim); border-color: var(--color-green); color: var(--color-green); }

/* ================================================
   PREVIEW PAGE
   ================================================ */
.dsn-preview-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-green); margin-bottom: 12px;
}
.dsn-preview__title { font-size: 20px; font-weight: 700; margin-bottom: 14px; color: var(--color-text); }
.dsn-preview__title a { color: inherit; text-decoration: none; }
.dsn-preview__title a:hover { color: var(--color-green); }
.dsn-preview__content { font-size: 15px; line-height: 1.7; color: var(--color-text); margin-bottom: 16px; }
.dsn-preview__meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-text-muted); }

/* ================================================
   SPLIT NEWS NAVIGATION (multi-page articles)
   ================================================ */
.dsn-split-nav {
    margin: 20px 0; font-size: 14px; color: var(--color-text-muted);
    display: flex; align-items: center; gap: 8px;
}
.dsn-split-nav a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 6px;
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
    color: var(--color-text); text-decoration: none; font-size: 13px; font-weight: 500;
    transition: all 0.15s;
}
.dsn-split-nav a:hover, .dsn-split-nav a.current { background: var(--color-green); border-color: var(--color-green); color: #000; }

/* ================================================
   POLL / VOTE WIDGET
   ================================================ */
.dsn-poll, .dsn-vote {
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
    border-radius: 10px; padding: 18px;
}
.dsn-poll__question, .dsn-vote__title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.dsn-poll__more a, .dsn-vote__more a { font-size: 12px; color: var(--color-green); text-decoration: none; }
.dsn-poll__list, .dsn-vote__list { margin: 12px 0; }
.dsn-poll__votes, .dsn-vote__votes { font-size: 12px; color: var(--color-text-muted); margin-bottom: 10px; }
.dsn-poll__closed { font-size: 12px; color: var(--color-text-muted); margin-bottom: 10px; }
.dsn-poll__actions, .dsn-vote__actions { display: flex; gap: 8px; margin-top: 12px; }

/* ================================================
   PROFILE POPUP
   ================================================ */
.dsn-profile-popup {
    display: flex; gap: 14px;
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: 10px; padding: 16px; min-width: 260px;
}
.dsn-profile-popup__avatar-img {
    width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
    background-size: cover; background-position: center;
    background-color: var(--color-bg-elevated); display: block;
}
.dsn-profile-popup__name { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.dsn-profile-popup__online { color: var(--color-green); font-size: 12px; }
.dsn-profile-popup__offline { color: var(--color-text-muted); font-size: 12px; }
.dsn-profile-popup__meta { list-style: none; padding: 0; margin: 8px 0 0; }
.dsn-profile-popup__meta li { font-size: 12px; color: var(--color-text-muted); padding: 2px 0; }
.dsn-profile-popup__meta li span { color: var(--color-text); }
.dsn-profile-popup__meta a { color: var(--color-green); text-decoration: none; }

/* ================================================
   ATTACHMENT
   ================================================ */
.dsn-attachment {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--color-text-muted);
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
    border-radius: 6px; padding: 6px 12px; margin: 4px 0;
}
.dsn-attachment__link { color: var(--color-green); text-decoration: none; }
.dsn-attachment__link:hover { text-decoration: underline; }
.dsn-attachment__meta { font-size: 11px; color: var(--color-text-muted); }
.dsn-attachment__online { font-size: 12px; color: var(--color-text-muted); text-decoration: none; }
.dsn-attachment__online:hover { color: var(--color-green); }
.dsn-attachment--denied { color: #e84040; }

/* ================================================
   INFORMER WIDGET
   ================================================ */
.dsn-informer-item { list-style: none; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.dsn-informer-item__title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.dsn-informer-item__title a { color: var(--color-text); text-decoration: none; }
.dsn-informer-item__title a:hover { color: var(--color-green); }
.dsn-informer-item__text { font-size: 13px; color: var(--color-text-muted); margin-bottom: 4px; }
.dsn-informer-item__more { font-size: 12px; color: var(--color-green); text-decoration: none; }

/* ================================================
   CATEGORY MENU
   ================================================ */
.dsn-catmenu { list-style: none; padding: 0; margin: 0; }
.dsn-catmenu__item { border-bottom: 1px solid var(--color-border); }
.dsn-catmenu__link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 12px; font-size: 14px; color: var(--color-text);
    text-decoration: none; transition: background 0.12s, color 0.12s;
}
.dsn-catmenu__link:hover { background: var(--color-bg-elevated); color: var(--color-green); }
.dsn-catmenu__item strong .dsn-catmenu__link { color: var(--color-green); font-weight: 600; }
.dsn-catmenu__count { font-size: 11px; color: var(--color-text-muted); }
.dsn-catmenu--sub { margin-left: 16px; border-left: 2px solid var(--color-border); }

/* ================================================
   LINK UTILITY
   ================================================ */
.dsn-link { color: var(--color-green); text-decoration: none; }
.dsn-link:hover { text-decoration: underline; }

/* ================================================
   JQUERY UI DIALOG — DARK THEME OVERRIDES
   (profile popup, edit popup, confirm dialogs)
   ================================================ */
.ui-widget,
.ui-widget * { box-sizing: border-box; }

/* Базовые цвета виджета (переопределяем jquery-ui тему) */
.ui-widget-content,
.ui-widget-header {
    background: #1a1d27 !important;
    color: #e8eaf0 !important;
    border-color: rgba(255,255,255,.08) !important;
}

.ui-dialog {
    /* Фиксированная позиция — попап всегда по центру экрана при скролле */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;

    background: #1a1d27 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.8) !important;
    color: #e8eaf0 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 10000 !important;
}

.ui-dialog .ui-dialog-titlebar {
    background: #222535 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 12px 12px 0 0 !important;
    color: #e8eaf0 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 12px 40px 12px 16px !important;
    position: relative !important;
}

.ui-dialog .ui-dialog-title { color: #e8eaf0 !important; }

.ui-dialog .ui-dialog-titlebar-close {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .15s !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover { background: rgba(255,255,255,.1) !important; }
/* Скрываем иконку и текст "Close" которые jQuery UI рисует внутри кнопки */
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-text { display: none !important; }
.ui-dialog .ui-dialog-titlebar-close::before {
    content: '×';
    font-size: 22px;
    line-height: 1;
    color: #8b90a0;
    display: block;
    font-weight: 300;
}

.ui-dialog .ui-dialog-content {
    background: #1a1d27 !important;
    color: #e8eaf0 !important;
    border: none !important;
    padding: 16px !important;
}

.ui-dialog .ui-dialog-buttonpane {
    background: #222535 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    padding: 10px 16px !important;
    border-radius: 0 0 12px 12px !important;
    margin: 0 !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-button {
    background: #2dd36f !important;
    color: #0f1117 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 7px 18px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 13px !important;
    transition: background .15s !important;
    height: auto !important;
    line-height: 1.5 !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-button:hover { background: #25b85e !important; }
.ui-dialog .ui-dialog-buttonpane .ui-button:last-child {
    background: rgba(255,255,255,.06) !important;
    color: #8b90a0 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-button:last-child:hover {
    background: rgba(255,255,255,.1) !important;
    color: #e8eaf0 !important;
}

/* Оверлей */
.ui-widget-overlay {
    background: rgba(0,0,0,.75) !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    position: fixed !important;
}

/* Профиль-попап: убрать лишний padding в content-зоне */
.dle-popup-userprofile.ui-dialog .ui-dialog-content { padding: 0 !important; }
.dle-popup-userprofile .dsn-profile-popup {
    border: none !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    background: transparent !important;
}
/* Переопределяем светлые CSS-переменные внутри тёмного попапа.
   Не используем !important чтобы не перебить inline style="color:..." у групп DLE */
.ui-dialog.dle-popup-userprofile .ui-dialog-content { color: #e8eaf0; }
.ui-dialog.dle-popup-userprofile .ui-dialog-content * { color: #e8eaf0; }
.ui-dialog.dle-popup-userprofile .ui-dialog-content a { color: var(--color-green); }

/* DLE push notifications */
.dle-push-container { z-index: 99999; position: fixed; }
.dle-push {
    background: #222535 !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 8px !important;
    color: #e8eaf0 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.4) !important;
}
.dle-push.dle-push-success { border-left: 3px solid #2dd36f !important; }
.dle-push.dle-push-error { border-left: 3px solid #e05454 !important; }

/* ================================================
   FAST SEARCH RESULTS DROPDOWN
   ================================================ */
#searchsuggestions {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    z-index: 9999;
}
#searchsuggestions .dsn-fastsearch-item {
    border-bottom: 1px solid var(--color-border);
}
#searchsuggestions .dsn-fastsearch-item:last-child { border-bottom: none; }

/* ================================================
   BBCODE TOOLBAR (in addnews / comment forms)
   ================================================ */
.bbcodes_toolbar {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 6px 6px 0 0;
    padding: 6px 8px;
    display: flex; flex-wrap: wrap; gap: 2px;
}
.bbcodes_toolbar a,
.bbcodes_toolbar button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 3px 6px;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.bbcodes_toolbar a:hover,
.bbcodes_toolbar button:hover {
    background: var(--color-bg-card);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* ================================================
   INLINE EDIT CONTROLS (admin edit on article page)
   ================================================ */
.dle-edit-bar {
    display: flex; gap: 8px; align-items: center;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 13px;
}
.dle-edit-bar a {
    color: var(--color-green);
    text-decoration: none;
    font-weight: 600;
}
.dle-edit-bar a:hover { text-decoration: underline; }

/* ── Cookie Consent (#40) ── */
.dsn-cookie {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #1a1d2e;
    border-top: 1px solid #374151;
    box-shadow: 0 -4px 24px rgba(0,0,0,.4);
    padding: 14px 0;
}
.dsn-cookie__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.dsn-cookie__text {
    flex: 1;
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.5;
    min-width: 200px;
}
.dsn-cookie__text a { color: #e8192c; text-decoration: none; }
.dsn-cookie__text a:hover { text-decoration: underline; }
.dsn-cookie__btns { display: flex; gap: 8px; flex-shrink: 0; }
.dsn-cookie__btn {
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background .15s;
}
.dsn-cookie__btn--accept { background: #e8192c; color: #fff; }
.dsn-cookie__btn--accept:hover { background: #c0111f; }
.dsn-cookie__btn--decline { background: transparent; border: 1px solid #374151; color: #6b7280; }
.dsn-cookie__btn--decline:hover { border-color: #6b7280; color: #9ca3af; }
@media (max-width: 600px) {
    .dsn-cookie__inner { gap: 12px; }
    .dsn-cookie__text { font-size: 12px; }
}

/* ================================================
   CATEGORY PAGE — Predictions Widget
   ================================================ */
.dsn-cat-preds {
    margin-bottom: 24px;
    background: #1a1d2e;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
}
.dsn-cat-preds::before {
    content: '⚡ Today\'s Predictions';
    display: block;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #f1f5f9;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.03);
}
/* The SSI widget renders .dsn-home-pred-grid — override for category context */
.dsn-cat-preds .dsn-home-pred-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    padding: 12px;
    gap: 10px;
}
@media (max-width: 600px) {
    .dsn-cat-preds .dsn-home-pred-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
    .dsn-cat-preds .dsn-home-pred-grid { grid-template-columns: 1fr; }
}

/* ================================================
   PUSH NOTIFICATION SUBSCRIBE BUTTON
   ================================================ */
.dsn-push-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    color: rgba(255,255,255,.8);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    padding: 8px 16px;
    cursor: pointer;
    transition: all .15s;
    margin-top: 12px;
}
.dsn-push-btn:hover { background: rgba(232,25,44,.12); border-color: rgba(232,25,44,.4); color: #e8192c; }
.dsn-push-btn--subscribed { border-color: rgba(34,197,94,.3); color: #22c55e; background: rgba(34,197,94,.07); cursor: default; }
.dsn-push-btn__icon { font-size: 15px; }
#dsnPushBtnWrap { display: none; }

/* Bell button in header */
.dsn-bell-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255,255,255,.65);
    cursor: pointer;
    transition: color .15s, background .15s;
    flex-shrink: 0;
    position: relative;
}
.dsn-bell-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.dsn-bell-btn--on { color: rgba(255,255,255,.65); }
.dsn-bell-btn--on:hover { color: #fff; background: rgba(255,255,255,.08); }

/* Bell unread badge */
.dsn-bell-badge {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 14px; height: 14px;
    border-radius: 8px;
    background: #e8192c;
    color: #fff;
    font-size: 9px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    border: 1.5px solid #0d111e;
    pointer-events: none;
}

/* Notification panel */
.dsn-notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    max-height: 480px;
    background: #141728;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.55);
    z-index: 1100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.dsn-notif-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}
.dsn-notif-panel__title { font-size: 14px; font-weight: 700; color: #f3f4f6; }
.dsn-notif-panel__close {
    width: 26px; height: 26px;
    background: rgba(255,255,255,.06); border: none;
    border-radius: 50%; cursor: pointer; color: #9ca3af;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s;
}
.dsn-notif-panel__close:hover { background: rgba(255,255,255,.12); }
.dsn-notif-panel__body {
    flex: 1;
    overflow-y: auto;
    max-height: 360px;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}
.dsn-notif-panel__body::-webkit-scrollbar { width: 4px; }
.dsn-notif-panel__body::-webkit-scrollbar-track { background: transparent; }
.dsn-notif-panel__body::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
.dsn-notif-panel__body::-webkit-scrollbar-thumb:hover { background: #555; }
.dsn-notif-panel__foot {
    border-top: 1px solid rgba(255,255,255,.07);
    padding: 10px 14px;
    flex-shrink: 0;
}
.dsn-notif-push-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #9ca3af;
}
.dsn-notif-push-btn {
    padding: 5px 14px;
    border-radius: 8px;
    border: none;
    background: #e8192c;
    color: #fff;
    font-size: 11px; font-weight: 700;
    cursor: pointer;
}

/* Notification items */
.dsn-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background .1s;
}
.dsn-notif-item:last-child { border-bottom: none; }
.dsn-notif-item:hover { background: rgba(255,255,255,.03); }
.dsn-notif-item--unread { background: rgba(232,25,44,.05); }
.dsn-notif-item__icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.dsn-notif-item__content { flex: 1; min-width: 0; }
.dsn-notif-item__title { font-size: 13px; font-weight: 600; color: #f3f4f6; line-height: 1.4; }
.dsn-notif-item__body { font-size: 11px; color: #9ca3af; margin-top: 2px; line-height: 1.4; }
.dsn-notif-item__time { font-size: 10px; color: #6b7280; margin-top: 4px; }
.dsn-notif-item__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #e8192c;
    flex-shrink: 0;
    margin-top: 5px;
}

/* Auth gate inside panel */
.dsn-notif-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20px;
    gap: 8px;
    text-align: center;
}
.dsn-notif-gate__icon { font-size: 36px; }
.dsn-notif-gate__title { font-size: 14px; font-weight: 700; color: #f3f4f6; }
.dsn-notif-gate__sub { font-size: 12px; color: #9ca3af; line-height: 1.5; }
.dsn-notif-gate__btn {
    display: block;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: none;
    background: #e8192c;
    color: #fff;
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    margin-top: 6px;
    cursor: pointer;
}
.dsn-notif-gate__btn--sec {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,.12);
    color: #d1d5db;
}

/* Loading / empty */
.dsn-notif-loading, .dsn-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    gap: 10px;
    color: #6b7280;
    font-size: 13px;
}

@media (max-width: 480px) {
    .dsn-notif-panel { width: calc(100vw - 24px); right: -8px; }
}

/* ================================================
   MOBILE RESPONSIVE — COMPREHENSIVE FIX
   ================================================ */

/* ── Header: very small screens (≤380px) ── */
@media (max-width: 380px) {
    :root { --header-h: 52px; }
    .dsn-container { padding: 0 10px; }
    .dsn-login-btn { padding: 6px 10px; font-size: 12px; }
    .dsn-login-btn span { display: none; } /* hide "Login" text, keep icon */
    .dsn-header__inner { gap: 10px; }
}

/* ── Sidebar hidden on mobile — no orphan column ── */
@media (max-width: 900px) {
    .dsn-sidebar { display: none; }
    .dsn-layout { grid-template-columns: 1fr; }
    /* Full-width article */
    .dsn-article { border-radius: 0; }
}

/* ── Footer mobile ── */
@media (max-width: 480px) {
    .dsn-footer { padding: 28px 0 20px; }
    .dsn-footer__desc { font-size: 12px; }
    .dsn-footer__col-title { font-size: 13px; }
    .dsn-footer__links li a { font-size: 12px; padding: 3px 0; }
    .dsn-footer__gambling { font-size: 11px; gap: 6px; }
    .dsn-footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
    .dsn-footer__copy { font-size: 11px; }
}

/* ── RG bar ── */
@media (max-width: 600px) {
    .dsn-rg-bar { font-size: 11px; padding: 8px 12px; }
    .dsn-rg-bar__badge { font-size: 10px; padding: 1px 5px; }
}

/* ── Breadcrumbs ── */
@media (max-width: 480px) {
    .dsn-breadcrumbs { font-size: 11px; }
    .pl-breadcrumb { font-size: 11px; }
    .pd-breadcrumb { font-size: 11px; margin: 10px 0 14px; }
}

/* ── Sidebar mobile open ── */
@media (max-width: 900px) {
    .dsn-sidebar--mobile-open { display: block; }
}

/* ── Content images no overflow ── */
.dsn-article__content img,
.dsn-article__content table,
.dsn-article__content pre {
    max-width: 100%;
    overflow-x: auto;
}
@media (max-width: 600px) {
    .dsn-article__content { font-size: 14px; }
    .dsn-article__content h2 { font-size: 18px; }
    .dsn-article__content h3 { font-size: 16px; }
}

/* ── Page title ── */
@media (max-width: 480px) {
    .dsn-page-title { font-size: 18px; margin-bottom: 12px; }
    .dsn-section-title { font-size: 16px; }
}

/* ── Filter tabs wrap on small screens ── */
@media (max-width: 480px) {
    .dsn-filter-tabs { gap: 6px; }
    .dsn-filter-tab { font-size: 12px; padding: 4px 10px; }
}

/* ── Home predictions widget on mobile ── */
@media (max-width: 480px) {
    .dsn-home-pred-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
    .dsn-home-pred-card { padding: 10px; }
    .dsn-home-pred-card__match { font-size: 11px; }
    .dsn-home-pred-card__tip { font-size: 12px; }
}
@media (max-width: 340px) {
    .dsn-home-pred-grid { grid-template-columns: 1fr; }
}

/* ── Home betting sites widget ── */
@media (max-width: 480px) {
    .dsn-home-bk-item { padding: 10px 12px; gap: 8px; }
    .dsn-home-bk-name { font-size: 13px; }
    .dsn-home-bk-btn { padding: 5px 10px; font-size: 11px; }
}

/* ── Sidebar widgets ── */
@media (max-width: 900px) {
    .dsn-bk-item { padding: 10px 12px; }
}

/* ── News card titles on small phones ── */
@media (max-width: 380px) {
    .dsn-card__title { font-size: 13px; }
    .dsn-card__meta { font-size: 10px; }
}

/* ── Search bar ── */
@media (max-width: 480px) {
    .dsn-search-input { font-size: 14px; padding: 8px 12px; }
    .dsn-search-submit { padding: 8px 14px; font-size: 13px; }
}


/* ═══════════════════════════════════════════════
   VARiM App Landing Block
   ═══════════════════════════════════════════════ */
.varim-app-landing {
    position: relative;
    margin: 24px 0 8px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(145deg, #0f0f14 0%, #1a0a0e 50%, #0a0a0f 100%);
    border: 1px solid rgba(229,57,53,0.25);
    box-shadow: 0 8px 40px rgba(229,57,53,0.12), 0 2px 0 rgba(229,57,53,0.4) inset;
}

.varim-app-landing .val-glow {
    position: absolute;
    top: -60px; left: 50%;
    transform: translateX(-50%);
    width: 300px; height: 200px;
    background: radial-gradient(ellipse, rgba(229,57,53,0.18) 0%, transparent 70%);
    pointer-events: none;
}

.varim-app-landing .val-inner {
    position: relative;
    padding: 32px 24px 28px;
    text-align: center;
}

.varim-app-landing .val-logo {
    font-family: 'Barlow Condensed', 'Space Mono', monospace;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1px;
    margin-bottom: 10px;
}
.varim-app-landing .val-logo span { color: #e53935; }

.varim-app-landing .val-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(229,57,53,0.15);
    border: 1px solid rgba(229,57,53,0.35);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #e53935;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.varim-app-landing .val-title {
    font-family: 'Barlow Condensed', 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 10px;
    letter-spacing: -0.3px;
}

.varim-app-landing .val-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin: 0 0 20px;
    line-height: 1.5;
}

.varim-app-landing .val-features {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}

.varim-app-landing .val-feat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
}
.varim-app-landing .val-feat span { font-size: 20px; }

.varim-app-landing .val-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.varim-app-landing .val-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.varim-app-landing .val-btn:active { transform: scale(0.97); opacity: 0.9; }

.varim-app-landing .val-btn-tg {
    background: linear-gradient(135deg, #0088cc, #006da8);
    color: #fff;
    box-shadow: 0 4px 20px rgba(0,136,204,0.3);
}

.varim-app-landing .val-btn-pwa {
    background: linear-gradient(135deg, #e53935, #c62828);
    color: #fff;
    box-shadow: 0 4px 20px rgba(229,57,53,0.35);
}

/* Desktop: side-by-side buttons */
@media (min-width: 600px) {
    .varim-app-landing .val-btns { flex-direction: row; }
    .varim-app-landing .val-btn { flex: 1; }
}

/* Hide on desktop (show only in sidebar or keep for all — up to you) */
/* Remove the rule below if you want to show on desktop too */
@media (min-width: 901px) {
    .varim-app-landing { display: none; }
}

/* ── Predictions tab in userinfo.tpl ─────────────────────────── */
.dsn-pred-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:16px 0 8px; }
.dsn-pred-league { font-size:13px; color:var(--color-text-muted,#6b7280); padding:12px 0 0; }
.dsn-pred-section-title { font-size:12px; font-weight:800; color:var(--color-text,#111827); text-transform:uppercase; letter-spacing:.5px; padding:16px 0 8px; border-top:1px solid #f3f4f6; margin-top:8px; }
.dsn-pred-favs { display:flex; flex-direction:column; }
.dsn-pred-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:36px 0; color:#9ca3af; font-size:13px; text-align:center; }
.dsn-pred-empty__icon { font-size:36px; }
.kb-stat { background:#f9fafb; border-radius:10px; padding:12px 8px; text-align:center; }
.kb-stat__val { font-size:20px; font-weight:800; color:#111827; }
.kb-stat__label { font-size:10px; color:#9ca3af; margin-top:2px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.kb-table-wrap { overflow-x:auto; }
.kb-table { width:100%; border-collapse:collapse; font-size:12px; }
.kb-table th { padding:7px 10px; text-align:left; font-size:10px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid #f3f4f6; }
.kb-table td { padding:8px 10px; border-bottom:1px solid #f9fafb; color:#374151; }
.kb-table tr:last-child td { border-bottom:none; }
.kb-table__pick { font-weight:700; color:#111827; }
.kb-table__date { color:#9ca3af; white-space:nowrap; }
.kb-res { display:inline-block; padding:2px 7px; border-radius:20px; font-size:10px; font-weight:800; letter-spacing:.3px; }
.kb-res--w { background:#dcfce7; color:#166534; }
.kb-res--l { background:#fee2e2; color:#991b1b; }
.kb-res--d { background:#fef9c3; color:#854d0e; }
.kb-res--p { background:#f3f4f6; color:#9ca3af; }
.kb-fav-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #f9fafb; }
.kb-fav-item:last-child { border-bottom:none; }
.kb-fav-item__crest { width:24px; height:24px; object-fit:contain; flex-shrink:0; }
.kb-fav-item__crest--placeholder { font-size:14px; }
.kb-fav-item__name { font-size:13px; font-weight:600; color:#111827; }
.kb-btn { display:inline-block; padding:8px 16px; border-radius:8px; font-size:12px; font-weight:700; text-decoration:none; transition:opacity .15s; }
.kb-btn:hover { opacity:.85; }
.kb-btn--primary { background:#e8192c; color:#fff; }
.kb-btn--secondary { background:#f3f4f6; color:#374151; }
.kb-disclaimer { font-size:10px; color:#9ca3af; text-align:center; line-height:1.6; padding-bottom:8px; }
.kb-disclaimer a { color:#9ca3af; }
@media (max-width:600px) { .dsn-pred-stats { grid-template-columns:repeat(2,1fr); } }

/* ── Bookmaker page visibility (bm_js.php) ─ */
.bm-hide-betting .bm-betting-link { display:none !important; }
.bm-hide-bonuses .bm-bonuses-link { display:none !important; }

/* ── Sidebar Matches Today widget ─────────── */
.sb-mt-league { display:flex; align-items:center; gap:6px; padding:5px 12px 4px; background:#f9fafb; border-bottom:1px solid var(--color-border); }
.sb-mt-league__logo { width:14px; height:14px; object-fit:contain; border-radius:2px; background:#fff; }
.sb-mt-league__name { font-size:10px; font-weight:600; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.4px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; flex:1; }
.sb-mt-league__live { font-size:9px; font-weight:700; color:#e8192c; background:#fee2e2; border-radius:3px; padding:1px 5px; white-space:nowrap; flex-shrink:0; animation:sbLivePulse 1.6s ease-in-out infinite; }
.sb-mt-row { display:grid; grid-template-columns:1fr 52px 1fr; align-items:center; gap:4px; padding:6px 10px; border-bottom:1px solid var(--color-border); text-decoration:none; transition:background .12s; }
.sb-mt-row:hover { background:#f9fafb; }
.sb-mt-row--live { background:rgba(232,25,44,.04); border-left:2px solid #e8192c; padding-left:8px; }
.sb-mt-team { display:flex; align-items:center; gap:4px; min-width:0; }
.sb-mt-home { flex-direction:row-reverse; }
.sb-mt-crest { width:18px; height:18px; object-fit:contain; flex-shrink:0; }
.sb-mt-tname { font-size:11.5px; color:var(--color-text); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:1.2; }
.sb-mt-center { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.sb-mt-score { font-size:13px; font-weight:700; color:var(--color-text); line-height:1; white-space:nowrap; }
.sb-mt-score--live { color:#e8192c; }
.sb-mt-time { font-size:11px; color:var(--color-text-muted); font-weight:600; }
.sb-mt-minute { font-size:9px; color:#e8192c; font-weight:700; }
.sb-mt-live-dot { width:6px; height:6px; border-radius:50%; background:#e8192c; flex-shrink:0; animation:sbLivePulse 1.6s ease-in-out infinite; }
.sb-mt-badge { font-size:9px; font-weight:700; padding:1px 4px; border-radius:3px; line-height:1.4; white-space:nowrap; }
.sb-mt-badge--live { background:#fee2e2; color:#991b1b; }
.sb-mt-badge--fin { background:#f3f4f6; color:#9ca3af; }
.sb-mt-empty { padding:12px 14px; font-size:12px; color:var(--color-text-muted); }
.sb-mt-more { display:block; text-align:center; padding:8px; font-size:11px; color:var(--color-text-muted); text-decoration:none; border-top:1px solid var(--color-border); transition:color .12s; }
.sb-mt-more:hover { color:var(--color-green); }
@keyframes dsnPulse { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes sbLivePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.92)} }

/* ── Explore cross-links section ─────────────────────────────────── */
.dsn-explore-section { padding: 28px 0 8px; }
.dsn-explore-section__title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin-bottom: 14px; }
.dsn-explore-section__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 540px) { .dsn-explore-section__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .dsn-explore-section__grid { grid-template-columns: repeat(4, 1fr); } }
.dsn-explore-card { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 16px; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 12px; text-decoration: none; transition: border-color .18s, box-shadow .18s; }
.dsn-explore-card:hover { border-color: var(--color-green); box-shadow: 0 2px 8px rgba(232,25,44,.07); }
.dsn-explore-card__icon { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; flex-shrink: 0; }
.dsn-explore-card__icon svg { width: 19px; height: 19px; display: block; }
.dsn-explore-card__icon--red    { background: rgba(232,25,44,.08);  color: #e8192c; }
.dsn-explore-card__icon--amber  { background: rgba(217,119,6,.10);  color: #d97706; }
.dsn-explore-card__icon--blue   { background: rgba(37,99,235,.08);  color: #2563eb; }
.dsn-explore-card__icon--green  { background: rgba(22,163,74,.08);  color: #16a34a; }
.dsn-explore-card__icon--purple { background: rgba(124,58,237,.08); color: #7c3aed; }
.dsn-explore-card__icon--teal   { background: rgba(13,148,136,.08); color: #0d9488; }
.dsn-explore-card__icon--orange { background: rgba(234,88,12,.08);  color: #ea580c; }
.dsn-explore-card__label { font-weight: 600; font-size: .92rem; color: var(--color-text); }
.dsn-explore-card__desc  { font-size: .78rem; color: var(--color-text-muted); line-height: 1.4; }


/* ── /matches/ catalog cards — Sprint MEGA-USER-FEEDBACK-1 AC-2 (2026-06-03) ── */
/* Replaces dsn-card pattern in catalog mode with explicit team+score+crests grid.
   Mirrors scores.js card visual language, gives finished matches a real score,
   live matches a LIVE badge, scheduled matches kickoff time + "vs".
   Kept in main style.css (NOT match.css) — Protected File rule per CLAUDE.md. */
.mt-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.mt-catalog-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.mt-catalog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.mt-catalog-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: 16px;
}
.mt-catalog-card__league {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 12px;
    color: #6b7280;
    letter-spacing: .03em;
    gap: 8px;
}
.mt-catalog-card__league-name {
    color: #dc2626;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mt-catalog-card__time {
    color: #6b7280;
    font-size: 12px;
    white-space: nowrap;
}
.mt-catalog-card__teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
}
.mt-catalog-card__team {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.mt-catalog-card__team--home {
    justify-self: end;
    flex-direction: row-reverse;
    text-align: right;
}
.mt-catalog-card__team--away {
    justify-self: start;
}
.mt-catalog-card__crest {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}
.mt-catalog-card__name {
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.mt-catalog-card__score {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f9fafb;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    color: #1a1a1a;
    flex-direction: column;
    line-height: 1.1;
}
.mt-catalog-card__score-num,
.mt-catalog-card__score-sep,
.mt-catalog-card__vs,
.mt-catalog-card__kickoff {
    display: inline;
}
.mt-catalog-card__score {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.mt-catalog-card__score-num--live { color: #dc2626; }
.mt-catalog-card__score-sep { color: #6b7280; }
.mt-catalog-card__vs {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
}
.mt-catalog-card__kickoff {
    font-size: 12px;
    color: #1a1a1a;
    margin-left: 6px;
    font-weight: 600;
}
.mt-catalog-card__status--live {
    background: #dc2626;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    text-transform: uppercase;
    margin-left: 6px;
    letter-spacing: .04em;
}
@media (max-width: 480px) {
    .mt-catalog-grid { grid-template-columns: 1fr; gap: 10px; }
    .mt-catalog-card__name { font-size: 13px; }
    .mt-catalog-card__crest { width: 24px; height: 24px; }
    .mt-catalog-card__teams { gap: 8px; }
    .mt-catalog-card__link { padding: 12px; }
}