:root {
    --portal-bg: #f3f0f8;
    --portal-surface: #ffffff;
    --portal-surface-alt: #f8f9fc;
    --portal-ink: #1c1630;
    --portal-muted: #756d89;
    --portal-primary: #5d2da8;
    --portal-primary-strong: #3d116d;
    --portal-accent: #ef476f;
    --portal-line: rgba(39, 22, 71, 0.12);
    --portal-success: #1f9d63;
    --portal-shadow: 0 18px 45px rgba(48, 25, 84, 0.08);
    --portal-radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: "Manrope", "Segoe UI", sans-serif;
    background: radial-gradient(circle at top right, rgba(93, 45, 168, 0.16), transparent 28%), var(--portal-bg);
    color: var(--portal-ink);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
iframe { width: 100%; border: 0; }

.portal-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.portal-container {
    width: min(1380px, calc(100vw - 32px));
    margin: 0 auto;
}

.portal-header {
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(18px);
    background: rgba(243, 240, 248, 0.92);
    border-bottom: 1px solid rgba(61, 17, 109, 0.08);
}

.portal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
}

.portal-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.portal-brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--portal-primary), var(--portal-primary-strong));
    color: #fff;
    box-shadow: var(--portal-shadow);
}

.portal-menu {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.portal-menu a,
.portal-top-link {
    color: var(--portal-muted);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.portal-menu a:hover,
.portal-top-link:hover,
.portal-menu .is-active {
    color: var(--portal-primary-strong);
}

.portal-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--portal-line);
    min-width: min(360px, 100%);
}

.portal-search input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--portal-ink);
}

.portal-search button,
.portal-button,
.portal-chip {
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

.portal-search button,
.portal-button {
    background: linear-gradient(135deg, var(--portal-primary), var(--portal-primary-strong));
    color: #fff;
    padding: 12px 18px;
    font-weight: 800;
}

.portal-button.secondary {
    background: #fff;
    color: var(--portal-primary-strong);
    border: 1px solid var(--portal-line);
}

.portal-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(93, 45, 168, 0.12);
    color: var(--portal-primary-strong);
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.portal-main {
    flex: 1;
    padding: 30px 0 56px;
}

.portal-grid,
.portal-split,
.portal-hero {
    display: grid;
    gap: 24px;
}

.portal-hero {
    grid-template-columns: minmax(0, 1.8fr) minmax(320px, 0.9fr);
    align-items: start;
}

.portal-card,
.portal-panel,
.portal-sidebar-block {
    background: var(--portal-surface);
    border: 1px solid rgba(61, 17, 109, 0.08);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow);
}

.portal-card {
    overflow: hidden;
}

.portal-card-body,
.portal-panel,
.portal-sidebar-block {
    padding: 22px;
}

.portal-card-media {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #23103f, #5d2da8);
    overflow: hidden;
}

.portal-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portal-card-content {
    padding: 18px 20px 22px;
}

.portal-kicker,
.portal-meta,
.portal-overline {
    color: var(--portal-muted);
    font-size: 0.82rem;
}

.portal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.portal-title {
    margin: 10px 0 8px;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    line-height: 0.98;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.portal-title.hero {
    font-size: clamp(2.3rem, 5vw, 4.8rem);
}

.portal-title.section {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.portal-title.card {
    font-size: 1.65rem;
}

.portal-copy {
    color: var(--portal-muted);
    line-height: 1.7;
}

.portal-actions,
.portal-tags,
.portal-stats-strip,
.portal-scoreline,
.portal-inline-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.portal-scoreline {
    justify-content: space-between;
    padding: 18px 0;
    border-top: 1px solid var(--portal-line);
    border-bottom: 1px solid var(--portal-line);
    margin: 18px 0;
}

.portal-scoreline-team {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.portal-logo,
.portal-avatar {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    object-fit: cover;
    background: linear-gradient(135deg, rgba(93, 45, 168, 0.28), rgba(239, 71, 111, 0.18));
}

.portal-avatar { border-radius: 18px; width: 90px; height: 90px; }

.portal-mini-grid,
.portal-content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.portal-content-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-rail {
    display: grid;
    gap: 18px;
}

.portal-rail-item,
.portal-match-row,
.portal-table-row {
    display: grid;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid var(--portal-line);
}

.portal-rail-item:last-child,
.portal-match-row:last-child,
.portal-table-row:last-child {
    border-bottom: 0;
}

.portal-table {
    width: 100%;
    border-collapse: collapse;
}

.portal-table th,
.portal-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--portal-line);
    text-align: left;
    font-size: 0.95rem;
}

.portal-table th { color: var(--portal-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.portal-table .is-highlight { background: rgba(93, 45, 168, 0.08); }
.portal-table .is-right { text-align: right; }

.portal-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.portal-stat {
    padding: 16px;
    border-radius: 18px;
    background: var(--portal-surface-alt);
    border: 1px solid var(--portal-line);
}

.portal-stat strong {
    display: block;
    font-size: 1.5rem;
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
}

.portal-page-head {
    display: grid;
    gap: 18px;
    margin-bottom: 24px;
    padding: 28px;
    border-radius: 28px;
    color: #fff;
    background: linear-gradient(140deg, #23103f, #55258c 58%, #7c44c4);
    box-shadow: var(--portal-shadow);
}

.portal-footer {
    color: rgba(255, 255, 255, 0.82);
    background: linear-gradient(180deg, #4a2286, #2d114e);
    padding: 42px 0;
}

.portal-footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 22px;
}

.portal-footer a { color: rgba(255, 255, 255, 0.82); }
.portal-footer .portal-title.card { color: #fff; margin-top: 0; }

.portal-prose {
    color: var(--portal-muted);
    line-height: 1.85;
}

.portal-prose p:first-child { margin-top: 0; }
.portal-prose img { border-radius: 20px; }

.portal-empty {
    padding: 22px;
    text-align: center;
    color: var(--portal-muted);
    border: 1px dashed rgba(93, 45, 168, 0.22);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.54);
}

@media (max-width: 1180px) {
    .portal-hero,
    .portal-footer-grid,
    .portal-content-grid.three {
        grid-template-columns: 1fr;
    }

    .portal-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .portal-nav { flex-direction: column; align-items: stretch; }
    .portal-menu { justify-content: center; }
    .portal-search { min-width: 100%; }
    .portal-mini-grid,
    .portal-content-grid,
    .portal-stat-grid { grid-template-columns: 1fr; }
    .portal-page-head { padding: 22px; }
}

@media (max-width: 640px) {
    .portal-container { width: min(100vw - 20px, 1380px); }
    .portal-main { padding-top: 20px; }
    .portal-card-content,
    .portal-panel,
    .portal-sidebar-block { padding: 18px; }
    .portal-title.hero { font-size: 2.2rem; }
}