/* ==========================================================================
   q89theme — merged stylesheet
   Ported from sanitized-q89-v3/static/css/main.css (dark theme, gold/orange accent)
   All classes prefixed q9-
   ========================================================================== */

:root {--col__area: rgba(240, 193, 89, 0.3);--flex__area: rgb(255,255,255);--unit-wrap: rgba(255, 255, 255, 0.05);--module-grid: rgb(255,105,0);--full-icon: #abb8c3;--meta-tier: #f0c159;--body-info: #141416;--page__title: 12px;--right-box: #00d084;--unit-banner: #ff4444;--nav-alt-widget: linear-gradient(135deg, var(--meta-tier), var(--module-grid))}

* { box-sizing: border-box; }
html {overflow-x: hidden;scroll-behavior: smooth}
body.center-note {background: var(--body-info);overflow-x: hidden;margin: 0;font-family: 'Segoe UI', Arial, sans-serif;line-height: 1.6;color: var(--flex__area);user-select:auto;pointer-events:auto;isolation:auto;visibility:visible}
img {height: auto;max-width: 100%;display: block}
a {text-decoration: none;color: inherit}
ul {margin: 0;padding: 0;list-style: none}
h1, h2, h3 { margin: 0 0 0.5em; }
p {margin: 0 0 1em;color: var(--full-icon)}

.block-wrap {margin: 0 auto;max-width: 1200px;padding: 0 20px}

/* Header / Nav */
.meta-layout {backdrop-filter: blur(6px);background: rgba(20, 20, 22, 0.95);top: 0;position: sticky;border-bottom: 1px solid var(--meta-tier);z-index: 1000}
.inner-menu {display: flex;padding: 15px 0;gap: 16px;justify-content: space-between;align-items: center;position: relative}
.main-entry {align-items: center;display: flex;gap: 15px}
.zone-block {width: 44px;align-items: center;display: flex;height: 44px;border-radius: 50%;background: var(--nav-alt-widget);justify-content: center;overflow: hidden}
.zone-block img {height: 100%;object-fit: cover;width: 100%;border-radius: 50%}
.lead-region {color: var(--body-info);font-size: 1.1rem;font-weight: 800}

.band-top-inner {flex-wrap: wrap;flex: 1;display: flex;gap: 8px;justify-content: center}
.band-top-inner a {white-space: nowrap;font-size: 0.9rem;color: var(--flex__area);border-radius: 8px;padding: 8px 12px}
.band-top-inner a:hover, .band-top-inner a.main-primary-info {background: rgba(240, 193, 89, 0.1);color: var(--meta-tier)}

.light-box {display: flex;gap: 10px}
.page-center-main {color: var(--flex__area);display: none;cursor: pointer;border-radius: 6px;padding: 6px 10px;background: none;border: none;font-size: 1.4rem}
.page-center-main:hover {color: var(--meta-tier);background: rgba(240, 193, 89, 0.1)}

/* Buttons */
.band__block {background: var(--nav-alt-widget);display: inline-block;border-radius: 25px;color: #fff;border: none;padding: 12px 24px;font-weight: 700;transition: transform 0.2s ease, box-shadow 0.2s ease}
.band__block:hover {box-shadow: 0 8px 20px rgba(240, 193, 89, 0.4);transform: translateY(-2px)}
.nav__note { background: var(--right-box); }
.panel-head-cell {color: var(--meta-tier);border: 2px solid var(--meta-tier);background: transparent}
.content-frame {text-align: center;display: block;width: 100%}

/* Hero */
.narrow-entry { display: block; }
.nav__title {padding: 64px 0 40px;text-align: center}
.nav__title h1 {line-height: 1.2;color: var(--meta-tier);margin-bottom: 20px;font-size: 2.8rem;font-weight: 800}
.nav__title p {font-size: 1.15rem;max-width: 800px;color: var(--full-icon);margin: 0 auto 30px}
.body-foot {margin-bottom: 24px;gap: 12px;flex-wrap: wrap;justify-content: center;display: flex}
.sec-bar {font-size: 0.8rem;background: rgba(240, 193, 89, 0.12);border: 1px solid var(--col__area);border-radius: 999px;color: var(--full-icon);padding: 6px 14px}

.lead-tier {margin: 40px auto;max-width: 600px;border: 2px solid var(--meta-tier);border-radius: var(--page__title);text-align: left;background: rgba(240, 193, 89, 0.1);padding: 30px}
.lead-tier h3 {margin-bottom: 20px;text-align: center;color: var(--meta-tier)}
.lead-tier li {margin-bottom: 10px;font-size: 1.05rem}
.data-feature, .band-narrow-widget, .module__block {text-align: center;margin: 32px 0}
.data-feature img, .band-narrow-widget img, .module__block img {box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35);border-radius: var(--page__title);max-width: 100%;margin: 0 auto}
.data-feature img { max-width: 420px; }
.area-lead {display: grid;gap: 20px;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));margin: 24px 0}
.area-lead img {box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35);border-radius: var(--page__title);width: 100%}

/* VIP tier cards — three fixed tiers with distinct metal colors, ported from source */
.band-area {gap: 24px;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));display: grid;margin-top: 24px}

/* Bonus hero + bonus cards */
.panel-bar-entry {padding: 60px 40px;border: 2px solid var(--meta-tier);background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(240,193,89,0.1));border-radius: 20px;margin: 40px 0;text-align: center}
.panel-bar-entry h1 {margin-bottom: 16px;color: var(--meta-tier);font-size: 2.4rem}
.box-top-widget {grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 24px;display: grid;margin-top: 24px}
.desc-main {padding: 32px;background: var(--unit-wrap);border: 2px solid var(--col__area);text-align: center;border-radius: 20px;transition: all 0.3s ease}
.desc-main:hover {border-color: var(--meta-tier);transform: translateY(-8px)}
.desc-main.foot-inner {border-color: rgba(255,215,0,1);background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,215,0,0.05))}
.info-region {font-size: 3em;margin-bottom: 14px;display: block}
.col-band-banner img {border-radius: 12px;max-width: 220px;width: 100%;box-shadow: 0 8px 20px rgba(0,0,0,0.3);margin: 0 auto 14px}
.zone-left {font-size: 1.25em;display: block;color: var(--meta-tier);margin-bottom: 10px;font-weight: 800}
.inner-title {margin-bottom: 10px;color: rgba(255,215,0,1);font-size: 2em;display: block;font-weight: 800}
.desc-main p { margin-bottom: 16px; }

/* Tournament box */
.bar-block {border: 2px solid var(--unit-banner);padding: 40px;background: linear-gradient(135deg, rgba(255,0,0,0.1), rgba(255,105,0,0.1));border-radius: 15px;text-align: center}
.bar-block h2 {margin-bottom: 16px;font-size: 2.2em;color: var(--unit-banner)}
.segment-wide img {box-shadow: 0 10px 25px rgba(255,68,68,0.3);border-radius: 15px;margin: 20px auto;width: 360px;max-width: 100%}
.grid-img {display: grid;gap: 20px;grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));margin: 24px 0}

/* Casino hero */
.hero-head {border-radius: 20px;background: linear-gradient(135deg, rgba(240,193,89,0.1), rgba(255,0,0,0.05));text-align: center;margin: 40px 0;padding: 60px 40px}
.hero-head h1 {color: var(--meta-tier);font-size: 2.4rem;margin-bottom: 16px}
.zone-text-text {justify-content: center;display: flex;align-items: center;gap: 10px;margin: 20px 0}
.entry-sec {animation: q9-pulse 1.5s infinite;height: 12px;border-radius: 50%;width: 12px;background: rgb(255,0,0)}
.slot-side {color: #ff0000;font-weight: 800}
@keyframes q9-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.zone-right {background: #ffd700;color: #000}

/* Casino game cards (with their own image + feature list) */
.sub-wrap {gap: 24px;display: grid;margin-top: 24px;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))}
.col__container {border-radius: 15px;padding: 28px;background: var(--unit-wrap);text-align: center;border: 1px solid var(--col__area)}
.col__container.foot-inner {border-color: var(--meta-tier);border-width: 2px}
.panel-unit-holder img {margin: 0 auto 16px;border-radius: 12px;box-shadow: 0 8px 20px rgba(0,0,0,0.3);max-width: 320px;width: 100%}
.area-layout {margin-bottom: 8px;display: block;font-size: 2.2em}
.outer__view {color: var(--meta-tier);font-size: 1.2em;margin-bottom: 10px}
.band__badge { margin-bottom: 16px; }
/* casino.html's game-features bullet is a target emoji, not crash.html's rocket */
.col__container .wrap-sub-container li::before { content: '🎯'; }

/* Live table cards */
.site-lead {margin-top: 24px;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));display: grid;gap: 20px}
.group-foot {text-align: center;border: 1px solid var(--col__area);border-radius: var(--page__title);padding: 20px;background: var(--unit-wrap)}
.group-foot.main-nav { border-color: #ffd700; }
.dark-widget {font-size: 2.4em;margin-bottom: 10px}
.tier-item-entry {color: var(--meta-tier);font-weight: 700;margin-bottom: 6px}
.layout-feature {font-size: 0.85em;margin-bottom: 14px;color: rgba(34,197,94,1)}

/* Dealer profile cards */
.page-center-group {margin-top: 24px;gap: 24px;display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))}
.zone-meta {text-align: center;background: var(--unit-wrap);border: 1px solid var(--col__area);border-radius: var(--page__title);padding: 24px}
.banner-sec {margin-bottom: 10px;font-size: 2.6em}
.content__container {margin-bottom: 6px;font-weight: 700;color: var(--meta-tier)}
.entry-tier {color: #ffd700;margin-bottom: 12px}

/* VIP casino benefits */
.inner-wide {grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));margin: 24px 0;display: grid;gap: 24px}
.wrap__badge { text-align: center; }
.secondary-img {font-size: 2.2em;margin-bottom: 8px}
.wrap__badge h4 {color: var(--meta-tier);margin-bottom: 6px}

/* Promotions banner strip */
.region-unit-group {text-align: center;padding: 40px 0;border-bottom: 2px solid var(--unit-banner);background: rgba(255,68,68,0.08);margin: 40px 0;border-top: 2px solid var(--unit-banner)}
.region-unit-group h3 {margin-bottom: 12px;font-size: 1.8em;color: var(--unit-banner)}
.unit-wrap {margin-bottom: 6px;font-size: 2em}
.panel-foot-feature {border: 2px solid;text-align: center;padding: 28px;border-radius: 15px}
.zone-wide-cell {margin-bottom: 12px;font-size: 2.6rem}
.panel-foot-feature h3 {font-size: 1.3rem;margin-bottom: 8px}
.region-top-inner {color: var(--full-icon);margin-bottom: 16px}
.panel-foot-feature ul { text-align: left; }
.panel-foot-feature li {margin-bottom: 8px;font-size: 0.9rem;color: var(--full-icon)}
.segment-band {border-color: rgba(255,215,0,1);background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05))}
.segment-band h3 { color: rgb(255,215,0); }
.block__cell {border-color: #E5E4E2;background: linear-gradient(135deg, rgba(229, 228, 226, 0.1), rgba(229, 228, 226, 0.05))}
.block__cell h3 { color: #E5E4E2; }
.header__feature {border-color: rgba(185,242,255,1);background: linear-gradient(135deg, rgba(185, 242, 255, 0.1), rgba(185, 242, 255, 0.05))}
.header__feature h3 { color: #B9F2FF; }

/* Testimonials embedded in the closing CTA */
.section-group { margin: 30px 0; }
.section-group h3 {color: var(--meta-tier);text-align: center;margin-bottom: 20px}
.body-title {grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));gap: 16px;display: grid}
.light-view {padding: 18px;background: rgba(255, 255, 255, 0.05);text-align: left;border-radius: 8px}
.light-view p {margin-bottom: 8px;font-style: italic;color: var(--full-icon)}
.light-view cite {font-size: 0.85rem;color: var(--meta-tier);font-style: normal}

/* Roadmap timeline */
.tier-meta {flex-direction: column;display: flex;gap: 20px;border-left: 2px solid var(--meta-tier);max-width: 720px;padding-left: 20px;margin: 32px auto 0}
.center-cell {padding-left: 20px;position: relative}
.center-cell::before {height: 12px;background: var(--meta-tier);top: 6px;content: '';border-radius: 50%;position: absolute;width: 12px;left: -27px}
.area-title {text-transform: uppercase;margin-bottom: 4px;font-weight: 800;font-size: 0.85rem;color: var(--meta-tier);letter-spacing: 0.05em}
.site-title-badge h3 {color: var(--flex__area);font-size: 1.05rem;margin-bottom: 6px}
.site-title-badge p { margin: 0; }

/* Stats */
.wrap-inner {grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));margin: 56px 0;display: grid;gap: 24px}
.side-inner {transition: all 0.2s ease;border: 1px solid var(--col__area);background: var(--unit-wrap);border-radius: var(--page__title);text-align: center;padding: 28px}
.side-inner:hover {transform: translateY(-4px);border-color: var(--meta-tier)}
.foot-icon {font-size: 2.2rem;color: var(--meta-tier);margin-bottom: 8px;display: block;font-weight: 800}
.zone-feature {font-size: 0.85rem;color: var(--full-icon);text-transform: uppercase}

/* Generic section */
.header__link { margin: 64px 0; }
.page-zone-box {font-weight: 800;font-size: 2.2rem;margin-bottom: 12px;color: var(--meta-tier);text-align: center}
.tier-unit-group {color: var(--full-icon);text-align: center;font-size: 1.05rem;margin-bottom: 36px}

/* Feature/card grid — reused for features, categories, badges, providers, tables, steps */
.section__banner {gap: 24px;display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))}
.col-title {padding: 28px;border-radius: var(--page__title);transition: all 0.2s ease;background: var(--unit-wrap);text-align: center;border: 1px solid var(--col__area)}
.col-title:hover {border-color: var(--meta-tier);transform: translateY(-4px)}
.page-box {margin-bottom: 16px;font-size: 2.6rem}
.col-title h3 {margin-bottom: 10px;color: var(--meta-tier)}
.col-title p {margin: 0;color: var(--full-icon)}
.col-title .band__block { margin-top: 16px; }

/* Popular games showcase — small highlight grid inside the home games section
   (named q9-hits-* rather than q9-popular-* to avoid colliding with the
   unrelated .site-text grid class already used by jogos.njk) */
.sec-unit { margin-top: 56px; }
.card-foot {font-weight: 800;text-align: center;font-size: 1.7rem;color: var(--meta-tier);margin-bottom: 24px}
.frame-tier {grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));display: grid;gap: 20px}
.section__container {border-radius: var(--page__title);padding: 20px;text-align: center;border: 1px solid var(--col__area);background: var(--unit-wrap)}
.info-hero {font-size: 1.8rem;margin-bottom: 8px}
.section__container h4 {margin-bottom: 4px;font-size: 1rem;color: var(--meta-tier)}
.section__container p {font-size: 0.85rem;color: var(--full-icon);margin: 0}

/* App-vs-site style comparison table */
.body__img {margin: 60px 0;background: var(--unit-wrap);padding: 40px 0;border-radius: var(--page__title)}
.body__img h3 {font-size: 2em;text-align: center;color: var(--meta-tier);margin-bottom: 30px}
.content-widget {display: grid;overflow: hidden;border: 1px solid var(--col__area);border-radius: var(--page__title);grid-template-columns: 1.4fr 1fr 1fr;gap: 1px;background: var(--col__area)}
.page-inner {padding: 14px;font-weight: 800;text-align: center;background: var(--meta-tier);color: #fff}
.tier-info {padding: 14px;text-align: center;background: var(--unit-wrap)}
.content-widget .tier-info:nth-child(3n+1) {text-align: left;font-weight: 700}
.segment-primary { color: #22c55e; }
.row-alt { color: #ef4444; }

/* App hero */
.main-banner {padding: 60px 40px;border-radius: 20px;margin: 40px 0;background: linear-gradient(135deg, rgba(240,193,89,0.1), rgba(255,105,0,0.1));text-align: center}
.main-banner h1 {font-weight: 800;color: var(--meta-tier);margin-bottom: 20px;font-size: 2.6rem}
.entry-content {margin: 0 auto 20px;max-width: 800px;font-size: 1.15rem;color: var(--full-icon)}
.module-data-note { margin: 30px 0; }
.module-data-note img {max-width: 100%;max-height: 420px;box-shadow: 0 20px 40px rgba(0,0,0,0.3);border-radius: 20px}
.banner-foot {gap: 20px;margin: 32px 0;flex-wrap: wrap;display: flex;justify-content: center}
.row-group {min-width: 200px;font-weight: 800;gap: 10px;background: linear-gradient(135deg, var(--meta-tier), var(--module-grid));align-items: center;justify-content: center;border-radius: 15px;color: #fff;display: flex;padding: 15px 30px;transition: transform 0.2s ease}
.row-group:hover { transform: translateY(-3px); }
.row-group.menu-img { background: linear-gradient(135deg, #000, #333); }
.panel-container { font-size: 1.5em; }
.region__area { font-size: 1.1em; }
.header-dark-area {padding: 18px;background: rgba(255,68,68,0.1);border: 2px solid var(--unit-banner);border-radius: 12px;margin-top: 24px}
.header-dark-area p {margin: 0;color: var(--unit-banner);font-weight: 700}

/* App stats grid */
.cell-card {margin-top: 24px;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));padding: 32px;display: grid;border-radius: var(--page__title);background: rgba(240,193,89,0.05);gap: 24px}
.area-img { text-align: center; }
.banner-site {color: var(--meta-tier);margin-bottom: 6px;font-weight: 800;display: block;font-size: 2.2rem}
.box-text-wrap {color: var(--full-icon);text-transform: uppercase;font-size: 0.85rem}

/* App screenshot gallery */
.hero-data-badge {display: grid;margin: 24px 0 40px;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));gap: 24px}
.header-narrow { text-align: center; }
.header-narrow img {margin: 0 auto;max-width: 260px;border-radius: 15px;box-shadow: 0 10px 25px rgba(0,0,0,0.3);width: 100%}
.header-narrow h4 {color: var(--meta-tier);margin: 12px 0 6px}
.header-narrow p {margin: 0;color: var(--full-icon)}

/* Android/iOS download instruction boxes */
.grid-wrap {display: grid;gap: 32px;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));margin-top: 24px}
.box__lead {border-radius: 15px;padding: 28px}
.box__lead ol {margin-bottom: 20px;line-height: 2;padding-left: 20px;color: var(--full-icon)}
.box__lead h3 {font-size: 1.3em;text-align: center;margin-bottom: 16px}
.box__lead .band__block {margin: 0 auto;width: fit-content;display: block}
.site-top {background: rgba(76,175,80,0.1);border: 2px solid #4CAF50}
.site-top h3 { color: rgba(76,175,80,1); }
.module-zone {background: rgba(33,150,243,0.1);border: 2px solid #2196F3}
.module-zone h3 { color: #2196F3; }

/* Urgency banner + app store badges (used in app CTA and elsewhere) */
.page__lead {border-radius: 12px;background: rgba(255,68,68,0.1);max-width: 560px;padding: 18px;border: 2px solid var(--unit-banner);margin: 24px auto}
.page__lead p {font-weight: 700;margin: 0;color: var(--unit-banner);text-align: center}
.badge-nav {justify-content: center;gap: 30px;display: flex;flex-wrap: wrap;margin-top: 32px}
.badge-nav > div { text-align: center; }
.wrap-strip {font-size: 2em;margin-bottom: 4px}
.badge-nav p {color: var(--full-icon);margin: 0;font-size: 0.9em}

/* Numbered steps (how-to-play / how-to-download) */
.box-banner {grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));display: grid;gap: 24px}
.media-flex {position: relative;padding: 24px;border: 1px solid var(--col__area);border-radius: var(--page__title);background: var(--unit-wrap)}
.info-lead {width: 32px;font-weight: 800;height: 32px;border-radius: 50%;justify-content: center;background: var(--nav-alt-widget);align-items: center;color: rgb(255,255,255);display: inline-flex;margin-bottom: 12px}
.media-flex h3 {margin-bottom: 8px;font-size: 1rem;color: var(--meta-tier)}

/* Chips (payment methods / providers) */
.primary-wrap {justify-content: center;gap: 10px;display: flex;flex-wrap: wrap}
.outer__cell {border: 1px solid var(--col__area);border-radius: 999px;padding: 8px 16px;background: var(--unit-wrap);font-size: 0.85rem;color: var(--full-icon)}

/* CTA */
.holder-col {border: 2px solid var(--meta-tier);background: rgba(240, 193, 89, 0.1);padding: 56px 32px;border-radius: var(--page__title);margin: 72px 0 24px;text-align: center}
.holder-col h2 {color: var(--meta-tier);margin-bottom: 16px;font-size: 2.2rem}
.holder-col p {font-size: 1.1rem;color: var(--full-icon);margin-bottom: 24px}
.full-desc {display: flex;gap: 16px;flex-wrap: wrap;justify-content: center}

.page__lead {background: rgba(255, 0, 0, 0.1);padding: 20px;border: 2px solid var(--unit-banner);border-radius: var(--page__title);margin: 30px 0}
.page__lead p {color: var(--unit-banner);font-weight: 700;margin: 0;text-align: center}

.side-lead {font-size: 0.8rem;text-align: center;color: var(--full-icon)}

/* Footer */
.main-bar-container {padding: 40px 0;border-top: 1px solid rgba(240, 193, 89, 0.2);background: rgba(0, 0, 0, 0.3);text-align: center}
.note-band {display: flex;justify-content: center;gap: 16px;flex-wrap: wrap;margin-bottom: 20px}
.note-band a {font-size: 0.9rem;color: var(--full-icon)}
.note-band a:hover { color: var(--meta-tier); }
.body__slot {color: var(--full-icon);justify-content: center;display: flex;gap: 16px;flex-wrap: wrap}
.main-bar-container p {color: var(--full-icon);margin-bottom: 8px}

/* Generic page (privacy/terms) */
.segment-list-icon {text-align: center;padding: 48px 0 16px}
.nav-bottom { padding: 16px 0 56px; }
.outer-block { color: var(--full-icon); }
.outer-block h2, .outer-block h3 { color: var(--meta-tier); }
.alt-main { margin-top: 32px; }
.foot-note {text-align: left;margin-bottom: 12px}
.site-holder {display: block;color: var(--meta-tier);padding: 6px 0}

/* Responsive */
@media (max-width: 900px) {
  .band-top-inner {left: 0;gap: 0;display: none;box-shadow: 0 10px 30px rgba(0,0,0,0.35);flex-direction: column;right: 0;top: 100%;padding: 8px;background: rgba(20, 20, 22, 0.97);border-radius: 0 0 12px 12px;position: absolute}
  .band-top-inner.badge-sec { display: flex; }
  .band-top-inner a {text-align: center;border-bottom: 1px solid rgba(255,255,255,0.08);padding: 12px 16px}
  .band-top-inner a:last-child { border-bottom: none; }
  .page-center-main { display: block; }
  .light-box .band__block {font-size: 0.85rem;padding: 10px 16px}
}
@media (max-width: 640px) {
  .nav__title h1 { font-size: 2rem; }
  .wrap-inner { grid-template-columns: repeat(2, 1fr); }
  .section__banner { grid-template-columns: 1fr; }
}

/* Login page — ported from login.html's own inline <style> (source-specific, not
   part of shared main.css) */
.site__frame {grid-template-columns: 1fr 1fr;align-items: start;gap: 60px;display: grid;margin: 60px 0}
.info-page {padding: 40px;background: var(--unit-wrap);border: 2px solid var(--col__area);border-radius: 20px}
.info-page h2 {font-size: 2em;margin-bottom: 30px;text-align: center;color: var(--meta-tier)}
.group-inner { margin-bottom: 25px; }
.group-inner label {color: var(--meta-tier);font-weight: bold;margin-bottom: 8px;display: block}
.group-inner input {width: 100%;color: #fff;padding: 15px;border: 2px solid var(--col__area);background: rgba(255,255,255,0.1);font-size: 1em;border-radius: 10px;transition: all 0.3s}
.group-inner input:focus {outline: none;background: rgba(255,255,255,0.15);border-color: var(--meta-tier)}
.widget-module {margin: 20px 0;border-radius: 15px;background: var(--nav-alt-widget);text-transform: uppercase;font-size: 1.2em;width: 100%;color: rgb(255,255,255);font-weight: bold;border: none;padding: 18px;cursor: pointer}
.widget-module:hover {box-shadow: 0 8px 25px rgba(240,193,89,0.4);transform: translateY(-2px)}
.nav-top {display: grid;grid-template-columns: 1fr 1fr;margin: 30px 0;gap: 15px}
.wrap-secondary-widget {align-items: center;display: flex;gap: 10px;border-radius: 10px;justify-content: center;text-align: center;padding: 12px;border: 2px solid rgba(255,255,255,0.2);background: rgba(255,255,255,0.05);color: rgba(255,255,255,1)}
.wrap-secondary-widget:hover {border-color: var(--meta-tier);background: rgba(240,193,89,0.1)}
.box-text {padding: 40px;border-radius: 20px;background: linear-gradient(135deg, rgba(240,193,89,0.1), rgba(255,105,0,0.05))}
.box-text h2 {font-size: 2em;color: var(--meta-tier);margin-bottom: 30px;text-align: center}
.module-foot {margin-bottom: 20px;background: rgba(255,255,255,0.05);border-radius: 10px;display: flex;gap: 15px;align-items: center;padding: 15px}
.container-row {min-width: 50px;font-size: 2em}
.zone-info-note h3 {margin-bottom: 5px;color: var(--meta-tier)}
.zone-info-note p {margin: 0;color: var(--full-icon)}
.nav-dark {display: grid;gap: 20px;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));margin: 40px 0}
.panel-box {text-align: center;border: 1px solid var(--col__area);background: rgba(255,255,255,0.05);padding: 25px;border-radius: 15px}
.panel-box .icon {font-size: 2.5em;margin-bottom: 15px}
.panel-box h3 {color: var(--meta-tier);margin-bottom: 10px}
.panel-box p {color: var(--full-icon);font-size: 0.9em}
.icon-main {text-align: center;margin: 20px 0}
.icon-main a { color: var(--meta-tier); }
.icon-main a:hover { text-decoration: underline; }
.module__box {text-align: center;padding: 20px;margin-top: 30px;border: 2px solid var(--right-box);border-radius: 15px;background: rgba(0,208,132,0.1)}
.module__box p {color: var(--full-icon);margin-bottom: 15px}
.module__box a {padding: 12px 30px;display: inline-block;color: #fff;border-radius: 25px;font-weight: bold;background: var(--right-box)}
.module__box a:hover {background: rgb(0,181,114);transform: translateY(-2px)}
.page__lead {border-radius: 12px;background: rgba(255,0,0,0.1);border: 2px solid var(--unit-banner);padding: 20px;margin: 30px 0}
.page__lead p {color: var(--unit-banner);font-weight: bold;margin: 0}
@media (max-width: 768px) {
  .site__frame {gap: 40px;grid-template-columns: 1fr}
  .nav-top { grid-template-columns: 1fr; }
}

/* crash.njk — ported from crash.html's inline <style> (real colors/layout, not invented) */
.band__info {border-radius: 20px;padding: 60px 40px;margin: 40px 0;text-align: center;background: linear-gradient(135deg, rgba(0,191,255,0.15), rgba(240,193,89,0.1));border: 2px solid #00bfff}
.foot-full {display: inline-flex;margin: 20px 0;background: rgba(0,191,255,0.2);border: 2px solid #00bfff;align-items: center;border-radius: 25px;gap: 15px;padding: 15px 30px}
.item-feature {gap: 30px;display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));margin: 40px 0}
.lead-flex {border: 2px solid rgba(240,193,89,0.3);border-radius: 20px;position: relative;text-align: center;transition: all 0.3s;background: rgba(255,255,255,0.05);padding: 40px}
.lead-flex:hover {transform: translateY(-10px);box-shadow: 0 15px 35px rgba(240,193,89,0.3);border-color: var(--meta-tier)}
.lead-flex.foot-inner {border-color: #00bfff;background: linear-gradient(135deg, rgba(0,191,255,0.15), rgba(0,191,255,0.05))}
.lead-flex h3 {margin-bottom: 12px;color: var(--meta-tier);font-size: 1.5rem}
.text-side {font-size: 3em;height: 160px;margin-bottom: 20px;border-radius: 15px;display: flex;width: 100%;background: linear-gradient(135deg, #87CEEB, #4169E1, #0000CD);justify-content: center;align-items: center}
.wrap-sub-container {margin: 16px 0;text-align: left;padding: 0;list-style: none}
.wrap-sub-container li {color: var(--full-icon);margin-bottom: 8px}
.wrap-sub-container li::before {margin-right: 8px;content: '🚀'}
.block-segment {margin: 24px 0;display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: 24px}
.media-flex {background: rgba(255,255,255,0.1);padding: 28px;text-align: center;border-radius: 15px}
.info-lead {justify-content: center;width: 56px;height: 56px;font-weight: 800;align-items: center;color: #fff;display: flex;background: var(--nav-alt-widget);border-radius: 50%;font-size: 1.4em;margin: 0 auto 16px}
.view-flex {color: var(--meta-tier);text-align: center;margin: 32px 0 16px}
.inner-list {display: flex;gap: 14px;margin: 20px 0;flex-wrap: wrap;justify-content: center}
.nav-band {border-radius: 25px;padding: 10px 20px;background: linear-gradient(135deg, #00bfff, #0080ff);color: #fff;font-weight: 800}
.col__frame {border-radius: 20px;background: linear-gradient(135deg, rgba(240,193,89,0.1), rgba(255,105,0,0.05));padding: 40px}

/* jogos.njk — literal port of jogos.html */
.block-area {border-radius: 20px;background: linear-gradient(135deg, rgba(240,193,89,0.1), rgba(255,105,0,0.05));margin: 40px 0;padding: 60px 40px;text-align: center}
.block-area h1 {margin-bottom: 16px;color: var(--meta-tier);font-size: 2.4rem}
.menu-icon {font-size: 1.2rem;margin-bottom: 20px;color: var(--full-icon)}
.desc-tier {margin: 40px auto;position: relative;max-width: 600px}
.desc-tier input {padding: 20px 60px 20px 20px;border: 2px solid var(--col__area);font-size: 1.05rem;background: rgba(255,255,255,0.1);color: var(--flex__area);width: 100%;border-radius: 25px}
.desc-tier button {width: 40px;top: 50%;cursor: pointer;border: none;height: 40px;position: absolute;background: var(--meta-tier);transform: translateY(-50%);right: 10px;border-radius: 50%}
.box-menu {max-width: 900px;display: flex;justify-content: center;flex-wrap: wrap;gap: 12px;margin: 30px auto}
.region-menu-wrap {font-weight: 700;padding: 10px 20px;color: var(--flex__area);cursor: pointer;border: 2px solid var(--col__area);border-radius: 25px;background: rgba(255,255,255,0.1)}
.region-menu-wrap.badge-sec, .region-menu-wrap:hover {color: var(--body-info);border-color: var(--meta-tier);background: var(--meta-tier)}
.section-alt {margin-top: 24px;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 24px;display: grid}
.header__btn {border-radius: 20px;background: var(--unit-wrap);border: 2px solid var(--col__area);text-align: center;padding: 32px}
.region-bottom {font-size: 3rem;margin-bottom: 16px;display: block}
.segment-box {font-size: 1.5rem;color: var(--meta-tier);margin-bottom: 8px}
.area-data {color: #ffd700;margin-bottom: 12px;font-weight: 700}
.site-text {margin-top: 24px;display: grid;gap: 20px;grid-template-columns: repeat(auto-fill, minmax(220px, 1fr))}
.card-bottom-link {text-align: center;border-radius: 15px;background: var(--unit-wrap);border: 1px solid var(--col__area);padding: 22px}
.text-info {justify-content: center;font-size: 2.6rem;align-items: center;background: var(--nav-alt-widget);border-radius: 10px;margin-bottom: 12px;display: flex;width: 100%;height: 120px}
.outer__view {font-weight: 700;margin-bottom: 6px;color: var(--meta-tier)}
.zone-item {font-size: 0.85rem;margin-bottom: 8px;color: var(--full-icon)}
.dark-feature {padding: 4px 12px;margin-bottom: 12px;font-size: 0.85rem;display: inline-block;border-radius: 15px;font-weight: 700;color: var(--right-box);background: rgba(0,208,132,0.2)}
.module-alt-view {color: rgb(255,215,0);font-weight: 700;margin-bottom: 12px;font-size: 0.85rem}
.data-inner {margin: 60px 0;background: var(--unit-wrap);text-align: center;border-radius: 20px;padding: 40px}
.slot-panel {margin-top: 30px;gap: 24px;display: grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))}
.wrap-bar-badge {border: 1px solid var(--col__area);padding: 24px;text-align: center;border-radius: 15px;background: rgba(255,255,255,0.08)}
.meta-hero {border-radius: 50%;width: 70px;color: #fff;background: var(--nav-alt-widget);display: flex;height: 70px;align-items: center;justify-content: center;margin: 0 auto 12px;font-weight: 800}

/* esporte.njk — ported from esporte.html's inline <style> */
.item-cell {padding: 60px 40px;text-align: center;border: 2px solid #228B22;margin: 40px 0;background: linear-gradient(135deg, rgba(34,139,34,0.15), rgba(240,193,89,0.1));border-radius: 20px}
.top-area {border-radius: 12px;padding: 20px;margin: 30px 0;background: rgba(34,139,34,0.1);border: 2px solid #228B22}
.top-area p {font-weight: 700;color: #228B22;margin: 0}
.zone-text-text {padding: 8px 18px;font-weight: 700;align-items: center;display: inline-flex;color: #fff;margin: 16px 0;border-radius: 999px;background: rgba(255,0,0,0.15);gap: 10px}
.entry-sec {height: 10px;border-radius: 50%;width: 10px;background: rgb(255,0,0);animation: q9-pulse 2s infinite}
@keyframes q9-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.badge-outer {gap: 30px;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));margin: 40px 0;display: grid}
.segment-slot {border: 2px solid rgba(240,193,89,0.3);background: rgba(255,255,255,0.05);transition: all 0.3s;border-radius: 20px;padding: 40px;text-align: center}
.segment-slot:hover {transform: translateY(-8px);border-color: var(--meta-tier)}
.segment-slot.foot-inner {position: relative;border-color: var(--meta-tier);overflow: hidden;background: linear-gradient(135deg, rgba(240,193,89,0.15), rgba(240,193,89,0.05))}
.segment-slot.foot-inner::after {font-weight: 800;transform: rotate(45deg);padding: 5px 45px;color: #141416;position: absolute;background: var(--meta-tier);font-size: 0.8em;content: 'MAIS APOSTADO';top: 20px;right: -35px}
.segment-slot h3 {font-size: 1.5rem;margin-bottom: 12px;color: var(--meta-tier)}
.foot-head {justify-content: center;display: flex;margin: 16px 0;gap: 20px}
.area-primary-note {display: block;font-weight: 800;color: var(--meta-tier);font-size: 1.3rem}
.note-body {color: var(--full-icon);font-size: 0.8rem}
.strip-inner {background: rgba(255,255,255,0.05);padding: 40px;border-radius: 20px}
.band-meta {align-items: center;flex-wrap: wrap;margin: 16px 0;justify-content: space-between;background: rgba(255,255,255,0.08);padding: 20px 24px;border-radius: 15px;gap: 20px;display: flex}
.desc-card {display: flex;flex: 1;color: #fff;min-width: 220px;gap: 6px;font-weight: 600;flex-direction: column}
.block__meta {color: #ff0000;font-weight: 800;font-size: 0.9rem}
.card__cell {display: flex;gap: 12px}
.item-container {background: linear-gradient(135deg, var(--meta-tier), var(--module-grid));border-radius: 10px;color: rgb(20,20,22);font-weight: 800;padding: 10px 18px}
.layout-head-btn {display: grid;margin: 24px 0;gap: 24px;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))}
.box-title-frame {border-radius: var(--page__title);text-align: center;border: 1px solid var(--col__area);background: var(--unit-wrap);padding: 28px}
.lead-col {margin-bottom: 16px;font-size: 2.4rem}
.box-title-frame h3 {margin-bottom: 10px;color: var(--meta-tier)}

/* jogo.njk — ported from jogo.html's inline <style> */
.layout-title {margin: 20px 0;color: var(--full-icon)}
.layout-title a { color: var(--meta-tier); }
.layout-title a:hover { text-decoration: underline; }

.lead-side { margin: 40px 0; }
.light-frame {align-items: start;display: grid;grid-template-columns: 1fr 1fr;gap: 60px}
.sm-holder {text-align: center;padding: 40px;border: 2px solid var(--col__area);border-radius: 20px;background: var(--unit-wrap)}
.panel-primary-main {flex-wrap: wrap;gap: 15px;justify-content: center;margin-top: 10px;display: flex}
.flex-wide {color: rgba(255,255,255,1);background: var(--nav-alt-widget);border: none;padding: 15px 30px;font-size: 1.1rem;transition: transform 0.2s ease, box-shadow 0.2s ease;border-radius: 15px;font-weight: 700}
.flex-wide:hover {transform: translateY(-2px);box-shadow: 0 8px 20px rgba(240, 193, 89, 0.4)}
.flex-wide.flex-info {background: rgba(255, 255, 255, 0.1);border: 2px solid var(--meta-tier)}
.slot-wrap {text-align: center;font-size: 0.9rem;margin-top: 20px;color: var(--full-icon)}
.media-site {padding: 40px;border-radius: 20px;background: linear-gradient(135deg, rgba(240,193,89,0.1), rgba(255,105,0,0.05))}
.content-item-banner {font-size: 2.2rem;font-weight: 800;color: var(--meta-tier);margin-bottom: 12px}
.layout-data-lead {font-size: 1.1rem;margin-bottom: 24px;color: var(--full-icon)}
.holder-zone {border: 2px solid #ffd700;padding: 25px;border-radius: 15px;margin: 24px 0;background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,215,0,0.1));text-align: center}
.tier-container {display: block;font-weight: 800;font-size: 2.2rem;color: #ffd700;margin-bottom: 8px}
.holder-zone p {color: var(--full-icon);margin: 0}
.nav__slot {display: grid;grid-template-columns: repeat(2, 1fr);gap: 16px;margin: 24px 0}
.row-alt-area {text-align: center;background: rgba(255, 255, 255, 0.1);border-radius: 12px;padding: 18px}
.module-lead {margin-bottom: 4px;display: block;font-weight: 800;color: var(--meta-tier);font-size: 1.6rem}
.block-light {color: var(--full-icon);text-transform: uppercase;font-size: 0.85rem}
.lg-lead { margin: 24px 0 0; }
.lg-lead h3 {color: var(--meta-tier);margin-bottom: 16px}
.flex__banner {padding: 0;list-style: none}
.flex__banner li {position: relative;color: var(--full-icon);padding-left: 26px;margin-bottom: 10px}
.flex__banner li::before {content: '⚡';position: absolute;left: 0;color: var(--meta-tier)}

.band__badge {padding: 30px;max-width: 820px;margin: 40px auto;background: var(--unit-wrap);border-radius: 15px}
.band__badge h3 {color: var(--meta-tier);margin-bottom: 16px}
.lead-outer {border-radius: 15px;background: var(--unit-wrap);padding: 30px;margin: 40px auto;max-width: 900px}
.lead-outer h3 {margin-bottom: 16px;color: var(--meta-tier);text-align: center}
.block-wide-container {gap: 20px;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));display: grid}
.desc-hero {padding: 20px;border: 1px solid var(--col__area);text-align: center;border-radius: var(--page__title);background: var(--unit-wrap)}
.slot-page {display: block;font-size: 1.8rem;margin-bottom: 8px}
.wrap-slot {margin-bottom: 4px;color: var(--flex__area);font-weight: 700}
.page-light-container {color: var(--meta-tier);font-size: 0.9rem}

.view-header {margin: 40px 0;display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 25px}
.segment-left {padding: 20px;background: var(--unit-wrap);border: 1px solid var(--col__area);border-radius: 15px;transition: all 0.3s ease;text-align: center}
.segment-left:hover {transform: translateY(-5px);border-color: var(--meta-tier)}
.link-panel {display: flex;width: 100%;height: 120px;background: var(--nav-alt-widget);align-items: center;margin-bottom: 15px;justify-content: center;font-size: 2.5rem;border-radius: 10px}
.segment-left h4 {margin-bottom: 10px;color: var(--meta-tier)}
.segment-left p {color: var(--full-icon);margin-bottom: 10px;font-size: 0.9rem}
.segment-left .band__block {padding: 8px 20px;font-size: 0.9rem}

@media (max-width: 768px) {
  .light-frame {gap: 40px;grid-template-columns: 1fr}
  .nav__slot { grid-template-columns: 1fr; }
  .panel-primary-main {align-items: center;flex-direction: column}
}

/* plataforma.njk / promo.njk — literal-port section class aliases (share base .header__link spacing) */
.main-full, .area-nav, .band-btn, .region-narrow-feature,
.main-data, .left-media { margin: 64px 0; }
.main-full, .main-data {text-align: center;padding: 40px 0}

/* plataforma.njk hero tech-stats pill (ported from source's .tech-stats/.tech-stat) */
.card-top-note {display: inline-flex;gap: 24px;border-radius: 25px;justify-content: center;background: rgba(240, 193, 89, 0.12);border: 2px solid var(--meta-tier);align-items: center;margin: 20px 0;flex-wrap: wrap;padding: 14px 28px}
.hero-lead { text-align: center; }
.card__info {display: block;font-weight: 800;color: var(--meta-tier);font-size: 1.6rem}
.inner__main {text-transform: uppercase;font-size: 0.75rem;color: var(--full-icon)}

/* promo.njk hero countdown pill (ported from source's .countdown-timer/.countdown-item) */
.bottom-badge {margin: 20px 0;justify-content: center;background: rgba(255, 105, 0, 0.15);flex-wrap: wrap;gap: 18px;border: 2px solid var(--module-grid);border-radius: 25px;display: inline-flex;padding: 14px 28px;align-items: center}
.unit-info { text-align: center; }
.hero-main {color: var(--module-grid);display: block;font-size: 1.6rem;font-weight: 800}
.img-block {color: var(--full-icon);text-transform: uppercase;font-size: 0.7rem}
.flex-cell {font-weight: 800;color: var(--module-grid);font-size: 1.4rem}

/* promo.njk "Torneios Ativos" cards (ported from source's tournament progress cards) */
.side-narrow {flex-direction: column;display: flex;gap: 20px;margin-top: 24px}
.card-bottom-wrap {background: var(--unit-wrap);padding: 24px;border: 1px solid var(--col__area);border-radius: var(--page__title)}
.sec__btn {margin-bottom: 14px;justify-content: space-between;font-weight: 800;flex-wrap: wrap;display: flex;align-items: center;gap: 16px;color: var(--meta-tier)}
.card-media {border-radius: 20px;font-weight: 800;background: linear-gradient(135deg, var(--module-grid), var(--meta-tier));padding: 8px 16px;color: #fff}
.secondary-media {margin: 12px 0;height: 8px;border-radius: 4px;width: 100%;background: rgba(255, 255, 255, 0.1);overflow: hidden}
.side-sm {border-radius: 4px;background: linear-gradient(135deg, var(--meta-tier), var(--module-grid));height: 100%}
.module__entry {flex-wrap: wrap;gap: 12px;display: flex;font-size: 0.85rem;color: var(--full-icon);justify-content: space-between}

/* promo.njk "Ofertas Por Tempo Limitado" cards (ported from source's flash offer boxes) */
.tier__img {display: grid;margin-top: 24px;gap: 20px;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))}
.meta-card {text-align: center;border-radius: 15px;background: linear-gradient(135deg, rgba(255, 68, 68, 0.18), rgba(255, 68, 68, 0.08));border: 2px solid var(--unit-banner);padding: 28px}
.meta-card h3 {margin-bottom: 12px;color: var(--unit-banner);font-size: 1.2em}
.box__holder {border-radius: 20px;background: var(--unit-banner);display: inline-block;padding: 8px 16px;color: #fff;font-weight: 800}


.sf-related-articles{border:1px solid rgba(148,163,184,.24);max-width:1120px;box-shadow:0 16px 45px rgba(15,23,42,.08);border-radius:24px;background:rgba(255,255,255,.06);margin:clamp(28px,5vw,56px) auto;padding:clamp(18px,3vw,28px)}
.sf-related-articles h2{margin:0 0 8px;font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.2}
.sf-related-articles>p{opacity:.78;line-height:1.65;margin:0 0 18px}
.sf-related-articles__list{gap:14px;list-style:none;display:grid;padding:0;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0}
.sf-related-articles__item{margin:0;list-style:none;padding:0}
.sf-related-articles__link{background:rgba(255,255,255,.08);border-radius:18px;color:inherit;padding:16px;text-decoration:none;display:flex;transition:transform .18s ease,border-color .18s ease,background .18s ease;gap:7px;min-height:100%;border:1px solid rgba(148,163,184,.18);flex-direction:column}
.sf-related-articles__link:hover{background:rgba(255,255,255,.13);border-color:rgba(59,130,246,.45);transform:translateY(-2px)}
.sf-related-articles__type{text-transform:uppercase;color:inherit;font-size:.72rem;border-radius:999px;width:max-content;opacity:.88;letter-spacing:.04em;font-weight:700;background:rgba(59,130,246,.14);padding:3px 9px}
.sf-related-articles strong{font-size:1rem;line-height:1.35}
.sf-related-articles small{opacity:.72;line-height:1.45;font-size:.88rem}
@media(max-width:640px){.sf-related-articles{padding:16px;border-radius:18px;margin:28px 12px}.sf-related-articles__list{grid-template-columns:1fr}.sf-related-articles__link{padding:14px}}