/* Estilos gerais do corpo */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
    color: #333;
}

/* Desktop explicit rules: ensure inline time-label is hidden and external time-row shown
   This uses min-width to override any accidental mobile rules and uses !important to ensure precedence. */
@media (min-width: 993px) {
    #resultsGrid .result-box .time-label { display: none !important; }
    #resultsGrid .time-row, #resultsGrid .time-row .time-box { display: flex !important; }
}

/* Botão de Suporte Telegram - Global */
.telegram-support {
    position: fixed;
    top: auto;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #0088cc, #229ED9);
    color: white;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
    transition: all 0.3s ease;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.telegram-support:hover {
    background: linear-gradient(135deg, #229ED9, #0088cc);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 136, 204, 0.4);
    color: white;
    text-decoration: none;
}

.telegram-support i {
    font-size: 22px;
    animation: telegramBounce 2s infinite;
}

@keyframes telegramBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-3px);
    }
    60% {
        transform: translateY(-2px);
    }
}

/* Responsivo */
@media (max-width: 768px) {
    .telegram-support {
        top: auto;
        bottom: 16px;
        right: 10px;
        width: 52px;
        height: 52px;
    }
}

/* Estilos do modo escuro */
body.dark-mode {
    background-color: #1a1a1a;
    color: #ddd;
}

body.dark-mode .container {
    background-color: #2a2a2a;
}

body.dark-mode .result-box {
    border-color: #555;
}

body.dark-mode .result-box.player {
    background-color: #0056b3;
}

body.dark-mode .result-box.banker {
    background-color: #a00;
}

body.dark-mode .result-box.tie {
    background-color: #d39e00;
}

body.dark-mode .result-box.empty {
    background-color: #444 !important;
    border: 1px solid #555 !important;
}

body.dark-mode .time-box {
    color: #aaa;
}

body.dark-mode .results-grid {
    background-color: #333;
}

body.dark-mode .pattern-validator {
    background: linear-gradient(135deg, #2a2a2a, #1f1f1f);
    border: 1px solid #444;
}

body.dark-mode .pattern-validator h2 {
    color: #ddd;
    border-bottom: 2px solid #0056b3;
}

body.dark-mode .pattern-input label,
body.dark-mode .pattern-section span,
body.dark-mode .example-sequence span,
body.dark-mode .example-entry span {
    color: #bbb;
}

body.dark-mode .pattern-input select {
    background-color: #333;
    color: #ddd;
    border: 1px solid #555;
}

body.dark-mode .validation-results {
    background-color: #333;
    border: 1px solid #555;
}

body.dark-mode .validation-results p {
    color: #ddd;
}

body.dark-mode .separator {
    border-top: 1px solid #555;
}

body.dark-mode .arrow {
    color: #66b0ff;
}

body.dark-mode .saved-pattern {
    background: linear-gradient(135deg, #2a2a2a, #1f1f1f);
    border: 1px solid #444;
}

body.dark-mode .saved-pattern h3 {
    color: #ddd;
    border-bottom: 2px solid #0056b3;
}

body.dark-mode .saved-pattern .pattern-section {
    background-color: #343a40;
}

body.dark-mode .filters select,
body.dark-mode .filters input {
    background-color: #333;
    color: #ddd;
    border: 1px solid #555;
}

body.dark-mode .signals-table th {
    background-color: #333;
    color: #ddd;
}

body.dark-mode .signals-table .green {
    background-color: #006400;
}

body.dark-mode .signals-table .red {
    background-color: #8b0000;
}

body.dark-mode #greenStreakIndicator {
    background-color: #2a2a2a;
    color: #66b0ff;
}

body.dark-mode #greenStreakIndicator.success {
    background-color: #1a3c34;
    color: #34c759;
}

body.dark-mode .stats-container {
    background-color: #333;
}

body.dark-mode .stat-box {
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

body.dark-mode .number-pattern {
    background-color: #444;
}

body.dark-mode .navbar {
    background-color: #002a5c;
}

body.dark-mode .user-dropdown .dropdown-menu {
    background: #2a2a2a;
    box-shadow: 0 2px 8px rgba(255,255,255,0.1);
}

body.dark-mode .user-dropdown .dropdown-menu a {
    color: #ddd;
}

body.dark-mode .user-dropdown .dropdown-menu a:hover {
    background: #3a3a3a;
}

body.dark-mode .user-dropdown .dropdown-menu li {
    border-bottom: 1px solid #444;
}

/* Estilo para o menu superior */
.navbar {
    background-color: #003d82;
    padding: 10px 0;
    margin-bottom: 20px;
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.nav-item {
    margin: 0 15px;
}

.nav-item a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.nav-item a:hover {
    background-color: #007bff;
}

.nav-item a.active {
    background-color: #007bff;
}

/* Dropdown do usuário no menu */
.user-dropdown {
    position: relative;
}

.user-info {
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

.user-dropdown .dropdown-menu {
    display: block;
    position: absolute;
    right: 0;
    background: #fff;
    min-width: 150px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 4px;
    margin-top: 8px;
    z-index: 100;
    padding: 0;
    list-style: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

.user-dropdown.show .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
}

.user-dropdown .dropdown-menu li {
    border-bottom: 1px solid #eee;
}

.user-dropdown .dropdown-menu li:last-child {
    border-bottom: none;
}

.user-dropdown .dropdown-menu a {
    display: block;
    padding: 10px 16px;
    color: #333;
    text-decoration: none;
    font-weight: normal;
    border-radius: 4px;
    transition: background 0.2s;
}

.user-dropdown .dropdown-menu a:hover {
    background: #f0f0f0;
}

/* Dropdown do Home no menu */
.home-dropdown {
    position: relative;
}

.home-dropdown .dropdown-menu {
    display: block;
    position: absolute;
    left: 0;
    background: #fff;
    min-width: 180px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 4px;
    margin-top: 8px;
    z-index: 100;
    padding: 0;
    list-style: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

.home-dropdown.show .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
}

.home-dropdown .dropdown-menu li {
    border-bottom: 1px solid #eee;
}

.home-dropdown .dropdown-menu li:last-child {
    border-bottom: none;
}

.home-dropdown .dropdown-menu a {
    display: block;
    padding: 10px 16px;
    color: #333;
    text-decoration: none;
    font-weight: normal;
    border-radius: 4px;
    transition: background 0.2s;
}

.home-dropdown .dropdown-menu a:hover {
    background: #f0f0f0;
}

.home-dropdown .dropdown-menu a.active {
    background: #007bff;
    color: white;
}

/* Dropdown do Extras no menu */
.extras-dropdown {
    position: relative;
}

.extras-dropdown .dropdown-menu {
    display: block;
    position: absolute;
    left: 0;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 4px;
    margin-top: 8px;
    z-index: 100;
    padding: 0;
    list-style: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

.extras-dropdown.show .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
}

.extras-dropdown .dropdown-menu li {
    border-bottom: 1px solid #eee;
}

.extras-dropdown .dropdown-menu li:last-child {
    border-bottom: none;
}

.extras-dropdown .dropdown-menu a {
    display: block;
    padding: 10px 16px;
    color: #333;
    text-decoration: none;
    font-weight: normal;
    border-radius: 4px;
    transition: background 0.2s;
}

.extras-dropdown .dropdown-menu a:hover {
    background: #f0f0f0;
}

.extras-dropdown .dropdown-menu a.active {
    background: #007bff;
    color: white;
}

/* Estilo para o container principal */
.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Estilo para patterns.html */
.patterns-table {
    margin-top: 20px;
}

.patterns-table table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.patterns-table th,
.patterns-table td {
    border: 1px solid #dee2e6;
    padding: 8px;
    text-align: left;
}

.patterns-table th {
    background-color: #f8f9fa;
    color: #343a40;
}

/* Styling for last-result dice faces (white circular pips) */
.last-result-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.last-result-side {
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    min-width: 160px;
}
.side-title {
    font-weight: 700;
    font-size: 12px;
    color: #555;
    margin-bottom: 8px;
}
.dice-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}
.dice-face {
    /* small variable to control dot sizing per-face; adjusted below in media queries */
    --die-dot-size: 6px;
    width: 56px;
    height: 56px;
    background: linear-gradient(180deg,#f7f7f7,#ffffff);
    border-radius: 12px;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px; /* slightly tighter so pips sit closer to center */
    box-sizing: border-box;
    border: 1px solid #e6e6e6;
    position: relative;
}
.dice-face.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
}
.die-dot {
    width: var(--die-dot-size);
    height: var(--die-dot-size);
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.12) inset;
    margin: 0;
    border: 1px solid rgba(0,0,0,0.06);
}

/* Ensure die-dot aligns within grid cell */
.dice-face .die-dot {
    margin: 0;
    justify-self: center;
    align-self: center;
}

/* Mobile: keep Histórico Ímã and Último Resultado stacked e alinhados */
@media (max-width: 720px) {
    .last-result-col {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        box-sizing: border-box;
        padding-right: 0;
    }

    .last-result-col .historial-imantado,
    .last-result-col .last-result-box {
        width: 100%;
        max-width: none;
    }

    .last-result-col > .historial-imantado {
        margin-right: 0;
    }

    .last-result-box {
        margin-left: 0;
        position: static !important;
        box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    }

    .last-result-body {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        gap: 10px;
        flex-wrap: wrap;
    }

    .last-result-side {
        flex: 1 1 140px;
    }
}

/* Highlight animation when new result arrives */
.new-result {
    animation: newResultPulse 800ms ease-in-out;
}

@keyframes newResultPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(34,197,94,0); }
    50% { transform: scale(1.04); box-shadow: 0 8px 24px rgba(34,197,94,0.12); }
    100% { transform: scale(1); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
}
.dice-total {
    margin-top: 8px;
    font-size: 13px;
    color: #000;
    font-weight: 600;
}

/* Numbered die face styling for last-result */
.dice-face.number-face {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    font-weight: 700;
    /* die numeric value color: prefer white for readability on colored faces */
    font-size: 1.0em;
}
/* specific variants */
.dice-face.number-face.empty { background: #f5f7fa; color: #999; }
.dice-face.number-face.player-face { background: linear-gradient(180deg,#007bff,#0056b3); color: #fff; }
.dice-face.number-face.banker-face { background: linear-gradient(180deg,#dc3545,#b21b2d); color: #fff; }
.dice-face.number-face .die-num { font-size: 1.1em; font-weight: 800; color: #fff; }
/* ensure empty faces keep a readable value color */
.dice-face.number-face.empty .die-num { color: #666; }

/* dark mode: keep totals readable */
body.dark-mode .dice-total { color: #ddd; }

/* Stacked dice layout for last-result: die2 above die1 */
.last-result-side .dice-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
}
.last-result-side .dice-stack .dice-face {
        width: 48px;
        height: 36px;
        margin: 2px 0;
        font-size: 18px;
        color: #fff; /* dice numbers white */
        background: rgba(0,0,0,0.12);
        border-radius: 8px;
}
.last-result-side .dice-stack .dice-face.player-face { background: linear-gradient(180deg,#1e90ff,#0074d9); border: 1px solid rgba(0,116,217,0.18); }
.last-result-side .dice-stack .dice-face.banker-face { background: linear-gradient(180deg,#ff6b6b,#d90429); border: 1px solid rgba(217,4,41,0.18); }

/* Totals should be black to contrast */
.last-result-side .dice-total { color: #000; font-weight: 700; margin-top:6px; }

/* Container winner backgrounds */
.last-result-box.player-win { background: linear-gradient(90deg, rgba(30,144,255,0.18), rgba(0,116,217,0.12)); border-left: 6px solid #0074d9; box-shadow: 0 6px 18px rgba(0,116,217,0.08); }
.last-result-box.banker-win { background: linear-gradient(90deg, rgba(255,107,107,0.18), rgba(217,4,41,0.12)); border-left: 6px solid #d90429; box-shadow: 0 6px 18px rgba(217,4,41,0.08); }
.last-result-box.tie-win { background: linear-gradient(90deg, rgba(255,223,93,0.20), rgba(255,214,102,0.10)); border-left: 6px solid #f2c94c; box-shadow: 0 6px 18px rgba(252, 194, 25, 0.08); }

/* Transient highlight for winner: gentle color pulse without a dark overlay */
@keyframes winnerPulse {
    0% { box-shadow: 0 6px 18px rgba(0,0,0,0.06); transform: translateY(0); }
    50% { box-shadow: 0 14px 36px rgba(0,0,0,0.09); transform: translateY(-2px); }
    100% { box-shadow: 0 6px 18px rgba(0,0,0,0.06); transform: translateY(0); }
}
.last-result-box.winner-animate { animation: winnerPulse 900ms ease-in-out 1; }

/* Global fallback winner backgrounds for the #lastResultBox container to ensure
   the highlight shows even if other selectors override the local card rules. */
#lastResultBox.player-win, .last-result-box.player-win {
    background: linear-gradient(90deg, rgba(30,144,255,0.20), rgba(0,116,217,0.14)) !important;
    border-left: 6px solid #0074d9 !important;
}
#lastResultBox.banker-win, .last-result-box.banker-win {
    background: linear-gradient(90deg, rgba(255,107,107,0.20), rgba(217,4,41,0.14)) !important;
    border-left: 6px solid #d90429 !important;
}
#lastResultBox.tie-win, .last-result-box.tie-win {
    background: linear-gradient(90deg, rgba(255,223,93,0.24), rgba(255,214,102,0.14)) !important;
    border-left: 6px solid #f2c94c !important;
}

/* Reveal container gradient by making inner side boxes transparent when highlighted */
.last-result-box.player-win .last-result-side,
.last-result-box.banker-win .last-result-side,
.last-result-box.tie-win .last-result-side,
#lastResultBox.player-win .last-result-side,
#lastResultBox.banker-win .last-result-side,
#lastResultBox.tie-win .last-result-side {
    background: transparent !important;
    box-shadow: none !important;
}

/* Ensure titles and totals remain readable against colored backgrounds */
.last-result-box.player-win .side-title,
#lastResultBox.player-win .side-title { color: #054a7a !important; }
.last-result-box.banker-win .side-title,
#lastResultBox.banker-win .side-title { color: #5a0b0b !important; }
.last-result-box.tie-win .side-title,
#lastResultBox.tie-win .side-title { color: #7a5a00 !important; }

/* Ensure totals remain legible on the colored background */
.last-result-box.player-win .dice-total, #lastResultBox.player-win .dice-total { color: #023256 !important; }
.last-result-box.banker-win .dice-total, #lastResultBox.banker-win .dice-total { color: #690808 !important; }
.last-result-box.tie-win .dice-total, #lastResultBox.tie-win .dice-total { color: #6b4b00 !important; }

/* Mobile: stacked dice (vertical) to match mobile mock */
@media (max-width: 720px) {
    .last-result-side .dice-stack {
        flex-direction: column; /* stack dice vertically on mobile */
        gap: 6px;
        align-items: center;
    }
    .last-result-side .dice-stack .dice-face {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin: 2px 0;
    }
    /* ensure player/banker boxes have spacing and don't overlap */
    .last-result-side { margin-bottom: 0; }
    /* keep the last-result box full-width under Histórico Ímã */
    .predictions-card .last-result-box { width: 100% !important; }
}

/* subtle blink animation to highlight the box briefly */
@keyframes subtleBlink {
    0% { box-shadow: 0 0 0 rgba(0,0,0,0); transform: translateY(0); }
    40% { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
    100% { box-shadow: 0 1px 2px rgba(0,0,0,0.04); transform: translateY(0); }
}
.last-result-box.new-result {
    animation: subtleBlink 550ms ease-in-out 1;
}


/* --- BacBo advanced predictions: last result and dice visuals --- */

/* Desktop override: ensure predictions card stays in the normal flow and is fully visible.
   This counteracts inline/template rules that make the last-result box absolute and
   can cause the whole card to appear pushed or clipped on wide screens. */
@media (min-width: 721px) {
    .top-stats-and-predictions .predictions-card {
        /* keep the card in document flow */
        position: static !important;
        right: auto !important;
        /* move to the left by putting card before stats using flex order */
        order: -1 !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        max-width: 28% !important;
        min-width: 260px;
        box-sizing: border-box;
        overflow: visible !important; /* allow internal shadows but prevent clipping by template rules */
    }

    /* The last-result-box is absolutely positioned only on mobile; force it back into flow on desktop */
    .top-stats-and-predictions .predictions-card .last-result-box {
        position: static !important;
        top: auto !important;
        right: auto !important;
        width: auto !important;
        margin: 0 !important;
        box-shadow: none !important;
        background: none !important;
    }

    /* Ensure the last-result-box acts as a full container on desktop so winner backgrounds cover both sides */
    .top-stats-and-predictions .predictions-card .last-result-box.player-win,
    .top-stats-and-predictions .predictions-card .last-result-box.banker-win,
    .top-stats-and-predictions .predictions-card .last-result-box.tie-win {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        padding: 14px !important;
        border-radius: 10px !important;
        background-clip: padding-box !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.04) !important;
    }

    /* explicit gradients so desktop winner boxes show the correct background */
    .top-stats-and-predictions .predictions-card .last-result-box.player-win { background: linear-gradient(90deg, rgba(30,144,255,0.18), rgba(0,116,217,0.12)) !important; border-left: 6px solid #0074d9; }
    .top-stats-and-predictions .predictions-card .last-result-box.banker-win { background: linear-gradient(90deg, rgba(255,107,107,0.18), rgba(217,4,41,0.12)) !important; border-left: 6px solid #d90429; }
    .top-stats-and-predictions .predictions-card .last-result-box.tie-win { background: linear-gradient(90deg, rgba(255,223,93,0.22), rgba(255,214,102,0.12)) !important; border-left: 6px solid #f2c94c; }

    /* The inner body should layout player and banker side-by-side inside the container */
    .top-stats-and-predictions .predictions-card .last-result-box .last-result-body {
        display: flex !important;
        gap: 8px;
        justify-content: center;
        align-items: flex-start;
    }

    /* Ensure the advanced predictions content doesn't keep extra padding inserted for mobile */
    .top-stats-and-predictions .predictions-card .advanced-predictions-content {
        padding-top: 0 !important;
    }
}
.predictions-card .last-result-header {
    font-weight: 700;
    margin-bottom: 8px;
}
.last-result-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.last-result-side {
    background: #fff;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    min-width: 60px;
    text-align: center;
}
.last-result-side .side-title {
    font-size: 12px;
    color: #555;
    font-weight: 700;
    margin-bottom: 6px;
}
.dice-wrap { display:flex; gap:8px; justify-content:center; margin-bottom:6px; }
.dice { width:34px; height:34px; border-radius:6px; background:#f8fafc; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; box-shadow:0 1px 2px rgba(0,0,0,0.06); }
.player-side .dice { background: linear-gradient(180deg,#007bff,#0056b3); color:#fff }
.banker-side .dice { background: linear-gradient(180deg,#d43c3c,#9b1f1f); color:#fff }
.dice-total { font-size:12px; color:#333; font-weight:600 }

@media (max-width: 720px) {
    .last-result-body { flex-direction: row; }
}

/* Color dice-face by side */
.dice-face.player-face { background: linear-gradient(180deg,#007bff,#0056b3); border: 1px solid rgba(0,91,187,0.2); }
.dice-face.banker-face { background: linear-gradient(180deg,#d43c3c,#9b1f1f); border: 1px solid rgba(180,40,40,0.2); }
.dice-face.player-face .die-dot, .dice-face.banker-face .die-dot { background: #ffffff; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 1px 1px rgba(0,0,0,0.15) inset; }

/* Advanced predictions layout horizontal */
.advanced-predictions-content {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.last-result-col { flex: 0 0 220px; }
.next-round-col { flex: 1; display:flex; flex-direction:column; align-items:center; }
.recommendation-local { margin-top: 8px; display: none !important; }

.next-round-title { font-size: 0.95em; color: #314151; font-weight:700; margin-bottom:8px; text-align:center; }
.probabilities { display:flex; gap:12px; justify-content:center; align-items:stretch; }
.prob-item { min-width: 86px; }

@media (max-width: 720px) {
    .advanced-predictions-content { flex-direction: column; align-items: stretch; }
    .last-result-col { flex: none; }
}

/* --- Predição Avançada: área de recomendação (paleta alinhada ao tema azul) --- */
.recommendation-area {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f8f9fc, #f3f7ff);
    border: 1px solid #d9e3f5;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    color: #0f2741;
}

.recommendation-area .recommendation-pill {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 2px 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f7fbff, #eff6ff);
    border: 1px solid #cfe0ff;
    color: #0f2741;
    font-weight: 600;
}

.recommendation-area .recommendation-pill.suggest {
    border-left: 4px solid #007bff; /* destaque em azul, não verde */
}

.recommendation-area .recommendation-pill.analyzing {
    background: linear-gradient(135deg, #fff7e6, #fffaf0);
    border: 1px solid #ffe0b8;
    border-left: 4px solid #fd7e14; /* laranja para estado de análise */
    color: #7a3d00;
}

/* Estado com sugestão: fundo verde bem CLARO (transparente) + flash suave */
.recommendation-area.has-suggestion {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.06), rgba(46, 204, 113, 0.03));
    border-color: rgba(46, 204, 113, 0.25);
    animation: recAreaSoftFlash 1100ms ease-out 1;
}

@keyframes recAreaSoftFlash {
    0% { box-shadow: 0 0 0 rgba(46, 204, 113, 0); }
    40% { box-shadow: 0 10px 28px rgba(46, 204, 113, 0.18); }
    100% { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04); }
}

/* Flash sutil na pílula de sugestão para dar vida sem pesar o fundo */
.recommendation-area .recommendation-pill.suggest {
    animation: pillSoftFlash 1000ms ease-in-out 1;
}

@keyframes pillSoftFlash {
    0% { box-shadow: 0 0 0 rgba(46, 204, 113, 0); }
    50% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0.16); }
    100% { box-shadow: 0 0 0 rgba(46, 204, 113, 0); }
}

.patterns-table td {
    vertical-align: top;
}

.patterns-table button {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-right: 5px;
}

.edit-pattern {
    background-color: #007bff;
    color: white;
}

.delete-pattern {
    background-color: #dc3545;
    color: white;
}

.toggle-pattern.enabled {
    background-color: #28a745;
    color: white;
}

.toggle-pattern.disabled {
    background-color: #6c757d;
    color: white;
}

.patterns-table button:hover {
    opacity: 0.9;
}

/* Estilo para o indicador de sequência de greens */
#greenStreakIndicator {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: #e7f3ff;
    color: #31708f;
    font-weight: bold;
    text-align: center;
}

#greenStreakIndicator.success {
    background-color: #d4edda;
    color: #155724;
}

/* Estilo para os filtros no signals.html */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 20px 0;
}

.filter-group {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
}

.filters label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.filters select,
.filters input {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #ced4da;
    background-color: #fff;
    transition: border 0.3s, box-shadow 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.filters select:focus,
.filters input:focus {
    border: 1px solid #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    outline: none;
}

.filters input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
}

/* Estilo para a tabela de sinais */
.signals-table {
    max-height: 400px;
    overflow-y: auto;
    display: block;
}

.signals-table table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}

.signals-table th,
.signals-table td {
    border: 1px solid #dee2e6;
    padding: 8px;
    text-align: center;
}

.signals-table th {
    background-color: #f8f9fa;
    color: #343a40;
    position: sticky;
    top: 0;
    z-index: 1;
}

.signals-table .green {
    background-color: #90ee90;
}

.signals-table .red {
    background-color: #ff6347;
}

/* Estilo para os gráficos */
.charts {
    margin-top: 20px;
}

.charts h2 {
    margin-bottom: 20px;
}

.charts-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.chart-item {
    flex: 1;
    min-width: 300px;
}

canvas {
    max-width: 100%;
}

/* Estilos existentes do projeto */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

header h1 {
    margin: 0;
    font-size: 24px;
}

#timer {
    font-size: 18px;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 5px 10px;
    border-radius: 5px;
}

/* Estatísticas de Cores */
.stats-container {
    margin: 15px 0;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.color-stats {
    display: flex;
    justify-content: space-around;
    gap: 10px;
}

.stat-box {
    flex: 1;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    color: white;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.stat-box.player {
    background-color: #007bff;
}

.stat-box.banker {
    background-color: #dc3545;
}

.stat-box.tie {
    background-color: #ffc107;
    color: black;
}

.stat-label {
    font-size: 14px;
    margin-bottom: 5px;
}

.stat-value {
    font-size: 18px;
    margin-bottom: 3px;
}

.stat-count {
    font-size: 12px;
    opacity: 0.8;
}

/* Cores específicas para stat-box */
.stat-box.player { border-left: 4px solid #007bff; }
.stat-box.banker { border-left: 4px solid #dc3545; }
.stat-box.tie { border-left: 4px solid #ffc107; }

.stat-box.player .stat-value { color: #0056b3; }
.stat-box.banker .stat-value { color: #b21b2d; }
.stat-box.tie .stat-value { color: #8a6d00; }

/* Navegação */
.nav-link {
    padding: 10px 15px;
    background: linear-gradient(135deg, #28a745, #218838);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-left: 10px;
    transition: background 0.3s;
}

.nav-link:hover {
    background: linear-gradient(135deg, #218838, #1e7e34);
}

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
}

/* Mobile: stack controls vertically and make filter elements readable and tappable */
@media (max-width: 720px) {
    .controls {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .filters {
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .filter-box {
        width: 20px !important;
        height: 20px !important;
        border-radius: 6px !important;
        margin-left: 6px;
    }

    .results-limit {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .results-limit select {
        min-width: 120px;
        width: auto;
    }
}

/* compact-toggle styles removed (button hidden) */

.filter-box {
    width: 15px;
    height: 15px;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s;
}

.filter-box:hover {
    transform: scale(1.1);
}

.filter-box.player {
    background-color: #007bff;
}

.filter-box.banker {
    background-color: #dc3545;
}

.filter-box.tie {
    background-color: #ffc107;
}

.filter-box.selected {
    border: 2px solid #000;
}

.results-limit select {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

button {
    padding: 10px 20px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

button:hover {
    background: linear-gradient(135deg, #0056b3, #003d82);
    transform: scale(1.05);
}

.content-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.results-grid {
    flex: 1;
    position: relative;
    min-height: 612px;
    overflow-y: auto;
    background-color: #d3d3d3;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Responsive tweaks for mobile to ensure the table/grid is visible */
@media (max-width: 992px) {
    .content-wrapper {
        flex-direction: column;
        gap: 12px;
    }

    .results-grid {
        min-height: 320px;
        max-height: 60vh;
        overflow-x: auto;
        overflow-y: auto;
        padding: 10px;
    }

    .pattern-validator {
        width: 100%;
    }

    .result-box {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    /* Make result box a column so time label sits below the square and is centered */
    .result-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 6px 4px;
    }

    .result-box span { font-weight: 700; }

    .time-label {
        font-size: 11px;
        color: #666;
        line-height: 1;
        white-space: nowrap;
    }

/* Desktop defaults: hide the inline time label inside each result box and show the external time-row
   Mobile rules below will flip this behavior. This prevents duplicate timestamps being shown. */
#resultsGrid .result-box .time-label { display: none; }
#resultsGrid .time-row { display: flex; }
#resultsGrid .time-row .time-box { display: flex; }

    .dice-face {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 480px) {
    .results-grid {
        min-height: 260px;
        max-height: 55vh;
        padding: 8px;
    }

    .result-box {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .dice-face {
        width: 40px;
        height: 40px;
    }

    .prob-item {
        min-width: 60px;
        padding: 8px 10px;
    }
}

/* Ensure last-result-box is right aligned on very small screens if rtl preference is set */
@media (max-width: 720px) {
    #lastResultBox.rtl, #lastResultBox.rtl .last-result-box {
        margin-left: auto !important;
    }
}

.row {
    display: flex;
    position: absolute;
    width: 100%;
}

/* On smaller screens avoid absolute positioning of rows which may hide content; use natural flow */
@media (max-width: 992px) {
    .row {
        position: relative !important;
        transform: none !important;
        /* prevent wrapping so mobile keeps the same left-right ordering as desktop */
        flex-wrap: nowrap !important;
        gap: 6px;
        align-items: center;
    }

    .time-box {
        display: block;
        width: 100%;
        font-size: 12px;
        color: #666;
        margin-top: 6px;
    }
}

.result-box {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    box-sizing: border-box;
    transition: transform 0.2s;
}

.result-box:hover {
    transform: scale(1.05);
}

.result-box.player {
    background-color: #007bff;
    color: white;
}

.result-box.banker {
    background-color: #dc3545;
    color: white;
}

.result-box.tie {
    background-color: #ffc107;
    color: black;
}

.result-box.dimmed {
    opacity: 0.3;
}

.result-box.highlighted {
    border: 3px solid yellow !important;
    transition: none;
    opacity: 1 !important;
}

.result-box.empty {
    background-color: #e0e0e0 !important;
    border: 1px solid white !important;
}

.time-box {
    width: 50px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: #666;
    box-sizing: border-box;
}

.pattern-validator {
    width: 300px;
    max-width: 300px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 0;
    border: 1px solid #dee2e6;
}

.pattern-validator h2 {
    margin-top: 0;
    font-size: 18px;
    color: #343a40;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
}

.example-section {
    margin-bottom: 20px;
}

.example-sequence,
.example-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.example-sequence span,
.example-entry span {
    font-weight: bold;
    color: #555;
}

.example-circles {
    display: flex;
    gap: 5px;
}

.color-circle,
.entry-circle {
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border 0.3s, transform 0.2s;
}

.color-circle {
    width: 18px;
    height: 18px;
}

.color-circle.large {
    width: 18px;
    height: 18px;
}

.entry-circle {
    width: 18px;
    height: 18px;
}

.entry-circle.small {
    width: 12px;
    height: 12px;
}

.color-circle.player,
.entry-circle.player {
    background-color: #007bff;
}

.color-circle.banker,
.entry-circle.banker {
    background-color: #dc3545;
}

.color-circle.tie,
.entry-circle.tie {
    background-color: #ffc107;
}

.color-circle:hover,
.entry-circle:hover {
    border: 2px solid #000;
    transform: scale(1.1);
}

.separator {
    border: 0;
    border-top: 1px solid #dee2e6;
    margin: 10px 0;
}

.pattern-input {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
}

.input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 120px;
}

.pattern-input label {
    margin-bottom: 0;
    font-weight: bold;
    color: #555;
    white-space: nowrap;
}

.pattern-input select {
    flex: 1;
    min-width: 60px;
    max-width: 80px;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid #ced4da;
    background-color: #fff;
    transition: border 0.3s, box-shadow 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.pattern-input select:focus {
    border: 1px solid #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    outline: none;
}

.pattern-section {
    margin-bottom: 20px;
    background-color: #f1f3f5;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.pattern-section span {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #555;
}

.pattern-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 30px;
    flex-wrap: nowrap;
}

.pattern-display #patternCircles {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.entry-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 30px;
    flex-wrap: nowrap;
}

.arrow {
    font-size: 16px;
    color: #007bff;
    margin: 0 8px;
    line-height: 10px;
    display: flex;
    align-items: center;
}

.trash-icon {
    font-size: 16px;
    cursor: pointer;
    color: #dc3545;
    transition: color 0.3s, transform 0.2s;
    margin-left: 5px;
    line-height: 10px;
    display: flex;
    align-items: center;
}

.trash-icon:hover {
    color: #a00;
    transform: scale(1.2);
}

.validation-results {
    margin-top: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.validation-results p {
    margin: 5px 0;
    font-size: 14px;
    color: #333;
}

.saved-pattern {
    width: 320px;
    max-width: 100%;
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
    transition: transform 0.2s;
}

.saved-pattern.enabled {
    background: linear-gradient(135deg, #e6f4ea, #f8f9fa);
    border: 2px solid greenyellow;
}

.saved-pattern.disabled {
    background: linear-gradient(135deg, #f0f0f0, #e9ecef);
    border: 2px solid red;
    opacity: 0.8;
}

.saved-pattern:hover {
    transform: translateY(-2px);
}

.saved-pattern h3 {
    margin: 0 0 12px 0;
    font-size: 18px;
    color: #343a40;
    border-bottom: 2px solid #007bff;
    padding-bottom: 8px;
}

.saved-pattern .pattern-section {
    margin-bottom: 15px;
    background-color: #f1f3f5;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.saved-pattern .pattern-display,
.saved-pattern .delay-display,
.saved-pattern .entry-display {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 30px;
    font-size: 16px;
}

.validator-compact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-top: 2px;
    grid-auto-flow: dense;
}

.validator-pill {
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e3e8ef;
    padding: 5px 6px;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 42px;
}

.validator-pill .metric-header {
    display: flex;
    align-items: center;
    gap: 4px;
}

.validator-pill .metric-header i {
    font-size: 10px;
    color: inherit;
}

.validator-pill .metric-label {
    font-size: 8px;
    text-transform: uppercase;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.5px;
}

.validator-pill .metric-value {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.validator-pill .metric-percent {
    font-size: 9px;
    color: #1d4ed8;
    font-weight: 600;
}

.validator-pill.accent-success {
    border-color: #c2f2d6;
    background: linear-gradient(135deg, #f3fff8, #ffffff);
}

.validator-pill.accent-alert {
    border-color: #fed7d7;
    background: linear-gradient(135deg, #fff8f8, #ffffff);
}

#patternsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.pattern-buttons {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.pattern-buttons button {
    padding: 5px 10px;
    font-size: 14px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.pattern-buttons button:hover {
    background: linear-gradient(135deg, #0056b3, #003d82);
    transform: scale(1.05);
}

.pattern-buttons button:nth-child(1) {
    background: linear-gradient(135deg, #007bff, #0056b3);
}

.pattern-buttons button:nth-child(1):hover {
    background: linear-gradient(135deg, #0056b3, #003d82);
}

.pattern-buttons button:nth-child(2) {
    background: linear-gradient(135deg, #28a745, #218838);
}

.pattern-buttons button:nth-child(2):hover {
    background: linear-gradient(135deg, #218838, #1e7e34);
}

.pattern-buttons button:nth-child(3) {
    background: linear-gradient(135deg, #dc3545, #a00);
}

.pattern-buttons button:nth-child(3):hover {
    background: linear-gradient(135deg, #a00, #800);
}

/* Estilo para o relatório de estatísticas na página signals.html */
.statistics-report {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    max-width: 600px;
}

.statistics-report h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #333;
}

.statistics-report h4 {
    margin: 10px 0 5px 0;
    font-size: 16px;
    color: #555;
}

.stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 10px;
}

.stats-item {
    flex: 1;
    min-width: 150px;
}

.stats-label {
    font-weight: bold;
    color: #007bff;
}

.stats-value {
    margin-left: 5px;
    color: #333;
}

.gale-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
}

.gale-item {
    flex: 1;
    min-width: 80px;
    text-align: center;
    padding: 5px;
    border-radius: 3px;
}

.gale-item.g0 {
    background-color: #e6f4ea;
}

.gale-item.g0 .gale-label,
.gale-item.g0 .gale-value {
    color: #28a745;
}

.gale-item.g1 {
    background-color: #fff3cd;
}

.gale-item.g1 .gale-label,
.gale-item.g1 .gale-value {
    color: #ffc107;
}

.gale-item.g2 {
    background-color: #fcedda;
}

.gale-item.g2 .gale-label,
.gale-item.g2 .gale-value {
    color: #fd7e14;
}

.gale-item.red {
    background-color: #f8d7da;
}

.gale-item.red .gale-label,
.gale-item.red .gale-value {
    color: #dc3545;
}

.gale-label {
    font-weight: bold;
    display: block;
}

.gale-value {
    display: block;
}

/* Estilo para o menu suspenso de resolução */
.resolve-status {
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
}

.resolve-status:hover {
    background-color: #f0f0f0;
}

/* Estilos do Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow-y: auto;
}

.modal-content {
    background-color: #fff;
    margin: 5vh auto;
    padding: 20px;
    border-radius: 8px;
    width: 95%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.modal-header h2 {
    margin: 0;
    font-size: 20px;
}

.close-modal {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #333;
}

.close-modal:hover {
    color: #dc3545;
}

.modal-body {
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.form-group input:focus,
.form-group select:focus {
    border: 1px solid #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    outline: none;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-footer button {
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.modal-footer button:first-child {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    color: white;
}

.modal-footer button:first-child:hover {
    background: linear-gradient(135deg, #5a6268, #495057);
}

.modal-footer button:last-child {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
}

.modal-footer button:last-child:hover {
    background: linear-gradient(135deg, #0056b3, #003d82);
}

#savePattern {
    background-color: #007bff;
    color: white;
}

/* Estilos para multiple_tables.html */
#gameStyleGrid .result-box {
    width: 30px;
    height: 30px;
    font-size: 12px;
    margin: 1px;
}

.number-pattern {
    display: inline-flex;
    align-items: center;
    margin-right: 5px;
    padding: 2px 5px;
    background-color: #f0f0f0;
    border-radius: 10px;
}

.pattern-options {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pattern-options button {
    padding: 5px 10px;
    font-size: 14px;
}

#numberInputContainer {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 5px;
}

#numberInputContainer input {
    width: 60px;
    padding: 5px;
}

#numberInputContainer select {
    padding: 5px;
}

.error-message {
    color: #dc3545;
    margin-bottom: 10px;
    font-weight: bold;
    display: none;
}

.signal-status.green {
    background-color: #1e7e34;
    color: white;
}

/* Estilos para a página de login */
.login-form {
    max-width: 400px;
    margin: 50px auto;
    padding: 30px 30px 20px 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.login-form h1 {
    text-align: left;
    margin-bottom: 20px;
    color: #333;
}

.login-form .form-group {
    margin-bottom: 15px;
}

.login-form label {
    display: block;
    margin-bottom: 5px;
    color: #444;
}

.login-form input[type="text"],
.login-form input[type="password"],
.login-form input[type="email"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

.login-form button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}

.login-form button:hover {
    background-color: #0056b3;
}

.login-links .link {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

.login-links .link:hover {
    text-decoration: underline;
    color: #0056b3;
}

/* Estilos para mensagens de alerta */
.alert {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 14px;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.alerts-wrapper {
    margin: 20px 0;
}

.alerts-wrapper .alert {
    display: flex;
    align-items: center;
    gap: 8px;
}

.alerts-wrapper .alert i {
    font-size: 16px;
}

/* Estilos adicionais */
.input-button-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.input-button-group button {
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.tooltip {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

.flash-message {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #28a745, #218838);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.trend-chart-container {
    margin: 20px 0;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.trend-chart-container h2 {
    font-size: 1.2em;
    margin-bottom: 10px;
    text-align: center;
}

.chart-controls {
    margin-bottom: 10px;
    text-align: center;
}

.chart-controls label {
    margin-right: 10px;
}

.chart-wrapper {
    position: relative;
    width: 100%;
    height: 300px;
}

/* Top stats and predictions layout (screenshot) */
.top-stats-and-predictions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 14px;
}

/* New row under stats containing three columns: last-result, next-round, predictions-card */
.top-row {
    display: flex;
    gap: 18px;
    margin-top: 12px;
    width: 100%;
    align-items: center;
}
/* center the row contents so remaining elements sit in the middle */
.top-row { justify-content: center; }

/* Make the last-result + probabilities act as a centered group */
.top-row > .last-result-col,
.top-row > .next-round-col { flex: 0 0 auto; display: flex; align-items: center; }
.top-row > .next-round-col { flex-direction: column; }
.top-row > .last-result-col { margin-right: 3px; }

/* layout exactly like the screenshot: stats area on the far left, last-result small centered,
   next-round (probabilities) to the right of last-result, and predictions-card on the far right */
.top-row > .last-result-col { flex: 0 0 auto; display:flex; justify-content:flex-start; align-items:flex-start; min-width:80px; }
.top-row > .next-round-col { flex: 1 1 360px; max-width: 420px; }
.top-row > .predictions-card { flex: 0 0 320px; margin-left: 12px; }

/* Make the top-row responsive: on small screens stack vertically */
@media (max-width: 992px) {
    .top-row { flex-direction: column; }
    .top-row > .last-result-col,
    .top-row > .next-round-col,
    .top-row > .predictions-card { flex: 1 1 auto; width: 100%; }
}

.top-stats {
    display: flex;
    gap: 12px;
    flex: 1 1 auto;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.stat-box {
    background: linear-gradient(135deg, #ffffff, #f6f9ff);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 120px;
    flex: 1 1 0;
    box-shadow: 0 2px 8px rgba(20, 40, 80, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* center contents horizontally */
    text-align: center;
    padding-top: 14px;
    padding-bottom: 14px;
}

.stat-box .stat-label {
    font-size: 0.82em;
    color: #586069;
    font-weight: 600;
}

.stat-box .stat-value {
    font-size: 1.45em;
    font-weight: 800;
    margin-top: 6px;
    color: #0b3b66;
}

/* Ensure percentage boxes are visually aligned and same height */
.top-stats .stat-box {
    height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
}
.top-stats .stat-box .stat-value { font-size: 1.6em; line-height: 1; margin-top: 4px; }
.top-stats .stat-box .stat-count { font-size: 0.78em; color: #6b7280; margin-top: 6px; }

/* Ensure color-left indicator doesn't change layout */
.top-stats .stat-box.player { border-left-width: 4px; }
.top-stats .stat-box.banker { border-left-width: 4px; }
.top-stats .stat-box.tie { border-left-width: 4px; }

.stat-box .stat-count {
    font-size: 0.82em;
    color: #6b7280;
    margin-top: 4px;
}

.predictions-card {
    width: 320px;
    max-width: 36%;
    background: linear-gradient(180deg,#ffffff,#fbfdff);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(3, 40, 80, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Desktop safety: ensure predictions card doesn't overflow its container and stays fully visible */
@media (min-width: 1200px) {
    .predictions-card {
        max-width: 28% !important;
        min-width: 260px;
        margin-left: auto; /* push it inside container if necessary */
        box-sizing: border-box;
    }
}

.predictions-card .card-header {
    padding: 10px 12px;
    background: rgba(245,247,250,0.6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.predictions-card .card-title { font-weight: 700; color:#123b5a; font-size: 0.98em; }
/* hide the textual title (remove "Predição Avançada (Próxima Rodada)") but keep controls/icons visible */
.predictions-card .card-title { font-size: 0 !important; line-height: 0 !important; height: 0 !important; overflow: hidden; }
.predictions-card .card-header .card-controls { font-size: 0.9em; line-height: 1; }

/* hide the small auto badge and refresh button inside the predictions card header */
.predictions-card .card-controls .auto-update-indicator,
.predictions-card .card-controls .refresh-btn { display: none !important; }

/* hide any remaining auto-update indicators or refresh buttons globally */
.auto-update-indicator, .refresh-btn { display: none !important; }
.predictions-card .card-body { padding: 12px; }

/* Garantir contraste legível por padrão dentro do card */
.predictions-card, .predictions-card .card-body, .predictions-card .card-body * {
    color: #1f2937; /* cor escura e legível */
}

/* Loading / error visíveis */
.loading-predictions { color: #1f2937; text-align:center; padding:14px 8px; font-weight:600; }

.stat-box .stat-value {
    font-size: 1.45em;
    font-weight: 800;
    margin-top: 6px;
    color: #0b3b66;
}

/* Ensure percentage boxes are visually aligned and same height */
.top-stats .stat-box {
    height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
}
.top-stats .stat-box .stat-value { font-size: 1.6em; line-height: 1; margin-top: 4px; }
.top-stats .stat-box .stat-count { font-size: 0.78em; color: #6b7280; margin-top: 6px; }

/* Ensure color-left indicator doesn't change layout */
.top-stats .stat-box.player { border-left-width: 4px; }
.top-stats .stat-box.banker { border-left-width: 4px; }
.top-stats .stat-box.tie { border-left-width: 4px; }

.stat-box .stat-count {
    font-size: 0.82em;
    color: #6b7280;
    margin-top: 4px;
}

.predictions-card {
    width: 320px;
    max-width: 36%;
    background: linear-gradient(180deg,#ffffff,#fbfdff);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(3, 40, 80, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Desktop safety: ensure predictions card doesn't overflow its container and stays fully visible */
@media (min-width: 1200px) {
    .predictions-card {
        max-width: 28% !important;
        min-width: 260px;
        margin-left: auto; /* push it inside container if necessary */
        box-sizing: border-box;
    }
}

.predictions-card .card-header {
    padding: 10px 12px;
    background: rgba(245,247,250,0.6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.predictions-card .card-title { font-weight: 700; color:#123b5a; font-size: 0.98em; }
/* hide the textual title (remove "Predição Avançada (Próxima Rodada)") but keep controls/icons visible */
.predictions-card .card-title { font-size: 0 !important; line-height: 0 !important; height: 0 !important; overflow: hidden; }
.predictions-card .card-header .card-controls { font-size: 0.9em; line-height: 1; }

/* hide the small auto badge and refresh button inside the predictions card header */
.predictions-card .card-controls .auto-update-indicator,
.predictions-card .card-controls .refresh-btn { display: none !important; }

/* hide any remaining auto-update indicators or refresh buttons globally */
.auto-update-indicator, .refresh-btn { display: none !important; }
.predictions-card .card-body { padding: 12px; }

/* Garantir contraste legível por padrão dentro do card */
.predictions-card, .predictions-card .card-body, .predictions-card .card-body * {
    color: #1f2937; /* cor escura e legível */
}

/* Loading / error visíveis */
.loading-predictions { color: #1f2937; text-align:center; padding:14px 8px; }
.error { color: #b91c1c; text-align:center; padding:10px 8px; font-weight:700; }

.probabilities {
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.prob-item { flex: 1 1 0; min-width: 70px; }

.recommendation-area {
    margin-top: 10px;
    display: block;
    gap: 8px;
    width: 100%;
    margin-top: 18px;
}

/* make the recommendation-area (alert) occupy full container width and visually prominent */
.recommendation-area .recommendation, .recommendation-area .recommendation-pill, .expiry-warning {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 18px;
    border-radius: 30px;
    box-shadow: 0 6px 18px rgba(3,40,80,0.06);
    color: #fff !important;
    font-weight: 800;
    margin: 6px 0;
}

/* when there is a suggestion, tint the pill by recommended color with translucent alpha */
/* Player (AZUL) */
.recommendation-area.rec-player.has-suggestion .recommendation-pill.suggest,
.recommendation-area .rec-player .recommendation-pill.suggest {
    background: linear-gradient(90deg, rgba(0,123,255,0.16), rgba(0,86,179,0.12));
    color: inherit !important;
    border-left: 4px solid #007bff;
}
/* Banker (VERMELHO) */
.recommendation-area.rec-banker.has-suggestion .recommendation-pill.suggest,
.recommendation-area .rec-banker .recommendation-pill.suggest {
    background: linear-gradient(90deg, rgba(220,53,69,0.16), rgba(178,27,45,0.12));
    color: inherit !important;
    border-left: 4px solid #dc3545;
}
/* Tie (EMPATE/AMARELO) */
.recommendation-area.rec-tie.has-suggestion .recommendation-pill.suggest,
.recommendation-area .rec-tie .recommendation-pill.suggest {
    background: linear-gradient(90deg, rgba(255,193,7,0.22), rgba(255,214,102,0.14));
    color: inherit !important;
    border-left: 4px solid #ffc107;
}

/* when analyzing (no suggestion), use orange-ish */
.recommendation-area .analyzing .recommendation-pill.analyzing,
.recommendation-area.analyzing .recommendation-pill.analyzing {
    background: linear-gradient(90deg,#f59e0b,#f97316);
    color: #fff !important;
}

/* ensure the small last-result card is visually compact and centered */
.last-result-box {
    width: 160px;
    padding: 8px 10px;
    border-radius: 10px;
    background: linear-gradient(180deg,#fff,#f7fbff);
    box-shadow: 0 4px 14px rgba(10,20,40,0.06);
    text-align: center;
}
.last-result-box .last-result-title { font-size: 0.75em; color: #4b5563; font-weight:700; margin-bottom:6px; }
.last-result-box .last-result-number { font-size: 1.05em; font-weight:800; color:#0b3b66; }
.last-result-box .dice-total { color: #222 !important; font-weight: 700 !important; opacity: 1 !important; }

/* keep predictions card aligned to the right like the screenshot */
.top-row > .predictions-card { align-self: center; }

/* Forçar cor de texto das recommendation-pill */
.recommendation-pill, .recommendation { color: #fff; }

.dice-summary { display:flex; gap:10px; margin-top:12px; }
.dice-card { flex:1 1 0; padding:8px 10px; border-radius:8px; background:linear-gradient(180deg,#fff,#f7f9fc); box-shadow:0 2px 8px rgba(10,20,40,0.04); }

/* Responsividade */
@media (max-width: 900px) {
    .top-stats-and-predictions { flex-direction: column; }
    .predictions-card { width: 100%; max-width: 100%; }
    .top-stats { justify-content: space-between; }
}

@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;
    }
    .pattern-validator {
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
    }
    .container {
        max-width: 100%;
    }
    .filter-group {
        min-width: 100%;
    }
    .chart-item {
        min-width: 100%;
    }
    .nav-list {
        flex-direction: column;
        align-items: center;
    }
    .nav-item {
        margin: 10px 0;
    }
    .user-dropdown .dropdown-menu {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
    .pagination {
        gap: 2px;
    }
    
    .page-link,
    .page-current {
        padding: 6px 8px;
        font-size: 12px;
        min-width: 30px;
    }
    
    .pagination-info {
        font-size: 12px;
    }
}

/* Ajustes para telas muito pequenas */
@media (max-width: 480px) {
    .container {
        padding: 5px;
    }
    
    header h1 {
        font-size: 16px;
    }
    
    #timer {
        font-size: 14px;
    }
    
    .stat-box {
        padding: 10px 6px;
    }
    
    .stat-value {
        font-size: 1.3em;
    }
    
    table {
        font-size: 0.8em;
        min-width: 500px;
    }
    
    th, td {
        padding: 6px 3px;
    }
    
    .trend-chart-container {
        padding: 10px;
    }
    
    .chart-wrapper {
        height: 200px;
    }
    
    .nav-item a {
        padding: 6px 8px;
        font-size: 0.8em;
    }
}

/* Fix para força de scroll horizontal em tabelas */
.table-container {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Garante que elementos não quebrem o layout */
* {
    box-sizing: border-box;
}

/* Strong overrides to ensure the time label appears directly under each result square on mobile */
@media (max-width: 992px) {
    #resultsGrid .row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    #resultsGrid .result-row, #resultsGrid .row { width: 100% !important; }

    /* Make each result a vertical block: number on top, time below */
    #resultsGrid .result-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 54px !important;
        height: auto !important;
        padding: 6px 4px !important;
    }

    #resultsGrid .result-box .time-label {
        display: block !important;
        font-size: 11px !important;
        color: #fff !important; /* mobile: make timestamp white for better contrast */
        margin-top: 4px !important;
        white-space: nowrap !important;
    }
}

/* Further overrides: hide any legacy external time-row/time-box elements and make rows stable */
@media (max-width: 992px) {
    /* On mobile, hide the legacy external time-row/time-box and rely on inline time-labels */
    #resultsGrid .time-row, #resultsGrid .time-row .time-box, .time-box { display: none !important; }

    /* Ensure each row distributes boxes in order and each box keeps its place */
    #resultsGrid .row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    /* Force each result-box to occupy consistent width so times align under them */
    #resultsGrid .row .result-box {
        flex: 0 0 54px !important;
        box-sizing: border-box !important;
    }

    /* style the time-row so times align beneath their corresponding result-boxes
       (display is controlled by breakpoint-specific rules; on mobile the time-row
       is hidden by earlier rules so the inline .time-label is used) */
    #resultsGrid .time-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
        margin-top: 4px !important;
    }

    /* ensure the grid can scroll horizontally on small screens instead of wrapping */
    #resultsGrid {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    /* When rtl class is present, reverse the visual order so latest item appears at right */
    #resultsGrid.rtl .row,
    #resultsGrid.rtl .time-row {
        flex-direction: row-reverse !important;
    }

    /* smooth scroll for nicer UX */
    #resultsGrid { scroll-behavior: smooth; }

    #resultsGrid .time-row .time-box {
        flex: 0 0 54px !important;
        text-align: center;
        font-size: 11px;
        color: #666;
    }

    /* If rightToLeft is enabled, rely on the JS order — do not reverse visually here */
}

/* Minimal class used to trigger a reflow/repaint when toggled by JS */
.render-flash {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.results-container,
.trend-chart-container,
.stats-container {
    max-width: 100%;
    overflow: hidden;
}

/* Tooltip para informações dos resultados */
.result-tooltip {
    position: absolute; /* position in document coordinates so tooltip sits above the right cell */
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border: 2px solid #3498db;
    border-radius: 12px;
    padding: 16px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    min-width: 280px;
    pointer-events: none;
}

.result-tooltip.show {
    opacity: 1;
    visibility: visible;
}

.result-tooltip-header {
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.result-tooltip-datetime {
    font-size: 13px;
    color: #bdc3c7;
    margin-bottom: 4px;
}

.result-tooltip-winner {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
}

.result-tooltip-winner.player {
    color: #3498db;
}

.result-tooltip-winner.banker {
    color: #e74c3c;
}

.result-tooltip-winner.tie {
    color: #f1c40f;
}

.result-tooltip-dice {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.dice-section {
    flex: 0 0 auto;
    text-align: center;
}

.dice-section.player {
    text-align: left;
}

.dice-section.banker {
    text-align: right;
}

.dice-label {
    font-size: 12px;
    color: #bdc3c7;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dice-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
}

.dice-container.player-layout {
    align-items: flex-start;
}

.dice-container.banker-layout {
    align-items: flex-end;
}

.dice-face {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* Dados do Player - Azul mais vibrante */
.dice-section.player .dice-face {
    background: linear-gradient(135deg, #5dade2, #3498db, #2980b9);
    border: 2px solid #1f4e79;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

/* Dados do Banker - Vermelho mais vibrante */
.dice-section.banker .dice-face {
    background: linear-gradient(135deg, #ec7063, #e74c3c, #c0392b);
    border: 2px solid #922b21;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}

/* Container para os pontos dos dados */
.dice-dots {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 2px;
    padding: 4px;
}

/* Pontos individuais dos dados */
.dice-dot {
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 50%;
    margin: auto;
    opacity: 0;
}

/* Visibilidade dos pontos baseada no valor */
.dice-dots.value-1 .dot-center { opacity: 1; }

.dice-dots.value-2 .dot-top-left,
.dice-dots.value-2 .dot-bottom-right { opacity: 1; }

.dice-dots.value-3 .dot-top-left,
.dice-dots.value-3 .dot-center,
.dice-dots.value-3 .dot-bottom-right { opacity: 1; }

.dice-dots.value-4 .dot-top-left,
.dice-dots.value-4 .dot-top-right,
.dice-dots.value-4 .dot-bottom-left,
.dice-dots.value-4 .dot-bottom-right { opacity: 1; }

.dice-dots.value-5 .dot-top-left,
.dice-dots.value-5 .dot-top-right,
.dice-dots.value-5 .dot-center,
.dice-dots.value-5 .dot-bottom-left,
.dice-dots.value-5 .dot-bottom-right { opacity: 1; }

.dice-dots.value-6 .dot-top-left,
.dice-dots.value-6 .dot-top-right,
.dice-dots.value-6 .dot-middle-left,
.dice-dots.value-6 .dot-middle-right,
.dice-dots.value-6 .dot-bottom-left,
.dice-dots.value-6 .dot-bottom-right { opacity: 1; }

.dice-total {
    font-size: 13px;
    color: #ecf0f1;
    font-weight: 600;
}

.dice-section.player .dice-total {
    text-align: left;
}

.dice-section.banker .dice-total {
    text-align: right;
}

/* Pips-style dice faces for Último resultado (light background, colored faces) */
.pips-face {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    background: linear-gradient(180deg,#fff,#f7fbff);
    border: 1px solid rgba(0,0,0,0.03);
    box-sizing: border-box;
    overflow: hidden; /* ensure dots never visually overflow the face */
    padding: 0;
}

/* Scoped grid inside pips faces to control spacing precisely */
.pips-face .dice-dots {
    /* Use absolute positioning inside the face for pixel-perfect pip placement */
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
}

.pips-face.player-face { background: linear-gradient(135deg,#e6f3ff,#d6ecff); border:1px solid rgba(34,122,204,0.12); }
.pips-face.banker-face { background: linear-gradient(135deg,#ffecec,#ffdede); border:1px solid rgba(217,4,41,0.08); }
.pips-face.empty { opacity: 0.6; color: #666; font-weight:700; }

/* Slightly larger and shadowed dots inside pips faces so they are visible on the light bg */
.pips-face .dice-dot {
    width: 5px;
    height: 5px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    border-radius: 50%;
    margin: 0;
    /* let the existing .dice-dots.value-N rules control opacity/visibility */
    align-self: center;
    justify-self: center;
}

/* Explicit placement inside the 3x3 grid so each dot aligns like a real die face */
.pips-face .dot-top-left     { justify-self: start;  align-self: start; }
.pips-face .dot-top-center   { justify-self: center; align-self: start; }
.pips-face .dot-top-right    { justify-self: end;    align-self: start; }
.pips-face .dot-middle-left  { justify-self: start;  align-self: center; }
.pips-face .dot-center       { justify-self: center; align-self: center; }
.pips-face .dot-middle-right { justify-self: end;    align-self: center; }
.pips-face .dot-bottom-left  { justify-self: start;  align-self: end; }
.pips-face .dot-bottom-center{ justify-self: center; align-self: end; }
.pips-face .dot-bottom-right { justify-self: end;    align-self: end; }

/* Absolute positions for pip locations (percentages tuned for a natural die look) */
.pips-face .dice-dot { position: absolute; }
.pips-face .dot-top-left     { left: 18%;  top: 18%; transform: translate(0,0); }
.pips-face .dot-top-center   { left: 50%;  top: 18%; transform: translate(-50%,0); }
.pips-face .dot-top-right    { right: 18%; top: 18%; transform: translate(0,0); }
.pips-face .dot-middle-left  { left: 18%;  top: 50%; transform: translate(0,-50%); }
.pips-face .dot-center       { left: 50%;  top: 50%; transform: translate(-50%,-50%); }
.pips-face .dot-middle-right { right: 18%; top: 50%; transform: translate(0,-50%); }
.pips-face .dot-bottom-left  { left: 18%;  bottom: 18%; transform: translate(0,0); }
.pips-face .dot-bottom-center{ left: 50%;  bottom: 18%; transform: translate(-50%,0); }
.pips-face .dot-bottom-right { right: 18%; bottom: 18%; transform: translate(0,0); }


/* Responsivo para mobile */
@media (max-width: 768px) {
    .result-tooltip {
        min-width: 260px;
        padding: 14px;
        font-size: 13px;
    }
    
    .dice-face {
        width: 36px;
        height: 36px;
    }
    
    .dice-dot {
        width: 5px;
        height: 5px;
    }
    
    .result-tooltip-winner {
        font-size: 15px;
    }
}

/* Modo escuro para tooltip */
body.dark-mode .result-tooltip {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border-color: #3498db;
}

/* Mantém as cores dos dados iguais no modo escuro */
body.dark-mode .dice-section.player .dice-face {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

body.dark-mode .dice-section.banker .dice-face {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

/* ESTILOS PARA RECOMENDAÇÕES AVANÇADAS - DESTAQUE MAIOR */
.recommendation {
    font-size: 1.1em;
    font-weight: bold;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: 8px;
    text-align: center;
    border: 2px solid;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: pulse 2s infinite;
}

.recommendation.strong {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    border-color: #27ae60;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.4);
}

.recommendation.warning {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    border-color: #f39c12;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
}

.recommendation.caution {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    color: white;
    border-color: #95a5a6;
    box-shadow: 0 4px 15px rgba(149, 165, 166, 0.4);
}

.recommendation.normal {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border-color: #3498db;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

/* Recommendation pills */
.recommendation-pill {
    padding: 8px 12px;
    border-radius: 18px;
    font-weight: 700;
    font-size: 0.9em;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.recommendation-pill.avoid { background: linear-gradient(90deg,#dc3545,#c82333); color: #fff; }
.recommendation-pill.lowconfidence { background: linear-gradient(90deg,#6c757d,#5a6268); color: #fff; }

/* Último resultado refinado */
.last-result-box { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 8px; }
.last-result-number { font-size: 1.9em; font-weight:900; padding:4px 8px; border-radius:8px; background:linear-gradient(135deg,#f8f9fb,#e9f1ff); box-shadow:0 3px 8px rgba(0,0,0,0.05); }
.last-result-stats { font-size:0.85em; color:#55606a; }

/* Histórico Ímã (painel à esquerda do último resultado) */
.historial-imantado {
    background: linear-gradient(135deg,#ffffff, #f6fbff);
    border-radius: 12px;
    padding: 6px 8px;
    margin-bottom: 6px;
    border: 1px solid rgba(0,123,255,0.06);
    /* allow the panel to size based on content; keep a sensible minimum */
    width: auto;
    min-width: 180px;
    max-width: 360px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    position: relative; /* ensure z-index applies */
    z-index: 400; /* keep histórico below last-result (last-result has z-index:1000) */
}

/* Refresh icon button in Histrico m */
.icon-button{
    background: transparent;
    border: none;
    padding: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.icon-button svg{ transition: transform 300ms linear; }
.icon-button.loading svg{ transform: rotate(180deg); }
.icon-button:disabled{ opacity: 0.5; cursor: default; }
.hist-title {
    font-weight:800;
    text-transform:uppercase;
    font-size:0.9em;
    color:#084c8d;
    margin-bottom:8px;
    display:flex; align-items:center; gap:8px;
}
.hist-list { display:flex; flex-direction:column; gap:2px; align-items:stretch; }
.hist-item { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3px 5px; border-radius:7px; background:linear-gradient(180deg,#ffffff,#fbfdff); border:1px solid rgba(0,0,0,0.03); width:100%; min-width: 0; }
.hist-item .sample { display:flex; align-items:center; gap:4px; min-width:70px; flex-direction:column; justify-content:center; }
.hist-item .badge { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; box-shadow:0 6px 12px rgba(0,0,0,0.06); font-size:1.12em }
.hist-item .badge.player { background: linear-gradient(180deg,#42a5f5,#1e88e5); }
.hist-item .badge.banker { background: linear-gradient(180deg,#ef5350,#e53935); }
.hist-item .badge.tie { background: linear-gradient(180deg,#ffb74d,#ffa726); color:#222; }
.hist-item .stats-after { font-size:0.85em; color:#334; text-align:right; min-width:120px; }

.hist-item .stats-after { display:flex; flex-direction:row; gap:8px; align-items:center; min-width:170px; }
.hist-item .stat-row { display:flex; align-items:center; gap:6px; flex-direction:column; }
.hist-item .stat-row .icon { font-size:1.05em; }
.hist-item .stat-row .count { font-weight:700; min-width:24px; text-align:right; }
.hist-item .stat-row .pc { font-size:0.8em; color:#556; padding-left:6px; }

.hist-item .stat-row .pc.inline { padding-left:4px; }

/* Flash animation when histórico é atualizado */
/* make flash immediate and very short so updates appear without perceptible delay */
.hist-flash { animation: histFlash 0.28s ease-in-out; }
@keyframes histFlash {
    0% { transform: translateY(4px); opacity: 0.25; }
    50% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

.hist-item .occurrence { color:#2d4052; font-weight:600; }

/* after-stats: three compact columns with dot, count and percentage */
.after-stats { display:flex; gap:6px; align-items:center; justify-content:center; margin-top:4px; }
.after-col { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:30px; }
.after-col .dot { width:14px; height:14px; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.after-col .dot.player { background: linear-gradient(180deg,#42a5f5,#1e88e5); }
.after-col .dot.banker { background: linear-gradient(180deg,#ef5350,#e53935); }
.after-col .dot.tie { background: linear-gradient(180deg,#ffb74d,#ffa726); }
.after-count { font-weight:700; font-size:1.02em; color:#223; }
.after-pct { font-size:0.82em; color:#667; }

@media (max-width: 900px) {
    .historial-imantado { width: 100%; }
    .last-result-col { display:flex; gap:12px; align-items:flex-start; }
}

/* Desktop: keep historial and last result side-by-side */
.last-result-col { display:flex; gap:10px; align-items:flex-start; }
.last-result-col > .historial-imantado { margin-right:8px; }

/* Make the histórico show items horizontally on wide viewports where there's room */
@media (min-width: 1200px) {
    .hist-list { flex-direction: row; flex-wrap: wrap; align-items:flex-start; gap:2px; }
    .hist-item { width: auto; min-width: 140px; }
    .historial-imantado { max-width: none; }
}

/* Ensure last-result sits above histórico visually and its inner boxes fit */
.last-result-box { position: relative; z-index: 1000; }

/* Scoped sizing: smaller inner boxes inside the last-result column to avoid overflow */
.top-row .last-result-col .result-box {
    width: 34px;
    height: 34px;
    font-size: 13px;
}
.top-row .last-result-col .dice-face {
    width: 32px;
    height: 32px;
}
.top-row .last-result-col .dice-card { padding:6px 6px; }

/* Scoped sizing: when result-boxes are shown inside the last-result column
   make them slightly smaller so two stacked boxes fit comfortably */
.top-row .last-result-col .result-box {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

/* Increase last-result container padding a bit to avoid inner overflow */
.top-row .last-result-col .last-result-box {
    padding-top: 10px;
    padding-bottom: 10px;
    min-width: 180px;
}

/* Pequenos refinamentos globais */
.predictions-card .card-controls .refresh-btn { padding:6px 8px; }
.predictions-card .card-controls .auto-update-indicator { font-size:0.78em; }

/* Styles for Histórico Ímã (made highly specific to avoid being overridden) */
#histImanList .hist-summary-wrap {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
    padding: 8px 0 !important;
}

#histImanList .hist-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

#histImanList .sample { text-align: center; }

#histImanList .badge {
    display: inline-block !important;
    min-width: 56px !important;
    height: 56px !important;
    line-height: 56px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    font-size: 1.5rem !important;
    color: #fff !important;
    text-align: center !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
}

#histImanList .badge.player { background: linear-gradient(135deg,#0b72d9,#004ea8) !important; }
#histImanList .badge.banker { background: linear-gradient(135deg,#c62828,#8b0000) !important; }
#histImanList .badge.tie { background: linear-gradient(135deg,#d39e00,#b38600) !important; }

#histImanList table.hist-summary {
    border-collapse: collapse !important;
    background: transparent !important;
    min-width: 340px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.04) !important;
}

#histImanList table.hist-summary thead th {
    text-align: left !important;
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
    color: #444 !important;
    background: rgba(0,0,0,0.03) !important;
}

#histImanList table.hist-summary tbody td {
    padding: 8px 10px !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    font-size: 0.95rem !important;
    color: #222 !important;
}

#histImanList .row-label { font-weight:700 !important; }

#histImanList .type-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:middle; }
#histImanList .type-dot.player { background:#0b72d9 !important; }
#histImanList .type-dot.banker { background:#c62828 !important; }
#histImanList .type-dot.tie { background:#d39e00 !important; }

#histImanList td.num.player { color: #0b72d9 !important; font-weight:700 !important; }
#histImanList td.num.banker { color: #c62828 !important; font-weight:700 !important; }
#histImanList td.num.tie { color: #d39e00 !important; font-weight:700 !important; }

#histImanList .pct { color:#666 !important; font-weight:700 !important; }

/* small flash animation when updated */
#histImanList.hist-flash { animation: histFlash 850ms ease-in-out; }
@keyframes histFlash {
    0% { transform: translateY(-4px); opacity: 0.95; }
    50% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-1px); opacity: 0.98; }
}

/* Responsivo */
@media (max-width: 900px) {
    .top-stats-and-predictions { flex-direction: column; }
    .predictions-card { width: 100%; max-width: 100%; }
    .top-stats { justify-content: space-between; }
}

@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;
    }
    .pattern-validator {
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
    }
    .container {
        max-width: 100%;
    }
    .filter-group {
        min-width: 100%;
    }
    .chart-item {
        min-width: 100%;
    }
    .nav-list {
        flex-direction: column;
        align-items: center;
    }
    .nav-item {
        margin: 10px 0;
    }
    .user-dropdown .dropdown-menu {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
    .pagination {
        gap: 2px;
    }
    
    .page-link,
    .page-current {
        padding: 6px 8px;
        font-size: 12px;
        min-width: 30px;
    }
    
    .pagination-info {
        font-size: 12px;
    }
}

/* Ajustes para telas muito pequenas */
@media (max-width: 480px) {
    .container {
        padding: 5px;
    }
    
    header h1 {
        font-size: 16px;
    }
    
    #timer {
        font-size: 14px;
    }
    
    .stat-box {
        padding: 10px 6px;
    }
    
    .stat-value {
        font-size: 1.3em;
    }
    
    table {
        font-size: 0.8em;
        min-width: 500px;
    }
    
    th, td {
        padding: 6px 3px;
    }
    
    .trend-chart-container {
        padding: 10px;
    }
    
    .chart-wrapper {
        height: 200px;
    }
    
    .nav-item a {
        padding: 6px 8px;
        font-size: 0.8em;
    }
}

/* Fix para força de scroll horizontal em tabelas */
.table-container {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Garante que elementos não quebrem o layout */
* {
    box-sizing: border-box;
}

.results-container,
.trend-chart-container,
.stats-container {
    max-width: 100%;
    overflow: hidden;
}

/* Tooltip para informações dos resultados */
.result-tooltip {
    position: absolute;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border: 2px solid #3498db;
    border-radius: 12px;
    padding: 16px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    min-width: 280px;
    pointer-events: none;
}

.result-tooltip.show {
    opacity: 1;
    visibility: visible;
}

.result-tooltip-header {
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.result-tooltip-datetime {
    font-size: 13px;
    color: #bdc3c7;
    margin-bottom: 4px;
}

.result-tooltip-winner {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
}

.result-tooltip-winner.player {
    color: #3498db;
}

.result-tooltip-winner.banker {
    color: #e74c3c;
}

.result-tooltip-winner.tie {
    color: #f1c40f;
}

.result-tooltip-dice {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.dice-section {
    flex: 0 0 auto;
    text-align: center;
}

.dice-label {
    font-size: 12px;
    color: #bdc3c7;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dice-container {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 4px;
}

.dice-face {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* Dados do Player - Azul mais vibrante */
.dice-section.player .dice-face {
    background: linear-gradient(135deg, #5dade2, #3498db, #2980b9);
    border: 2px solid #1f4e79;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

/* Dados do Banker - Vermelho mais vibrante */
.dice-section.banker .dice-face {
    background: linear-gradient(135deg, #ec7063, #e74c3c, #c0392b);
    border: 2px solid #922b21;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}

/* Container para os pontos dos dados */
.dice-dots {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 2px;
    padding: 4px;
}

/* Pontos individuais dos dados */
.dice-dot {
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 50%;
    margin: auto;
    opacity: 0;
}

/* Visibilidade dos pontos baseada no valor */
.dice-dots.value-1 .dot-center { opacity: 1; }

.dice-dots.value-2 .dot-top-left,
.dice-dots.value-2 .dot-bottom-right { opacity: 1; }

.dice-dots.value-3 .dot-top-left,
.dice-dots.value-3 .dot-center,
.dice-dots.value-3 .dot-bottom-right { opacity: 1; }

.dice-dots.value-4 .dot-top-left,
.dice-dots.value-4 .dot-top-right,
.dice-dots.value-4 .dot-bottom-left,
.dice-dots.value-4 .dot-bottom-right { opacity: 1; }

.dice-dots.value-5 .dot-top-left,
.dice-dots.value-5 .dot-top-right,
.dice-dots.value-5 .dot-center,
.dice-dots.value-5 .dot-bottom-left,
.dice-dots.value-5 .dot-bottom-right { opacity: 1; }

.dice-dots.value-6 .dot-top-left,
.dice-dots.value-6 .dot-top-right,
.dice-dots.value-6 .dot-middle-left,
.dice-dots.value-6 .dot-middle-right,
.dice-dots.value-6 .dot-bottom-left,
.dice-dots.value-6 .dot-bottom-right { opacity: 1; }

.dice-total {
    font-size: 13px;
    color: #ecf0f1;
    font-weight: 600;
}

/* Responsivo para mobile */
@media (max-width: 768px) {
    .result-tooltip {
        min-width: 260px;
        padding: 14px;
        font-size: 13px;
    }
    
    .dice-face {
        width: 36px;
        height: 36px;
    }
    
    .dice-dot {
        width: 5px;
        height: 5px;
    }
    
    .result-tooltip-winner {
        font-size: 15px;
    }
}

/* Modo escuro para tooltip */
body.dark-mode .result-tooltip {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    border-color: #3498db;
}

/* Mantém as cores dos dados iguais no modo escuro */
body.dark-mode .dice-section.player .dice-face {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

body.dark-mode .dice-section.banker .dice-face {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

/* ESTILOS PARA RECOMENDAÇÕES AVANÇADAS - DESTAQUE MAIOR */
.recommendation {
    font-size: 1.1em;
    font-weight: bold;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: 8px;
    text-align: center;
    border: 2px solid;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: pulse 2s infinite;
}

.recommendation.strong {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    border-color: #27ae60;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.4);
}

.recommendation.warning {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    border-color: #f39c12;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
}

.recommendation.caution {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    color: white;
    border-color: #95a5a6;
    box-shadow: 0 4px 15px rgba(149, 165, 166, 0.4);
}

.recommendation.normal {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border-color: #3498db;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
}

/* Recommendation pills */
.recommendation-pill {
    padding: 8px 12px;
    border-radius: 18px;
    font-weight: 700;
    font-size: 0.9em;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.recommendation-pill.avoid { background: linear-gradient(90deg,#dc3545,#c82333); color: #fff; }
.recommendation-pill.lowconfidence { background: linear-gradient(90deg,#6c757d,#5a6268); color: #fff; }

/* Último resultado refinado */
.last-result-box { display:flex; flex-direction:column; align-items:center; gap:6px; }
.last-result-number { font-size: 2.4em; font-weight:900; padding:6px 12px; border-radius:10px; background:linear-gradient(135deg,#f8f9fb,#e9f1ff); box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.last-result-stats { font-size:0.85em; color:#55606a; }

/* Pequenos refinamentos globais */
.predictions-card .card-controls .refresh-btn { padding:6px 8px; }
.predictions-card .card-controls .auto-update-indicator { font-size:0.78em; }

/* ===== ESTILOS PARA DESTINOS DO PADRÃO ===== */
.destination-section {
    margin: 20px 0;
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.destination-title {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.destination-options {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 10px;
}

.destination-option {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.destination-option:hover {
    background: #e8f4f8;
    border-color: #007bff;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.15);
}

.destination-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 12px;
    cursor: pointer;
    accent-color: #007bff;
}

.destination-option-info {
    flex: 1;
}

.destination-option-name {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    font-size: 14px;
}

.destination-option-type {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 3px;
    display: inline-block;
    font-weight: 500;
}

.destination-option-type.personal {
    background: #e3f2fd;
    color: #007bff;
}

.destination-option-type.group {
    background: #e8f5e9;
    color: #28a745;
}

.destination-option-type.channel {
    background: #f5f5f5;
    color: #6c757d;
}

.destination-loading {
    text-align: center;
    color: #999;
    padding: 15px;
    font-size: 13px;
}

.destination-hint {
    display: block;
    margin-top: 8px;
    color: #666;
    font-size: 12px;
    line-height: 1.4;
}

.destination-hint a {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
}

.destination-hint a:hover {
    text-decoration: underline;
}

/* ===== PATTERN HIGHLIGHTING STYLES ===== */

/**
 * Pattern Match - Result casas that are part of the pattern sequence
 * Keep normal colors (blue/red/yellow) but clear border to indicate selection
 */
.result-box.pattern-match {
    border: 2px solid currentColor !important;
    opacity: 1 !important;
    filter: none !important;
}

body.dark-mode .result-box.pattern-match {
    border: 2px solid currentColor !important;
    opacity: 1 !important;
    filter: none !important;
}

/**
 * Entry Delay Ofuscate - Result casas in the entry delay window
 * Shown with GRAY appearance
 */
.result-box.entry-delay-ofuscate {
    opacity: 0.5 !important;
    filter: grayscale(100%) !important;
    border-color: #999 !important;
}

body.dark-mode .result-box.entry-delay-ofuscate {
    opacity: 0.5 !important;
    filter: grayscale(100%) brightness(0.8) !important;
    border-color: #555 !important;
}

/**
 * Entry Point - Result casas that match the entry color (or are TIE/protection)
 * Shown with bright GREEN highlight (success indicator)
 */
.result-box.entry-point {
    border: 3px solid #00ff00 !important;
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.9), inset 0 0 6px rgba(0, 255, 0, 0.3) !important;
    filter: brightness(1.25) !important;
    opacity: 1 !important;
}

body.dark-mode .result-box.entry-point {
    border: 3px solid #00ff00 !important;
    box-shadow: 0 0 14px rgba(0, 255, 0, 0.95), inset 0 0 8px rgba(0, 255, 0, 0.4) !important;
    filter: brightness(1.35) !important;
}

/**
 * Non-pattern cells - All other cells not part of the pattern/delay/entry
 * Applied as 60% blur/defocus effect
 */
.result-box.pattern-blur {
    opacity: 0.4 !important;
    filter: blur(2px) brightness(0.7) !important;
    pointer-events: none !important;
}

body.dark-mode .result-box.pattern-blur {
    opacity: 0.35 !important;
    filter: blur(2px) brightness(0.6) !important;
    pointer-events: none !important;
}

/**
 * Entry Point - G0 (first casa after entry delay)
 * Deprecated - No longer used. Entry points are highlighted uniformly in green.
 */
/* .result-box.entry-g0 { ... } */

/**
 * Entry Point - G1 (second casa after entry delay)
 * Deprecated - No longer used. Entry points are highlighted uniformly in green.
 */
/* .result-box.entry-g1 { ... } */

/**
 * Entry Point - G2 (third casa after entry delay)
 * Deprecated - No longer used. Entry points are highlighted uniformly in green.
 */
/* .result-box.entry-g2 { ... } */

/* Ensure pattern highlighting takes precedence over other styles */
.result-box.pattern-match,
.result-box.entry-delay-ofuscate,
.result-box.entry-point,
.result-box.entry-g0,
.result-box.entry-g1,
.result-box.entry-g2 {
    transition: all 0.3s ease;
}