:root {
    color-scheme: dark;
    --ocs8-black: #050505;
    --ocs8-black-soft: #0d0d0f;
    --ocs8-panel: #151518;
    --ocs8-panel-raised: #1c1c20;
    --ocs8-red-deep: #76090e;
    --ocs8-red: #d71920;
    --ocs8-red-bright: #ff3b43;
    --ocs8-gold: #ffb400;
    --ocs8-gold-soft: #ffd35a;
    --ocs8-text: #f7f7f8;
    --ocs8-text-soft: #d6d6da;
    --ocs8-text-muted: #a7a7ad;
    --ocs8-border: rgba(255, 59, 67, 0.28);
    --ocs8-shadow: 0 18px 45px rgba(0, 0, 0, 0.62);
}

html,
body {
    background:
        radial-gradient(circle at 10% 0%, rgba(215, 25, 32, 0.24), transparent 36%),
        radial-gradient(circle at 90% 12%, rgba(118, 9, 14, 0.2), transparent 34%),
        linear-gradient(160deg, var(--ocs8-black), var(--ocs8-black-soft) 58%, #160607) fixed !important;
    color: var(--ocs8-text) !important;
}

body a {
    color: var(--ocs8-gold-soft) !important;
}

body a:hover,
body a:focus-visible {
    color: #ffffff !important;
}

::selection {
    background: var(--ocs8-red);
    color: #ffffff;
}

body .header {
    background:
        radial-gradient(circle at 16% 0%, rgba(255, 59, 67, 0.2), transparent 38%),
        linear-gradient(180deg, #171719, #070708) !important;
    border-bottom: 1px solid rgba(255, 180, 0, 0.28) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.72) !important;
}

.logo img,
.side-nav-logo img {
    filter: drop-shadow(0 0 12px rgba(255, 180, 0, 0.38)) drop-shadow(0 0 22px rgba(215, 25, 32, 0.28)) !important;
}

.menu-toggle,
.side-nav-close {
    color: var(--ocs8-text) !important;
}

.main-menu-container {
    background: linear-gradient(90deg, #66080c, var(--ocs8-red), #870b11) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 180, 0, 0.26) !important;
    box-shadow: 0 9px 28px rgba(0, 0, 0, 0.7) !important;
}

.main-menu a {
    color: #ffffff !important;
}

.main-menu a:hover,
.main-menu a.current {
    background: rgba(0, 0, 0, 0.2) !important;
    color: var(--ocs8-gold-soft) !important;
}

.side-nav {
    background:
        radial-gradient(circle at 0 0, rgba(215, 25, 32, 0.42), transparent 48%),
        linear-gradient(160deg, #160607, #050505 62%) !important;
    border-right: 1px solid var(--ocs8-border) !important;
}

.side-nav-menu a {
    color: var(--ocs8-text) !important;
}

.side-nav-menu a:hover {
    color: var(--ocs8-gold-soft) !important;
}

.mobile-auth-buttons {
    background: linear-gradient(90deg, #4c0609, #ba1118, #4c0609) !important;
    border-top: 1px solid rgba(255, 180, 0, 0.25) !important;
}

.header-top .auth-buttons .auth-button:nth-child(1),
.side-nav-auth .auth-button:nth-child(1),
.mobile-auth-buttons .auth-button:nth-child(1),
.register-button,
.btn-primary,
.download-btn.android,
.contact-button.register {
    background: linear-gradient(135deg, var(--ocs8-red-bright), var(--ocs8-red-deep)) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 10px 26px rgba(215, 25, 32, 0.38) !important;
}

.header-top .auth-buttons .auth-button:nth-child(2),
.side-nav-auth .auth-button:nth-child(2),
.mobile-auth-buttons .auth-button:nth-child(2),
.btn-secondary,
.download-btn.ios,
.contact-button.live-chat {
    background: linear-gradient(135deg, #27272b, #09090a) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 59, 67, 0.52) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5) !important;
}

.header-top .auth-buttons .auth-button:nth-child(3),
.side-nav-auth .auth-button:nth-child(3),
.mobile-auth-buttons .auth-button:nth-child(3),
.auth-button.login-button {
    background: linear-gradient(135deg, var(--ocs8-gold-soft), #f08a00) !important;
    color: #160607 !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    box-shadow: 0 10px 26px rgba(255, 180, 0, 0.3) !important;
}

.auth-button:hover,
.download-btn:hover,
.contact-button:hover {
    filter: brightness(1.1) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.65) !important;
}

.app-download-section,
.howto-section,
.key-metrics-section,
.payment-responsible-section,
.partners {
    background: transparent !important;
}

.app-download-wrapper,
.site-intro,
.content-section,
.features-grid-container,
.faq-section,
.article-main,
.article-sidebar,
.list-main,
.sidebar,
.card {
    background: linear-gradient(145deg, rgba(28, 28, 32, 0.98), rgba(8, 8, 9, 0.98)) !important;
    border: 1px solid var(--ocs8-border) !important;
    box-shadow: var(--ocs8-shadow) !important;
}

.site-intro p,
.article-content,
.article-description,
.feature-description,
.recent-post-content,
.article-text,
.article-list,
.article-card,
.article-card .article-description,
.app-subtitle,
.howto-step p,
.metric span,
.faq-item p {
    color: var(--ocs8-text-soft) !important;
}

.site-title,
.section-title,
.features-title,
.app-title,
.article-title,
.feature-title,
.faq-item h3,
.howto-step h3 {
    color: var(--ocs8-text) !important;
    text-shadow: 0 0 18px rgba(215, 25, 32, 0.22) !important;
}

.section-title::after,
.features-title::after,
.footer-title::after {
    background: linear-gradient(90deg, var(--ocs8-red-bright), var(--ocs8-gold)) !important;
}

.howto-step,
.metric,
.feature-card,
.article-card,
.recent-post,
.faq-item {
    background: linear-gradient(145deg, var(--ocs8-panel-raised), #0a0a0b) !important;
    border: 1px solid rgba(255, 59, 67, 0.22) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.48) !important;
}

.howto-step:hover,
.metric:hover,
.feature-card:hover,
.article-card:hover,
.faq-item:hover {
    border-color: rgba(255, 180, 0, 0.5) !important;
    box-shadow: 0 16px 36px rgba(118, 9, 14, 0.34) !important;
}

.howto-icon,
.metric > i,
.feature-card i,
.card-header i,
.platform-hours i,
.platform-contact i,
.platform-fax i,
.platform-email i,
.platform-website i,
.platform-main i,
.support-links a i,
.policy-links a i,
.support-link::before,
.policy-link::before {
    color: var(--ocs8-gold) !important;
}

.feature-title a,
.article-title a,
.recent-post-title a {
    color: var(--ocs8-text) !important;
}

.feature-title a:hover,
.article-title a:hover,
.recent-post-title a:hover {
    color: var(--ocs8-red-bright) !important;
}

.modern-footer,
footer {
    background:
        radial-gradient(circle at 50% 0%, rgba(215, 25, 32, 0.24), transparent 48%),
        linear-gradient(160deg, #161618, #050505 66%) !important;
    border-top: 1px solid rgba(255, 59, 67, 0.28) !important;
}

.footer-wave-decoration path {
    fill: #050505 !important;
}

.footer-card,
.card-header {
    background-color: rgba(255, 255, 255, 0.045) !important;
    border-color: rgba(255, 59, 67, 0.2) !important;
}

.card-header:hover,
.card-header.active,
.support-links a:hover,
.policy-links a:hover {
    background-color: rgba(215, 25, 32, 0.14) !important;
}

.footer-bottom,
.copyright {
    background: #050505 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.copyright-text,
.footer-links a,
.footer-contact p,
.sitemap a {
    color: var(--ocs8-text-muted) !important;
}

input,
select,
textarea {
    background: #0b0b0c !important;
    color: var(--ocs8-text) !important;
    border-color: rgba(255, 59, 67, 0.32) !important;
}

input:focus,
select:focus,
textarea:focus,
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--ocs8-gold) !important;
    outline-offset: 3px;
}

@media (max-width: 768px) {
    .app-download-wrapper,
    .site-intro,
    .features-grid-container,
    .faq-section {
        border-radius: 12px !important;
    }
}