/*
Theme Name: OptaTips Theme
Theme URI: https://optatips.com
Author: OptaTips
Author URI: https://optatips.com
Description: A clean football prediction theme for OptaTips.
Version: 0.3.2
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: optatips-theme
*/

:root {
    --ot-color-ink: #111827;
    --ot-color-muted: #5f6b7a;
    --ot-color-line: #d9e1ea;
    --ot-color-surface: #ffffff;
    --ot-color-page: #f4f7f6;
    --ot-color-green: #0f766e;
    --ot-color-green-dark: #064e3b;
    --ot-color-lime: #b6e84f;
    --ot-color-navy: #102033;
    --ot-shadow-soft: 0 18px 45px rgba(16, 32, 51, 0.12);
    --ot-radius: 8px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    color: var(--ot-color-ink);
    background: var(--ot-color-page);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

body > .skiptranslate,
.optatips-google-translate,
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt {
    display: none !important;
}

html body {
    top: 0 !important;
}

a {
    color: var(--ot-color-green);
}

a:hover {
    color: var(--ot-color-green-dark);
}

img {
    max-width: 100%;
    height: auto;
}

.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #0b1220;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
}

.site-header__top-inner,
.site-header__nav-inner,
.site-footer__inner,
.optatips-container {
    width: min(calc(100% - 32px), 1200px);
    margin: 0 auto;
}

.site-header__top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #0b1220;
}

.site-header__top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    padding: 8px 0;
}

.site-header__navrow {
    background: #080d17;
}

.site-header__nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 62px;
    padding: 10px 0;
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
    min-width: max-content;
}

.site-branding__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #ffffff;
    background: var(--ot-color-green);
    font-size: 20px;
    font-weight: 800;
}

.site-branding__logo {
    display: block;
    width: auto;
    max-width: 168px;
    max-height: 42px;
    object-fit: contain;
}

.site-branding--footer .site-branding__logo {
    max-width: 156px;
    max-height: 44px;
}

.site-branding__name {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    overflow: visible;
}

.site-nav__menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(10px, 1.2vw, 18px);
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 100%;
}

.site-nav__menu li {
    min-width: 0;
}

.site-nav a,
.site-nav__menu a {
    color: #cbd5e1;
    text-decoration: none;
    white-space: nowrap;
}

.site-nav a:hover,
.site-nav__menu a:hover {
    color: var(--ot-color-lime);
}

.site-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.site-header__tools {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
}

.site-header__select {
    display: grid;
    gap: 3px;
    flex: 0 0 138px;
    width: 138px;
    min-width: 138px;
    max-width: 138px;
}

.site-header__select--account {
    flex: 0 0 138px;
    width: 138px;
    min-width: 138px;
    max-width: 138px;
}

.site-header__select span {
    color: var(--ot-color-muted);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.site-header__tools .site-header__select span,
.site-header__select--account span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.site-header__select select {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    padding: 0 26px 0 26px;
    color: #ffffff;
    background: #102033;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-align-last: center;
}

.site-header__select select option {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.site-header__select select option:checked,
.site-header__select select option:hover,
.site-header__select select option:focus {
    color: #ffffff;
    background: #064e3b linear-gradient(#064e3b, #064e3b);
}

.site-header__select select:focus {
    border-color: #064e3b;
    outline: 2px solid rgba(6, 78, 59, 0.18);
    outline-offset: 2px;
}

.site-header__select select:hover {
    border-color: rgba(182, 232, 79, 0.42);
    color: #ffffff;
    background: #064e3b;
}

.site-header__select select:hover option {
    color: var(--ot-color-ink);
    background: #ffffff;
}

.site-header__select select:hover option:checked,
.site-header__select select:hover option:hover,
.site-header__select select:hover option:focus {
    color: #ffffff;
    background: #064e3b linear-gradient(#064e3b, #064e3b);
}

.site-header__select--enhanced {
    position: relative;
}

.site-header__select--enhanced select {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.optatips-custom-select {
    position: relative;
    width: 138px;
    max-width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.optatips-custom-select__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    padding: 0 30px;
    color: #ffffff;
    background: #102033;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.optatips-custom-select__button::after {
    position: absolute;
    right: 9px;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: rotate(45deg) translateY(-2px);
}

.optatips-custom-select__button:hover,
.optatips-custom-select.is-open .optatips-custom-select__button,
.optatips-custom-select__button:focus {
    border-color: #064e3b;
    color: #ffffff;
    background: #064e3b;
    outline: none;
}

.optatips-custom-select__button:focus {
    box-shadow: 0 0 0 2px rgba(6, 78, 59, 0.18);
}

.optatips-custom-select__list {
    position: absolute;
    z-index: 10000;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    min-width: 138px;
    max-height: 280px;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: var(--ot-color-ink);
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    list-style: none;
}

.optatips-custom-select__option {
    padding: 9px 12px;
    color: var(--ot-color-ink);
    background: #ffffff;
    cursor: pointer;
    white-space: normal;
    text-align: center;
    font-weight: 800;
}

.optatips-custom-select__option:hover,
.optatips-custom-select__option:focus,
.optatips-custom-select__option.is-selected {
    color: #ffffff;
    background: #064e3b;
}

.site-header__login,
.site-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border-radius: 8px;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
}

.site-header__login {
    color: #d9f99d;
    border: 1px solid rgba(182, 232, 79, 0.18);
    background: rgba(182, 232, 79, 0.08);
}

.site-header__cta {
    color: #064e3b;
    background: var(--ot-color-lime);
}

.site-header__login:hover,
.site-header__cta:hover {
    color: #064e3b;
    background: #d9f99d;
}

@media (max-width: 1100px) {
    .site-nav {
        font-size: 12px;
        overflow: visible;
    }

    .site-nav__menu {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 9px 13px;
    }

    .site-header__actions {
        justify-content: flex-end;
        max-width: 100%;
    }

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

    .home-ai-snapshot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tipster-profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tipster-profile-cta-grid,
    .tipster-profile-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.site-main {
    flex: 1;
}

.hero {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(6, 78, 59, 0.96), rgba(16, 32, 51, 0.94)),
        #102033;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px);
    background-size: 44px 44px;
}

.hero__inner {
    position: relative;
    width: min(calc(100% - 32px), 1200px);
    margin: 0 auto;
    padding: 86px 0 78px;
}

.home-hero::after {
    content: "";
    position: absolute;
    right: max(24px, calc((100vw - 1200px) / 2));
    bottom: 42px;
    width: 280px;
    height: 280px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    box-shadow: inset 0 0 0 42px rgba(255, 255, 255, 0.04);
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: #e7fff1;
    background: rgba(255, 255, 255, 0.08);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.hero__title {
    max-width: 760px;
    margin: 0;
    font-size: clamp(40px, 7vw, 76px);
    line-height: 1;
    letter-spacing: 0;
}

.hero__text {
    max-width: 640px;
    margin: 22px 0 0;
    color: #d9f4e8;
    font-size: 19px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 8px;
    padding: 0 18px;
    font-weight: 900;
    text-decoration: none;
}

.hero__button--primary {
    color: #064e3b;
    background: var(--ot-color-lime);
}

.hero__button--secondary {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
}

.hero__button:hover {
    color: #064e3b;
    background: #d9f99d;
}

.hero__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: 820px;
    margin-top: 34px;
}

.hero__stat {
    min-height: 82px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--ot-radius);
    background: rgba(255, 255, 255, 0.09);
}

.hero__stat strong {
    display: block;
    color: var(--ot-color-lime);
    font-size: 24px;
    line-height: 1.2;
}

.hero__stat span {
    display: block;
    margin-top: 4px;
    color: #d9f4e8;
    font-size: 13px;
    font-weight: 700;
}

.section {
    padding: 54px 0;
}

.section--white {
    background: #ffffff;
}

.section--deep {
    color: #ffffff;
    background: var(--ot-color-navy);
}

.section__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.section__title {
    margin: 0;
    font-size: 30px;
    line-height: 1.2;
}

.section__eyebrow {
    margin: 0 0 8px;
    color: var(--ot-color-green);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.section__description {
    max-width: 520px;
    margin: 8px 0 0;
    color: var(--ot-color-muted);
}

.section__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 8px;
    padding: 0 14px;
    color: #ffffff;
    background: var(--ot-color-green);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.section__link:hover {
    color: #ffffff;
    background: var(--ot-color-green-dark);
}

.section__header--light .section__title,
.section__header--light .section__description {
    color: #ffffff;
}

.section__header--light .section__description {
    color: #d9f4e8;
}

.section__link--light {
    color: #064e3b;
    background: var(--ot-color-lime);
}

.section__link--light:hover {
    color: #064e3b;
    background: #d9f99d;
}

.tips-panel {
    padding: 24px;
    border: 1px solid var(--ot-color-line);
    border-radius: var(--ot-radius);
    background: var(--ot-color-surface);
    box-shadow: var(--ot-shadow-soft);
}

.tips-panel--flat {
    box-shadow: none;
}

.tips-panel .optatips-tips-list {
    margin-top: 0;
    margin-bottom: 0;
}

.site-footer {
    margin-top: auto;
    position: relative;
    color: #cbd5e1;
    background: #0b1220;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(260px, 1.45fr) repeat(3, minmax(150px, 0.8fr));
    gap: 34px;
    align-items: start;
    padding: 58px 0 44px;
    font-size: 14px;
}

.site-branding--footer {
    color: #ffffff;
}

.site-footer__brand p {
    max-width: 420px;
    margin: 18px 0 0;
    color: #aebbc9;
    line-height: 1.75;
}

.site-footer__email {
    display: inline-flex;
    margin-top: 16px;
    font-weight: 800;
}

.site-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.06);
    font-size: 13px;
    font-weight: 900;
}

.site-footer__links {
    display: grid;
    gap: 10px;
}

.site-footer__links h2 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 0.95rem;
    letter-spacing: 0;
}

.site-footer a {
    color: #cbd5e1;
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--ot-color-lime);
}

.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: #080d17;
}

.site-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    width: min(calc(100% - 32px), 1200px);
    margin: 0 auto;
    padding: 22px 0;
}

.site-footer__bottom p {
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.6;
}

.site-footer__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.site-footer__badges span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border: 1px solid rgba(182, 232, 79, 0.26);
    border-radius: 999px;
    padding: 0 10px;
    color: #d9f99d;
    background: rgba(182, 232, 79, 0.08);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.site-footer__back-to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 50;
    min-width: 48px;
    min-height: 40px;
    border: 1px solid rgba(182, 232, 79, 0.34);
    border-radius: 999px;
    padding: 0 14px;
    color: #064e3b;
    background: var(--ot-color-lime);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
}

.site-footer__back-to-top:hover,
.site-footer__back-to-top:focus {
    color: #064e3b;
    background: #d9f99d;
}

.home-split {
    padding: 54px 0;
    background: #eef7f3;
}

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

.home-cta-card {
    min-height: 270px;
    padding: 28px;
    border-radius: 8px;
    color: #ffffff;
    background: var(--ot-color-green-dark);
}

.home-cta-card--pricing {
    color: var(--ot-color-ink);
    border: 1px solid var(--ot-color-line);
    background: #ffffff;
}

.home-cta-card h2 {
    max-width: 620px;
    margin: 0;
    font-size: 30px;
    line-height: 1.15;
}

.home-cta-card p:not(.section__eyebrow) {
    max-width: 620px;
    margin: 14px 0 0;
    color: #d9f4e8;
}

.home-cta-card--pricing p:not(.section__eyebrow) {
    color: var(--ot-color-muted);
}

.home-cta-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 24px;
    border-radius: 8px;
    padding: 0 18px;
    color: #064e3b;
    background: var(--ot-color-lime);
    font-weight: 900;
    text-decoration: none;
}

.home-cta-card--pricing a {
    color: #ffffff;
    background: var(--ot-color-green);
}

.home-conversion-section {
    background: #f7fbf9;
}

.home-conversion-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.home-conversion-card {
    min-height: 100%;
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    padding: 22px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(16, 32, 51, 0.08);
}

.home-conversion-card span {
    color: var(--ot-color-green);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.home-conversion-card h3 {
    margin: 10px 0 8px;
    color: var(--ot-color-navy);
    font-size: 1.08rem;
}

.home-conversion-card p {
    color: var(--ot-color-muted);
    line-height: 1.6;
}

.home-conversion-card a,
.tips-archive-card__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 8px;
    padding: 0 13px;
    color: #ffffff;
    background: var(--ot-color-green);
    font-size: 0.86rem;
    font-weight: 900;
    text-decoration: none;
}

.home-conversion-card a:hover,
.home-conversion-card a:focus,
.tips-archive-card__actions a:hover,
.tips-archive-card__actions a:focus {
    color: #ffffff;
    background: var(--ot-color-green-dark);
}

.home-conversion-card--super {
    border-color: rgba(245, 158, 11, 0.28);
    background: #fff7ed;
}

.home-conversion-card--ai {
    border-color: rgba(14, 165, 233, 0.26);
    background: linear-gradient(180deg, #ecfeff 0%, #ffffff 100%);
}

.home-conversion-card--ai span {
    color: #0891b2;
}

.home-conversion-card--premium {
    border-color: rgba(37, 99, 235, 0.18);
}

.home-conversion-card--follow {
    border-color: rgba(20, 184, 126, 0.22);
}

.tipster-profile-hero {
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(6, 78, 59, 0.98), rgba(16, 32, 51, 0.96)),
        #102033;
}

.tipster-profile-hero__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: 64px 0;
}

.tipster-profile-hero__avatar .optatips-tipster-avatar {
    width: 112px;
    height: 112px;
    border: 3px solid rgba(255, 255, 255, 0.28);
    font-size: 42px;
}

.tipster-profile-hero h1 {
    margin: 0;
    font-size: clamp(38px, 6vw, 64px);
    line-height: 1;
}

.tipster-profile-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.tipster-profile-hero__meta span {
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: #d9f4e8;
    background: rgba(255, 255, 255, 0.08);
    font-size: 13px;
    font-weight: 800;
}

.tipster-profile-hero__bio {
    max-width: 720px;
    margin: 18px 0 0;
    color: #fcdf17;
    font-size: 18px;
}

.tipster-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
}

.tipster-profile-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border: 1px solid rgba(182, 232, 79, 0.4);
    border-radius: 999px;
    padding: 0 12px;
    color: var(--ot-color-lime);
    background: rgba(255, 255, 255, 0.08);
    font-size: 13px;
    font-weight: 900;
}

.tipster-profile-risk {
    max-width: 760px;
    border-left: 3px solid var(--ot-color-lime);
    padding-left: 14px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
}

.tipster-profile-hero__leagues {
    margin: 16px 0 0;
    color: #ffffff;
}

.tipster-profile-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 34px;
}

.tipster-profile-trust-heading {
    align-items: flex-end;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.tipster-profile-trust-heading h2 {
    color: #07111f;
    font-size: clamp(26px, 3vw, 38px);
    margin: 0;
}

.tipster-profile-trust-heading p {
    color: var(--ot-color-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 520px;
}

.tipster-profile-empty-stats,
.tipster-profile-responsible {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    color: #14532d;
    font-weight: 800;
    line-height: 1.6;
    margin: -16px 0 34px;
    padding: 16px 18px;
}

.tipster-profile-details,
.tipster-profile-links div {
    display: grid;
    gap: 16px;
}

.tipster-profile-details {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 34px;
}

.tipster-profile-details article,
.tipster-profile-links,
.tipster-profile-faq {
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    background: #ffffff;
}

.tipster-profile-details article {
    padding: 20px;
}

.tipster-profile-details h2,
.tipster-profile-links h2,
.tipster-profile-faq h2 {
    margin: 0 0 10px;
    color: var(--ot-color-navy);
    font-size: 1.05rem;
}

.tipster-profile-details p {
    margin: 0;
    color: var(--ot-color-muted);
    line-height: 1.68;
}

.tipster-profile-links,
.tipster-profile-faq {
    margin-top: 28px;
    padding: 22px;
}

.tipster-profile-cta-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 34px 0;
}

.tipster-profile-cta-card {
    border: 1px solid #dbe5e1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
}

.tipster-profile-cta-card--follow {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.tipster-profile-cta-card--premium {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.tipster-profile-cta-card--super {
    background: #fff7ed;
    border-color: #fed7aa;
}

.tipster-profile-cta-card--ai {
    background: #ecfeff;
    border-color: #a5f3fc;
}

.tipster-profile-cta-card h2,
.tipster-profile-responsible h2 {
    color: #07111f;
    font-size: 1.1rem;
    margin: 0;
}

.tipster-profile-cta-card p,
.tipster-profile-responsible p {
    color: var(--ot-color-muted);
    line-height: 1.65;
    margin: 0;
}

.tipster-profile-cta-card a {
    align-items: center;
    align-self: flex-start;
    background: var(--ot-color-green);
    border-radius: 8px;
    color: #ffffff;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    margin-top: auto;
    min-height: 42px;
    padding: 0 16px;
    text-decoration: none;
}

.tipster-profile-cta-card a:hover,
.tipster-profile-cta-card a:focus {
    background: var(--ot-color-lime);
    color: #064e3b;
}

.tipster-profile-responsible {
    margin: 34px 0 0;
}

.optatips-aggregate-page .landing-hero {
    background:
        linear-gradient(135deg, rgba(6, 78, 59, 0.94), rgba(11, 18, 32, 0.96)),
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.22), transparent 34%);
    color: #ffffff;
}

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

.aggregate-card {
    background: #ffffff;
    border: 1px solid #dbe5e1;
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    padding: 28px;
}

.aggregate-card--wide {
    grid-column: span 2;
}

.aggregate-card h2 {
    color: #07111f;
    font-size: 24px;
    margin: 0 0 16px;
}

.aggregate-card .internal-links-block {
    margin: 0;
    padding: 0;
}

.aggregate-card .internal-links-block ul {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.aggregate-card .internal-links-block li {
    align-items: center;
    border-bottom: 1px solid #e5eee9;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 0;
}

.aggregate-card .internal-links-block a {
    color: #064e3b;
    font-weight: 800;
    text-decoration: none;
}

.aggregate-card .internal-links-block a:hover,
.aggregate-card .internal-links-block a:focus {
    color: #0f766e;
}

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

.aggregate-stats span {
    background: #f3faf7;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    color: #536277;
    display: grid;
    gap: 4px;
    padding: 14px;
}

.aggregate-stats strong {
    color: #07111f;
    font-size: 24px;
}

.aggregate-link {
    color: #064e3b;
    display: inline-flex;
    font-weight: 800;
    margin-top: 18px;
    text-decoration: none;
}

.aggregate-copy,
.aggregate-insight-grid article {
    background: #ffffff;
    border: 1px solid #dbe5e1;
    border-radius: 8px;
    padding: 28px;
}

.aggregate-copy h2,
.aggregate-insight-grid h2 {
    margin-top: 0;
}

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

.tipster-profile-links div {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tipster-profile-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 8px;
    padding: 0 12px;
    color: #ffffff;
    background: var(--ot-color-green);
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.tipster-profile-links a:hover {
    color: #064e3b;
    background: var(--ot-color-lime);
}

.tipster-profile-section-header {
    margin-bottom: 12px;
}

.report-band {
    padding: 46px 0;
    color: #ffffff;
    background: #0f766e;
}

.report-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.report-band h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.2;
}

.report-band p {
    max-width: 720px;
    margin: 10px 0 0;
    color: #d9f4e8;
}

.report-band__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    color: #064e3b;
    background: #b6e84f;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.report-band__button:hover {
    color: #064e3b;
    background: #d9f99d;
}

.tipster-join-hero {
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(6, 78, 59, 0.97), rgba(16, 32, 51, 0.95)),
        #102033;
}

.tipster-join-hero__inner {
    padding: 78px 0 70px;
}

.tipster-join-hero h1 {
    max-width: 780px;
    margin: 0;
    font-size: clamp(40px, 6vw, 68px);
    line-height: 1;
}

.tipster-join-hero p:not(.hero__eyebrow) {
    max-width: 680px;
    margin: 20px 0 0;
    color: #d9f4e8;
    font-size: 19px;
}

.tipster-join-hero__button,
.tipster-join-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 26px;
    padding: 0 18px;
    border-radius: 8px;
    color: #064e3b;
    background: #b6e84f;
    font-weight: 800;
    text-decoration: none;
}

.tipster-join-hero__button:hover,
.tipster-join-link:hover {
    color: #064e3b;
    background: #d9f99d;
}

.tipster-join-grid,
.tipster-join-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.tipster-join-card,
.tipster-join-steps > div,
.tipster-join-faq {
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    background: #ffffff;
}

.tipster-join-card {
    padding: 20px;
}

.tipster-join-card h3,
.tipster-join-steps h3,
.tipster-join-faq h2 {
    margin: 0 0 8px;
    color: var(--ot-color-ink);
    line-height: 1.2;
}

.tipster-join-card p,
.tipster-join-steps p,
.tipster-join-split p,
.tipster-join-faq p {
    margin: 0;
    color: var(--ot-color-muted);
}

.tipster-join-band {
    background: #eef7f3;
}

.tipster-join-steps > div {
    padding: 20px;
}

.tipster-join-steps span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border-radius: 50%;
    color: #ffffff;
    background: var(--ot-color-green);
    font-weight: 900;
}

.tipster-join-split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: start;
}

.tipster-join-faq {
    padding: 20px;
}

.tipster-join-faq details {
    padding: 14px 0;
    border-top: 1px solid var(--ot-color-line);
}

.tipster-join-faq details:first-of-type {
    border-top: 0;
}

.tipster-join-faq summary {
    color: var(--ot-color-ink);
    cursor: pointer;
    font-weight: 800;
}

.tipster-join-faq details p {
    margin-top: 8px;
}

.blog-hero,
.single-post-hero {
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(6, 78, 59, 0.97), rgba(16, 32, 51, 0.95)),
        #102033;
}

.blog-hero__inner,
.single-post-hero .optatips-container {
    padding: 72px 0 64px;
}

.blog-hero h1,
.single-post-hero h1 {
    max-width: 840px;
    margin: 0;
    font-size: clamp(38px, 6vw, 66px);
    line-height: 1;
}

.blog-hero p:not(.hero__eyebrow) {
    max-width: 720px;
    margin: 20px 0 0;
    color: #d9f4e8;
    font-size: 19px;
}

.blog-layout,
.single-post-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}

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

.blog-card,
.blog-widget,
.single-post-main,
.related-post-card {
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(16, 32, 51, 0.08);
}

.blog-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
}

.blog-card__media,
.related-post-card__media,
.single-post-featured {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    color: #d9f4e8;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.94), rgba(16, 32, 51, 0.95)),
        var(--ot-color-navy);
    font-weight: 900;
    text-decoration: none;
}

.blog-card__media img,
.related-post-card__media img,
.single-post-featured img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px;
}

.blog-card__meta,
.single-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--ot-color-muted);
    font-size: 13px;
    font-weight: 800;
}

.blog-card__meta span:not(:last-child)::after,
.single-post-meta span:not(:last-child)::after {
    content: "/";
    margin-left: 8px;
    color: #9ca3af;
}

.single-post-meta {
    margin-top: 18px;
    color: #d9f4e8;
}

.blog-card h2 {
    margin: 12px 0 10px;
    font-size: 24px;
    line-height: 1.18;
}

.blog-card h2 a,
.related-post-card h3 a {
    color: var(--ot-color-ink);
    text-decoration: none;
}

.blog-card h2 a:hover,
.related-post-card h3 a:hover {
    color: var(--ot-color-green);
}

.blog-card__excerpt {
    color: var(--ot-color-muted);
}

.blog-card__excerpt p {
    margin: 0 0 12px;
}

.blog-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--ot-color-line);
    color: var(--ot-color-muted);
    font-size: 13px;
    font-weight: 800;
}

.blog-card__footer > a,
.blog-widget--cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 8px;
    padding: 0 13px;
    color: #ffffff;
    background: var(--ot-color-green);
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.blog-sidebar {
    display: grid;
    gap: 16px;
}

.blog-widget {
    padding: 20px;
}

.blog-widget h2 {
    margin: 0 0 12px;
    font-size: 21px;
    line-height: 1.2;
}

.blog-widget p {
    margin: 0 0 14px;
    color: var(--ot-color-muted);
}

.blog-search {
    display: grid;
    gap: 10px;
}

.blog-search input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 11px 12px;
    color: var(--ot-color-ink);
    font: inherit;
}

.blog-search button {
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: var(--ot-color-green);
    font-weight: 900;
    cursor: pointer;
}

.blog-category-list {
    display: grid;
    gap: 8px;
}

.blog-category-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ot-color-ink);
    background: #f4f7f6;
    font-weight: 800;
    text-decoration: none;
}

.blog-category-list span {
    color: var(--ot-color-green);
}

.blog-widget--cta {
    color: #ffffff;
    background: var(--ot-color-navy);
}

.blog-widget--cta h2 {
    color: #ffffff;
}

.blog-widget--cta p {
    color: #d9f4e8;
}

.blog-widget--cta a {
    color: #064e3b;
    background: var(--ot-color-lime);
}

.blog-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    border-radius: 8px;
    padding: 0 12px;
    color: var(--ot-color-green-dark);
    background: #ffffff;
    font-weight: 900;
    text-decoration: none;
}

.blog-pagination .current {
    color: #ffffff;
    background: var(--ot-color-green);
}

.blog-empty {
    padding: 18px;
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--ot-color-muted);
}

.single-post-main {
    overflow: hidden;
}

.single-post-featured {
    min-height: 340px;
}

.single-post-content {
    padding: 30px;
    color: #243244;
    font-size: 18px;
}

.single-post-content p {
    margin: 0 0 18px;
}

.single-post-content h2,
.single-post-content h3 {
    margin: 30px 0 12px;
    color: var(--ot-color-ink);
    line-height: 1.2;
}

.single-post-footer {
    display: grid;
    gap: 16px;
    padding: 0 30px 30px;
}

.single-post-tax,
.single-post-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.single-post-tax strong,
.single-post-share strong {
    color: var(--ot-color-ink);
}

.single-post-share span:not(:first-child) {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border-radius: 999px;
    padding: 0 11px;
    color: var(--ot-color-green-dark);
    background: #e7f8f3;
    font-size: 13px;
    font-weight: 800;
}

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

.related-post-card {
    overflow: hidden;
}

.related-post-card__media {
    min-height: 130px;
}

.related-post-card > div {
    padding: 16px;
}

.related-post-card span {
    color: var(--ot-color-muted);
    font-size: 13px;
    font-weight: 800;
}

.related-post-card h3 {
    margin: 8px 0 0;
    font-size: 19px;
    line-height: 1.2;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.not-found-hero {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(16, 32, 51, 0.96), rgba(6, 78, 59, 0.92)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 80px);
}

.not-found-hero::before {
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    content: "";
    pointer-events: none;
}

.not-found-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: center;
    min-height: 520px;
    padding: 72px 0;
}

.not-found-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border: 1px solid rgba(182, 232, 79, 0.5);
    border-radius: 999px;
    padding: 0 12px;
    color: var(--ot-color-lime);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.not-found-hero h1 {
    max-width: 760px;
    margin: 18px 0 12px;
    font-size: clamp(42px, 7vw, 82px);
    line-height: 1;
}

.not-found-hero p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 19px;
}

.not-found-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.not-found-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    padding: 0 18px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    font-weight: 900;
    text-decoration: none;
}

.not-found-hero__button:hover,
.not-found-hero__button--primary {
    color: var(--ot-color-navy);
    background: var(--ot-color-lime);
}

.not-found-scoreboard {
    display: grid;
    gap: 12px;
    justify-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 34px 24px;
    background: rgba(2, 6, 23, 0.34);
    box-shadow: var(--ot-shadow-soft);
}

.not-found-scoreboard span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.not-found-scoreboard strong {
    color: var(--ot-color-lime);
    font-size: 76px;
    line-height: 1;
}

.not-found-section {
    background: var(--ot-color-page);
}

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

.not-found-panel {
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    padding: 24px;
    background: #ffffff;
    box-shadow: var(--ot-shadow-soft);
}

.not-found-panel h2 {
    margin: 0 0 14px;
}

.not-found-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.not-found-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #edf2f7;
    padding-bottom: 12px;
}

.not-found-list a,
.not-found-inline-link {
    color: var(--ot-color-green-dark);
    font-weight: 900;
    text-decoration: none;
}

.not-found-list span {
    color: var(--ot-color-muted);
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

.home-ops-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 22px;
    align-items: stretch;
}

.weekly-accumulator,
.trending-posts {
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    padding: 26px;
    background: #ffffff;
    box-shadow: var(--ot-shadow-soft);
}

.weekly-accumulator {
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(16, 32, 51, 0.97), rgba(6, 78, 59, 0.94)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 70px);
}

.weekly-accumulator h2 {
    margin: 8px 0 12px;
    color: #ffffff;
    font-size: 32px;
    line-height: 1.08;
}

.weekly-accumulator p {
    color: rgba(255, 255, 255, 0.8);
}

.weekly-accumulator a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 10px;
    border-radius: 8px;
    padding: 0 15px;
    color: var(--ot-color-navy);
    background: var(--ot-color-lime);
    font-weight: 900;
    text-decoration: none;
}

.trending-posts__list {
    display: grid;
    gap: 12px;
}

.trending-posts__list a {
    display: grid;
    gap: 4px;
    border-bottom: 1px solid #edf2f7;
    padding-bottom: 12px;
    text-decoration: none;
}

.trending-posts__list span {
    color: var(--ot-color-muted);
    font-size: 13px;
    font-weight: 800;
}

.trending-posts__list strong {
    color: var(--ot-color-navy);
    font-size: 18px;
    line-height: 1.2;
}

.home-seo-intro__content {
    max-width: 980px;
}

.home-seo-intro__content h2 {
    color: var(--ot-color-navy);
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    line-height: 1.12;
    margin: 0 0 18px;
}

.home-seo-intro__content p {
    color: var(--ot-color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
    margin: 0 0 14px;
}

.home-seo-intro__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.home-seo-intro__links a {
    border: 1px solid rgba(18, 106, 61, 0.2);
    border-radius: 999px;
    color: var(--ot-color-green);
    font-weight: 800;
    padding: 10px 14px;
    text-decoration: none;
}

.home-ai-snapshot-section {
    color: #ffffff;
    background: #0b1f1e;
}

.home-ai-snapshot-section .section__title,
.home-ai-snapshot-section .section__description {
    color: #ffffff;
}

.home-ai-snapshot-section .section__description {
    color: rgba(255, 255, 255, 0.74);
}

.home-ai-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.home-ai-snapshot-card,
.home-ai-empty {
    border: 1px solid rgba(182, 232, 79, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.home-ai-snapshot-card {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.home-ai-empty {
    padding: 22px;
}

.home-ai-empty strong {
    color: #ffffff;
}

.home-ai-empty p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.72);
}

.home-ai-snapshot-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.home-ai-snapshot-card__top strong {
    color: #b6e84f;
    font-size: 0.74rem;
    text-align: right;
}

.home-ai-snapshot-card h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.05rem;
    line-height: 1.25;
}

.home-ai-snapshot-card h3 em {
    display: inline-block;
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.72rem;
    font-style: normal;
    text-transform: uppercase;
}

.home-ai-snapshot-card__signals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.home-ai-snapshot-card__signals span {
    display: grid;
    gap: 2px;
    min-height: 52px;
    border-radius: 8px;
    padding: 8px;
    color: rgba(255, 255, 255, 0.62);
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.74rem;
    font-weight: 900;
    text-align: center;
}

.home-ai-snapshot-card__signals strong,
.home-ai-snapshot-card__lean strong {
    color: #ffffff;
}

.home-ai-snapshot-card__lean span,
.home-ai-snapshot-card__confidence span {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.home-ai-snapshot-card__confidence {
    position: relative;
    overflow: hidden;
    min-height: 34px;
    border-radius: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.07);
}

.home-ai-snapshot-card__confidence span {
    position: relative;
    z-index: 2;
    color: #ffffff;
}

.home-ai-snapshot-card__confidence i {
    position: absolute;
    inset: auto auto 0 0;
    height: 4px;
    background: #b6e84f;
}

.home-ai-snapshot-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 8px;
    color: #064e3b;
    background: #b6e84f;
    font-weight: 900;
    text-decoration: none;
}

.home-redesign .section {
    padding: 58px 0;
}

.home-redesign-hero__inner {
    max-width: 920px;
}

.home-redesign-hero__actions {
    margin-top: 28px;
}

.home-redesign-hero__note {
    max-width: 680px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.95rem;
    font-weight: 700;
}

.home-redesign-section .section__description {
    max-width: 680px;
}

.home-redesign-header {
    align-items: center;
}

.home-redesign-panel {
    padding: 18px;
}

.home-redesign-split,
.home-redesign-pricing {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 24px;
    align-items: center;
}

.home-redesign-ai {
    color: #ffffff;
    background: #0b1f1e;
}

.home-redesign-ai .section__title,
.home-redesign-ai .section__description {
    color: #ffffff;
}

.home-redesign-ai .section__description {
    color: rgba(255, 255, 255, 0.74);
}

.home-redesign-callout {
    border: 1px solid rgba(182, 232, 79, 0.22);
    border-radius: 8px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.home-redesign-callout strong {
    display: block;
    color: #ffffff;
    font-size: 1.15rem;
}

.home-redesign-callout p {
    margin: 10px 0 16px;
    color: rgba(255, 255, 255, 0.74);
}

.home-redesign-callout a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 8px;
    padding: 0 14px;
    color: #064e3b;
    background: #b6e84f;
    font-weight: 900;
    text-decoration: none;
}

.home-redesign-tipsters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.home-redesign-tipster {
    display: grid;
    gap: 16px;
    min-height: 100%;
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    padding: 18px;
    background: var(--ot-color-surface);
    box-shadow: var(--ot-shadow-soft);
}

.home-redesign-tipster h3 {
    margin: 0;
    color: var(--ot-color-navy);
    font-size: 1.12rem;
}

.home-redesign-tipster__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.home-redesign-tipster__stats span,
.home-redesign-stats article {
    display: grid;
    gap: 4px;
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
    color: var(--ot-color-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.home-redesign-tipster__stats strong,
.home-redesign-stats strong {
    color: var(--ot-color-green-dark);
    font-size: 1.15rem;
    line-height: 1.1;
}

.home-redesign-tipster a {
    align-self: end;
    color: var(--ot-color-green);
    font-weight: 900;
    text-decoration: none;
}

.home-redesign-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.home-redesign-stats article {
    min-height: 96px;
    background: rgba(255, 255, 255, 0.08);
    color: #d9f4e8;
}

.home-redesign-stats strong {
    color: #b6e84f;
    font-size: clamp(1.75rem, 4vw, 2.45rem);
}

.home-redesign-pricing {
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    padding: 24px;
    background: var(--ot-color-surface);
    box-shadow: var(--ot-shadow-soft);
}

.home-redesign-pricing .hero__button {
    justify-self: end;
}

.home-redesign-report {
    margin-top: 0;
}

.single-post-internal-links {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 28px;
}

.internal-links-block {
    background: #f6faf8;
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    padding: 18px;
}

.internal-links-block h2 {
    color: var(--ot-color-navy);
    font-size: 1rem;
    margin: 0 0 12px;
}

.internal-links-block ul {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.internal-links-block a {
    color: var(--ot-color-green);
    font-weight: 750;
    text-decoration: none;
}

.single-tip-hero {
    background: linear-gradient(135deg, #082018 0%, #0c3a2a 62%, #155d3b 100%);
    color: #fff;
    padding: 76px 0 58px;
}

.single-tip-hero h1 {
    font-size: clamp(2.1rem, 5vw, 4rem);
    line-height: 1.02;
    margin: 0;
    max-width: 920px;
}

.single-tip-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.single-tip-meta span,
.single-tip-meta a {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
    padding: 8px 12px;
    text-decoration: none;
}

.single-tip-meta__access--free {
    background: #dcfce7 !important;
    border-color: rgba(22, 101, 52, 0.18) !important;
    color: #166534 !important;
}

.single-tip-meta__access--premium {
    background: #dbeafe !important;
    border-color: rgba(29, 78, 216, 0.18) !important;
    color: #1d4ed8 !important;
}

.single-tip-meta__access--super {
    background: #ffedd5 !important;
    border-color: rgba(124, 45, 18, 0.2) !important;
    color: #7c2d12 !important;
}

.single-tip-meta__status--won,
.single-tip-meta__status--win {
    background: rgba(187, 247, 208, 0.18) !important;
}

.single-tip-meta__status--lost,
.single-tip-meta__status--lose {
    background: rgba(254, 202, 202, 0.18) !important;
}

.single-tip-hero__note {
    color: #d9f4e8;
    font-weight: 800;
    margin: 18px 0 0;
    max-width: 760px;
}

.single-tip-grid {
    align-items: start;
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) 340px;
}

.single-tip-main {
    display: grid;
    gap: 18px;
}

.single-tip-card,
.single-tip-sidebar .internal-links-block,
.tips-archive-card,
.free-tip-archive-card {
    background: #fff;
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    box-shadow: var(--ot-shadow-soft);
    padding: 22px;
}

.single-tip-card h2 {
    color: var(--ot-color-navy);
    font-size: 1.35rem;
    margin: 0 0 12px;
}

.single-tip-card p,
.single-tip-content {
    color: var(--ot-color-muted);
    line-height: 1.7;
}

.single-tip-pick,
.single-tip-locked {
    background: #eff8f3;
    border: 1px solid rgba(18, 106, 61, 0.16);
    border-radius: 8px;
    margin-top: 14px;
    padding: 16px;
}

.single-tip-pick {
    display: grid;
    gap: 6px;
}

.single-tip-pick strong {
    color: var(--ot-color-green);
    font-size: 1.4rem;
}

.single-tip-detail-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 14px 0;
}

.single-tip-detail-grid div,
.single-tip-tipster-box__stats div {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: grid;
    gap: 5px;
    padding: 13px;
}

.single-tip-detail-grid span,
.single-tip-tipster-box__stats span {
    color: var(--ot-color-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.single-tip-detail-grid strong,
.single-tip-tipster-box__stats strong {
    color: #07111f;
    font-size: 1.05rem;
}

.single-tip-locked__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.single-tip-locked__actions a,
.single-tip-locked__actions button {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border: 0;
    border-radius: 8px;
    padding: 0 14px;
    color: #fff;
    background: var(--ot-color-green);
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.single-tip-locked__actions a:hover,
.single-tip-locked__actions a:focus,
.single-tip-locked__actions button:hover,
.single-tip-locked__actions button:focus {
    color: #fff;
    background: #064e3b;
    text-decoration: none;
}

.single-tip-locked__actions form {
    margin: 0;
}

.single-tip-conversion {
    background: #f8fafc;
}

.single-tip-conversion__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.single-tip-conversion__actions > a,
.single-tip-tipster-box__profile {
    align-items: center;
    background: var(--ot-color-green);
    border-radius: 8px;
    color: #ffffff;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    text-decoration: none;
}

.single-tip-conversion__actions > a:hover,
.single-tip-conversion__actions > a:focus,
.single-tip-tipster-box__profile:hover,
.single-tip-tipster-box__profile:focus {
    background: var(--ot-color-lime);
    color: #064e3b;
    text-decoration: none;
}

.single-tip-conversion__purchase {
    flex-basis: 100%;
}

.optatips-super-access-state {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    color: #365146;
    font-size: 0.92rem;
}

.optatips-super-access-state span,
.optatips-super-access-state {
    line-height: 1.5;
}

.optatips-super-access-state span {
    border: 1px solid rgba(18, 106, 61, 0.15);
    border-radius: 999px;
    background: #ffffff;
    padding: 4px 10px;
}

.single-tip-disclaimer {
    background: var(--ot-color-navy);
}

.single-tip-disclaimer h2,
.single-tip-disclaimer p {
    color: #fff;
}

.single-tip-sidebar {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 22px;
}

.single-tip-tipster-box,
.single-tip-related-cards {
    background: #ffffff;
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    box-shadow: var(--ot-shadow-soft);
    padding: 20px;
}

.single-tip-tipster-box__head {
    align-items: center;
    display: flex;
    gap: 12px;
}

.single-tip-tipster-box__head .optatips-tipster-avatar {
    flex: 0 0 auto;
    height: 58px;
    width: 58px;
}

.single-tip-tipster-box__head span {
    color: var(--ot-color-green);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.single-tip-tipster-box__head h2,
.single-tip-related-cards h2 {
    color: var(--ot-color-navy);
    font-size: 1.15rem;
    margin: 3px 0 0;
}

.single-tip-tipster-box__stats {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 16px 0;
}

.single-tip-tipster-box p {
    color: var(--ot-color-muted);
    line-height: 1.65;
}

.single-tip-tipster-box .optatips-tipster-follow {
    margin: 14px 0;
}

.single-tip-related-cards .optatips-tips-grid {
    grid-template-columns: 1fr;
}

.single-tip-related-cards .optatips-tip-card {
    box-shadow: none;
}

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

.tips-access-filter {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.tips-access-filter a {
    align-items: center;
    background: #eef7f3;
    border: 1px solid rgba(18, 106, 61, 0.14);
    border-radius: 999px;
    color: var(--ot-color-green);
    display: inline-flex;
    font-size: 0.88rem;
    font-weight: 900;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    text-decoration: none;
}

.tips-access-filter a:hover,
.tips-access-filter a:focus,
.tips-access-filter a.is-active {
    background: var(--ot-color-green);
    color: #fff;
}

.free-tips-filter-bar {
    align-items: end;
    background: #f7fbf9;
    border: 1px solid rgba(18, 106, 61, 0.12);
    border-radius: 8px;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    margin-bottom: 18px;
    padding: 16px;
}

.free-tips-filter-bar label {
    display: grid;
    gap: 7px;
}

.free-tips-filter-bar label span {
    color: var(--ot-color-navy);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.free-tips-filter-bar select {
    appearance: none;
    background: #fff;
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    color: var(--ot-color-navy);
    min-height: 42px;
    padding: 0 12px;
    width: 100%;
}

.free-tips-filter-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.free-tips-filter-bar__actions button,
.free-tips-filter-bar__actions a {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    text-decoration: none;
}

.free-tips-filter-bar__actions button {
    background: var(--ot-color-green);
    border: 0;
    color: #fff;
    cursor: pointer;
}

.free-tips-filter-bar__actions a {
    background: #fff;
    border: 1px solid var(--ot-color-line);
    color: var(--ot-color-green);
}

.free-tips-archive-summary {
    color: var(--ot-color-muted);
    font-weight: 800;
    margin-bottom: 16px;
}

.free-tips-archive-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.free-tip-archive-card {
    display: grid;
    gap: 14px;
}

.free-tip-archive-card__topline {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.free-tip-archive-card__topline span,
.free-tip-archive-card__topline strong {
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 900;
    padding: 7px 10px;
    text-transform: uppercase;
}

.free-tip-archive-card__topline span {
    color: var(--ot-color-green);
    background: #eef7f3;
}

.free-tip-archive-card__topline strong {
    background: var(--ot-color-green);
    color: #fff;
}

.free-tip-archive-card h3 {
    color: var(--ot-color-navy);
    font-size: 1.22rem;
    line-height: 1.25;
    margin: 0;
}

.free-tip-archive-card h3 a {
    color: inherit;
    text-decoration: none;
}

.free-tip-archive-card__details {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.free-tip-archive-card__details div {
    background: #f7fbf9;
    border: 1px solid rgba(18, 106, 61, 0.08);
    border-radius: 8px;
    min-width: 0;
    padding: 10px;
}

.free-tip-archive-card__details dt {
    color: var(--ot-color-muted);
    font-size: 0.72rem;
    font-weight: 900;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.free-tip-archive-card__details dd {
    color: var(--ot-color-navy);
    font-weight: 900;
    margin: 0;
    overflow-wrap: anywhere;
}

.free-tip-archive-card__tipster,
.free-tip-archive-card__note {
    color: var(--ot-color-muted);
    line-height: 1.6;
    margin: 0;
}

.free-tip-archive-card__tipster a {
    color: var(--ot-color-green);
    font-weight: 900;
}

.free-tip-archive-card__note {
    background: #eff8f3;
    border: 1px solid rgba(18, 106, 61, 0.12);
    border-radius: 8px;
    padding: 10px;
}

.free-tip-archive-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.free-tip-archive-card__actions a,
.tips-archive-card__actions a {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

.free-tip-archive-card__actions a {
    background: var(--ot-color-green);
    border-radius: 8px;
    color: #fff;
    font-weight: 900;
    min-height: 40px;
    padding: 0 14px;
    text-decoration: none;
}

.free-tip-archive-card__actions a + a {
    background: #e7f5ee;
    color: var(--ot-color-green);
}

.tips-archive-card > span {
    color: var(--ot-color-green);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.tips-archive-card h2 {
    font-size: 1.25rem;
    line-height: 1.25;
    margin: 10px 0;
}

.tips-archive-card h2 a {
    color: var(--ot-color-navy);
    text-decoration: none;
}

.tips-archive-card p {
    color: var(--ot-color-muted);
    line-height: 1.6;
}

.tips-archive-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.tips-archive-card__meta span,
.tips-archive-card__meta a {
    background: #f3f8f5;
    border-radius: 999px;
    color: var(--ot-color-green);
    font-size: 0.82rem;
    font-weight: 800;
    padding: 7px 10px;
    text-decoration: none;
}

.tips-archive-card__access--premium {
    color: #1d4ed8 !important;
    background: #dbeafe !important;
}

.tips-archive-card__access--super {
    color: #7c2d12 !important;
    background: #ffedd5 !important;
}

.tips-archive-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

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

.archive-faq article {
    background: #fff;
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    padding: 22px;
}

.archive-faq h2 {
    color: var(--ot-color-navy);
    font-size: 1.1rem;
    margin: 0 0 10px;
}

.archive-faq p {
    color: var(--ot-color-muted);
    line-height: 1.65;
    margin: 0;
}

.landing-page {
    background: var(--ot-color-page);
}

.landing-hero {
    color: #fcdf17;
    background:
        radial-gradient(circle at 82% 18%, rgba(251, 189, 24, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(12, 20, 32, 0.98), rgba(16, 32, 51, 0.96));
}

.landing-hero--premium {
    background:
        radial-gradient(circle at 82% 18%, rgba(251, 189, 24, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(12, 20, 32, 0.98), rgba(16, 32, 51, 0.96));
}

.landing-hero--series {
    background:
        radial-gradient(circle at 82% 18%, rgba(251, 189, 24, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(12, 20, 32, 0.98), rgba(16, 32, 51, 0.96));
}

.landing-hero--contact {
    background:
        radial-gradient(circle at 82% 18%, rgba(251, 189, 24, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(12, 20, 32, 0.98), rgba(16, 32, 51, 0.96));
}

.landing-hero--pricing {
    background:
        radial-gradient(circle at 82% 18%, rgba(251, 189, 24, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(12, 20, 32, 0.98), rgba(16, 32, 51, 0.96));
}

.landing-hero--faq {
    background:
        radial-gradient(circle at 82% 18%, rgba(251, 189, 24, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(12, 20, 32, 0.98), rgba(16, 32, 51, 0.96));
}

.landing-hero--super {
    background:
        radial-gradient(circle at 82% 18%, rgba(251, 189, 24, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(12, 20, 32, 0.98), rgba(16, 32, 51, 0.96));
}

.landing-hero__inner {
    padding: 82px 0 76px;
}

.landing-hero h1 {
    max-width: 820px;
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 4.7rem);
    line-height: 0.98;
}

.landing-hero p:not(.hero__eyebrow) {
    max-width: 760px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.08rem;
    line-height: 1.75;
}

.landing-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.landing-copy__grid,
.landing-two-column,
.landing-trust-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
    gap: 28px;
    align-items: start;
}

.landing-copy__main h2,
.landing-side-card h2,
.landing-trust-grid h2 {
    margin-top: 0;
    color: var(--ot-color-navy);
}

.landing-copy__main p,
.landing-side-card li,
.landing-trust-grid p,
.landing-feature-grid p,
.landing-series-card p,
.landing-faq p {
    color: var(--ot-color-muted);
    line-height: 1.72;
}

.landing-side-card {
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    padding: 24px;
    background: #ffffff;
    box-shadow: var(--ot-shadow-soft);
}

.landing-side-card ul,
.landing-link-list {
    margin: 0;
    padding-left: 20px;
}

.landing-card-link,
.landing-link-list a {
    color: var(--ot-color-green-dark);
    font-weight: 800;
}

.landing-card-link {
    display: inline-flex;
    margin-top: 18px;
}

.landing-feature-grid,
.landing-series-grid,
.landing-faq__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.landing-faq__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-feature-grid article,
.landing-series-card,
.landing-faq article,
.landing-guide-list a,
.landing-trust-grid article {
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    background: #ffffff;
}

.landing-feature-grid article,
.landing-series-card,
.landing-faq article,
.landing-trust-grid article {
    padding: 22px;
}

.landing-page--super .hero__eyebrow,
.landing-page--super .section__eyebrow {
    color: #0f766e;
}

.super-tips-side-card {
    border-color: rgba(15, 118, 110, 0.26);
}

.super-tips-feature-grid article {
    border-top: 4px solid #0f766e;
}

.super-tips-attribution-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.super-tips-attribution-grid article {
    background: #f8fafc;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 8px;
    padding: 20px;
}

.super-tips-attribution-grid span {
    color: #0f766e;
    display: block;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.super-tips-attribution-grid strong {
    color: var(--ot-color-navy);
    display: block;
    font-size: 1.02rem;
    line-height: 1.35;
    margin-bottom: 8px;
}

.super-tips-attribution-grid p {
    color: var(--ot-color-muted);
    margin: 0;
}

.super-tips-lock-banner {
    align-items: center;
    background: #ecfdf5;
    border: 1px solid rgba(15, 118, 110, 0.22);
    border-radius: 8px;
    color: #115e59;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 14px 16px;
}

.super-tips-lock-banner strong {
    color: #0f766e;
}

.super-tips-lock-banner span {
    color: #134e4a;
}

.tips-panel--super .optatips-tip-card {
    border-color: rgba(15, 118, 110, 0.22);
}

.tips-panel--super .optatips-tip-card__meta span:last-child,
.landing-page--super .tips-archive-card__meta span:last-child {
    background: #ccfbf1;
    color: #0f766e;
}

.super-tips-review-panel {
    align-items: center;
}

.super-tips-review-list {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.super-tips-review-list span {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    color: #ffffff;
    font-weight: 850;
    padding: 14px 16px;
}

.landing-feature-grid h3,
.landing-series-card h3,
.landing-faq h3 {
    margin: 0 0 10px;
    color: var(--ot-color-navy);
    font-size: 1.08rem;
}

.landing-two-column {
    color: #ffffff;
}

.landing-two-column .section__title,
.landing-two-column .section__description,
.landing-two-column .section__eyebrow {
    color: #ffffff;
}

.landing-two-column .optatips-statistics,
.landing-two-column .optatips-stat-card {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}

.landing-guide-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.landing-guide-list a {
    display: grid;
    gap: 8px;
    padding: 20px;
    color: var(--ot-color-navy);
    text-decoration: none;
}

.landing-guide-list span {
    color: var(--ot-color-muted);
    font-size: 0.84rem;
}

.landing-cta-band {
    color: #ffffff;
    background: var(--ot-color-green-dark);
}

.landing-cta-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 46px 0;
}

.landing-cta-band h2 {
    margin: 0 0 10px;
    color: #ffffff;
}

.faq-overview__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
    gap: 28px;
    align-items: start;
}

.faq-overview h2,
.faq-category h2,
.faq-help-cta h2 {
    margin-top: 0;
}

.faq-overview p,
.faq-item p,
.faq-help-cta p {
    color: var(--ot-color-muted);
    line-height: 1.72;
}

.faq-overview__card,
.faq-category {
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--ot-shadow-soft);
}

.faq-overview__card {
    padding: 24px;
}

.faq-overview__card ul {
    margin: 0;
    padding-left: 20px;
}

.faq-overview__card a {
    color: var(--ot-color-green-dark);
    font-weight: 800;
}

.faq-page-content .optatips-container {
    display: grid;
    gap: 20px;
}

.faq-category {
    padding: 24px;
}

.faq-category__header {
    margin-bottom: 16px;
}

.faq-accordion {
    display: grid;
    gap: 10px;
}

.faq-item {
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 8px;
    background: #f8fafc;
}

.faq-item summary {
    cursor: pointer;
    padding: 15px 16px;
    color: var(--ot-color-navy);
    font-weight: 900;
    list-style-position: outside;
}

.faq-item p {
    margin: 0;
    padding: 0 16px 16px;
}

.faq-help-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto;
    gap: 24px;
    align-items: center;
}

.faq-help-cta h2,
.faq-help-cta p,
.faq-help-cta .section__eyebrow {
    color: #ffffff;
}

.faq-help-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.landing-cta-band p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.65;
}

.landing-tip-list {
    display: grid;
    gap: 12px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.landing-tip-list li {
    display: grid;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--ot-color-line);
}

.landing-tip-list a {
    color: var(--ot-color-navy);
    font-weight: 800;
    text-decoration: none;
}

.landing-tip-list span,
.landing-empty {
    color: var(--ot-color-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.85fr);
    gap: 28px;
    align-items: start;
}

.contact-intro h2,
.contact-support-panel h2,
.contact-faq h2 {
    margin-top: 0;
    color: var(--ot-color-navy);
}

.contact-intro > p,
.contact-method-card p,
.contact-support-list p {
    color: var(--ot-color-muted);
    line-height: 1.72;
}

.contact-method-card,
.contact-support-panel,
.contact-support-list article {
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    background: #e9e9e900;
}

.contact-method-card {
    display: grid;
    gap: 8px;
    margin-top: 24px;
    padding: 24px;
    box-shadow: var(--ot-shadow-soft);
}

.contact-method-card span,
.contact-support-list h3 {
    color: var(--ot-color-green-dark);
    font-size: 0.86rem;
    font-weight: 900;
    text-transform: uppercase;
}

.contact-method-card a {
    color: #b3b4b6;
    font-size: 1.25rem;
    font-weight: 900;
    text-decoration: none;
}

.contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.contact-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    color: #ffffff;
    background: var(--ot-color-green-dark);
    font-weight: 900;
    text-decoration: none;
}

.contact-social a:hover {
    color: #064e3b;
    background: var(--ot-color-lime);
}

.contact-support-panel {
    padding: 24px;
    box-shadow: var(--ot-shadow-soft);
}

.contact-support-list {
    display: grid;
    gap: 14px;
}

.contact-support-list article {
    padding: 18px;
    box-shadow: none;
}

.contact-support-list h3,
.contact-support-list p {
    margin: 0;
}

.contact-support-list p {
    margin-top: 6px;
}

.contact-panel-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 18px;
    border-radius: 8px;
    padding: 0 16px;
    color: #ffffff;
    background: var(--ot-color-green);
    font-weight: 900;
    text-decoration: none;
}

.contact-panel-link:hover {
    color: #064e3b;
    background: var(--ot-color-lime);
}

.contact-pricing {
    background: #eef7f3;
}

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

.contact-plan-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    padding: 24px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(16, 32, 51, 0.08);
}

.contact-plan-card--featured {
    border-color: rgba(15, 118, 110, 0.32);
}

.contact-plan-card span {
    align-self: flex-start;
    min-height: 24px;
    border-radius: 999px;
    padding: 3px 9px;
    color: #064e3b;
    background: #ccfbf1;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.contact-plan-card h3 {
    margin: 16px 0 10px;
    color: var(--ot-color-navy);
    font-size: 1.3rem;
}

.contact-plan-card p {
    margin: 0;
    color: var(--ot-color-muted);
    line-height: 1.72;
}

.contact-plan-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: auto;
    border-radius: 8px;
    padding: 0 14px;
    color: #ffffff;
    background: var(--ot-color-green);
    font-weight: 900;
    text-decoration: none;
}

.contact-plan-card a:hover {
    color: #064e3b;
    background: var(--ot-color-lime);
}

.pricing-page__plans .optatips-pricing {
    margin: 0;
}

.pricing-page__plans .optatips-pricing__header {
    display: none;
}

.pricing-page .optatips-pricing-card {
    position: relative;
    overflow: hidden;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.pricing-page .optatips-pricing-card:hover {
    transform: translateY(-4px);
    border-color: rgba(15, 118, 110, 0.45);
    box-shadow: 0 18px 42px rgba(16, 32, 51, 0.14);
}

.optatips-pricing-card__badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 24px;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.optatips-pricing-card__badge--popular {
    position: absolute;
    top: 14px;
    right: 14px;
    color: #064e3b;
    background: var(--ot-color-lime);
}

.optatips-pricing-card__badge--save {
    margin-top: 8px;
    color: #064e3b;
    background: #d9f99d;
}

.optatips-pricing-card__old-price {
    display: block;
    margin: 0 0 8px;
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: line-through;
}

.pricing-trust-section {
    background: #eef7f3;
}

.pricing-trust-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.pricing-trust-grid article {
    border: 1px solid var(--ot-color-line);
    border-radius: 8px;
    padding: 20px;
    background: #ffffff;
}

.pricing-trust-grid span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 34px;
    border-radius: 999px;
    color: #064e3b;
    background: #fcdf17;
    font-size: 0.82rem;
    font-weight: 900;
}

.pricing-trust-grid h3 {
    margin: 16px 0 8px;
    color: var(--ot-color-navy);
    font-size: 1rem;
}

.pricing-trust-grid p {
    margin: 0;
    color: var(--ot-color-muted);
    font-size: 0.94rem;
    line-height: 1.65;
}

@media (max-width: 760px) {
    .site-header__top-inner,
    .site-header__nav-inner,
    .site-footer__inner,
    .optatips-container,
    .hero__inner {
        max-width: calc(100vw - 32px);
        min-width: 0;
    }

    .site-header__top-inner {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
        padding: 10px 0;
    }

    .site-header__nav-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 12px 0;
    }

    .site-nav,
    .site-nav__menu {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 12px;
        font-size: 12px;
    }

    .site-nav a,
    .site-nav__menu a {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .site-header__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        width: 100%;
    }

    .site-header__tools {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .site-header__select {
        min-width: 0;
    }

    .site-header__select--account {
        min-width: 0;
    }

    .site-header__login,
    .site-header__cta {
        width: 100%;
        min-width: 0;
        padding: 0 8px;
        text-align: center;
        white-space: normal;
    }

    .hero__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero__button {
        width: 100%;
    }

    .home-hero::after {
        display: none;
    }

    .hero__inner {
        padding: 64px 0 56px;
    }

    .hero__title,
    .hero__text,
    .blog-hero h1,
    .blog-hero p,
    .single-post-hero h1,
    .single-post-meta,
    .blog-card h2,
    .blog-card__excerpt,
    .blog-card__footer,
    .section__title,
    .home-cta-card h2 {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }

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

    .section {
        padding: 38px 0;
    }

    .section__header,
    .site-footer__inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-footer__inner,
    .home-split__grid {
        grid-template-columns: 1fr;
    }

    .home-conversion-grid {
        grid-template-columns: 1fr;
    }

    .home-redesign .section {
        padding: 40px 0;
    }

    .home-redesign .hero__title {
        font-size: clamp(34px, 9vw, 40px);
        line-height: 1.08;
    }

    .home-redesign .hero__text {
        font-size: 17px;
    }

    .home-redesign-header {
        align-items: flex-start;
    }

    .home-redesign-split,
    .home-redesign-pricing,
    .home-redesign-tipsters,
    .home-redesign-stats {
        grid-template-columns: 1fr;
    }

    .home-redesign-pricing .hero__button {
        justify-self: stretch;
    }

    .home-redesign-tipster__stats {
        grid-template-columns: 1fr;
    }

    .home-ai-snapshot-grid,
    .home-ai-snapshot-card__signals {
        grid-template-columns: 1fr;
    }

    .site-footer__inner {
        padding: 42px 0 34px;
    }

    .site-footer__bottom-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-footer__badges {
        justify-content: flex-start;
    }

    .site-footer__back-to-top {
        right: 12px;
        bottom: 12px;
    }

    .tips-panel {
        padding: 16px;
    }

    .tipster-profile-hero__inner,
    .tipster-profile-stats,
    .tipster-profile-details,
    .tipster-profile-cta-grid,
    .tipster-profile-links div,
    .report-band__inner,
    .tipster-join-grid,
    .tipster-join-steps,
    .tipster-join-split,
    .blog-layout,
    .single-post-grid,
    .blog-grid,
    .related-post-grid {
        grid-template-columns: 1fr;
        align-items: flex-start;
        flex-direction: column;
    }

    .tipster-profile-trust-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .tipster-profile-cta-card a {
        align-self: stretch;
        width: 100%;
    }

    .blog-hero__inner,
    .single-post-hero .optatips-container {
        padding: 54px 0 48px;
    }

    .blog-card__footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .single-post-content,
    .single-post-footer {
        padding-right: 18px;
        padding-left: 18px;
    }

    .single-post-featured {
        min-height: 220px;
    }

    .not-found-hero__inner,
    .not-found-grid,
    .home-ops-grid,
    .single-post-internal-links,
    .single-tip-grid,
    .single-tip-detail-grid,
    .tips-archive-grid,
    .free-tips-filter-bar,
    .free-tips-archive-grid,
    .archive-faq__grid,
    .contact-grid,
    .contact-plan-grid,
    .landing-copy__grid,
    .landing-two-column,
    .landing-trust-grid,
    .faq-overview__grid,
    .faq-help-cta__inner,
    .landing-feature-grid,
    .landing-series-grid,
    .landing-faq__grid,
    .landing-guide-list,
    .super-tips-attribution-grid,
    .super-tips-review-list,
    .pricing-trust-grid {
        grid-template-columns: 1fr;
    }

    .landing-hero__inner {
        padding: 58px 0 54px;
    }

    .landing-hero h1 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .landing-hero__actions,
    .faq-help-cta__actions,
    .landing-cta-band__inner {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .single-tip-sidebar {
        position: static;
    }

    .tips-access-filter {
        align-items: stretch;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .free-tips-filter-bar__actions,
    .free-tip-archive-card__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .free-tips-filter-bar__actions button,
    .free-tips-filter-bar__actions a,
    .free-tip-archive-card__actions a {
        width: 100%;
    }

    .free-tip-archive-card__details {
        grid-template-columns: 1fr;
    }

    .single-tip-locked__actions,
    .single-tip-conversion__actions {
        flex-direction: column;
    }

    .single-tip-locked__actions a,
    .single-tip-locked__actions button,
    .single-tip-conversion__actions > a {
        width: 100%;
        justify-content: center;
    }

    .single-tip-tipster-box__stats {
        grid-template-columns: 1fr;
    }

    .not-found-hero__inner {
        min-height: 0;
        padding: 58px 0;
    }

    .not-found-scoreboard {
        justify-items: start;
    }

    .not-found-list li {
        align-items: flex-start;
        flex-direction: column;
    }

    .not-found-list span {
        text-align: left;
    }

    .aggregate-grid,
    .aggregate-insight-grid {
        grid-template-columns: 1fr;
    }

    .aggregate-card--wide {
        grid-column: auto;
    }

    .aggregate-card,
    .aggregate-copy,
    .aggregate-insight-grid article {
        padding: 22px;
    }

    .aggregate-card .internal-links-block li {
        align-items: flex-start;
        flex-direction: column;
    }

    .aggregate-stats {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Phase 47 UX modules
========================================= */
.phase47-filter-bar,
.phase47-ai-controls,
.phase47-today-summary,
.phase47-type-stats,
.phase47-tip-grid,
.phase47-ai-summary,
.phase47-ai-grid,
.phase47-ai-detail-grid,
.phase47-blacklist-layout {
    display: grid;
    gap: 18px;
}

.phase47-filter-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    margin: 0 0 22px;
    padding: 18px;
    border: 1px solid rgba(159, 232, 112, 0.18);
    border-radius: 14px;
    background: rgba(6, 78, 59, 0.18);
}

.phase47-ai-controls {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid rgba(159, 232, 112, 0.2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
}

.phase47-filter-bar label,
.phase47-ai-controls label,
.phase47-ai-controls__actions,
.phase47-filter-bar__actions {
    display: grid;
    gap: 7px;
}

.phase47-filter-bar span,
.phase47-ai-controls span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.phase47-filter-bar select,
.phase47-filter-bar button,
.phase47-filter-bar a,
.phase47-ai-controls select,
.phase47-ai-controls button,
.phase47-ai-controls a {
    min-height: 42px;
    border-radius: 10px;
}

.phase47-filter-bar select,
.phase47-ai-controls select {
    width: 100%;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    background: #102033;
}

.phase47-filter-bar button,
.phase47-filter-bar a,
.phase47-ai-controls button,
.phase47-ai-controls a,
.phase47-tip-card__actions a,
.phase47-ai-card a,
.phase47-ai-lock a,
.phase47-report-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid rgba(159, 232, 112, 0.24);
    color: #073430;
    background: #9fe870;
    font-weight: 800;
    text-decoration: none;
}

.phase47-filter-bar a,
.phase47-ai-controls a,
.phase47-tip-card__actions a + a {
    color: #d9f99d;
    background: rgba(159, 232, 112, 0.08);
}

.phase47-filter-summary {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.76);
    font-weight: 700;
}

.phase47-tip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.phase47-tip-card,
.phase47-ai-card,
.phase47-ai-detail article,
.phase47-ai-model-note,
.phase47-blacklist-main,
.phase47-blacklist-side,
.phase47-type-stats article,
.phase47-ai-summary article,
.phase47-today-summary article,
.optatips-statistics-layer {
    border: 1px solid rgba(159, 232, 112, 0.16);
    border-radius: 16px;
    background: rgba(7, 52, 48, 0.72);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.18);
}

.phase47-tip-card,
.phase47-ai-card,
.phase47-ai-detail article,
.phase47-ai-model-note,
.phase47-blacklist-main,
.phase47-blacklist-side {
    padding: 20px;
}

.phase47-tip-card__top,
.phase47-tip-card__meta,
.phase47-tip-card__actions,
.phase47-ai-probs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.phase47-tip-card__top {
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 800;
}

.phase47-access,
.phase47-tip-card__price {
    color: #9fe870;
}

.phase47-tip-card h3,
.phase47-ai-card h2,
.phase47-blacklist-main h2 {
    margin: 12px 0;
}

.phase47-tip-card h3 a,
.phase47-ai-card h2,
.phase47-blacklist-main h2,
.phase47-type-stats h3 {
    color: #ffffff;
}

.phase47-tip-card__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.phase47-tip-card__details div,
.phase47-tip-card__locked,
.phase47-safety-warning {
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}

.phase47-tip-card__details dt {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.phase47-tip-card__details dd {
    margin: 4px 0 0;
    color: #ffffff;
    font-weight: 800;
}

.phase47-tip-card__note,
.phase47-ai-card p,
.phase47-ai-detail p,
.phase47-blacklist-main p,
.phase47-blacklist-side p {
    color: rgba(255, 255, 255, 0.76);
}

.phase47-today-summary,
.phase47-ai-summary,
.phase47-type-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 22px 0;
}

.phase47-today-summary article,
.phase47-ai-summary article,
.phase47-type-stats article {
    padding: 18px;
}

.phase47-today-summary span,
.phase47-ai-summary span,
.phase47-type-stats span {
    display: block;
    color: rgba(255, 255, 255, 0.72);
}

.phase47-today-summary strong,
.phase47-ai-summary strong {
    display: block;
    margin-top: 6px;
    color: #9fe870;
    font-size: 2rem;
}

.phase47-ai-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.phase47-ai-probs span {
    padding: 8px 10px;
    border-radius: 999px;
    color: #d9f99d;
    background: rgba(159, 232, 112, 0.1);
    font-size: 0.82rem;
    font-weight: 800;
}

.phase47-ai-detail-grid,
.phase47-blacklist-layout {
    grid-template-columns: 2fr 1fr;
}

.phase47-ai-lock {
    margin-top: 22px;
    padding: 22px;
    border: 1px solid rgba(159, 232, 112, 0.22);
    border-radius: 16px;
    background: rgba(6, 78, 59, 0.2);
}

.phase47-ai-page {
    background:
        radial-gradient(circle at 8% 0%, rgba(159, 232, 112, 0.13), transparent 28rem),
        linear-gradient(180deg, #071f1d 0%, #071522 42%, #09141f 100%);
}

.phase47-ai-hero,
.phase47-ai-detail-hero {
    padding: 66px 0 34px;
    background:
        linear-gradient(135deg, rgba(7, 52, 48, 0.92), rgba(8, 19, 31, 0.96)),
        radial-gradient(circle at 82% 18%, rgba(159, 232, 112, 0.18), transparent 24rem);
    border-bottom: 1px solid rgba(159, 232, 112, 0.14);
}

.phase47-ai-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.45fr);
    gap: 28px;
    align-items: stretch;
}

.phase47-ai-hero h1,
.phase47-ai-detail-hero h1 {
    max-width: 940px;
    margin: 10px 0 14px;
    color: #ffffff;
    font-size: clamp(2.3rem, 4vw, 4.2rem);
    line-height: 1.02;
}

.phase47-ai-hero p,
.phase47-ai-detail-hero p {
    max-width: 820px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.04rem;
}

.phase47-ai-hero-card,
.phase47-ai-panel,
.phase47-ai-league,
.phase47-ai-odds-panel,
.phase47-ai-similar,
.phase47-ai-related {
    border: 1px solid rgba(159, 232, 112, 0.16);
    border-radius: 14px;
    background: rgba(6, 38, 36, 0.78);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.24);
}

.phase47-ai-hero-card {
    padding: 24px;
}

.phase47-ai-hero-card span,
.phase47-ai-panel span,
.phase47-ai-league header span,
.phase47-ai-row-pick span,
.phase47-ai-similar span {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.phase47-ai-hero-card strong,
.phase47-ai-panel--side strong {
    display: block;
    margin: 8px 0;
    color: #9fe870;
    font-size: clamp(2rem, 4vw, 3.8rem);
    line-height: 1;
}

.phase47-ai-tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid rgba(159, 232, 112, 0.16);
    background: rgba(7, 20, 31, 0.94);
    backdrop-filter: blur(14px);
}

.phase47-ai-tabs .optatips-container {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.phase47-ai-tabs a {
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.76);
    background: rgba(255, 255, 255, 0.05);
    font-weight: 900;
    text-decoration: none;
}

.phase47-ai-tabs a.is-active,
.phase47-ai-tabs a:hover {
    color: #073430;
    background: #9fe870;
}

.phase47-ai-summary--board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 0;
}

.phase47-ai-board {
    display: grid;
    gap: 18px;
}

.phase47-ai-league {
    overflow: hidden;
}

.phase47-ai-league header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    background: rgba(159, 232, 112, 0.08);
}

.phase47-ai-league h2 {
    margin: 4px 0 0;
    color: #ffffff;
    font-size: 1.14rem;
}

.phase47-ai-league header p {
    margin: 0;
    color: #9fe870;
    font-weight: 900;
}

.phase47-ai-match-list {
    display: grid;
}

.phase47-ai-match-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.75fr) minmax(220px, 1.4fr) minmax(250px, 1.35fr) minmax(150px, 0.8fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.phase47-ai-match-time span,
.phase47-ai-match-time strong {
    display: block;
}

.phase47-ai-match-time span {
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.86rem;
    font-weight: 800;
}

.phase47-ai-match-time strong {
    margin-top: 6px;
    color: #9fe870;
    font-size: 0.74rem;
}

.phase47-ai-teams {
    display: grid;
    gap: 5px;
    color: #ffffff;
    font-weight: 900;
}

.phase47-ai-teams em {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.74rem;
    font-style: normal;
    text-transform: uppercase;
}

.phase47-ai-prediction-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.phase47-ai-prediction-strip span,
.phase47-ai-probs span {
    text-align: center;
}

.phase47-ai-prediction-strip span {
    position: relative;
    overflow: hidden;
    padding: 10px 8px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.78rem;
    font-weight: 900;
}

.phase47-ai-prediction-strip em {
    position: relative;
    z-index: 2;
    display: block;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.68rem;
    font-style: normal;
    text-transform: uppercase;
}

.phase47-ai-prediction-strip strong {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 3px;
    color: #9fe870;
    font-size: 1.08rem;
}

.phase47-ai-prediction-strip i,
.phase47-ai-confidence i {
    position: absolute;
    inset: auto auto 0 0;
    height: 4px;
    background: #9fe870;
}

.phase47-ai-row-pick strong {
    display: block;
    margin-top: 4px;
    color: #ffffff;
}

.phase47-ai-confidence {
    position: relative;
    overflow: hidden;
    margin-top: 10px;
    border-radius: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.06);
}

.phase47-ai-confidence span {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.72rem;
}

.phase47-ai-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    color: #073430;
    background: #9fe870;
    font-weight: 900;
    text-decoration: none;
}

.phase47-ai-empty {
    padding: 28px;
    border: 1px solid rgba(159, 232, 112, 0.16);
    border-radius: 14px;
    color: #ffffff;
    background: rgba(6, 38, 36, 0.78);
}

.phase47-ai-empty h2 {
    margin-top: 0;
    color: #ffffff;
}

.phase47-ai-empty p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.74);
}

.phase47-ai-scoreboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    max-width: 900px;
    margin: 24px 0 14px;
}

.phase47-ai-scoreboard div {
    min-height: 118px;
    padding: 22px;
    border: 1px solid rgba(159, 232, 112, 0.16);
    border-radius: 14px;
    background: rgba(6, 38, 36, 0.72);
}

.phase47-ai-scoreboard span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.phase47-ai-scoreboard strong {
    display: block;
    margin-top: 10px;
    color: #ffffff;
    font-size: clamp(1.15rem, 2.2vw, 2rem);
}

.phase47-ai-scoreboard em {
    display: grid;
    place-items: center;
    min-width: 82px;
    min-height: 82px;
    border-radius: 999px;
    color: #073430;
    background: #9fe870;
    font-style: normal;
    font-weight: 1000;
}

.phase47-ai-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
    gap: 18px;
    margin-bottom: 18px;
}

.phase47-ai-panel {
    padding: 22px;
}

.phase47-ai-panel h2 {
    margin: 8px 0 10px;
    color: #ffffff;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
}

.phase47-ai-panel p,
.phase47-ai-odds-panel p,
.phase47-ai-similar p {
    color: rgba(255, 255, 255, 0.76);
}

.phase47-ai-meter-grid {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.phase47-ai-meter-grid div {
    position: relative;
    overflow: hidden;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
}

.phase47-ai-meter-grid span,
.phase47-ai-meter-grid strong {
    position: relative;
    z-index: 2;
}

.phase47-ai-meter-grid span {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 900;
}

.phase47-ai-meter-grid strong {
    float: right;
    color: #ffffff;
}

.phase47-ai-meter-grid i {
    position: absolute;
    inset: auto auto 0 0;
    height: 4px;
    background: #9fe870;
}

.phase47-ai-detail-grid--dashboard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 18px 0;
}

.phase47-ai-odds-panel,
.phase47-ai-similar,
.phase47-ai-related {
    margin-top: 18px;
    padding: 22px;
}

.phase47-ai-odds-panel table {
    width: 100%;
    margin-top: 14px;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 12px;
}

.phase47-ai-odds-panel th,
.phase47-ai-odds-panel td {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    text-align: left;
}

.phase47-ai-odds-panel th {
    color: #9fe870;
    background: rgba(159, 232, 112, 0.08);
}

.phase47-ai-similar > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.phase47-ai-similar article {
    padding: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}

.phase47-ai-similar strong {
    display: block;
    margin: 6px 0;
    color: #ffffff;
}

.phase47-ai-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.phase47-ai-lock--dashboard {
    margin: 0 0 18px;
}

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

.phase47-blacklist-profile {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.phase47-blacklist-profile > div,
.phase47-blacklist-summary {
    padding: 16px;
    border: 1px solid rgba(159, 232, 112, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
}

.phase47-blacklist-profile span,
.phase47-blacklist-summary__label {
    display: block;
    margin: 0 0 7px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.phase47-blacklist-profile strong {
    color: #ffffff;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.phase47-blacklist-summary {
    margin-bottom: 18px;
}

.phase47-blacklist-summary p:last-child {
    margin-bottom: 0;
    font-size: 1.02rem;
    line-height: 1.8;
}

.phase47-blacklist-main dt {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.phase47-blacklist-main dd {
    margin: 4px 0 0;
    color: #ffffff;
}

.phase47-blacklist-side a {
    display: block;
    margin: 0 0 10px;
    color: #d9f99d;
}

.optatips-statistics-layers {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.optatips-statistics-layer {
    padding: 18px;
}

.optatips-stat-grid--layered {
    margin-top: 14px;
}

@media (max-width: 900px) {
    .phase47-filter-bar,
    .phase47-ai-controls,
    .phase47-tip-grid,
    .phase47-ai-grid,
    .phase47-ai-detail-grid,
    .phase47-ai-hero__inner,
    .phase47-ai-match-row,
    .phase47-ai-prediction-strip,
    .phase47-ai-detail-layout,
    .phase47-ai-detail-grid--dashboard,
    .phase47-ai-similar > div,
    .phase47-ai-grid--compact,
    .phase47-blacklist-layout,
    .phase47-today-summary,
    .phase47-ai-summary,
    .phase47-type-stats {
        grid-template-columns: 1fr;
    }

    .phase47-tip-card__details,
    .phase47-blacklist-main dl,
    .phase47-blacklist-profile {
        grid-template-columns: 1fr;
    }

    .phase47-filter-bar__actions,
    .phase47-ai-controls__actions,
    .phase47-tip-card__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .phase47-filter-bar button,
    .phase47-filter-bar a,
    .phase47-ai-controls button,
    .phase47-ai-controls a,
    .phase47-tip-card__actions a,
    .phase47-ai-card a,
    .phase47-ai-lock a,
    .phase47-ai-view {
        width: 100%;
    }

    .phase47-ai-hero,
    .phase47-ai-detail-hero {
        padding: 42px 0 24px;
    }

    .phase47-ai-scoreboard {
        grid-template-columns: 1fr;
    }

    .phase47-ai-scoreboard em {
        min-width: 100%;
        min-height: 44px;
    }

    .phase47-ai-tabs {
        position: static;
    }
}

/* =========================================
   Phase 52 AI Predictions redesign
========================================= */
.phase52-ai-archive,
.phase52-ai-detail {
    color: #ffffff;
    background:
        linear-gradient(180deg, #061816 0%, #0b1723 46%, #08131d 100%);
    max-width: 100vw;
    overflow-x: hidden;
}

.phase52-ai-archive .optatips-container,
.phase52-ai-detail .optatips-container {
    width: min(calc(100vw - 32px), 1200px);
    max-width: calc(100vw - 32px);
}

.phase52-ai-hero,
.phase52-ai-detail-hero {
    padding: 68px 0 34px;
    border-bottom: 1px solid rgba(159, 232, 112, 0.16);
    background:
        linear-gradient(135deg, rgba(5, 47, 42, 0.96), rgba(8, 19, 31, 0.98));
}

.phase52-ai-hero__grid,
.phase52-ai-detail-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr);
    gap: 28px;
    align-items: stretch;
}

.phase52-ai-hero__grid > *,
.phase52-ai-detail-hero__grid > *,
.phase52-ai-card,
.phase52-ai-score-card > *,
.phase52-ai-lock > *,
.phase52-ai-overview > *,
.phase52-ai-market-sections > *,
.phase52-ai-team-comparison article {
    min-width: 0;
}

.phase52-ai-hero h1,
.phase52-ai-detail-hero h1 {
    max-width: 920px;
    margin: 10px 0 14px;
    color: #ffffff;
    font-size: clamp(2.35rem, 4vw, 4.25rem);
    line-height: 1.04;
    overflow-wrap: anywhere;
}

.phase52-ai-hero p,
.phase52-ai-detail-hero p,
.phase52-ai-disclaimer p,
.phase52-ai-responsible-note p {
    color: rgba(255, 255, 255, 0.78);
    overflow-wrap: anywhere;
}

.phase52-ai-hero__actions,
.phase52-ai-related-links div {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.phase52-ai-hero__actions a,
.phase52-ai-card__cta,
.phase52-ai-filters button,
.phase52-ai-filters a,
.phase52-ai-lock a,
.phase52-ai-related-links a,
.phase52-ai-related a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(159, 232, 112, 0.28);
    border-radius: 10px;
    color: #06231f;
    background: #9fe870;
    font-weight: 900;
    text-decoration: none;
}

.phase52-ai-hero__actions a + a,
.phase52-ai-filters a,
.phase52-ai-related-links a:nth-child(n+2) {
    color: #d9f99d;
    background: rgba(159, 232, 112, 0.08);
}

.phase52-ai-hero__notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 860px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.phase52-ai-hero__notes li,
.phase52-ai-hero__panel,
.phase52-ai-stats article,
.phase52-ai-filters,
.phase52-ai-card,
.phase52-ai-empty,
.phase52-ai-disclaimer,
.phase52-ai-score-card,
.phase52-ai-lock,
.phase52-ai-preview-grid article,
.phase52-ai-overview article,
.phase52-ai-model-panel,
.phase52-ai-team-comparison,
.phase52-ai-market-sections article,
.phase52-ai-model-note,
.phase52-ai-related-links,
.phase52-ai-responsible-note,
.phase52-ai-related {
    border: 1px solid rgba(159, 232, 112, 0.16);
    border-radius: 14px;
    background: rgba(6, 38, 36, 0.78);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.2);
}

.phase52-ai-hero__notes li {
    padding: 12px 14px;
    color: rgba(255, 255, 255, 0.84);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.phase52-ai-hero__panel {
    display: grid;
    align-content: center;
    padding: 24px;
}

.phase52-ai-hero__panel span,
.phase52-ai-stats span,
.phase52-ai-filters span,
.phase52-ai-card__top span,
.phase52-ai-card__footer span,
.phase52-ai-score-card span,
.phase52-ai-lock span,
.phase52-ai-preview-grid span,
.phase52-ai-overview span,
.phase52-ai-model-panel span,
.phase52-ai-team-comparison span,
.phase52-ai-related span {
    display: block;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.phase52-ai-hero__panel strong,
.phase52-ai-stats strong {
    display: block;
    margin: 8px 0;
    color: #9fe870;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1;
}

.phase52-ai-hero__panel div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.phase52-ai-hero__panel small,
.phase52-ai-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    color: #d9f99d;
    background: rgba(159, 232, 112, 0.1);
    font-weight: 900;
}

.phase52-ai-shell {
    padding-top: 30px;
}

.phase52-ai-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.phase52-ai-stats article {
    min-height: 120px;
    padding: 18px;
}

.phase52-ai-stats strong {
    font-size: clamp(1.6rem, 3vw, 2.35rem);
}

.phase52-ai-filters {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
    margin-bottom: 22px;
    padding: 18px;
}

.phase52-ai-filters label,
.phase52-ai-filters__actions {
    display: grid;
    gap: 8px;
}

.phase52-ai-filters select {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    color: #ffffff;
    background: #102033;
}

.phase52-ai-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.phase52-ai-card {
    display: grid;
    gap: 14px;
    padding: 20px;
}

.phase52-ai-card__top,
.phase52-ai-card__footer,
.phase52-ai-access-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.phase52-ai-card h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1.22rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.phase52-ai-card__time {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.phase52-ai-card__bars,
.phase52-ai-overview article {
    display: grid;
    gap: 10px;
}

.phase52-ai-bar {
    position: relative;
    overflow: hidden;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
}

.phase52-ai-bar span,
.phase52-ai-bar strong {
    position: relative;
    z-index: 2;
}

.phase52-ai-bar span {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 900;
}

.phase52-ai-bar strong {
    float: right;
    color: #ffffff;
}

.phase52-ai-bar i {
    position: absolute;
    inset: auto auto 0 0;
    height: 4px;
    background: #9fe870;
}

.phase52-ai-card__footer {
    align-items: stretch;
}

.phase52-ai-card__footer > div {
    flex: 1 1 130px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
}

.phase52-ai-card__footer strong,
.phase52-ai-preview-grid strong,
.phase52-ai-team-comparison strong {
    display: block;
    margin-top: 5px;
    color: #ffffff;
}

.phase52-ai-empty,
.phase52-ai-disclaimer {
    padding: 24px;
}

.phase52-ai-detail-hero__grid {
    align-items: center;
}

.phase52-ai-access-row {
    justify-content: flex-start;
    margin-top: 20px;
}

.phase52-ai-access-row span:not(.phase52-ai-badge) {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.08);
    font-weight: 900;
}

.phase52-ai-score-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 18px;
}

.phase52-ai-score-card div {
    min-height: 112px;
    padding: 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}

.phase52-ai-score-card strong {
    display: block;
    margin-top: 9px;
    color: #ffffff;
    font-size: clamp(1.15rem, 2vw, 1.8rem);
    overflow-wrap: anywhere;
}

.phase52-ai-score-card em {
    display: grid;
    place-items: center;
    min-width: 76px;
    min-height: 76px;
    border-radius: 999px;
    color: #06231f;
    background: #9fe870;
    font-style: normal;
    font-weight: 1000;
}

.phase52-ai-detail-shell {
    display: grid;
    gap: 20px;
}

.phase52-ai-lock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 22px;
}

.phase52-ai-lock h2,
.phase52-ai-team-comparison h2,
.phase52-ai-related-links h2,
.phase52-ai-related h2,
.phase52-ai-disclaimer h2 {
    margin: 6px 0 10px;
    color: #ffffff;
}

.phase52-ai-preview-grid,
.phase52-ai-overview,
.phase52-ai-team-comparison > div,
.phase52-ai-market-sections,
.phase52-ai-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.phase52-ai-preview-grid article,
.phase52-ai-overview article,
.phase52-ai-market-sections article,
.phase52-ai-related article {
    padding: 20px;
}

.phase52-ai-overview h2,
.phase52-ai-market-sections h2,
.phase52-ai-model-panel h2,
.phase52-ai-model-note h2 {
    margin: 8px 0 12px;
    color: #ffffff;
}

.phase52-ai-model-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.35fr);
    gap: 18px;
    padding: 24px;
}

.phase52-ai-model-panel aside {
    display: grid;
    align-content: center;
    padding: 18px;
    border-radius: 12px;
    background: rgba(159, 232, 112, 0.08);
}

.phase52-ai-model-panel strong {
    color: #9fe870;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1;
}

.phase52-ai-model-panel small {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.76);
    font-weight: 900;
}

.phase52-ai-team-comparison,
.phase52-ai-model-note,
.phase52-ai-related-links,
.phase52-ai-responsible-note,
.phase52-ai-related {
    padding: 22px;
}

.phase52-ai-team-comparison article {
    padding: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}

.phase52-ai-team-comparison > div {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.phase52-ai-market-sections {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.phase52-ai-related__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.phase52-ai-related h3 {
    margin: 8px 0;
    color: #ffffff;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.phase52-ai-hero *,
.phase52-ai-detail-hero *,
.phase52-ai-card *,
.phase52-ai-lock *,
.phase52-ai-preview-grid *,
.phase52-ai-overview *,
.phase52-ai-model-panel *,
.phase52-ai-team-comparison *,
.phase52-ai-market-sections *,
.phase52-ai-related-links *,
.phase52-ai-responsible-note *,
.phase52-ai-related *,
.phase52-ai-disclaimer * {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.phase52-ai-badge--completed {
    color: #d1d5db;
    background: rgba(209, 213, 219, 0.13);
}

.phase52-ai-badge--today {
    color: #052e1a;
    background: #9fe870;
}

.phase52-ai-badge--upcoming {
    color: #bfdbfe;
    background: rgba(59, 130, 246, 0.16);
}

@media (max-width: 980px) {
    .phase52-ai-hero__grid,
    .phase52-ai-detail-hero__grid,
    .phase52-ai-filters,
    .phase52-ai-card-grid,
    .phase52-ai-preview-grid,
    .phase52-ai-overview,
    .phase52-ai-model-panel,
    .phase52-ai-team-comparison > div,
    .phase52-ai-market-sections,
    .phase52-ai-related__grid {
        grid-template-columns: 1fr;
    }

    .phase52-ai-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .phase52-ai-lock,
    .phase52-ai-score-card {
        grid-template-columns: 1fr;
    }

    .phase52-ai-score-card em {
        min-height: 46px;
        border-radius: 12px;
    }
}

@media (max-width: 520px) {
    .phase52-ai-hero,
    .phase52-ai-detail-hero {
        padding: 44px 0 24px;
    }

    .phase52-ai-hero h1,
    .phase52-ai-detail-hero h1 {
        font-size: 2rem;
    }

    .phase52-ai-hero__notes,
    .phase52-ai-stats {
        grid-template-columns: 1fr;
    }

    .phase52-ai-hero__actions,
    .phase52-ai-related-links div {
        display: grid;
        grid-template-columns: 1fr;
    }

    .phase52-ai-hero__actions a,
    .phase52-ai-card__cta,
    .phase52-ai-filters button,
    .phase52-ai-filters a,
    .phase52-ai-lock a,
    .phase52-ai-related-links a,
    .phase52-ai-related a {
        width: 100%;
    }
}

/* =========================================
   Header dark navy style - aligned with footer
   Added for OptaTips header/navigation color unification.
========================================= */
.site-header {
    background: #080d17;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.site-header__top {
    background: #080d17;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.site-header__navrow {
    background: #0b1220;
}

.site-branding,
.site-branding__name {
    color: #ffffff;
}

.site-nav a,
.site-nav__menu a {
    color: #cbd5e1;
}

.site-nav a:hover,
.site-nav__menu a:hover,
.site-nav a:focus,
.site-nav__menu a:focus {
    color: var(--ot-color-lime);
}

.site-header__select span {
    color: #94a3b8;
}

.site-header__select select,
.optatips-custom-select__button {
    border-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    background: #102033;
}

.site-header__select select:focus,
.optatips-custom-select__button:focus {
    border-color: rgba(182, 232, 79, 0.42);
    box-shadow: 0 0 0 2px rgba(182, 232, 79, 0.16);
}

.site-header__select select:hover,
.optatips-custom-select__button:hover,
.optatips-custom-select.is-open .optatips-custom-select__button {
    border-color: rgba(182, 232, 79, 0.42);
    color: #ffffff;
    background: #064e3b;
}

.site-header__login {
    color: #d9f99d;
    border: 1px solid rgba(182, 232, 79, 0.18);
    background: rgba(182, 232, 79, 0.08);
}

.site-header__cta {
    color: #064e3b;
    background: var(--ot-color-lime);
}

.site-header__login:hover,
.site-header__login:focus,
.site-header__cta:hover,
.site-header__cta:focus {
    color: #064e3b;
    background: #d9f99d;
}

/* Mobile header dark style */
@media (max-width: 768px) {
    .site-header {
        background: #0b1220 !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    .site-header__top {
        background: #080d17 !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    .site-header__navrow {
        background: #0b1220 !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    .site-nav a,
    .site-nav__menu a {
        color: #cbd5e1 !important;
    }

    .site-nav a:hover,
    .site-nav__menu a:hover {
        color: #b6e84f !important;
    }

    .site-header__select select,
    .site-header select {
        color: #ffffff !important;
        background: #102033 !important;
        border: 1px solid rgba(255,255,255,0.16) !important;
    }

    .site-header__login,
    .site-header__account,
    .site-header__logout {
        color: #d9f99d !important;
        background: rgba(182,232,79,0.08) !important;
        border: 1px solid rgba(182,232,79,0.18) !important;
    }
}

style.css 最底部

/* =========================================================
   Contact Us Page Form
   ========================================================= */
/* Contact form fixed layout */
.contact-form-before-intro {
    grid-column: 1 / -1;
    width: 100%;
    margin-bottom: 36px;
}

.optatips-contact-panel {
    width: 100%;
    max-width: 100%;
    padding: 34px;
    background: #0b1220;
    border-radius: 18px;
    border: 1px solid rgba(182, 232, 79, 0.22);
    box-shadow: 0 18px 45px rgba(16, 32, 51, 0.16);
}

.optatips-contact-panel-head {
    margin-bottom: 24px;
}

.optatips-contact-panel-head .optatips-eyebrow {
    color: #b6e84f;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.optatips-contact-panel-head h2 {
    margin: 8px 0 10px;
    color: #ffffff;
    font-size: 32px;
}

.optatips-contact-panel-head p {
    max-width: 760px;
    margin: 0;
    color: #cbd5e1;
}

.optatips-contact-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.optatips-contact-types input {
    display: none;
}

.optatips-contact-types span {
    display: block;
    padding: 13px 16px;
    border-radius: 10px;
    color: #ffffff;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    font-weight: 800;
}

.optatips-contact-types input:checked + span {
    color: #064e3b;
    background: linear-gradient(135deg, #f8c848, #b6e84f);
}

.optatips-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.optatips-contact-form input,
.optatips-contact-form select,
.optatips-contact-form textarea {
    width: 100%;
    margin: 0 0 14px;
    padding: 14px 16px;
    color: #ffffff;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 10px;
    font-size: 15px;
}

.optatips-contact-form textarea {
    min-height: 140px;
}

.optatips-contact-form input::placeholder,
.optatips-contact-form textarea::placeholder {
    color: rgba(255,255,255,0.55);
}

.optatips-contact-form select option {
    color: #111827;
}

.optatips-contact-form button {
    margin-top: 8px;
    padding: 14px 22px;
    border: 0;
    border-radius: 10px;
    color: #064e3b;
    background: #b6e84f;
    font-weight: 900;
    cursor: pointer;
}

@media (max-width: 768px) {
    .optatips-contact-panel {
        padding: 24px 18px;
    }

    .optatips-contact-types,
    .optatips-contact-grid {
        grid-template-columns: 1fr;
    }
}
/* Contact form full row width */
.contact-form-before-intro {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

.contact-form-before-intro .optatips-contact-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 36px 0 !important;
    box-sizing: border-box !important;
}

.contact-form-before-intro .optatips-contact-form {
    width: 100% !important;
}

.contact-form-before-intro .optatips-contact-types,
.contact-form-before-intro .optatips-contact-grid {
    width: 100% !important;
}
/* Contact form success message fix */
.optatips-contact-alert {
    display: block !important;
    margin: 0 0 22px 0 !important;
    padding: 14px 18px !important;
    background: linear-gradient(135deg, #f8c848, #b6e84f) !important;
    color: #07111f !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* =========================================================
   Header tools dark dropdown fix
   ========================================================= */
.site-header__tools .site-header__select,
.site-header__select--account {
    min-width: 0;
}

.site-header__tools .site-header__select select,
.site-header__select--account select,
.site-header__tools .optatips-custom-select__button,
.site-header__select--account .optatips-custom-select__button {
    border: 1px solid #3c4757 !important;
    color: #ffffff !important;
    background: rgba(16, 32, 51, 0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.site-header__tools .site-header__select select:hover,
.site-header__tools .site-header__select select:focus,
.site-header__select--account select:hover,
.site-header__select--account select:focus,
.site-header__tools .optatips-custom-select__button:hover,
.site-header__tools .optatips-custom-select__button:focus,
.site-header__tools .optatips-custom-select.is-open .optatips-custom-select__button,
.site-header__select--account .optatips-custom-select__button:hover,
.site-header__select--account .optatips-custom-select__button:focus,
.site-header__select--account .optatips-custom-select.is-open .optatips-custom-select__button {
    border-color: #fcdf17 !important;
    color: #ffffff !important;
    background: rgba(16, 32, 51, 0.92) !important;
    box-shadow: 0 0 0 2px rgba(251, 189, 24, 0.16);
    outline: none;
}

.site-header__tools .site-header__select select option,
.site-header__select--account select option {
    color: #ffffff;
    background: #102033;
}

.site-header__tools .site-header__select select option:checked,
.site-header__tools .site-header__select select option:hover,
.site-header__tools .site-header__select select option:focus,
.site-header__select--account select option:checked,
.site-header__select--account select option:hover,
.site-header__select--account select option:focus {
    color: #07111f;
    background: #fcdf17 linear-gradient(#fcdf17, #fcdf17);
}

.site-header__tools .optatips-custom-select__list,
.site-header__select--account .optatips-custom-select__list {
    z-index: 120;
    max-height: min(220px, calc(100vh - 150px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid #3c4757;
    color: #ffffff;
    background: rgba(16, 32, 51, 0.96);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.35);
    scrollbar-color: #fcdf17 #102033;
}

.site-header__tools .optatips-custom-select__option,
.site-header__select--account .optatips-custom-select__option {
    color: #ffffff;
    background: transparent;
}

.site-header__tools .optatips-custom-select__option:hover,
.site-header__tools .optatips-custom-select__option:focus,
.site-header__tools .optatips-custom-select__option.is-selected,
.site-header__select--account .optatips-custom-select__option:hover,
.site-header__select--account .optatips-custom-select__option:focus,
.site-header__select--account .optatips-custom-select__option.is-selected {
    color: #07111f;
    background: #fcdf17;
}

@media (max-width: 560px) {
    .site-header__tools {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-header__tools .site-header__select,
    .site-header__tools .optatips-custom-select {
        width: 100%;
        max-width: 100%;
    }

    .site-header__tools .optatips-custom-select__list {
        max-height: 180px;
    }
}

/* =========================================================
   Free Soccer Tips transparent card archive
   ========================================================= */
.landing-page--free {
    background: #102033;
}

.landing-page--free .landing-hero--green,
.landing-page--free .free-tips-archive-section {
    background:
        radial-gradient(circle at 82% 18%, rgba(251, 189, 24, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(12, 20, 32, 0.98), rgba(16, 32, 51, 0.96));
}

.landing-page--free .free-tips-filter-bar {
    border: 1px solid #3c4757;
    background: rgba(12, 20, 32, 0.72);
}

.landing-page--free .free-tips-filter-bar label span,
.landing-page--free .free-tips-archive-summary {
    color: #fcdf17;
}

.landing-page--free .free-tips-filter-bar select {
    border: 1px solid #3c4757;
    color: #ffffff;
    background: rgba(16, 32, 51, 0.92);
}

.landing-page--free .free-tips-filter-bar select:focus,
.landing-page--free .free-tips-filter-bar select:hover {
    border-color: #fcdf17;
    outline: none;
    box-shadow: 0 0 0 2px rgba(251, 189, 24, 0.16);
}

.landing-page--free .free-tips-filter-bar select option {
    color: #ffffff;
    background: #102033;
}

.landing-page--free .free-tips-filter-bar__actions button {
    color: #07111f;
    background: #fcdf17;
}

.landing-page--free .free-tips-filter-bar__actions a {
    border: 1px solid #3c4757;
    color: #ffffff;
    background: rgba(60, 71, 87, 0.35);
}

.landing-page--free .free-tips-archive-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.landing-page--free .free-tip-archive-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr) minmax(190px, 0.55fr);
    gap: 18px;
    align-items: stretch;
    border: 1px solid #3c4757;
    border-radius: 8px;
    padding: 18px;
    color: #ffffff;
    background: rgba(12, 20, 32, 0.72);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}

.landing-page--free .free-tip-archive-card__match,
.landing-page--free .free-tip-archive-card__pick,
.landing-page--free .free-tip-archive-card__side {
    min-width: 0;
}

.landing-page--free .free-tip-archive-card__topline {
    justify-content: flex-start;
}

.landing-page--free .free-tip-archive-card__topline span,
.landing-page--free .free-tip-archive-card__topline strong {
    border: 1px solid rgba(251, 189, 24, 0.36);
    color: #07111f;
    background: #fcdf17;
}

.landing-page--free .free-tip-archive-card h3 {
    margin-top: 12px;
    color: #ffffff;
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
}

.landing-page--free .free-tip-archive-card h3 a {
    color: #ffffff;
}

.landing-page--free .free-tip-archive-card dl {
    margin: 0;
}

.landing-page--free .free-tip-archive-card__match dl,
.landing-page--free .free-tip-archive-card__pick,
.landing-page--free .free-tip-archive-card__side dl {
    display: grid;
    gap: 10px;
}

.landing-page--free .free-tip-archive-card__match dl {
    margin-top: 16px;
}

.landing-page--free .free-tip-archive-card__match dl div,
.landing-page--free .free-tip-archive-card__pick div,
.landing-page--free .free-tip-archive-card__side dl div {
    border: 1px solid rgba(60, 71, 87, 0.9);
    border-radius: 8px;
    padding: 12px;
    background: rgba(60, 71, 87, 0.32);
}

.landing-page--free .free-tip-archive-card dt {
    margin: 0 0 5px;
    color: #fcdf17;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.landing-page--free .free-tip-archive-card dd {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.landing-page--free .free-tip-archive-card__pick dd {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.landing-page--free .free-tip-archive-card__side {
    display: grid;
    gap: 12px;
    align-content: start;
}

.landing-page--free .free-tip-archive-card__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 999px;
    padding: 0 14px;
    color: #ffffff;
    background: #3c4757;
    font-weight: 950;
    text-transform: uppercase;
}

.landing-page--free .free-tip-archive-card__status--won,
.landing-page--free .free-tip-archive-card__status--win {
    color: #07111f;
    background: #2ed249;
}

.landing-page--free .free-tip-archive-card__status--lost,
.landing-page--free .free-tip-archive-card__status--lose {
    color: #ffffff;
    background: #ff452f;
}

.landing-page--free .free-tip-archive-card__status--pending {
    color: #07111f;
    background: #fcdf17;
}

.landing-page--free .free-tip-archive-card__tipster {
    margin: 0;
    color: #d6dfeb;
}

.landing-page--free .free-tip-archive-card__tipster a {
    color: #fcdf17;
    font-weight: 950;
}

.landing-page--free .free-tip-archive-card__foot {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid #3c4757;
    padding-top: 16px;
}

.landing-page--free .free-tip-archive-card__note {
    flex: 1;
    border: 0;
    padding: 0;
    color: #d6dfeb;
    background: transparent;
}

.landing-page--free .free-tip-archive-card__actions {
    flex: 0 0 auto;
}

.landing-page--free .free-tip-archive-card__actions a {
    color: #07111f;
    background: #fcdf17;
}

.landing-page--free .free-tip-archive-card__actions a + a {
    border: 1px solid #3c4757;
    color: #ffffff;
    background: rgba(60, 71, 87, 0.48);
}

@media (max-width: 980px) {
    .landing-page--free .free-tip-archive-card {
        grid-template-columns: 1fr;
    }

    .landing-page--free .free-tip-archive-card__foot {
        align-items: stretch;
        flex-direction: column;
    }
}

/* =========================================================
   Global Dark Visual System + Homepage V2
   ========================================================= */
:root {
    --ot-color-ink: #ffffff;
    --ot-color-muted: #d6dfeb;
    --ot-color-line: #3c4757;
    --ot-color-surface: #17283c;
    --ot-color-page: #102033;
    --ot-color-green: #2ed249;
    --ot-color-green-dark: #1c9d35;
    --ot-color-lime: #fcdf17;
    --ot-color-navy: #102033;
    --ot-color-danger: #ff452f;
    --ot-shadow-soft: 0 22px 55px rgba(0, 0, 0, 0.28);
}

body {
    color: #ffffff;
    background: #102033;
}

.site-main,
.section,
.section--white {
    color: #ffffff;
    background: #102033;
}

.section--deep {
    background: #0f1c2c;
}

.section__title,
.section__header h1,
.section__header h2,
.landing-copy__main h2,
.landing-side-card h2,
.landing-trust-grid h2,
.optatips-tip-card__title,
.optatips-tip-card__title a,
.optatips-stat strong,
.optatips-pricing-card h2,
.optatips-pricing-card h3 {
    color: #ffffff;
}

.section__description,
.landing-copy__main p,
.landing-side-card li,
.landing-trust-grid p,
.landing-feature-grid p,
.landing-series-card p,
.landing-faq p,
.optatips-tip-card__meta,
.optatips-tip-card__excerpt,
.optatips-tips-empty {
    color: #d6dfeb;
}

.tips-panel,
.optatips-tip-card,
.optatips-stat,
.landing-side-card,
.landing-feature-card,
.landing-series-card,
.landing-faq article,
.optatips-pricing-card,
.single-tip-card,
.single-tip-sidebar-card {
    border-color: #3c4757;
    background: rgba(60, 71, 87, 0.42);
    color: #ffffff;
}

.optatips-tip-card__locked,
.notice,
.optatips-contact-alert {
    border-color: rgba(251, 189, 24, 0.45);
    color: #fcdf17;
    background: rgba(251, 189, 24, 0.1);
}

.section__eyebrow,
.hero__eyebrow,
.optatips-tip-card__access,
.optatips-pricing-card__badge,
.optatips-contact-panel-head .optatips-eyebrow {
    color: #fcdf17;
}

.optatips-tip-card__prediction,
.optatips-tip-card__stats,
.optatips-tip-card__stats span,
.optatips-tip-card__stats strong,
.optatips-tip-card__locked p {
    color: #d6dfeb;
}

.optatips-tip-card__prediction strong,
.optatips-tip-card__locked strong {
    color: #ffffff;
}

.optatips-tip-card__access--free,
.optatips-tip-card__access--premium,
.optatips-tip-card__access--super {
    border-color: rgba(251, 189, 24, 0.45);
    color: #07111f;
    background: #fcdf17;
}

.optatips-tip-card__badge--pending {
    border-color: rgba(251, 189, 24, 0.45);
    color: #07111f;
    background: #fcdf17;
}

.optatips-tip-card__badge--won,
.optatips-tip-card__badge--win,
.single-tip-meta__status--won,
.single-tip-meta__status--win,
.optatips-result-dot--won,
.optatips-result-dot--win {
    border-color: rgba(46, 210, 73, 0.45) !important;
    color: #07111f !important;
    background: #2ed249 !important;
}

.optatips-tip-card__badge--lost,
.optatips-tip-card__badge--lose,
.single-tip-meta__status--lost,
.single-tip-meta__status--lose,
.optatips-result-dot--lost,
.optatips-result-dot--lose {
    border-color: rgba(255, 69, 47, 0.5) !important;
    color: #ffffff !important;
    background: #ff452f !important;
}

.home-v2 {
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 8%, rgba(251, 189, 24, 0.16), transparent 28%),
        linear-gradient(180deg, #102033 0%, #0d1b2c 52%, #102033 100%);
}

.home-v2 .optatips-container {
    width: min(calc(100% - 32px), 1200px);
}

.home-v2-hero,
.home-v2-module,
.home-v2-upgrade,
.home-v2-final {
    position: relative;
    padding: 74px 0;
}

.home-v2-hero::before,
.home-v2-module::before,
.home-v2-upgrade::before,
.home-v2-final::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.home-v2-hero {
    min-height: 640px;
    display: grid;
    align-items: center;
    background:
        radial-gradient(circle at 84% 44%, rgba(46, 210, 73, 0.18), transparent 18%),
        radial-gradient(circle at 84% 44%, rgba(255, 255, 255, 0.08), transparent 31%),
        linear-gradient(135deg, rgba(9, 31, 30, 0.98), rgba(16, 32, 51, 0.97));
}

.home-v2-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    gap: 42px;
    align-items: center;
}

.home-v2-eyebrow {
    margin: 0 0 12px;
    color: #fcdf17;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-v2-hero h1 {
    max-width: 820px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(3rem, 7vw, 5.8rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.home-v2-hero__copy > p:not(.home-v2-eyebrow):not(.home-v2-alert) {
    max-width: 700px;
    margin: 22px 0 0;
    color: #d6dfeb;
    font-size: 1.15rem;
}

.home-v2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.home-v2-button,
.home-v2-module__head > a,
.home-v2-final a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 8px;
    padding: 0 18px;
    font-weight: 900;
    text-decoration: none;
}

.home-v2-button--primary,
.home-v2-module__head > a,
.home-v2-final a {
    color: #07111f;
    background: #fcdf17;
}

.home-v2-button--ghost {
    border: 1px solid #3c4757;
    color: #ffffff;
    background: rgba(60, 71, 87, 0.36);
}

.home-v2-alert {
    display: inline-flex;
    max-width: 720px;
    margin: 22px 0 0;
    color: #fcdf17;
    font-weight: 850;
}

.home-v2-hero__panel,
.home-v2-history,
.home-v2-ai-card,
.home-v2-upgrade__grid,
.home-v2-final article {
    border: 1px solid #3c4757;
    border-radius: 8px;
    background: rgba(60, 71, 87, 0.38);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
}

.home-v2-hero__panel {
    padding: 24px;
}

.home-v2-hero__panel > span,
.home-v2-upgrade__label {
    color: #fcdf17;
    font-size: 0.85rem;
    font-weight: 900;
    text-transform: uppercase;
}

.home-v2-hero__panel dl {
    display: grid;
    gap: 14px;
    margin: 20px 0 0;
}

.home-v2-hero__panel dl div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #3c4757;
    padding-bottom: 12px;
}

.home-v2-hero__panel dt {
    color: #d6dfeb;
    font-weight: 800;
}

.home-v2-hero__panel dd {
    margin: 0;
    color: #2ed249;
    font-size: 1.45rem;
    font-weight: 950;
}

.home-v2-module {
    border-top: 1px solid rgba(60, 71, 87, 0.72);
}

.home-v2-module--premium,
.home-v2-module--ai {
    background: rgba(7, 17, 31, 0.28);
}

.home-v2-module__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.home-v2-module__head h2,
.home-v2-upgrade h2,
.home-v2-final h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1;
}

.home-v2-module__head p {
    max-width: 760px;
    margin: 12px 0 0;
    color: #d6dfeb;
}

.home-v2-module__body {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
    align-items: start;
}

.home-v2-feed .optatips-tips-list,
.home-v2-ai-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.home-v2-feed .optatips-tip-card {
    min-height: 100%;
    border-color: #3c4757;
    background: rgba(60, 71, 87, 0.42);
}

.home-v2-feed .optatips-tip-card__locked {
    color: #fcdf17;
}

.home-v2-feed .optatips-tip-card__locked-actions a,
.home-v2-feed .optatips-tip-card__link,
.home-v2-feed .optatips-tip-card__follow-link {
    border-color: rgba(251, 189, 24, 0.32);
}

.home-v2-history {
    padding: 18px;
}

.home-v2-history__head {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
}

.home-v2-history__head span {
    color: #fcdf17;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.home-v2-history__head strong {
    color: #ffffff;
    font-size: 1.05rem;
}

.home-v2-history__list {
    display: grid;
    gap: 10px;
}

.home-v2-history__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(60, 71, 87, 0.78);
    border-radius: 8px;
    padding: 12px;
    color: #ffffff;
    background: rgba(16, 32, 51, 0.58);
    text-decoration: none;
}

.home-v2-history__item strong,
.home-v2-history__item em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-v2-history__item em {
    color: #d6dfeb;
    font-size: 0.78rem;
    font-style: normal;
}

.home-v2-result {
    border-radius: 999px;
    padding: 5px 9px;
    color: #d6dfeb;
    background: #3c4757;
    font-size: 0.75rem;
    font-weight: 950;
}

.home-v2-result--won,
.home-v2-result--win {
    color: #07111f;
    background: #2ed249;
}

.home-v2-result--lost,
.home-v2-result--lose {
    color: #ffffff;
    background: #ff452f;
}

.home-v2-history__item small {
    color: #fcdf17;
    font-weight: 900;
}

.home-v2-history__empty {
    margin: 0;
    color: #d6dfeb;
}

.home-v2-ai-card {
    padding: 18px;
}

.home-v2-ai-card span {
    display: inline-flex;
    margin-bottom: 12px;
    border-radius: 999px;
    padding: 5px 9px;
    color: #07111f;
    background: #fcdf17;
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.home-v2-ai-card h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.12rem;
}

.home-v2-ai-card p {
    margin: 10px 0 0;
    color: #d6dfeb;
}

.home-v2-ai-card__signals {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    border-top: 1px solid #3c4757;
    padding-top: 14px;
}

.home-v2-ai-card__signals strong {
    color: #d6dfeb;
}

.home-v2-ai-card__signals mark {
    border-radius: 999px;
    padding: 5px 10px;
    color: #07111f;
    background: #2ed249;
    font-weight: 950;
}

.home-v2-upgrade {
    background:
        radial-gradient(circle at 48% 50%, rgba(251, 189, 24, 0.16), transparent 23%),
        linear-gradient(135deg, rgba(16, 32, 51, 0.98), rgba(8, 13, 23, 0.96));
}

.home-v2-upgrade__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: 28px;
}

.home-v2-upgrade ul,
.home-v2-final p {
    color: #d6dfeb;
}

.home-v2-upgrade li::marker {
    color: #fcdf17;
}

.home-v2-upgrade__cta {
    display: grid;
    gap: 12px;
    justify-items: stretch;
}

.home-v2-final {
    padding-bottom: 90px;
}

.home-v2-final__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.home-v2-final article {
    padding: 26px;
}

.home-v2-final p {
    margin: 14px 0 20px;
}

@media (max-width: 980px) {
    .home-v2-hero__grid,
    .home-v2-module__body,
    .home-v2-upgrade__grid,
    .home-v2-final__grid {
        grid-template-columns: 1fr;
    }

    .home-v2-feed .optatips-tips-list,
    .home-v2-ai-list {
        grid-template-columns: 1fr;
    }

    .home-v2-module__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-v2-module__head > a {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .home-v2-hero,
    .home-v2-module,
    .home-v2-upgrade,
    .home-v2-final {
        padding: 46px 0;
    }

    .home-v2-hero h1,
    .home-v2-module__head h2,
    .home-v2-upgrade h2,
    .home-v2-final h2 {
        font-size: clamp(2rem, 10vw, 2.7rem);
        line-height: 1.05;
        overflow-wrap: anywhere;
    }

    .home-v2-actions {
        display: grid;
    }

    .home-v2-history__item {
        grid-template-columns: 1fr;
    }

    .home-v2-upgrade__grid,
    .home-v2-final article {
        padding: 20px;
    }
}