/* ================================================================
   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 ── */
#chart-table-wrapper { opacity: 0; transition: opacity 0.4s ease; }
#chart-table-wrapper.chart-visible { opacity: 1; }

/* ── 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: 400px) {
    .smr-app-banner { flex-direction: column; align-items: flex-start; }
    .smr-app-btn { width: 100%; text-align: center; }
}

/* ── 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; }
}