:root {
    --red: #c8323e;
    --red-text: #eb2800;
    --green: #61ce70;
    --green-text: #009c18;
    --text: #808285;
    --heading: #000;
    --blue: #0170b9;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: var(--text);
    background: #fff;
    font-size: 16px;
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3, h4 { font-family: "Roboto Condensed", sans-serif; color: var(--heading); font-weight: 600; line-height: 1.3; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }

a { color: var(--blue); text-decoration: none; }

/* Header */
.site-header { background: #fff; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.site-branding { display: flex; align-items: center; gap: 12px; }
.site-branding img { width: 40px; height: 40px; border-radius: 6px; }
.site-title { font-size: 22px; font-weight: 700; color: #000; }
.main-nav { display: flex; gap: 28px; }
.main-nav a { color: #3a3a3a; font-size: 15px; font-weight: 500; }
.main-nav a.active, .main-nav a:hover { color: var(--blue); }

/* Icon nav */
.icon-nav { background: #fff; border-bottom: 1px solid #f2f2f2; padding: 16px 0; }
.icon-nav-inner { display: flex; justify-content: space-around; }
.icon-nav a { color: #000; font-weight: 700; font-size: 15px; }
.icon-nav a span { text-decoration: underline; }

/* Filter buttons */
.filter-buttons { display: flex; gap: 30px; justify-content: center; margin: 22px 0; }
.btn { display: inline-block; border-radius: 3px; font-size: 15px; font-weight: 500; padding: 12px 24px; color: #fff; text-align: center; }
.btn-red { background: var(--red); flex: 1; max-width: 560px; font-weight: 600; }
.btn-red:hover { background: #b02a35; }
.btn-green { background: var(--green); }
.btn-green:hover { background: #4dbd5c; }

/* App cards */
.app-list { display: flex; flex-direction: column; gap: 16px; }
.app-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(0,0,0,.12);
    padding: 16px 22px 16px 30px;
}
.app-index { position: absolute; left: 9px; font-size: 12px; color: #9aa0a6; }
.app-icon img { width: 68px; height: 68px; border-radius: 12px; display: block; object-fit: cover; }
.app-info { flex: 1; min-width: 0; }
.app-info h2 { font-size: 20px; margin-bottom: 2px; }
.app-info h2 a { color: #000; }
.app-meta { list-style: none; }
.app-meta li { font-size: 13px; font-weight: 600; white-space: nowrap; }
.app-meta .bonus { color: var(--red-text); }
.app-meta .withdraw { color: var(--green-text); }
.app-action { margin-right: 0; }
.app-action .btn { padding: 9px 16px; font-size: 13px; border-radius: 6px; white-space: nowrap; }

/* Content */
.content { margin-top: 48px; }
.content h2, .content h3 { margin: 34px 0 14px; }
.content p { margin-bottom: 16px; }
.content ul { margin: 0 0 18px 22px; }
.content li { margin-bottom: 10px; }
.content li strong, .content p strong { color: #3a3a3a; }
.intro-strong strong { font-size: 17px; color: #000; }
h1.intro-strong { font-size: 20px; margin-bottom: 14px; }
.disclaimer-heading { color: var(--red-text); }
.seo-line { font-size: 14px; }

/* FAQ */
.faq details {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 14px;
    color: #54595f;
}
.faq summary { cursor: pointer; font-weight: 500; }
.faq details p { margin: 10px 0 0; }

/* Important notice box */
.important-notice {
    max-width: 520px;
    margin: 40px 0 30px;
    padding: 16px 20px;
    border-radius: 4px;
    background: linear-gradient(180deg, #fff3f3 0%, #f7a6b4 100%);
    font-size: 13px;
    color: #222;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.important-notice .notice-title { text-align: center; font-size: 15px; margin-bottom: 8px; }
.important-notice p { margin-bottom: 8px; }
.important-notice a { color: var(--blue); }

/* Tags marquee */
.tags-marquee {
    border: 2px dashed #fff;
    background: #7ec8e3;
    color: #6b7b8a;
    padding: 4px 0;
    font-size: 13px;
    margin-bottom: 26px;
}

.thanks { color: var(--green-text); font-weight: 700; margin: 10px 0 30px 80px; }

/* App page hero */
.app-hero { padding: 30px 0 10px; }
.app-hero-top { display: flex; align-items: flex-start; gap: 40px; }
.app-hero-icon { width: 190px; height: 190px; border-radius: 24px; object-fit: cover; display: block; margin-left: 15%; }
.app-hero-title { flex: 1; text-align: center; padding-top: 10px; }
.app-hero-title h1 { font-size: 36px; }
.app-hero-sublink { font-size: 14px; font-weight: 600; text-decoration: underline; }
.app-stats { list-style: none; display: flex; justify-content: space-around; margin: 34px 0 26px; }
.app-stats li { font-size: 24px; font-weight: 700; color: #000; font-family: "Roboto Condensed", sans-serif; }
.btn-download {
    display: block;
    margin: 10px 6% 16px;
    padding: 13px 20px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    background: linear-gradient(90deg, #e64980 0%, #d6336c 60%, #e8590c 100%);
    border: 2px solid #4263eb;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
.btn-telegram {
    display: block;
    margin: 0 1% 10px;
    padding: 12px 20px;
    text-align: center;
    color: var(--blue);
    font-weight: 700;
    font-size: 14px;
    background: #fff;
    border: 2px solid #4263eb;
    border-radius: 10px;
}
.btn-download:hover { filter: brightness(1.06); }
.btn-telegram:hover { background: #f4f7ff; }

/* App article */
.app-guide .guide-title { font-size: 32px; }
.app-guide table, .app-about table { width: 100%; border-collapse: collapse; margin: 16px 0 22px; font-size: 15px; }
.app-guide th, .app-guide td, .app-about th, .app-about td { border: 1px solid #e2e2e2; padding: 9px 14px; text-align: left; }
.app-guide thead th, .app-about thead th { background: #f6f6f6; color: #3a3a3a; }
.app-guide tbody tr:nth-child(even), .app-about tbody tr:nth-child(even) { background: #fafafa; }
.app-guide h3, .app-about h3 { margin: 22px 0 10px; }
.app-guide, .app-about { overflow-x: auto; }
.related-title, .about-apps-title { text-align: center; margin: 36px 0 20px; }
.related-games { margin-top: 20px; }
.app-about { margin-bottom: 30px; }

/* FAQ accordion (app pages) */
.faq-container { max-width: 700px; margin: 30px auto; }
.faq-title { text-align: center; font-size: 26px; font-weight: bold; color: #5a008a; margin-bottom: 20px; }
.faq-title span { padding: 0 15px; border-bottom: 3px solid #5a008a; }
.faq-box { background: #fff; border-radius: 15px; margin-bottom: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.15); }
.faq-box.active { background: #c8ff6a; }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 18px; cursor: pointer; font-weight: bold; font-size: 16px; color: #222; }
.faq-icon { font-size: 20px; line-height: 1; }
.faq-answer { display: none; padding: 0 18px 18px; color: #333; }
.faq-answer ul { margin-left: 20px; }

@media (max-width: 700px) {
    .app-hero-top { flex-direction: column; align-items: center; gap: 14px; }
    .app-hero-icon { margin-left: 0; width: 120px; height: 120px; }
    .app-stats { flex-wrap: wrap; gap: 12px; }
    .app-stats li { font-size: 18px; }
}

/* Static pages */
.page-content { padding: 36px 20px 50px; }
.page-content h1 { font-size: 36px; margin-bottom: 22px; }
.page-content h2, .page-content h3 { margin: 30px 0 12px; }
.page-content p { margin-bottom: 16px; }
.page-content ul { margin: 0 0 18px 22px; }
.page-content li { margin-bottom: 10px; }
.page-content li strong, .page-content p strong { color: #3a3a3a; }

.contact-table { border-collapse: collapse; margin: 10px 0 26px; min-width: 320px; }
.contact-table th, .contact-table td { border: 1px solid #ddd; padding: 10px 16px; text-align: left; }
.contact-table th { background: #f7f7f7; color: #3a3a3a; }

/* Footer */
.site-footer { border-top: 1px solid #eee; padding: 24px 0; text-align: center; font-size: 15px; color: #3a3a3a; }

/* Responsive */
@media (max-width: 921px) {
    .app-card { padding: 14px 16px 14px 26px; gap: 14px; }
    .app-info h2 { font-size: 18px; }
    .main-nav { display: none; }
}
@media (max-width: 544px) {
    .app-list { gap: 10px; }
    .app-icon img { width: 56px; height: 56px; }
    .filter-buttons { gap: 12px; margin: 16px 0; }
    .app-card { padding: 10px 10px 10px 20px; gap: 10px; }
    .app-info h2 { font-size: 16px; margin-bottom: 0; }
    .app-meta li { font-size: 11.5px; }
    .app-action .btn { padding: 8px 10px; font-size: 12px; }
}