/* Assigned CSS Theme Variables */
:root {
  --bg: #1e3a8a;
  --text: #ffffff;
  --accent: #38bdf8;
  --btn-text: #000000;
  --font: 'Roboto Mono', monospace;
  --radius: 8px;
  --card-bg: rgba(255,255,255,0.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background-color: var(--bg); color: var(--text); font-family: var(--font); min-height: 100vh; overflow-x: hidden; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }

.skip-link { position: absolute; top: -100px; left: 10px; background: #2563eb; color: #fff; padding: 8px 16px; z-index: 999999; font-weight: 800; border-radius: 4px; }
.skip-link:focus { top: 10px; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.jp168-offcanvas-menu {
  position: fixed; top: 0; right: -340px; width: 300px; max-width: 88vw; height: 100%;
  z-index: 100000; background: #0f172a; color: #fff;
  border-left: 2px solid var(--accent); transition: right 0.3s ease;
  display: flex; flex-direction: column; padding: 0; overflow-y: auto;
  visibility: visible !important; display: flex !important;
}
.jp168-offcanvas-menu.is-open { right: 0 !important; }
.jp168-offcanvas-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.12); }
.jp168-offcanvas-brand { font-weight: 900; font-size: 1.15rem; color: var(--accent); }
.jp168-offcanvas-close { background: none; border: none; color: #fff; font-size: 1.8rem; cursor: pointer; line-height: 1; padding: 0; }
.jp168-offcanvas-nav { list-style: none; margin: 0; padding: 1rem 0; }
.jp168-offcanvas-nav li { border-bottom: 1px solid rgba(255,255,255,0.06); }
.jp168-offcanvas-link { display: block; padding: 0.85rem 1.5rem; color: #fff; text-decoration: none; font-weight: 600; }
.jp168-offcanvas-cta { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; margin-top: auto; }
.jp168-offcanvas-btn-login, .jp168-offcanvas-btn-reg { text-align: center; padding: 0.65rem; border-radius: 8px; font-weight: 800; text-decoration: none; font-size: 0.95rem; }
.jp168-offcanvas-btn-login { border: 1.5px solid var(--accent); color: var(--accent); background: transparent; }
.jp168-offcanvas-btn-reg { background: var(--accent); color: var(--btn-text); }

.jp168-shell { width: 100%; min-height: 100vh; display: flex; flex-direction: column; }
.jp168-header { background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.08); padding: 1rem 2rem; width: 100%; }
.jp168-header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.jp168-brand { display: flex; align-items: center; gap: 0.75rem; font-weight: 900; font-size: 1.25rem; color: var(--text); }
.jp168-menu { display: flex; align-items: center; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.jp168-nav-item { color: var(--text); opacity: 0.85; font-weight: 600; font-size: 0.95rem; transition: all 0.2s ease; }
.jp168-nav-item:hover, .jp168-nav-item.active { color: var(--accent); opacity: 1; }

.jp168-ctas { display: flex; align-items: center; gap: 0.75rem; }
.jp168-login-btn { padding: 0.45rem 1.1rem; border-radius: var(--radius); border: 1.5px solid var(--accent); color: var(--accent); font-weight: 700; font-size: 0.9rem; }
.jp168-reg-btn { padding: 0.45rem 1.1rem; border-radius: var(--radius); background: var(--accent); color: var(--btn-text); font-weight: 700; font-size: 0.9rem; }

.jp168-main { flex: 1; max-width: 1200px; width: 100%; margin: 0 auto; padding: 2rem 1.5rem; }
.jp168-hero { text-align: center; margin-bottom: 2.5rem; padding: 2rem 1rem; }
.jp168-heading { font-size: 2.2rem; font-weight: 900; color: var(--accent); margin-bottom: 1rem; line-height: 1.25; }
.jp168-paragraph { font-size: 1.1rem; opacity: 0.9; max-width: 800px; margin: 0 auto 1.5rem auto; line-height: 1.7; }

.btn { display: inline-block; padding: 0.6rem 1.5rem; border-radius: var(--radius); font-weight: 800; font-size: 0.95rem; cursor: pointer; border: none; text-align: center; text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--btn-text); }
.btn-secondary { background: rgba(0,0,0,0.15); color: var(--text); border: 2px solid var(--accent); }
.jp168-btn-group { display: flex; align-items: center; justify-content: center; gap: 1rem; }

.jp168-hero-visual {
  background: var(--card-bg);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  margin-top: 1.5rem;
  max-width: 600px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.jp168-visual-header { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem; margin-bottom: 1rem; }
.jp168-visual-operator { font-weight: 800; color: var(--accent); }
.jp168-visual-status { font-size: 0.8rem; background: rgba(34, 197, 94, 0.2); color: #22c55e; padding: 2px 8px; border-radius: 20px; }
.jp168-visual-numbers { display: flex; justify-content: space-around; gap: 0.5rem; margin: 1.5rem 0; }
.jp168-num-ball {
  width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: var(--btn-text);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900;
  box-shadow: inset -4px -4px 12px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.3);
}
.jp168-visual-footer { font-size: 0.8rem; opacity: 0.8; text-align: center; }

.jp168-iframe-container { width: 100%; overflow: hidden; border-radius: var(--radius); margin-top: 1rem; }
.jp168-iframe-wrapper { width: 100%; overflow: hidden; }

.faq-section { margin-top: 3rem; margin-bottom: 2rem; }
.faq-title { font-size: 1.8rem; font-weight: 900; color: var(--accent); text-align: center; margin-bottom: 1.5rem; }
.accordion-wrapper { display: flex; flex-direction: column; gap: 0.8rem; max-width: 800px; margin: 0 auto; }
.faq-item { background: var(--card-bg); border: 1.5px solid rgba(255,255,255,0.1); border-radius: var(--radius); overflow: hidden; }
.faq-header-btn {
  width: 100%; background: none; border: none; text-align: left;
  padding: 1rem 1.5rem; color: var(--accent); font-weight: 800; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
}
.faq-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 1.5rem; opacity: 0.85; line-height: 1.6; }
.faq-item.active .faq-body { padding: 0 1.5rem 1.2rem 1.5rem; }

.howto-section { margin-top: 3rem; margin-bottom: 2rem; background: var(--card-bg); border: 1.5px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 2rem; }
.howto-title { font-size: 1.6rem; font-weight: 900; color: var(--accent); text-align: center; margin-bottom: 1.5rem; }
.howto-steps { display: flex; flex-direction: column; gap: 1.2rem; max-width: 800px; margin: 0 auto; }
.howto-step-item { display: flex; gap: 1rem; align-items: flex-start; }
.howto-step-num { background: var(--accent); color: var(--btn-text); font-weight: 900; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.howto-step-content h4 { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.3rem; color: var(--accent); }
.howto-step-content p { margin: 0; opacity: 0.9; line-height: 1.6; }

.jp168-footer { background: rgba(0,0,0,0.3); border-top: 1px solid rgba(255,255,255,0.08); padding: 2rem; text-align: center; margin-top: 3rem; }
.jp168-footer-inner p { opacity: 0.7; font-size: 0.9rem; margin: 0; }

@media (max-width: 991px) {
  .jp168-nav, .jp168-ctas { display: none !important; }
  .jp168-hamburger { display: block !important; background: none; border: 1px solid var(--accent); color: var(--accent); font-size: 1.4rem; padding: 4px 10px; border-radius: 4px; cursor: pointer; }
}
*:focus-visible { outline: 3px solid var(--accent) !important; outline-offset: 2px !important; }


/* ==========================================================================
   TKS JOMPICK MASTER HIGH-CONTRAST & ZERO-SCROLLBAR CSS PATCH (WCAG AAA)
   ========================================================================== */

/* 1. 4D Dashboard Containers: Expand naturally, NO internal scrollbars */
#Html1,
.fourd-main-wrapper,
.fourd-grid-container,
.f4dk-wrapper,
.f4dk-hn-container,
.f4dk-search-card,
.f4dk-board-grid,
.f4dk-hn-grid-by-side {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* 2. Global Headings & Typography High Contrast */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--accent, #00ff00) !important;
    text-shadow: none !important;
    font-weight: 800 !important;
}

/* 3. High-Contrast Text for HOWTO & FAQ Sections */
.howto-section {
    background: var(--card-bg, rgba(255, 255, 255, 0.05)) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--radius, 12px) !important;
    padding: 2rem !important;
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
}

.howto-title, .faq-title {
    color: var(--accent, #00ff00) !important;
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
}

.howto-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.2rem !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

.howto-step-item {
    display: flex !important;
    gap: 1.2rem !important;
    align-items: flex-start !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 1rem 1.25rem !important;
    border-radius: var(--radius, 8px) !important;
}

.howto-step-num {
    background: var(--accent, #00ff00) !important;
    color: var(--btn-text, #000000) !important;
    font-weight: 900 !important;
    font-size: 1.15rem !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}

.howto-step-content h3,
.howto-step-content h4 {
    color: var(--accent, #00ff00) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin-top: 0 !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.3 !important;
}

.howto-step-content p {
    color: #e2e8f0 !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    opacity: 1 !important;
}

/* 4. High-Contrast FAQ Accordions */
.faq-section {
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
}

.accordion-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.8rem !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

.faq-item {
    background: var(--card-bg, rgba(255, 255, 255, 0.05)) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--radius, 8px) !important;
    overflow: hidden !important;
}

.faq-header-btn {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    text-align: left !important;
    padding: 1.1rem 1.5rem !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
}

.faq-header-btn:hover {
    color: var(--accent, #00ff00) !important;
}

.faq-body p {
    color: #e2e8f0 !important;
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    opacity: 1 !important;
}

/* 5. Trust Bar & General Paragraphs */
.tks-eeat-trust-bar p,
.jp01-paragraph, [class*="-paragraph"] {
    color: #cbd5e1 !important;
}

.jp01-visual-footer p, [class*="-visual-footer"] p {
    color: #cbd5e1 !important;
}



/* ==========================================================================
   SUPREME WCAG AAA ZERO-MISSING-TEXT HIGH CONTRAST MASTER CSS
   ========================================================================== */

/* 1. Global Page Background & Text Base */
html, html body, body {
    background-color: #0b0f19 !important;
    color: #f8fafc !important;
}

/* 2. FORCE ALL Headings to High Contrast */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .h1, html body .h2, html body .h3, html body .h4, html body .h5, html body .h6,
html body [class*="-heading"], html body [class*="-title"] {
    color: var(--accent, #38bdf8) !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

/* 3. FORCE ALL Paragraphs, Descriptions & Hero Text to High-Contrast (#f1f5f9) */
html body p,
html body [class*="-paragraph"],
html body .jp01-paragraph,
html body .hero-paragraph,
html body [class*="-hero-content"] p,
html body [class*="-hero"] p,
html body [class*="-visual-footer"] p,
html body [class*="-visual-footer"],
html body .howto-step-content p,
html body .faq-body p,
html body .tks-eeat-trust-bar p,
html body footer p,
html body [class*="-footer"] p {
    color: #f1f5f9 !important;
    opacity: 1 !important;
}

/* 4. Visual Card Elements */
html body [class*="-hero-visual"],
html body .jp01-hero-visual {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid var(--accent, #38bdf8) !important;
}

html body [class*="-visual-operator"] {
    color: var(--accent, #38bdf8) !important;
    font-weight: 800 !important;
}

html body [class*="-visual-footer"] strong {
    color: #ffffff !important;
}

/* 5. HOWTO & FAQ Sections */
html body .howto-section,
html body .faq-section {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
}

html body .howto-step-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html body .howto-step-content h3,
html body .howto-step-content h4 {
    color: var(--accent, #38bdf8) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.35rem !important;
}

html body .howto-step-content p {
    color: #e2e8f0 !important;
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
}

html body .howto-step-num {
    background: var(--accent, #38bdf8) !important;
    color: var(--btn-text, #000000) !important;
    font-weight: 900 !important;
}

html body .faq-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
}

html body .faq-header-btn {
    color: #ffffff !important;
    background: transparent !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
}

html body .faq-header-btn:hover {
    color: var(--accent, #38bdf8) !important;
}

html body .faq-body p {
    color: #e2e8f0 !important;
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
}

/* 6. 4D Results & Search Interface High-Contrast Rules */
html body .focus-num-banner,
html body .focus-num-banner * {
    color: #ffffff !important;
}

html body .focus-num-banner h1,
html body #lbl-focus-digits {
    color: #fac814 !important;
    font-weight: 900 !important;
}

html body .filter-group-title,
html body .checkbox-item,
html body .history-label {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
}

html body .f4dk-pipeline-slot,
html body .f4dk-pipeline-slot table,
html body .f4dk-pipeline-slot table td,
html body .f4dk-pipeline-slot table th,
html body .f4dk-pipeline-slot table p,
html body .f4dk-pipeline-slot table span {
    color: #ffffff !important;
}

html body .f4dk-empty-msg {
    color: #e2e8f0 !important;
    font-weight: bold !important;
}

html body .f4dk-hn-table th {
    color: #ffffff !important;
    background: #1e293b !important;
}

html body .f4dk-hn-table td {
    color: #ffffff !important;
}

/* 7. Zero Scrollbars on all 4D Dashboard Containers */
#Html1,
.fourd-main-wrapper,
.fourd-grid-container,
.f4dk-wrapper,
.f4dk-hn-container,
.f4dk-search-card,
.f4dk-board-grid,
.f4dk-hn-grid-by-side {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}


/* ==========================================================================
   TKS SUPREME 4D OVERFLOW, ZERO-SCROLLBAR & TEXT POSITIONING PATCH (WCAG AAA)
   ========================================================================== */

/* 1. 4D Result Containers: Auto Height, Aspect-Ratio Reset, Clear Flow */
.f4dk-widget,
.fourd-card,
.f4dk-hn-widget,
.f4dk-search-card,
.f4dk-board-grid,
.fourd-grid-container {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
}

.tks-4d-widget-section,
.tks-4d-widget-section #Html1,
#Html1,
.fourd-main-wrapper,
.f4dk-wrapper,
.f4dk-hn-container,
.f4dk-search-container {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin-bottom: 3.5rem !important;
    position: relative !important;
    overflow: visible !important;
    height: auto !important;
}

.tks-4d-widget-section::after,
#Html1::after,
.f4dk-wrapper::after,
.fourd-main-wrapper::after,
.f4dk-hn-container::after,
.f4dk-search-container::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* 2. Text Sections MUST Sit Strictly Below 4D Results */
.howto-section,
.faq-section,
.tks-eeat-trust-bar {
    clear: both !important;
    display: block !important;
    position: relative !important;
    margin-top: 3.5rem !important;
    z-index: 10 !important;
}

/* 3. Global Page Background & Text Base */
html, html body, body {
    background-color: #0b0f19 !important;
    color: #f8fafc !important;
}

/* 4. Headings High Contrast */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .h1, html body .h2, html body .h3, html body .h4, html body .h5, html body .h6,
html body [class*="-heading"], html body [class*="-title"] {
    color: var(--accent, #38bdf8) !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

/* 5. Paragraphs, Descriptions & Hero Text High Contrast (#f1f5f9) */
html body p,
html body [class*="-paragraph"],
html body .jp01-paragraph,
html body .hero-paragraph,
html body [class*="-hero-content"] p,
html body [class*="-hero"] p,
html body [class*="-visual-footer"] p,
html body [class*="-visual-footer"],
html body .howto-step-content p,
html body .faq-body p,
html body .tks-eeat-trust-bar p,
html body footer p,
html body [class*="-footer"] p {
    color: #f1f5f9 !important;
    opacity: 1 !important;
}

/* 6. HOWTO & FAQ Visuals */
html body .howto-section,
html body .faq-section {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

html body .howto-step-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 0.8rem !important;
    border-radius: 8px !important;
}

html body .howto-step-content h3,
html body .howto-step-content h4 {
    color: var(--accent, #38bdf8) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.35rem !important;
}

html body .howto-step-content p {
    color: #e2e8f0 !important;
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
}

html body .howto-step-num {
    background: var(--accent, #38bdf8) !important;
    color: var(--btn-text, #000000) !important;
    font-weight: 900 !important;
}

html body .faq-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    margin-bottom: 0.8rem !important;
    border-radius: 8px !important;
}

html body .faq-header-btn {
    color: #ffffff !important;
    background: transparent !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
}

html body .faq-header-btn:hover {
    color: var(--accent, #38bdf8) !important;
}

html body .faq-body p {
    color: #e2e8f0 !important;
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
}