/* ================================================================
   chart.css — styles for templates/chart.html
   ================================================================ */

/* ── Intro Text ── */
p.intro_text {
    position: relative;
    background: #f0faf3 !important;
    color: #1a3a24 !important;
    border: none !important;
    border-left: 5px solid #28a745 !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 16px 20px 16px 52px !important;
    font-size: clamp(0.82rem, 2.5vw, 0.97rem) !important;
    line-height: 1.75 !important;
    text-align: justify !important;
    margin: 10px 0 14px !important;
    box-shadow: 0 2px 10px rgba(40,167,69,0.12), 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
}
p.intro_text::before {
    content: '\201C';
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 72px;
    line-height: 1;
    color: #28a745;
    opacity: 0.25;
    font-family: Georgia, serif;
    pointer-events: none;
}
p.intro_text::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #28a745, #a8e6bb);
    border-radius: 0 12px 12px 0;
}
@media (max-width: 480px) {
    p.intro_text {
        padding: 14px 12px 14px 38px !important;
        border-radius: 0 8px 8px 0 !important;
    }
}

/* ── H1 ── */
.chart-h1-wrapper {
    background: linear-gradient(135deg, #0f172a, #1e3a5f, #0f172a);
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(15,23,42,0.3);
    position: relative;
    overflow: hidden;
}
.chart-h1-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f59e0b, transparent);
}
.chart-h1-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f59e0b, transparent);
}
.chart-h1-heading {
    font-family: Georgia, 'Palatino Linotype', Palatino, serif;
    font-size: clamp(1.2rem, 4vw, 1.8rem);
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: none;
    color: #fff;
    text-shadow: 0 0 12px rgba(245,158,11,0.4);
    text-shadow: none;
    margin: 0;
    padding: 4px 0;
}

/* ── Live Result Card ── */
.lrc-wrap{border-radius:16px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.15);text-align:center;background:#fff;border:1px solid #e2e8f0;}
.lrc-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:linear-gradient(135deg,#0f172a,#1e3a5f,#0f172a);position:relative;overflow:hidden;}
.lrc-head::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#f59e0b,transparent);}
.lrc-live-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(244,63,94,0.2);border:1px solid rgba(244,63,94,0.5);border-radius:20px;padding:3px 10px;font-size:10px;font-weight:800;color:#fff;letter-spacing:2px;}
.lrc-live-dot{width:7px;height:7px;border-radius:50%;background:#f43f5e;box-shadow:0 0 6px #f43f5e;animation:lrc-blink 1s ease-in-out infinite;flex-shrink:0;}
@keyframes lrc-blink{0%,100%{opacity:1}50%{opacity:.2}}
.lrc-game-name{font-size:clamp(1rem,4vw,1.3rem);font-weight:900;color:#fff;letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 12px rgba(245,158,11,0.5);}
.lrc-signal{font-size:18px;}
.lrc-body{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;background:#f8fafc;}
.lrc-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 8px;}
.lrc-open-panel{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-right:1px solid #bae6fd;}
.lrc-close-panel{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-left:1px solid #bbf7d0;}
.lrc-label{font-size:9px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:8px;opacity:.75;}
.lrc-open-panel .lrc-label{color:#0369a1;}
.lrc-close-panel .lrc-label{color:#15803d;}
.lrc-num{font-size:clamp(1.6rem,7vw,2.4rem);font-weight:900;font-family:'Courier New',monospace;line-height:1;}
.lrc-open-panel .lrc-num{color:#0369a1;}
.lrc-close-panel .lrc-num{color:#15803d;}
.lrc-divider{display:flex;align-items:center;justify-content:center;padding:18px 12px;background:#f8fafc;}
.lrc-divider::before,.lrc-divider::after{display:none;}
.lrc-jodi-panel{display:flex;flex-direction:column;align-items:center;}
.lrc-jodi-panel .lrc-label{font-size:9px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:8px;color:#b45309;opacity:.9;}
.lrc-jodi-num{font-size:clamp(2rem,9vw,3rem) !important;font-weight:900 !important;font-family:'Courier New',monospace;background:transparent !important;border:3px solid #f59e0b !important;border-radius:12px !important;padding:6px 20px !important;box-shadow:0 0 16px rgba(245,158,11,0.25);min-width:80px;text-align:center;color:#92400e !important;}
.lrc-foot{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;background:#fff;border-top:1px solid #e2e8f0;}
.lrc-tagline{font-size:clamp(0.72rem,2.5vw,0.85rem);color:#64748b;font-style:italic;font-weight:600;}
.lrc-refresh-btn{border:none;outline:none;cursor:pointer;background:linear-gradient(135deg,#0f172a,#1e3a5f);color:#fff;font-size:clamp(0.8rem,3vw,0.9rem);font-weight:700;letter-spacing:1px;padding:7px 24px;border-radius:50px;box-shadow:0 3px 12px rgba(15,23,42,0.3);transition:transform .15s,box-shadow .15s;}
.lrc-refresh-btn:active{transform:scale(0.96);}
@media(max-width:360px){.lrc-num{font-size:1.4rem}.lrc-jodi-num{font-size:1.8rem !important;padding:4px 12px !important}}

/* ── Live Result Card (legacy, unused) ── */
.live-result-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 50%, #1e1b4b 100%);
    position: relative;
    overflow: hidden;
}
.live-result-header::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c4b5fd, #a78bfa, #c4b5fd, transparent);
}
.live-result-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
    animation: lr-sweep 3s ease-in-out infinite;
}
@keyframes lr-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.live-dot {
    width: 10px;
    height: 10px;
    background: #f43f5e;
    border-radius: 50%;
    box-shadow: 0 0 8px #f43f5e, 0 0 16px rgba(244,63,94,0.4);
    animation: lr-blink 1s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes lr-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}
.live-label {
    font-size: clamp(1rem, 5vw, 1.4rem);
    font-weight: 900;
    letter-spacing: 3px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(196,181,253,0.8);
}
.live-icon {
    width: 26px;
    height: auto;
}
.live-tagline {
    margin: 0;
    padding: 7px 12px;
    background: linear-gradient(90deg, #fdf4ff, #fae8ff, #fdf4ff);
    color: #7e22ce;
    font-style: italic;
    font-size: clamp(0.75rem, 3vw, 0.9rem);
    font-weight: 600;
    border-bottom: 1px solid #e9d5ff;
}
.live-result-body {
    padding: 18px 12px 16px;
    background: linear-gradient(180deg, #fdfcff 0%, #f5f3ff 100%);
}
.live-game-name {
    font-size: clamp(1rem, 4.5vw, 1.4rem);
    font-weight: 800;
    color: #4c1d95;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.live-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.live-num-open,
.live-num-close {
    font-size: clamp(1.3rem, 6vw, 2rem);
    font-weight: 700;
    border: 2px solid #a78bfa;
    border-radius: 10px;
    padding: 4px 14px;
    min-width: 54px;
    color: #5b21b6;
}
.live-num-jodi {
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
    font-weight: 900 !important;
    background: transparent !important;
    border: 3px solid currentColor !important;
    border-radius: 12px !important;
    padding: 4px 18px !important;
    min-width: 64px;
    box-shadow: 0 0 12px rgba(167,139,250,0.3);
}
.live-dash {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    color: #c4b5fd;
    font-weight: 300;
}
.live-refresh-btn {
    border: none;
    outline: none;
    cursor: pointer;
    background: linear-gradient(135deg, #4c1d95, #7c3aed);
    color: #fff;
    font-size: clamp(0.8rem, 3vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 1px;
    padding: 8px 28px;
    border-radius: 50px;
    box-shadow: 0 3px 12px rgba(109,40,217,0.4);
    transition: transform 0.15s, box-shadow 0.15s;
}
.live-refresh-btn:active {
    transform: scale(0.96);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
@media (max-width: 360px) {
    .live-num-open, .live-num-close { padding: 3px 8px; min-width: 42px; }
    .live-num-jodi { padding: 3px 12px !important; min-width: 50px; }
}

/* ── H2 ── */
.chart-h2-wrapper {
    position: relative;
    background: linear-gradient(135deg, #0f172a, #1e3a5f, #0f172a);
    border-radius: 10px;
    padding: 10px 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15,23,42,0.3);
}
.chart-h2-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
    animation: h2-sweep 3.5s ease-in-out infinite;
}
@keyframes h2-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.chart-h2-heading {
    margin: 0;
    font-family: Georgia, 'Palatino Linotype', Palatino, serif;
    font-size: clamp(1rem, 4vw, 1.5rem);
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: none;
    color: #fff;
    text-shadow: 0 0 12px rgba(245,158,11,0.4);
}

/* ── Grouped chart-type buttons ── */
.chart-group-row {
    display: flex;
    width: 100%;
}
.chart-group-btn {
    flex: 1 1 0;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 4px;
    font-size: clamp(0.72rem, 2.6vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: filter 0.15s, transform 0.15s;
}
.chart-group-btn:first-child { border-radius: 10px 0 0 10px; }
.chart-group-btn:last-child  { border-radius: 0 10px 10px 0; }
.chart-group-btn:not(:first-child) { border-left: 1px solid rgba(255,255,255,0.25); }
.chart-group-btn:active { filter: brightness(0.88); transform: scaleY(0.97); }
.chart-group-btn.chart-btn-active {
    outline: 3px solid #fff;
    outline-offset: -3px;
    filter: brightness(1.15);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.5);
}

/* Colour variants */
.cpb-danger     { background: linear-gradient(135deg,#c0392b,#e74c3c); color:#fff; }
.cpb-warning    { background: linear-gradient(135deg,#e67e22,#f39c12); color:#fff; }
.cpb-success    { background: linear-gradient(135deg,#1e8c3a,#28a745); color:#fff; }
.cpb-thirty     { background-color:#1127DB; color:#fff; }
.cpb-fortythree { background-color:#FAA8B3; color:#000; }
.cpb-ten        { background-color:#5a1a47; color:#FCFEFF; }

/* ── Reset button ── */
.chart-reset-row { width: 100%; }
.chart-reset-btn {
    width: 100%;
    border: 2px dashed #adb5bd;
    background: #f8f9fa;
    color: #495057;
    border-radius: 10px;
    padding: 9px 20px;
    font-size: clamp(0.82rem, 3vw, 0.95rem);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.chart-reset-btn:hover { background: #e9ecef; border-color: #6c757d; }

/* ── Go To Bottom / Top buttons ── */
.chart-goto-row { width: 100%; }
.chart-goto-btn {
    width: 100%;
    border: none;
    background: linear-gradient(135deg, #1e8c3a, #28a745);
    color: #fff;
    border-radius: 10px;
    padding: 11px 20px;
    font-size: clamp(0.88rem, 3vw, 1rem);
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(40,167,69,0.4);
    transition: transform 0.15s, box-shadow 0.15s;
}
.chart-goto-btn:active { transform: scale(0.98); box-shadow: 0 1px 4px rgba(40,167,69,0.3); }
.chart-goto-top-btn {
    background: linear-gradient(135deg, #1565c0, #1e88e5) !important;
    box-shadow: 0 3px 12px rgba(30,136,229,0.4) !important;
}

/* ── Chart table wrapper fade-in ── */
/* scroll-margin-top so any future scrollIntoView() targeting the wrapper itself
   lands below the sticky navbar rather than flush under it. */
#chart-table-wrapper { opacity: 0; transition: opacity 0.4s ease; scroll-margin-top: var(--chart-nav-h, 52px); }
#chart-table-wrapper.chart-visible { opacity: 1; }

/* Same reasoning applies when JS scrolls a specific stacked table into view (the
   "latest chart" reset lands on the seam between its 2 buckets, i.e. the newer
   table specifically, not the wrapper) — give every stacked table its own margin too. */
.redTable { scroll-margin-top: var(--chart-nav-h, 52px); }

/* ── Old / Latest chart buttons (stacked bucket loader) ── */
/* Clicking "old chart" prepends the next-older 5-year bucket's table above the
   current one instead of replacing it, so history stacks upward. Only the 2 most
   recently loaded buckets are ever kept in the DOM (chart.js / delhichart.js evict
   the earliest-loaded one once a 3rd is requested) so re-render cost stays bounded
   regardless of how much history a market has. "Latest chart" resets back to just
   the newest bucket. Both buttons share this styling, differing only by label/icon. */
.chart-old-row { width: 100%; scroll-margin-top: var(--chart-nav-h, 52px); }
.chart-old-btn {
    width: 100%;
    border: none;
    background: linear-gradient(135deg, #1565c0, #1e88e5);
    color: #fff;
    border-radius: 10px;
    padding: 9px 20px;
    font-size: clamp(0.82rem, 3vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(30,136,229,0.4);
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.chart-old-btn:hover  { filter: brightness(1.08); }
.chart-old-btn:active { transform: scale(0.98); box-shadow: 0 1px 4px rgba(30,136,229,0.3); }
.chart-old-btn:disabled {
    cursor: default;
    filter: grayscale(0.4) brightness(0.9);
    transform: none;
}
.chart-latest-row .chart-old-btn {
    background: linear-gradient(135deg, #6a1b9a, #8e24aa);
    box-shadow: 0 3px 12px rgba(142,36,170,0.4);
}

/* ── App Download Banner ── */
.smr-app-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: linear-gradient(135deg, #7b0000, #c0392b);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 4px 16px rgba(192,57,43,0.35);
    color: #fff;
}
.smr-app-banner-text {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: clamp(0.78rem, 2.8vw, 0.92rem);
    font-style: italic;
    line-height: 1.6;
    flex: 1;
}
.smr-app-icon { font-size: 1.6rem; flex-shrink: 0; }
.smr-app-btn {
    display: inline-block;
    background: linear-gradient(135deg, #f39c12, #f1c40f);
    color: #000;
    font-weight: 800;
    font-size: clamp(0.8rem, 2.5vw, 0.92rem);
    padding: 8px 20px;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .smr-app-banner { flex-direction: column; align-items: center; text-align: center; }
    .smr-app-banner-text { justify-content: center; align-items: center; text-align: center; }
    .smr-app-btn { width: 100%; text-align: center; }
}

/* ── Old Chart archive link ── */
.smr-oldchart-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 10px 0;
    padding: 14px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #78350f 0%, #b45309 55%, #78350f 100%);
    border: 1px solid rgba(255, 237, 213, 0.25);
    box-shadow: 0 4px 14px rgba(120, 53, 15, 0.35);
    color: #fff7ed !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.smr-oldchart-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(120, 53, 15, 0.45);
    color: #fff !important;
}
.smr-oldchart-link:active { transform: scale(0.98); }
.smr-oldchart-icon { font-size: 1.4rem; flex-shrink: 0; }
.smr-oldchart-text {
    flex: 1;
    text-align: left;
    font-weight: 800;
    font-size: clamp(0.78rem, 2.8vw, 0.94rem);
}
.smr-oldchart-arrow {
    font-size: 1.2rem;
    flex-shrink: 0;
    opacity: 0.85;
}

/* ── H3 Heading ── */
.chart-h3-wrapper {
    position: relative;
    background: linear-gradient(135deg, #7b0000, #c0392b);
    border-radius: 10px;
    padding: 9px 16px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(183,28,28,0.35);
}
.chart-h3-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
    animation: h3-sweep 4s ease-in-out infinite;
}
@keyframes h3-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.chart-h3-heading {
    margin: 0;
    font-size: clamp(0.95rem, 3.5vw, 1.3rem);
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
}

/* ── Advertisement Bar ── */
.smr-ad-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
    border: 1px solid #80deea;
    border-radius: 8px;
    padding: 8px 16px;
    color: #006064;
    font-weight: 700;
    font-size: clamp(0.78rem, 2.5vw, 0.9rem);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.smr-ad-bar::before,
.smr-ad-bar::after {
    content: '—';
    color: #80deea;
}

/* ── Footer Strip ── */
.smr-footer-strip {
    background: linear-gradient(135deg, #7b0000, #c0392b);
    color: #fff;
    text-align: center;
    font-weight: 800;
    font-size: clamp(0.85rem, 3vw, 1rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 16px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(192,57,43,0.3);
}

/* ================================================================
   Guess Chart Modal
   ================================================================ */

/* Modal shell */
.gc-modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 50px rgba(0,0,0,0.4);
}

/* Header */
.gc-modal-header {
    background: linear-gradient(135deg, #1a5c2e, #28a745);
    border-bottom: 3px solid #f39c12;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gc-header-inner { display: flex; align-items: center; gap: 10px; }
.gc-header-icon  { font-size: 1.4rem; }
.gc-modal-title {
    margin: 0;
    font-size: clamp(0.88rem, 3.5vw, 1.05rem);
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.gc-close-btn {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    border-radius: 50%;
    width: 30px; height: 30px;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
.gc-close-btn:hover { background: rgba(255,255,255,0.35); }

/* Body */
.gc-modal-body {
    background: #f5f9f6;
    padding: 10px;
    overflow: visible;
}

/* Table */
.gc-table { border-collapse: separate; border-spacing: 0 6px; width: 100%; }

/* ── Date header rows ── */
.gc-table tr th[colspan] {
    background: linear-gradient(90deg, #1a5c2e, #28a745) !important;
    color: #fff !important;
    font-size: clamp(0.75rem, 2.5vw, 0.88rem);
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 7px 12px;
    text-align: center;
    border-radius: 8px;
}

/* ── Data cells ── */
.gc-table tr td {
    background: #fff;
    border: 1px solid #e2f0e6;
    padding: 10px 4px;
    text-align: center;
    vertical-align: middle;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.gc-table tr td:first-child { border-radius: 10px 0 0 10px; }
.gc-table tr td:last-child  { border-radius: 0 10px 10px 0; }

/* ── Panel cell: patti | open | patti ── */
.gc-panel-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Patti column — stacked digits */
.gc-patti-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.gc-patti-col span {
    font-size: clamp(0.68rem, 2vw, 0.82rem);
    font-weight: 700;
    line-height: 1.6;
    min-width: 20px;
    text-align: center;
    opacity: 0.9;
}

/* Open / single digit — hero number */
.gc-open {
    font-size: clamp(1.3rem, 4.5vw, 1.7rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: inline-block !important;
    min-width: 32px;
    text-align: center;
}

/* HR divider */
.gc-hr {
    margin: 8px 4px;
    border: none;
    border-top: 1.5px dashed #c8e6c9;
}

/* ── Jodi 2×2 grid ── */
.gc-jodi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 6px;
    padding-top: 2px;
    justify-items: center;
}
.gc-jodi-row span {
    font-size: clamp(0.92rem, 2.8vw, 1.08rem);
    font-weight: 900;
    min-width: 26px;
    text-align: center;
    letter-spacing: 0.5px;
}

/* Footer */
.gc-modal-footer {
    background: #f0faf3;
    border-top: 2px solid #c8e6c9;
    padding: 10px 18px;
    display: flex;
    justify-content: flex-end;
}
.gc-close-footer-btn {
    background: linear-gradient(135deg, #1a5c2e, #28a745);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 24px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s;
}
.gc-close-footer-btn:hover { filter: brightness(1.1); }

/* ── Responsive ── */
.gc-modal-dialog {
    margin: 8px;
    width: calc(100% - 16px);
    max-width: 720px;
}
@media (min-width: 576px) {
    .gc-modal-dialog { margin: 28px auto; width: calc(100% - 56px); }
}

/* Scale down table content on small screens */
@media (max-width: 480px) {
    .gc-modal-body       { padding: 6px; }
    .gc-table            { border-spacing: 0 4px; }
    .gc-table tr td      { padding: 6px 2px; }

    .gc-patti-col span   { font-size: 0.6rem; min-width: 14px; line-height: 1.4; }
    .gc-panel-cell       { gap: 3px; }

    .gc-open             { font-size: 1.05rem !important; min-width: 22px; }

    .gc-jodi-row         { gap: 2px 4px; }
    .gc-jodi-row span    { font-size: 0.82rem; min-width: 20px; }

    .gc-table tr th[colspan] { font-size: 0.72rem; padding: 6px 8px; letter-spacing: 1px; }

    .gc-modal-title      { font-size: 0.8rem; letter-spacing: 1px; }
    .gc-modal-header     { padding: 10px 12px; }
    .gc-modal-footer     { padding: 8px 12px; }
}

@media (max-width: 360px) {
    .gc-patti-col span   { font-size: 0.55rem; min-width: 12px; }
    .gc-open             { font-size: 0.92rem !important; }
    .gc-jodi-row span    { font-size: 0.75rem; }
}

/* ================================================================
   Today's Guessing Modal
   ================================================================ */

.tg-modal-dialog {
    margin: 8px;
    width: calc(100% - 16px);
    max-width: 480px;
}
@media (min-width: 576px) {
    .tg-modal-dialog { margin: 28px auto; }
}

.tg-modal-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

/* Header */
.tg-modal-header {
    background: linear-gradient(135deg, #1127DB, #3a4fc7);
    border-bottom: 3px solid #f1c40f;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tg-header-inner { display: flex; align-items: center; gap: 8px; }
.tg-header-icon  { font-size: 1.3rem; }
.tg-modal-title {
    margin: 0;
    font-size: clamp(0.82rem, 3.2vw, 1rem);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
}
.tg-close-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    border-radius: 50%;
    width: 30px; height: 30px;
    font-size: 0.82rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
.tg-close-btn:hover { background: rgba(255,255,255,0.3); }

/* Body */
.tg-modal-body {
    background: #f0f2ff;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Guess card */
.tg-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(17,39,219,0.08);
    border-left: 4px solid #1127DB;
}
.tg-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, #eef0ff, #f5f6ff);
    padding: 8px 12px;
    border-bottom: 1px solid #e0e4ff;
}
.tg-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1127DB, #3a4fc7);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tg-author {
    font-size: clamp(0.8rem, 2.8vw, 0.92rem);
    font-weight: 700;
    color: #1127DB;
    text-transform: capitalize;
    flex: 1;
}
.tg-badge {
    background: #1127DB;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
}
.tg-card-body {
    padding: 10px 14px;
    font-size: clamp(0.82rem, 2.8vw, 0.95rem);
    font-weight: 500;
    color: #2d2d2d;
    line-height: 1.65;
    text-align: center;
}
.tg-card-footer {
    padding: 5px 14px 8px;
    text-align: right;
}
.tg-time {
    font-size: 0.72rem;
    color: #888;
    font-style: italic;
}

/* Empty state */
.tg-empty {
    text-align: center;
    padding: 30px 16px;
    font-size: 0.95rem;
    color: #666;
    font-style: italic;
}

/* Footer */
.tg-modal-footer {
    background: #eef0ff;
    border-top: 2px solid #d0d5f5;
    padding: 10px 16px;
    display: flex;
    justify-content: flex-end;
}
.tg-close-footer-btn {
    background: linear-gradient(135deg, #1127DB, #3a4fc7);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 22px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s;
}
.tg-close-footer-btn:hover { filter: brightness(1.1); }

@media (max-width: 400px) {
    .tg-modal-body  { padding: 8px; gap: 8px; }
    .tg-card-body   { padding: 8px 10px; }
    .tg-card-header { padding: 7px 10px; }
}

/* ================================================================
   VIP Trick Modal
   ================================================================ */

.vt-modal-dialog {
    margin: 8px;
    width: calc(100% - 16px);
    max-width: 480px;
}
@media (min-width: 576px) {
    .vt-modal-dialog { margin: 28px auto; }
}

.vt-modal-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(90,26,71,0.3);
}

/* Header */
.vt-modal-header {
    background: linear-gradient(135deg, #3b0a2f, #5a1a47, #7d2460);
    border-bottom: 3px solid #f1c40f;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.vt-modal-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    animation: vt-sweep 3s ease-in-out infinite;
}
@keyframes vt-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.vt-header-inner { display: flex; align-items: center; gap: 8px; z-index: 1; }
.vt-header-icon  { font-size: 1.4rem; }
.vt-modal-title {
    margin: 0;
    font-size: clamp(0.82rem, 3.2vw, 1rem);
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #f1c40f;
    text-shadow: 0 0 12px rgba(241,196,15,0.5);
}
.vt-close-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    border-radius: 50%;
    width: 30px; height: 30px;
    font-size: 0.82rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
    z-index: 1;
}
.vt-close-btn:hover { background: rgba(255,255,255,0.25); }

/* Body */
.vt-modal-body {
    background: linear-gradient(180deg, #fdf6ff, #f9f0fc);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* VIP card */
.vt-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(90,26,71,0.1);
    border-left: 4px solid #5a1a47;
}
.vt-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, #f9f0fc, #fdf6ff);
    padding: 8px 12px;
    border-bottom: 1px solid #edd5f5;
}
.vt-crown-badge {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    color: #3b0a2f;
    font-size: 0.82rem;
    font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(241,196,15,0.4);
}
.vt-author {
    font-size: clamp(0.8rem, 2.8vw, 0.92rem);
    font-weight: 700;
    color: #5a1a47;
    text-transform: capitalize;
    flex: 1;
}
.vt-vip-tag {
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    color: #3b0a2f;
    font-size: 0.62rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 1px;
}
.vt-card-body {
    padding: 10px 14px;
    font-size: clamp(0.82rem, 2.8vw, 0.95rem);
    font-weight: 500;
    color: #2d2d2d;
    line-height: 1.7;
    text-align: center;
}
.vt-card-footer {
    padding: 5px 14px 8px;
    text-align: right;
}
.vt-time {
    font-size: 0.72rem;
    color: #999;
    font-style: italic;
}

/* Empty state */
.vt-empty {
    text-align: center;
    padding: 30px 16px;
    font-size: 0.95rem;
    color: #888;
    font-style: italic;
}

/* Footer */
.vt-modal-footer {
    background: #f9f0fc;
    border-top: 2px solid #edd5f5;
    padding: 10px 16px;
    display: flex;
    justify-content: flex-end;
}
.vt-close-footer-btn {
    background: linear-gradient(135deg, #5a1a47, #7d2460);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 22px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s;
}
.vt-close-footer-btn:hover { filter: brightness(1.1); }

@media (max-width: 400px) {
    .vt-modal-body  { padding: 8px; gap: 8px; }
    .vt-card-body   { padding: 8px 10px; }
    .vt-card-header { padding: 7px 10px; }
}

/* ── New Chart Link Banner ── */
.smr-newchart-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 18px;
    margin: 8px 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%);
    border: 2px solid #fbbf24;
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.45), 0 1px 4px rgba(0,0,0,0.25);
    text-decoration: none !important;
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.3px;
    transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
    position: relative;
    overflow: hidden;
}
.smr-newchart-banner::before {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: newchart-shine 2.8s ease-in-out infinite;
}
@keyframes newchart-shine {
    0%   { left: -60%; }
    60%  { left: 120%; }
    100% { left: 120%; }
}
.smr-newchart-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.6), 0 2px 6px rgba(0,0,0,0.3);
    filter: brightness(1.06);
    color: #fff !important;
    text-decoration: none !important;
}
.smr-newchart-arrow {
    font-size: 20px;
    animation: newchart-bounce 1.2s ease-in-out infinite;
}
@keyframes newchart-bounce {
    0%, 100% { transform: translateX(0); }
    50%       { transform: translateX(5px); }
}
.smr-newchart-text {
    flex: 1;
    text-align: left;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.smr-newchart-badge {
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.5);
    animation: newchart-pulse 1.8s ease-in-out infinite;
}
@keyframes newchart-pulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(220, 38, 38, 0.5); }
    50%       { box-shadow: 0 2px 14px rgba(220, 38, 38, 0.85); }
}
@media (max-width: 400px) {
    .smr-newchart-banner { font-size: 12px; padding: 10px 12px; gap: 7px; }
    .smr-newchart-arrow  { font-size: 16px; }
    .smr-newchart-text   { font-size: 12px; }
    .smr-newchart-badge  { font-size: 10px; padding: 2px 6px; }
}

/* ── redTable contrast fixes ── */
/* Explicit dark text on td cells */
.redTable tbody td {
    color: #1a1a1a;
}
/* th: bold on all devices; colour left to inherit so magic chart classes can override */
.redTable tbody th {
    font-weight: 700 !important;
}
/* Magic chart — ensure each coloured th has sufficient text contrast */
.redTable th.forty      { color: #000 !important; }
.redTable th.ten        { color: #fcfeff !important; }
.redTable th.fiftyfive  { color: #fff !important; }
.redTable th.eleven     { color: #fff !important; }
.redTable th.twenty     { color: #000 !important; }
.redTable th.twentyone  { color: #000 !important; }
.redTable th.twentytwo  { color: #000 !important; }
.redTable th.thirty     { color: #fff !important; }
.redTable th.thirtyone  { color: #fff !important; }
.redTable th.thirtytwo  { color: #fff !important; }
.redTable th.thirtythree{ color: #fff !important; }
.redTable th.fortyone   { color: #000 !important; }
.redTable th.fortytwo   { color: #fff !important; }
.redTable th.fortythree { color: #000 !important; }
.redTable th.fortyfour  { color: #fff !important; }
/* Button appearance for all magic chart coloured th cells */
.redTable th.ten, .redTable th.eleven,
.redTable th.twenty, .redTable th.twentyone, .redTable th.twentytwo,
.redTable th.thirty, .redTable th.thirtyone, .redTable th.thirtytwo, .redTable th.thirtythree,
.redTable th.forty, .redTable th.fortyone, .redTable th.fortytwo, .redTable th.fortythree, .redTable th.fortyfour,
.redTable th.fiftyfive, .redTable th.hol-jodi {
    border-radius: 6px !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.35) !important;
    line-height: 1.4;
}
/* ✪ Holiday jodi — unique orange, only active during Magic Chart */
.redTable th.hol-jodi {
    background-color: #0ea5e9 !important;
    color: #fff !important;
}

/* Date column — distinct colour + italic */
.redTable tbody td:first-child:not(.holiday-banner) {
    color: #7c2d12 !important;
    font-weight: 700;
    font-style: italic;
}
/* Holiday-closure banner row (fully-closed week(s), see GROUP_ARCHIVE_ROWS_BY_WEEK) —
   .bg-danger/.text-white (main.min.css) give the red/white base; this adds spacing and
   sizing to match the redTable's own scale instead of Bootstrap's plain defaults. */
.redTable .holiday-banner {
    padding: clamp(6px, 1.6vw, 12px) 8px !important;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(0.7rem, 2.4vw, 0.95rem);
    letter-spacing: 0.2px;
}
/* .kamal/.red: pure red (#ff0000) on #ffe3c6 = ~3.2:1 — fails AA.
   Use deep crimson (#9b1c1c) which gives ~6:1 on the beige background. */
.redTable .kamal,
.redTable .red {
    color: red !important;
}

/* ── Sticky header row — light theme ── */
.redTable thead tr td.BAR {
    position: sticky;
    top: var(--chart-nav-h, 52px);
    z-index: 50;
    background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%) !important;
    color: #451a03 !important;
    font-weight: 900 !important;
    font-size: clamp(0.6rem, 2.2vw, 0.92rem) !important;
    letter-spacing: clamp(0px, 0.3vw, 1.5px) !important;
    text-transform: uppercase !important;
    font-style: normal !important;
    white-space: nowrap;
    padding: clamp(5px, 1.4vw, 10px) clamp(2px, 0.5vw, 6px) !important;
    border-top: 3px solid #f59e0b !important;
    border-bottom: 2px solid #fbbf24 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.25);
    text-shadow: none !important;
}

/* ── Sticky header row — Delhi jodi tables (th-based header, no BAR class) ── */
.redTable.jodiTable thead th {
    position: sticky;
    top: var(--chart-nav-h, 52px);
    z-index: 50;
    background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%) !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    font-size: clamp(0.55rem, 2.6vw, 0.92rem) !important;
    letter-spacing: clamp(-0.3px, 0.1vw, 0.5px) !important;
    white-space: nowrap;
    padding: clamp(4px, 1.2vw, 10px) clamp(1px, 0.8vw, 6px) !important;
    border-top: 3px solid #f59e0b !important;
    border-bottom: 2px solid #fbbf24 !important;
    border-left: none !important;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.25);
}
.redTable.jodiTable thead th.date {
    color: #451a03 !important;
}

/* Jodi Chart mode collapses each day down to a single jodi-digit column, hiding
   open/close — but stacked bucket tables (old-chart button) can each have a
   different day-count (freq varies per historical era), so plain auto table-layout
   gives the date column a different share of the row width per table, visibly
   misaligning it across the seam between two stacked buckets. table-layout: fixed
   plus an explicit percentage on the first cell of every row (header AND body, via
   :first-child rather than a class so it doesn't matter that the header cell is
   td.BAR while body cells are td.date) pins the date column to the same width
   regardless of how many day columns follow it. max-width caps it at roughly
   panel chart's natural size so jodi mode doesn't stretch edge-to-edge on
   wide screens — every stacked table gets the same cap, so the alignment
   above still holds. */
.redTable.jodiTable {
    table-layout: fixed;
    width: 100%;
    max-width: 520px;
}
.redTable.jodiTable tr > :first-child:not(.holiday-banner) {
    width: 22%;
}

/* ================================================================
   Delhi Guess Chart Table (Haruf / Jodi / Remark)
   — reuses .gc-modal-* shell classes from the Guess Chart Modal above
   ================================================================ */
.dgc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.dgc-table thead th {
    background: linear-gradient(90deg, #1a5c2e, #28a745);
    color: #fff;
    font-size: clamp(0.68rem, 2.4vw, 0.8rem);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 8px;
    text-align: center;
}
.dgc-table tbody tr { border-bottom: 1px solid #e2f0e6; }
.dgc-table tbody tr:last-child { border-bottom: none; }
.dgc-table tbody tr:nth-child(even) { background: #f7fbf8; }
.dgc-table tbody tr.dgc-today { background: linear-gradient(90deg, #fffbeb, #ffffff); box-shadow: inset 3px 0 0 #f59e0b; }
.dgc-table td {
    padding: 10px 6px;
    text-align: center;
    vertical-align: middle;
    font-size: 0.85rem;
}

/* Date cell */
.dgc-date-main { display: block; font-weight: 800; color: #1a5c2e; font-size: 0.85rem; }
.dgc-date-day  { display: block; font-size: 0.66rem; color: #6c8f76; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.dgc-today-badge {
    display: inline-block;
    margin-top: 3px;
    background: #f59e0b;
    color: #fff;
    font-size: 0.56rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Haruf chips */
.dgc-haruf-wrap { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; }
.dgc-haruf-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a5c2e, #28a745);
    color: #fff;
    font-weight: 900;
    font-size: 1.15rem;
    box-shadow: 0 2px 5px rgba(26,92,46,0.35);
}

/* Jodi groups */
.dgc-jodi-wrap  { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; }
.dgc-jodi-group {
    display: flex;
    gap: 4px;
    padding: 2px 7px;
    background: #fff7e6;
    border: 1px solid #fde3a7;
    border-radius: 8px;
}
.dgc-jodi-group span { font-weight: 900; font-size: 0.8rem; color: #92400e; min-width: 16px; text-align: center; }
.dgc-jodi-sep { color: #c8e6c9; font-weight: 700; font-size: 0.9rem; }

/* Remark */
.dgc-remark-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dgc-remark-line { display: flex; align-items: center; gap: 5px; }
.dgc-remark-tag  { color: #374151; font-weight: 700; font-size: 0.72rem; }
.dgc-status {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.dgc-status-pass { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.dgc-status-fail { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.dgc-status-wait { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

.dgc-empty {
    text-align: center;
    padding: 22px 12px;
    font-size: 0.85rem;
    color: #6c8f76;
    font-style: italic;
}

/* ── Mobile: stack rows as cards, zero horizontal scroll ── */
@media (max-width: 576px) {
    .dgc-table thead { display: none; }
    .dgc-table, .dgc-table tbody, .dgc-table tr, .dgc-table td { display: block; width: 100%; }
    .dgc-table tbody tr {
        margin-bottom: 10px;
        border: 1px solid #e2f0e6;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .dgc-table tbody tr:last-child { margin-bottom: 0; }
    .dgc-table td {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        text-align: left;
        border-bottom: 1px dashed #eef5ef;
    }
    .dgc-table td:last-child { border-bottom: none; }
    .dgc-table td::before {
        content: attr(data-label);
        flex: 0 0 58px;
        font-size: 0.6rem;
        font-weight: 800;
        color: #6c8f76;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .dgc-table .dgc-date-cell { background: linear-gradient(90deg, #1a5c2e, #28a745); }
    .dgc-table .dgc-date-cell::before { display: none; }
    .dgc-table .dgc-date-cell .dgc-date-main { color: #fff; }
    .dgc-table .dgc-date-cell .dgc-date-day  { color: #d7f5df; }
    .dgc-haruf-wrap, .dgc-jodi-wrap { justify-content: flex-start; }
    .dgc-remark-wrap { align-items: flex-start; }
}

@media (max-width: 340px) {
    .dgc-table td::before { flex-basis: 48px; font-size: 0.56rem; }
    .dgc-jodi-group span  { font-size: 0.74rem; }
    .dgc-haruf-chip       { width: 30px; height: 30px; font-size: 1.05rem; }
}

/* ── Important Pages link section ── */
.chart-il-wrap {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15,23,42,0.25);
    border: 1px solid #1e3a5f;
}
.chart-il-head {
    background: linear-gradient(135deg, #0f172a, #1e3a5f, #0f172a);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 10px 14px;
    position: relative;
}
.chart-il-head::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f59e0b, transparent);
}
.chart-il-body {
    background: #0b1220;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
}
.chart-il-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #fbbf24;
    text-decoration: none;
    font-weight: 700;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.35);
    border-radius: 7px;
    padding: 9px 12px;
    font-size: 0.88rem;
    transition: background-color .15s, border-color .15s, transform .15s;
}
.chart-il-link:hover {
    background-color: rgba(245,158,11,0.18);
    border-color: #f59e0b;
    color: #fde68a;
    transform: translateX(3px);
}

/* ── Related Charts ── */
.related-section {
    padding: 8px 0 4px;
}
.related-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.related-head h2 {
    margin: 0;
    font-family: Georgia, 'Palatino Linotype', Palatino, serif;
    font-weight: 700;
    font-size: clamp(1.05rem, 4vw, 1.4rem);
    color: #423d36;
}
.related-rule {
    height: 3px;
    width: 44px;
    border-radius: 2px;
    background: linear-gradient(90deg, #f59e0b, transparent);
    margin: 8px 0 14px;
}
.related-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
@media (min-width: 480px) {
    .related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (min-width: 760px) {
    .related-grid { grid-template-columns: repeat(3, 1fr); }
}
.related-grid .related-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px 9px 14px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #e6dcc9;
    box-shadow: 0 1px 2px rgba(15,23,42,0.35);
    text-decoration: none !important;
    color: inherit;
    min-height: 50px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.related-grid .related-row::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: #f59e0b;
    opacity: 0.85;
}
.related-grid .related-row:hover,
.related-grid .related-row:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15,23,42,0.22);
    border-color: #f0c987;
}
.related-grid .related-row:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .related-grid .related-row { transition: none; }
    .related-grid .related-row:hover, .related-grid .related-row:focus-visible { transform: none; }
}
.related-grid .row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.related-grid .row-name {
    font-family: Georgia, 'Palatino Linotype', Palatino, serif;
    font-weight: 700;
    font-size: 13.5px;
    color: #423d36;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.related-grid .row-time {
    font-size: 10.5px;
    color: #57534e;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.related-grid .row-arrow {
    flex-shrink: 0;
    font-size: 15px;
    color: #92400e;
    opacity: 0.7;
    transition: transform 0.15s ease;
}
.related-grid .related-row:hover .row-arrow { transform: translateX(2px); }