/* ==============================================================================
   tototippek.hu - Tippek és Szelvényépítő specifikus stílusok
   ============================================================================== */

/* Kétoszlopos elrendezés */
.toto-tippek-layout {
    display: block;
    max-width: 920px;
    margin: 25px auto 80px auto;
}

.matches-list-column {
    width: 100%;
    min-width: 0;
}

/* Középső Predikciós Zóna (Kör alakú) */
.predictions-gated-wrapper {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.predictions-gated-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 12px;
    bottom: 10px;
    width: 1px;
    background-color: var(--border-color);
}

.match-center-predictions-area {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0 8px 0;
    width: 100%;
    min-width: 0;
}

/* 3 kör alakú AI predikció elrendezés */
.ai-prediction-circles-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ai-circle-item {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-ring-mini {
    transform: rotate(-90deg);
}

.progress-ring__circle {
    transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Egyedi színkódok a körökhöz */
.ai-circle-item.outcome-1 .progress-ring__circle {
    stroke: var(--accent); /* Zöld */
    filter: drop-shadow(0 0 4px rgba(124, 194, 69, 0.35));
}
.ai-circle-item.outcome-x .progress-ring__circle {
    stroke: #f59e0b; /* Arany/Sárga */
    filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.25));
}
.ai-circle-item.outcome-2 .progress-ring__circle {
    stroke: var(--primary); /* Kék */
    filter: drop-shadow(0 0 4px rgba(0, 163, 224, 0.35));
}

.ai-circle-content-mini {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ai-outcome-mini {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    color: #FFFFFF;
}

.ai-percent-mini {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 1px;
}

/* Gated Blur & Lakat Overlay 3 körhöz */
.predictions-gated-wrapper.gated .match-center-predictions-area {
    filter: blur(4px);
    opacity: 0.3;
    pointer-events: none;
}

.predictions-lock-overlay-circles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
    background: rgba(9, 20, 31, 0.2);
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 10;
    border-radius: var(--border-radius-sm);
}

.predictions-lock-overlay-circles:hover {
    color: var(--primary-glow);
    background: rgba(0, 163, 224, 0.05);
}

.predictions-lock-overlay-circles i {
    font-size: 12px;
}

/* Lebegő Szelvény Panel */
.floating-ticket-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
    height: auto;
    min-height: 76px;
    padding-top: 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: rgba(10, 18, 26, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
    z-index: 1000;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
}

.floating-ticket-bar.active {
    transform: translateY(0);
}

.ticket-bar-container {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ticket-info-side {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ticket-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 163, 224, 0.15);
    border: 1px solid rgba(0, 163, 224, 0.3);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 0 10px rgba(0, 163, 224, 0.1);
}

.ticket-meta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ticket-summary-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.ticket-summary-details {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

.ticket-actions-side {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-glow {
    box-shadow: 0 0 12px rgba(0, 163, 224, 0.4);
}
.btn-glow:hover {
    box-shadow: 0 0 16px rgba(0, 163, 224, 0.6);
}

/* Költségszámítás box */
.cost-summary-box {
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.cost-lbl {
    color: var(--text-muted);
}

.cost-val {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
}

.cost-row.highlight {
    font-size: 15px;
    font-weight: 700;
    border-top: 1px dashed var(--border-color);
    padding-top: 10px;
    margin-top: 4px;
}

.cost-row.highlight .cost-val {
    font-size: 18px;
}

/* Kiemelt gomb */
.btn-accent {
    background-color: var(--accent);
    color: var(--text-dark);
}

.btn-accent:hover {
    background-color: var(--accent-hover);
    color: var(--text-dark);
}

/* Accordion mérkőzés sor */
.analysis-accordion-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    margin-bottom: 12px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}


.analysis-accordion-card.open {
    border-color: var(--primary) !important;
}

.accordion-header {
    padding: 0;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1.4fr 150px 180px auto;
    align-items: center;
    transition: background-color var(--transition-fast);
    width: 100%;
}

.accordion-header:hover {
    background-color: var(--bg-card-hover);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: rgba(9, 20, 31, 0.4);
}

.analysis-accordion-card.open .accordion-content {
    border-top: 1px solid var(--border-color);
}

/* Csapat címerek és nevek elrendezése */
.match-left-info-area {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    align-self: stretch;
    padding: 10px 20px 8px 24px;
    position: relative;
}

.match-left-info-area::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10px;
    bottom: 8px;
    width: 1px;
    background-color: var(--border-color);
}

.match-teams-center-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex-grow: 1;
    gap: 4px;
    min-width: 0;
}

.match-teams-center {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
    min-width: 0;
}

.team-home {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.team-home .team-name {
    text-align: right;
}

.team-away {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.team-away .team-name {
    text-align: left;
}

.team-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    white-space: normal;
    flex-grow: 1;
}

.team-crest {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    flex-shrink: 0;
}

.match-separator {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 10px;
    text-align: center;
}

.match-league-name {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.match-number-huge {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    color: #FFFFFF;
    text-align: center;
    display: inline-block;
    flex-shrink: 0;
}

.match-num-divider {
    width: 1px;
    height: 16px;
    background-color: var(--border-color);
    flex-shrink: 0;
}

/* Kimenetel szelektor (1 X 2 körök) */
.match-right-odds-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: stretch;
    padding: 10px 24px 8px 20px;
}

.coupon-odds-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 160px;
}

.coupon-odds-header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.coupon-odds-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    align-items: center;
    justify-items: center;
}

.odds-btn-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.odds-val-under {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
}

.odds-stat-under {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 1px;
    line-height: 1;
}

.odds-stat-under i {
    font-size: 8px;
}

.ai-val {
    color: var(--primary);
}

.community-val {
    color: var(--accent);
}

.locked-val {
    color: var(--text-muted);
    font-size: 7px;
    opacity: 0.5;
}

.odds-select-btn {
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    background: rgba(18, 27, 45, 0.6);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.odds-select-btn:hover {
    background-color: var(--primary-glow);
    border-color: var(--primary);
    color: var(--primary);
}

.odds-select-btn.active {
    font-weight: 800;
}
.odds-select-btn.active[data-outcome="1"] {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--text-dark) !important;
    box-shadow: 0 0 12px rgba(124, 194, 69, 0.4);
}
.odds-select-btn.active[data-outcome="X"] {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: var(--text-dark) !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}
.odds-select-btn.active[data-outcome="2"] {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(0, 163, 224, 0.4);
}

.match-chevron-area {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px 8px 24px;
    align-self: stretch;
    color: var(--text-muted);
}

.acc-icon {
    transition: transform var(--transition-fast);
}

.analysis-accordion-card.open .acc-icon {
    transform: rotate(180deg);
}

/* Lenyíló részletes infók (Függőlegesen tagolt elrendezés) */
.analysis-details-layout {
    padding: 24px 32px;
    background-color: rgba(9, 20, 31, 0.35);
    display: flex;
    flex-direction: column;
}

.analysis-section {
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.analysis-section:first-child {
    padding-top: 0;
}

.analysis-section:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.analysis-section h4 {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 24px;
    letter-spacing: 1px;
    line-height: 1.2;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.analysis-section h4::before {
    content: '';
    height: 1px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
    flex-grow: 1;
}

.analysis-section h4::after {
    content: '';
    height: 1px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.15), transparent);
    flex-grow: 1;
}

.section-sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.section-sub-grid.align-center {
    align-items: center;
}

.stat-block {
    min-width: 0;
}

.sub-title-details {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 12px;
}

.team-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.form-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.80);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.form-boxes {
    display: flex;
    gap: 4px;
}

.form-box {
    width: 22px;
    height: 22px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.form-box:hover {
    transform: scale(1.08);
}

.form-box.win { background-color: var(--accent); color: var(--text-dark); }
.form-box.draw { background-color: rgba(148, 163, 184, 0.12); color: var(--text-muted); border: 1px solid var(--border-color); }
.form-box.loss { background-color: var(--danger); color: #fff; }

.stat-section-sub-h2h {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
    margin-top: 20px;
}

.stats-summary-text {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* H2H matches list */
.h2h-matches-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.h2h-match-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
    padding: 2px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.03);
}

.h2h-match-row:last-child {
    border-bottom: none;
}

.h2h-date {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 11px;
    width: 80px;
    flex-shrink: 0;
}

.h2h-teams {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    flex-grow: 1;
    margin-right: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.h2h-score {
    font-family: var(--font-mono);
    font-weight: 700;
    color: #FFFFFF;
    margin-right: 16px;
    width: 40px;
    text-align: right;
}

.h2h-outcome {
    width: 20px;
    height: 20px;
    font-size: 10px;
    font-weight: 800;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex-shrink: 0;
}

.h2h-outcome.outcome-1 { background-color: var(--accent); }
.h2h-outcome.outcome-x { background-color: #f59e0b; }
.h2h-outcome.outcome-2 { background-color: var(--primary); }

.dist-segment {
    height: 100%;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 9.5px;
    font-family: var(--font-mono);
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
    white-space: nowrap;
}

.dist-1 { background-color: var(--accent); }
.dist-x { background-color: #f59e0b; }
.dist-2 { background-color: var(--primary); }

/* Közösségi Szavazás */
.votes-total-info {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.votes-total-info strong {
    color: var(--primary);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
}

.vote-distribution-bar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vote-distribution-bar {
    height: 18px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    background-color: rgba(255, 255, 255, 0.05);
}

.vote-detailed-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vote-detailed-item {
    display: flex;
    align-items: center;
    font-size: 12px;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.03);
    padding: 8px 12px;
    border-radius: 8px;
    transition: background-color var(--transition-fast);
}

.vote-detailed-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.vote-outcome-badge {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #FFFFFF;
    flex-shrink: 0;
}
.vote-outcome-badge.outcome-1 { background-color: var(--accent); }
.vote-outcome-badge.outcome-x { background-color: #f59e0b; }
.vote-outcome-badge.outcome-2 { background-color: var(--primary); }

.vote-outcome-label {
    color: rgba(255, 255, 255, 0.7);
    flex-grow: 1;
    margin-left: 10px;
    font-weight: 500;
}

.vote-outcome-val {
    font-family: var(--font-mono);
    font-weight: 700;
    color: #FFFFFF;
    font-size: 12.5px;
}

.vote-locked-placeholder {
    background-color: rgba(9, 20, 31, 0.4);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    color: var(--primary);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
    font-size: 11px;
    line-height: 1.4;
}

.vote-locked-placeholder:hover {
    border-color: var(--primary);
    background-color: rgba(0, 163, 224, 0.04);
}

.vote-locked-placeholder-wide {
    background-color: rgba(9, 20, 31, 0.4);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    color: var(--primary);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
    font-size: 12px;
    max-width: 480px;
    margin: 0 auto;
}

.vote-locked-placeholder-wide:hover {
    border-color: var(--primary);
    background-color: rgba(0, 163, 224, 0.04);
}

.analysis-text {
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.analysis-text strong {
    color: #FFFFFF;
    font-weight: 700;
}

.gated-analysis-wrapper {
    position: relative;
}

.analysis-text-preview {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-muted);
    filter: blur(3px);
    opacity: 0.5;
    user-select: none;
}

.analysis-blur-fade {
    position: absolute;
    bottom: 58px;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--bg-card));
    pointer-events: none;
}

.accordion-footer-actions {
    padding: 12px 24px;
    background-color: rgba(9, 20, 31, 0.4);
    border-top: 1px solid var(--border-color);
    text-align: right;
}

/* Redukciós Eredmények szekció */
.reduction-results-section {
    margin-top: 30px;
    clear: both;
}

.results-output-card {
    padding: 24px;
}

.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.output-header h2 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.text-green { color: var(--accent); }
.text-blue { color: var(--primary); }

.output-actions {
    display: flex;
    gap: 10px;
}

.columns-output-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.output-column {
    background-color: rgba(9, 20, 31, 0.4);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 12px;
}

.output-column h5 {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.col-digits {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.col-digit-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    border-bottom: 1px dashed rgba(255,255,255,0.04);
    padding-bottom: 2px;
}

.col-digit-item:last-child {
    border-bottom: none;
}

.col-digit-item .m-nr {
    color: var(--text-muted);
    font-weight: 600;
}

.col-digit-item strong {
    font-family: var(--font-mono);
    font-weight: 700;
}

.col-digit-item.outcome-1 strong { color: var(--accent); }
.col-digit-item.outcome-x strong { color: var(--warning); }
.col-digit-item.outcome-2 strong { color: var(--primary); }

.more-columns-card {
    background-color: rgba(9, 20, 31, 0.2);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    gap: 8px;
}

.more-columns-card i {
    font-size: 20px;
    color: var(--text-muted);
}

.more-columns-card p {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}

.reduction-saving-notice {
    margin-top: 20px;
    background-color: rgba(0, 163, 224, 0.05);
    border: 1px solid rgba(0, 163, 224, 0.15);
    border-radius: 6px;
    padding: 12px;
    font-size: 12px;
    text-align: center;
}

/* Forduló banner stílusok */
.round-info-banner-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 24px;
    text-align: center;
    gap: 12px;
}

.round-title-block-center {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    width: 100%;
    max-width: 400px;
}

.round-year-week-full-center {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
}

.round-details-grid-center {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.detail-item-center {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-label-center {
    font-size: 13px;
    color: var(--text-muted);
}

.detail-value-center {
    font-size: 14px;
    font-weight: 600;
}

.gold-text {
    color: var(--warning);
}

/* Lebegő mobil sáv és fiók stílusok */
.mobile-coupon-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(19, 30, 37, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 2px solid var(--border-color);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.5);
    z-index: 990;
    padding: 12px 16px;
}

.mobile-bar-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-bar-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
}

.m-bar-costwarning {
    color: var(--accent);
}

.m-bar-divider {
    color: var(--border-color);
}

/* Mobil fiók stílusok */
.mobile-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(3, 5, 8, 0.7);
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.mobile-drawer-content {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 85vh;
    background-color: var(--bg-card);
    border-top: 2px solid var(--border-color);
    border-radius: 16px 16px 0 0;
    z-index: 1002;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.1, 0.76, 0.55, 0.94);
    padding: 20px;
    overflow-y: auto;
}

.mobile-drawer-overlay.open + .mobile-drawer-content,
.mobile-drawer-overlay.open ~ .mobile-drawer-content {
    transform: translateY(0);
}

.drawer-drag-handle {
    width: 40px;
    height: 4px;
    background-color: var(--border-color);
    border-radius: 2px;
    margin: -10px auto 16px auto;
}

.drawer-close-btn {
    position: absolute;
    top: 14px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
}

/* Regisztrációs Modal */
.reg-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(3, 5, 8, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: flex-start; /* Centering helper for scrollable containers */
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    overflow-y: auto; /* Allow scrolling when modal height exceeds viewport */
    padding: 40px 0; /* Breathing room at top/bottom when scrolling */
}

.reg-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.reg-modal-card {
    width: 90%;
    max-width: 450px;
    position: relative;
    animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    background-color: var(--bg-card);
    border-color: var(--border-color);
    padding: 40px 32px;
    margin: auto; /* Vertically centers the modal card when it fits, and respects scrolling when it overflows */
}

@keyframes modalSlideIn {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.reg-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 28px;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.reg-modal-close:hover {
    color: var(--text-main);
}

/* Responsiveness / Mobil nézet */
@media (max-width: 991px) {
    .toto-tippek-layout {
        max-width: 100%;
        padding: 0 16px;
    }

    .accordion-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px 10px;
    }
    
    .match-left-info-area {
        width: 100%;
        padding: 0 0 6px 0 !important;
        align-self: auto;
        gap: 6px;
        flex-direction: column;
        align-items: center;
    }

    .match-teams-center-container {
        width: 100%;
    }


    .match-num-divider {
        display: none !important;
    }

    .match-league-name {
        text-align: center;
    }

    .match-number-huge {
        font-family: var(--font-heading);
        font-size: 15px;
        font-weight: 800;
        color: #FFFFFF;
        text-align: center;
        display: inline-block;
        background: none !important;
        border: none !important;
        padding: 0 !important;
    }
    
    .match-number-huge::before {
        display: none !important;
    }

    .match-teams-center {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 8px;
    }
    
    .team-home {
        flex-direction: row;
        justify-content: flex-end;
        width: 45%;
    }
    
    .team-home .team-name {
        text-align: right;
    }
    
    .team-away {
        flex-direction: row;
        justify-content: flex-start;
        width: 45%;
    }
    
    .match-separator {
        display: inline-block;
        font-size: 12px;
        color: var(--text-muted);
    }

    .team-name {
        font-size: 13px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    .match-left-info-area::after {
        display: none !important;
    }
    
    .predictions-gated-wrapper {
        width: 100%;
        padding: 4px 0 !important;
        align-self: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .predictions-gated-wrapper::after {
        display: none !important;
    }
    
    .match-center-predictions-area {
        padding: 0;
    }
    
    .match-right-odds-area {
        width: 100%;
        justify-content: center;
        border-top: 1px dashed var(--border-color);
        padding: 10px 0 0 0 !important;
        align-self: auto;
    }
    
    .coupon-odds-selector {
        max-width: 100%;
    }
    
    .coupon-odds-row {
        justify-content: center;
        gap: 20px;
    }
    
    .analysis-details-layout {
        padding: 16px;
    }
    
    .analysis-section {
        padding: 20px 0;
    }
    
    .section-sub-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Forduló banner reszponzív igazítása */
    .round-info-banner-center {
        padding: 16px 12px;
        gap: 10px;
    }

    .round-year-week-full-center {
        font-size: 18px;
    }

    .round-details-grid-center {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .detail-item-center {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        flex-wrap: wrap;
    }

    .detail-label-center {
        font-size: 12px;
    }

    .detail-value-center {
        font-size: 13px;
    }

    /* Modal adjustments on mobile/tablet */
    .reg-modal-card {
        padding: 30px 20px;
        width: 92%;
    }

    .reg-modal-card .social-login-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .toto-tippek-layout {
        padding: 0 8px;
    }
}

@media (max-width: 480px) {
    .floating-ticket-bar {
        height: auto;
        min-height: 80px;
        padding-top: 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    
    .ticket-bar-container {
        padding: 0 16px;
        flex-direction: column;
        gap: 8px;
        justify-content: center;
        align-items: stretch;
    }
    
    .ticket-info-side {
        justify-content: center;
    }
    
    .ticket-icon-circle {
        display: none;
    }
    
    .ticket-meta-text {
        align-items: center;
    }
    
    .ticket-summary-title {
        font-size: 12px;
    }
    
    .ticket-summary-details {
        font-size: 11px;
    }
    
    .ticket-actions-side {
        justify-content: center;
        gap: 8px;
    }
    
    .ticket-actions-side button, .ticket-actions-side a {
        flex: 1;
        text-align: center;
        font-size: 11px;
        padding: 6px 8px;
    }
}

.ticket-stats-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.ticket-stat-pill {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-weight: 600;
}

.ticket-stat-pill.success-pill {
    border-color: rgba(124, 194, 69, 0.4);
    color: var(--accent);
    background-color: rgba(124, 194, 69, 0.05);
}

.ticket-stat-pill.danger-pill {
    border-color: rgba(239, 68, 68, 0.4);
    color: var(--danger);
    background-color: rgba(239, 68, 68, 0.05);
}

.odds-select-btn.odds-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.odds-select-btn.odds-disabled:hover {
    background-color: rgba(18, 27, 45, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
}

#saveTicketBtn:disabled, .btn-primary:disabled {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Kijelölt pótmérkőzések (egymás alatt, kevésbé hangsúlyosan) */
.backup-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.backup-row-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    font-size: 13px;
    transition: background-color var(--transition-fast);
}

.backup-row-item:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.backup-row-item.cancelled {
    opacity: 0.5;
}

.backup-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.backup-num-badge {
    background-color: rgba(255, 255, 255, 0.07);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 32px;
    text-align: center;
}

.backup-teams-text {
    font-weight: 600;
    color: var(--text-main);
}

.backup-date-text {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.backup-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.backup-status-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background-color: rgba(255, 255, 255, 0.04);
    padding: 2px 8px;
    border-radius: 4px;
}

.backup-status-badge.cancelled {
    color: var(--danger);
    background-color: rgba(239, 68, 68, 0.1);
}

.backup-status-badge.live {
    color: var(--primary);
    background-color: rgba(59, 130, 246, 0.1);
}

.backup-status-badge.finished {
    color: var(--accent);
    background-color: rgba(124, 194, 69, 0.1);
}

.backup-score-val {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 48px;
    text-align: center;
}
/* Globális reszponzív túlcsordulás elleni védelem */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* 1. Konténer és Fő elrendezés */
.toto-tippek-container-uj {
    max-width: 980px;
    margin: 20px auto 120px auto;
    padding: 0 20px;
}

.toto-tippek-header-uj {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.toto-tippek-header-uj::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent) 0%, var(--primary) 100%);
}

.header-meta-row-uj {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--border-color);
}

.meta-item-uj {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--text-muted);
}

.meta-item-uj strong {
    color: #FFFFFF;
}

/* 2. Mérkőzés Kártyák (Match Cards) - Egységes Szelvény Kártya Megjelenés */
.matches-list-uj {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.match-card-uj {
    background-color: transparent;
    transition: background-color var(--transition-normal);
}

/* Váltakozó sávszínezés a meccsek elválasztására belső keretek nélkül */
.match-card-uj:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.015);
}

.match-card-uj:hover {
    background-color: rgba(255, 255, 255, 0.035);
}

.match-card-uj.expanded {
    background-color: rgba(0, 0, 0, 0.2);
}

.match-header-row-uj {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px;
    cursor: pointer;
    user-select: none;
    gap: 12px;
}

/* Bal oldal: Sorszám & Csapatnevek logóval, Bajnokság (Éles oldal stílusok) */
.match-left-info-area-uj {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    min-width: 0;
    align-self: stretch;
    position: relative;
    padding: 0 !important;
}

.match-number-huge {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    color: #FFFFFF;
    text-align: center;
    display: inline-block;
    flex-shrink: 0;
    width: 24px;
}

.match-num-divider-uj {
    width: 1px;
    height: 24px;
    background-color: var(--border-color);
    flex-shrink: 0;
}

.match-teams-center-container-uj {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex-grow: 1;
    gap: 4px;
    min-width: 0;
}

.match-teams-center-uj {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
    min-width: 0;
}

.team-home-uj {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.team-home-uj .team-name-uj {
    text-align: right;
}

.team-away-uj {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.team-away-uj .team-name-uj {
    text-align: left;
}

.team-name-uj {
    font-size: 14.5px;
    font-weight: 700;
    color: #FFFFFF;
    white-space: normal;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-crest-uj {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    flex-shrink: 0;
}

.match-separator-uj {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 10px;
    text-align: center;
}

.match-league-name-uj {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Középső rész: Asztali kör alakú AI predikciók (Progress Rings) */
.match-ai-circles-uj {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-prediction-circles-grid {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ai-circle-item {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-ring-mini {
    transform: rotate(-90deg);
}

.progress-ring__circle {
    transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Egyedi színkódok és izzás a körökhöz a tippek_uj koncepcióban */
.ai-circle-item.outcome-1 .progress-ring__circle {
    stroke: var(--accent); /* Zöld */
    filter: drop-shadow(0 0 4px rgba(124, 194, 69, 0.35));
}
.ai-circle-item.outcome-x .progress-ring__circle {
    stroke: var(--warning); /* Arany */
    filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.25));
}
.ai-circle-item.outcome-2 .progress-ring__circle {
    stroke: var(--primary); /* Kék */
    filter: drop-shadow(0 0 4px rgba(0, 163, 224, 0.35));
}

.ai-circle-content-mini {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ai-outcome-mini {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    color: #FFFFFF;
}

.ai-percent-mini {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 1px;
}

/* Középső rész: Horizontális AI Esélysáv (Bento stílusú elem) */
.match-ai-bar-area-uj {
    width: 200px;
    flex-shrink: 0;
    display: none; /* Rejtve asztali nézetben, körök jelennek meg helyette */
    flex-direction: column;
    gap: 6px;
}

.ai-bar-title-uj {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.ai-bar-title-uj strong {
    color: var(--primary);
}

.ai-segmented-bar-uj {
    height: 18px;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    font-size: 9px;
    font-family: var(--font-mono);
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.ai-segment-uj {
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    overflow: hidden;
}

.ai-segment-uj.outcome-1 {
    background: linear-gradient(90deg, rgba(124, 194, 69, 0.8) 0%, rgba(102, 163, 52, 0.8) 100%);
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.ai-segment-uj.outcome-x {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.8) 0%, rgba(217, 137, 6, 0.8) 100%);
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.ai-segment-uj.outcome-2 {
    background: linear-gradient(90deg, rgba(0, 163, 224, 0.8) 0%, rgba(0, 130, 179, 0.8) 100%);
}

/* Gated / Zárolt nézet az AI predikciókhoz és kinyitóhoz */
.match-ai-circles-container-uj, .match-ai-bar-container-uj {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.match-ai-circles-container-uj {
    width: 152px;
    height: 44px;
    flex-shrink: 0;
}

.match-ai-bar-container-uj {
    width: 200px;
    flex-shrink: 0;
    display: none;
}

.ai-gated-overlay-uj {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(9, 20, 31, 0.82);
    border-radius: inherit;
    color: var(--primary); /* Kék szövegszín */
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    gap: 4px;
    z-index: 5;
    border: 1px solid rgba(0, 163, 224, 0.35); /* Kék keret */
    cursor: pointer;
    backdrop-filter: blur(2.5px);
    transition: all var(--transition-fast);
}

.ai-gated-overlay-uj:hover {
    background: rgba(9, 20, 31, 0.9);
    border-color: rgba(0, 163, 224, 0.55);
    color: #00b4ff;
}

.ai-gated-overlay-uj i {
    font-size: 14px;
    color: var(--primary); /* Kék lakat ikon */
    filter: drop-shadow(0 0 4px rgba(0, 163, 224, 0.4));
}

.gated-uj {
    filter: blur(2.5px) !important; /* Kisebb blur, hogy látszódjon a sáv körvonala */
    opacity: 0.45 !important; /* Nagyobb opacity a jobb kontrasztért */
    pointer-events: none !important;
    user-select: none !important;
}

.gated-chevron-uj {
    opacity: 0.4;
    cursor: not-allowed;
}

.match-ai-divider-uj {
    width: 1px;
    height: 28px;
    background-color: var(--border-color);
    flex-shrink: 0;
    opacity: 0.6;
}

@media (max-width: 768px) {
    .match-ai-divider-uj {
        display: none;
    }
}

/* Jobb oldal: 1-X-2 Odds választó gombok */
.match-right-odds-uj {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.odds-selector-row-uj {
    display: grid !important;
    grid-template-columns: repeat(3, 55px) !important;
    gap: 6px !important;
    flex-direction: row !important;
    max-width: none !important;
    width: auto !important;
}

.odds-btn-wrapper-uj {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.tip-btn-uj {
    width: 100% !important;
    height: 38px !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13.5px;
    border-radius: 6px !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.tip-btn-uj:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}

.tip-btn-uj:active {
    transform: scale(0.96);
}

/* Aktív gomb állapotok a kimenet színezéseivel */
.tip-btn-uj.active[data-outcome="1"] {
    background-color: rgba(124, 194, 69, 0.15) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    box-shadow: 0 0 10px rgba(124, 194, 69, 0.15) !important;
}

.tip-btn-uj.active[data-outcome="X"] {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: var(--warning) !important;
    color: var(--warning) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.15) !important;
}

.tip-btn-uj.active[data-outcome="2"] {
    background-color: rgba(0, 163, 224, 0.15) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    box-shadow: 0 0 10px rgba(0, 163, 224, 0.15) !important;
}

.odds-value-label-uj {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

/* Chevron nyitó gomb */
.match-chevron-btn-uj {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border-radius: 50%;
    transition: transform var(--transition-normal), color var(--transition-fast);
    flex-shrink: 0 !important;
    margin-left: 8px;
}

.match-card-uj.expanded .match-chevron-btn-uj {
    transform: rotate(180deg);
    color: #FFFFFF;
}

/* 3. Lenyíló Accordion Elemek (Accordion Details) */
.accordion-content-uj {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    background-color: rgba(0, 0, 0, 0.3);
}

.match-card-uj.expanded .accordion-content-uj {
    max-height: 1500px; /* Növelt magasság, hogy mobilnézetben se takarja el az elemzést */
}

.accordion-details-layout-uj {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.analysis-section-uj {
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 20px;
}

.analysis-section-uj:last-child {
    border: none;
    padding-bottom: 0;
}

.analysis-section-uj h4 {
    font-size: 13px;
    font-family: var(--font-heading);
    text-transform: uppercase;
    color: #FFFFFF;
    letter-spacing: 0.8px;
    margin-top: 0;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.analysis-section-uj h4::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 12px;
    background-color: var(--primary);
    border-radius: 1px;
}

.section-grid-uj {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.stat-block-uj {
    display: flex;
    flex-direction: column;
}

.stat-subtitle-uj {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 8px;
}

/* Utolsó 5 meccs forma boxok */
.form-boxes-row-uj {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.form-team-name-uj {
    font-size: 13.5px;
    color: #FFFFFF;
    font-weight: 500;
    width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-badge-list-uj {
    display: flex;
    gap: 4px;
}

.form-badge-uj {
    width: 22px;
    height: 22px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #FFFFFF;
}

.form-badge-uj.win { background-color: rgba(124, 194, 69, 0.8); }
.form-badge-uj.draw { background-color: rgba(148, 163, 184, 0.4); }
.form-badge-uj.loss { background-color: rgba(239, 68, 68, 0.8); }

/* H2H Egymás elleni mérkőzés sorok */
.h2h-list-uj {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.h2h-row-uj {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    padding: 6px 0;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.03);
}

.h2h-row-uj:last-child {
    border: none;
}

.h2h-date-uj {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 11px;
    width: 70px;
}

.h2h-teams-uj {
    color: #FFFFFF;
    font-weight: 500;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 12px;
}

.h2h-score-uj {
    font-family: var(--font-mono);
    font-weight: 700;
    margin-right: 14px;
    color: #FFFFFF;
}

.h2h-outcome-badge-uj {
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    color: #FFFFFF;
}

.h2h-outcome-badge-uj.outcome-1 { background-color: var(--accent); }
.h2h-outcome-badge-uj.outcome-x { background-color: var(--warning); }
.h2h-outcome-badge-uj.outcome-2 { background-color: var(--primary); }

/* Közösségi Szavazás sáv */
.community-vote-area-uj {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vote-bar-wrapper-uj {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 14px;
}

.vote-total-label-uj {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.vote-total-label-uj strong {
    color: #FFFFFF;
}

.vote-distribution-bar-uj {
    height: 8px;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
}

.vote-segment-uj {
    height: 100%;
}

.vote-segment-uj.segment-1 { background-color: var(--accent); }
.vote-segment-uj.segment-x { background-color: var(--warning); }
.vote-segment-uj.segment-2 { background-color: var(--primary); }

.vote-details-grid-uj {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.vote-detail-card-uj {
    background-color: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vote-badge-outcome-uj {
    width: 24px;
    height: 24px;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #FFFFFF;
    flex-shrink: 0;
}

.vote-badge-outcome-uj.outcome-1 { background-color: var(--accent); }
.vote-badge-outcome-uj.outcome-x { background-color: var(--warning); }
.vote-badge-outcome-uj.outcome-2 { background-color: var(--primary); }

.vote-card-text-uj {
    display: flex;
    flex-direction: column;
}

.vote-card-title-uj {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.vote-card-value-uj {
    font-size: 13.5px;
    font-weight: 700;
    color: #FFFFFF;
    margin-top: 1px;
}

.vote-card-value-uj span {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Szakértői Elemzés szövege */
.expert-analysis-text-uj {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-muted);
}

.expert-analysis-text-uj strong {
    color: #FFFFFF;
}

/* 4. Szelvény banner (Floating Szelvény Banner) */
.ticket-banner-uj {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(19, 30, 37, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
    z-index: 999;
    padding: 16px 0;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ticket-banner-uj.active {
    transform: translateY(0);
}

.ticket-banner-container-uj {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ticket-left-info-uj {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ticket-icon-uj {
    width: 44px;
    height: 44px;
    background-color: rgba(0, 163, 224, 0.1);
    border: 1px solid rgba(0, 163, 224, 0.25);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 0 12px rgba(0, 163, 224, 0.1);
}

.ticket-title-group-uj {
    display: flex;
    flex-direction: column;
}

.ticket-title-uj {
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
}

.ticket-desc-uj {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

.ticket-desc-uj strong {
    color: var(--accent);
}

.ticket-right-actions-uj {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-toast-warning {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--danger);
    color: var(--danger);
}

/* 5. Custom Warning Toast */
.toast-warning-uj {
    position: fixed;
    top: 24px;
    right: 24px;
    background-color: #1E1214;
    border: 1px solid var(--danger);
    border-radius: var(--border-radius-md);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1001;
    box-shadow: var(--shadow-lg);
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 380px;
}

.toast-warning-uj.active {
    transform: translateX(0);
}

.toast-icon-uj {
    color: var(--danger);
    font-size: 20px;
}

.toast-content-uj {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toast-title-uj {
    font-size: 13.5px;
    font-weight: 700;
    color: #FFFFFF;
}

.toast-desc-uj {
    font-size: 12px;
    color: var(--text-muted);
}


/* ==============================================================================
   6. Tablet nézet (769px – 1024px): AI körök helyett AI sáv, egysoros elrendezés
   ============================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    /* Két soros elrendezés: flex-wrap segítségével */
    .match-header-row-uj {
        flex-wrap: wrap;
        padding: 14px 12px;
        gap: 8px 12px;
    }

    /* 1. sor: Sorszám + Csapatok + 1X2 gombok — flex order */
    .match-left-info-area-uj {
        order: 1;
        flex-grow: 1;
    }

    .match-right-odds-uj {
        order: 2;
    }

    .match-chevron-btn-uj {
        order: 3;
    }

    /* 2. sor: AI sáv teljes szélességben */
    .match-ai-bar-container-uj {
        order: 4;
        display: flex;
        width: 100%;
        flex-shrink: 0;
        background-color: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        padding: 8px 12px;
        position: relative;
        min-height: 42px;
        box-sizing: border-box;
    }

    .match-ai-bar-area-uj {
        display: flex;
        width: 100%;
    }

    /* AI körök elrejtése tableten */
    .match-ai-circles-container-uj {
        display: none;
    }

    /* Elválasztó elrejtése tableten */
    .match-ai-divider-uj {
        display: none;
    }
}

/* ==============================================================================
   7. Mobil nézetek (≤768px)
   ============================================================================== */

@media (max-width: 768px) {
    /* Szűkebb margók a két szélen */
    .toto-tippek-container-uj {
        padding: 0 8px;
        margin: 10px auto 100px auto;
    }

    /* Accordion tartalom túlcsordulás megakadályozása */
    .accordion-details-layout-uj {
        padding: 16px 12px;
    }

    .stat-block-uj,
    .analysis-section-uj,
    .h2h-list-uj,
    .community-vote-area-uj {
        min-width: 0;
        overflow: hidden;
    }

    .form-boxes-row-uj {
        min-width: 0;
        flex-wrap: wrap;
    }

    .form-team-name-uj {
        width: auto;
        max-width: 120px;
        flex-shrink: 1;
    }

    .match-header-row-uj {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 10px; /* Szűkebb belső margók */
        position: relative; /* Abszolút pozicionáláshoz */
    }

    .match-left-info-area-uj {
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    /* Sorszám pozicionálása középre a csapatok fölé, kevésbé hangsúlyosan */
    .match-number-huge {
        position: static;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        background: none;
        border: none;
        padding: 0;
        margin: 0 0 4px 0;
        width: auto;
        text-align: center;
        line-height: 1.2;
    }

    .match-number-huge::after {
        content: '. MÉRKŐZÉS';
        font-size: 10px;
        letter-spacing: 0.5px;
        font-weight: 500;
    }

    /* Függőleges elválasztó elrejtése mobilnézetben */
    .match-num-divider-uj {
        display: none;
    }

    /* Csapatok és bajnokság középre igazítása */
    .match-teams-center-container-uj {
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 0;
    }

    .match-teams-center-uj {
        justify-content: center;
        gap: 8px;
    }

    .team-home-uj, .team-away-uj {
        flex: 1; /* Hagyjuk zsugorodni szűk képernyőn túlcsordulás ellen */
        min-width: 0;
        gap: 6px;
    }

    .team-home-uj {
        justify-content: flex-end;
    }

    .team-away-uj {
        justify-content: flex-start;
    }

    .team-home-uj .team-name-uj {
        text-align: right;
    }

    .team-away-uj .team-name-uj {
        text-align: left;
    }

    .team-name-uj {
        font-size: 13.5px;
        max-width: 150px; /* Megnövelve 110px-ről, hogy a Bayern München és a hosszabb nevek is kiférjenek */
    }

    .team-crest-uj {
        width: 20px;
        height: 20px;
    }

    /* AI körök elrejtése mobilnézetben, sávos elrendezés bento box kártyával */
    .match-ai-circles-container-uj {
        display: none;
    }

    .match-ai-bar-container-uj {
        display: flex;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        padding: 8px 12px;
        margin: 6px 0;
        position: relative;
        min-height: 52px;
        box-sizing: border-box;
    }

    .match-ai-bar-area-uj {
        display: flex;
        width: 100%;
    }

    .match-right-odds-uj {
        width: 100%;
        justify-content: space-between;
        margin-top: 4px;
    }

    .odds-selector-row-uj {
        grid-template-columns: repeat(3, 1fr) !important;
        flex-grow: 1 !important;
        width: 100% !important;
    }

    .tip-btn-uj {
        height: 34px !important;
    }

    .section-grid-uj {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .vote-details-grid-uj {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ticket-banner-container-uj {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 0 16px;
    }

    .ticket-right-actions-uj {
        justify-content: space-between;
    }

    .ticket-right-actions-uj button {
        flex-grow: 1;
        text-align: center;
        justify-content: center;
    }

    /* Chevron középre helyezése a sor alján */
    .match-chevron-btn-uj {
        align-self: center;
        margin-top: 4px;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    /* Warning Toast szélesség korlátozása mobilon túlcsordulás ellen */
    .toast-warning-uj {
        right: 12px;
        left: auto;
        max-width: calc(100vw - 24px);
    }
}

/* ==============================================================================
   tototippek.hu - Eredmények és Fordulókövető specifikus stílusok
   ============================================================================== */

/* Tudástár stílusú content-card és címsorok */
.content-card {
    padding: 35px !important;
}

.content-card h2 {
    font-family: var(--font-heading);
    font-size: 22px !important;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    margin-top: 0;
}

/* Kártyák és eltartások */
.card {
    margin-bottom: 24px !important;
}

/* Címer helyettesítő ikon stílusa */
.team-crest-placeholder-uj {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
    flex-shrink: 0;
    opacity: 0.6;
}

/* Margó utility osztályok */
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 16px !important; }
.mt-4 { margin-top: 24px !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-4 { margin-bottom: 24px !important; }

/* Fordulóválasztó sáv és Szelvény követés */
.results-control-card {
    padding: 16px 24px;
}

.control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.round-label {
    color: var(--text-muted);
    margin-right: 6px;
}

.round-selector-form select {
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 8px 16px;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-heading);
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition-fast);
}

.round-selector-form select:focus {
    border-color: var(--primary);
}

.user-ticket-card {
    border-left: 4px solid var(--accent);
    padding: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.02) 0%, rgba(9, 20, 31, 0.4) 100%);
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ticket-header h3 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticket-saved-at {
    font-size: 11px;
    color: var(--text-muted);
}

.ticket-summary-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    background-color: rgba(9, 20, 31, 0.4);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 12px 20px;
}

.ticket-combination-info {
    font-size: 13px;
}

.ticket-hits-counter {
    font-size: 13px;
}

.hits-number {
    font-size: 18px;
    font-weight: 800;
    font-family: var(--font-heading);
}

.text-blue {
    color: #3b82f6;
}

.text-green {
    color: var(--accent);
}

.text-danger {
    color: var(--danger);
}

/* Kimenetel összevetés stílusok az új kiértékelési logika szerint */
.odds-select-btn.tipped-user-green {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: var(--accent) !important;
    font-weight: 600;
}

.odds-select-btn.tipped-correct-green {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--text-dark) !important;
    box-shadow: 0 0 10px rgba(124, 194, 69, 0.4);
    font-weight: 800;
}

.odds-select-btn.result-incorrect-red {
    background-color: #991b1b !important;
    border-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
    font-weight: 800;
}

.odds-select-btn.neutral {
    opacity: 0.25;
    cursor: default;
}

.matches-list-uj .match-card-uj {
    border-left: 4px solid transparent;
}

.matches-list-uj .match-card-uj.match-hit-success {
    border-left: 4px solid var(--accent) !important;
}

.matches-list-uj .match-card-uj.match-hit-failure {
    border-left: 4px solid var(--danger) !important;
}

/* Eredmények specifikus meccskártya grid és elválasztó vonal */
@media (min-width: 769px) {
    .accordion-header {
        display: grid !important;
        grid-template-columns: 1.4fr 150px 180px !important;
        align-items: center;
        padding: 0 0 0 16px !important;
        width: 100%;
    }
    
    .accordion-header .match-left-info-area-uj {
        order: 1 !important;
    }
    
    .accordion-header .match-center-score-area {
        order: 2 !important;
    }
    
    .accordion-header .match-right-odds-area {
        order: 3 !important;
    }
}

.match-center-score-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    padding: 10px 0 8px 0;
    width: 100%;
}

@media (min-width: 769px) {
    .match-center-score-area::after {
        content: '';
        position: absolute;
        right: 0;
        top: 12px;
        bottom: 10px;
        width: 1px;
        background-color: var(--border-color);
    }
}

.score-display {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    padding: 4px 14px;
    border-radius: 4px;
    min-width: 64px;
}

.score-display.live-glowing {
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.15);
}

.status-badge {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}

.badge-cancelled {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Helyettesítési és figyelmeztető infók */
.replacement-info-footer {
    background-color: rgba(9, 20, 31, 0.5);
    border-top: 1px solid var(--border-color);
    padding: 8px 20px;
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.warning-card {
    border-color: rgba(245, 158, 11, 0.3);
    background-color: rgba(245, 158, 11, 0.02);
}

.warning-title {
    color: var(--warning);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.warning-text {
    font-size: 13px;
    line-height: 1.4;
}

/* Kártya belső elrendezések tipográfiája */
.card h3 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.4;
}

.no-prizes-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    background-color: rgba(9, 20, 31, 0.2);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-muted);
    margin-top: 12px;
}

.no-prizes-box i {
    font-size: 28px;
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: 12px;
}

.no-prizes-box p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* Kijelölt pótmérkőzések (egymás alatt, kevésbé hangsúlyosan) */
.backup-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.backup-row-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    font-size: 13px;
    transition: background-color var(--transition-fast);
}

.backup-row-item:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.backup-row-item.cancelled {
    opacity: 0.5;
}

.backup-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.backup-num-badge {
    background-color: rgba(255, 255, 255, 0.07);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 32px;
    text-align: center;
}

.backup-teams-text {
    font-weight: 600;
    color: var(--text-main);
}

.backup-date-text {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.backup-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.backup-status-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background-color: rgba(255, 255, 255, 0.04);
    padding: 2px 8px;
    border-radius: 4px;
}

.backup-status-badge.cancelled {
    color: var(--danger);
    background-color: rgba(239, 68, 68, 0.1);
}

.backup-status-badge.live {
    color: var(--primary);
    background-color: rgba(59, 130, 246, 0.1);
}

.backup-status-badge.finished {
    color: var(--accent);
    background-color: rgba(124, 194, 69, 0.1);
}

.backup-score-val {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 48px;
    text-align: center;
}

/* Nyeremények táblázat prémium tipográfiája */
.prizes-mini-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    text-align: left;
    margin-top: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.prizes-mini-table th, .prizes-mini-table td {
    padding: 14px 20px;
}

.prizes-mini-table th {
    background-color: rgba(9, 20, 31, 0.6);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
}

.prizes-mini-table td {
    background-color: rgba(9, 20, 31, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: var(--text-main);
    vertical-align: middle;
}

.prizes-mini-table tr:last-child td {
    border-bottom: none;
}

.prize-cat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    font-weight: 700;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: var(--font-heading);
}

.prize-winners-count {
    font-weight: 500;
    color: var(--text-muted);
}

.prize-amount-val {
    font-weight: 800;
    font-size: 14px;
    font-family: var(--font-heading);
}

.prize-amount-val.win {
    color: var(--accent) !important;
}

.prize-amount-val.rollover {
    color: #f59e0b !important;
}

/* Custom display helpers for mobile */
.d-show-mobile {
    display: none !important;
}
.d-hide-mobile {
    display: inline !important;
}

/* Mobil reszponzivitás igazítása */
@media (max-width: 768px) {
    .d-show-mobile {
        display: inline !important;
    }
    .d-hide-mobile {
        display: none !important;
    }

    .content-card {
        padding: 24px 16px !important;
    }

    .match-center-score-area {
        padding: 8px 0;
    }
    
    .ticket-summary-box {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Pótmérkőzések mobil igazítása */
    .backup-row-item {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 16px;
    }

    .backup-left {
        width: 100%;
        gap: 12px;
    }

    .backup-teams-text {
        font-size: 12px;
        line-height: 1.4;
    }

    .backup-right {
        width: 100%;
        justify-content: space-between;
        border-top: 1px dashed rgba(255, 255, 255, 0.08);
        padding-top: 10px;
        gap: 12px;
    }

    /* Nyeremények / Becslés táblázat mobil igazítása */
    .prizes-table-wrapper {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-sm);
        margin-top: 16px;
    }

    .prizes-mini-table {
        min-width: auto;
        width: 100%;
        border: none;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0;
        table-layout: auto;
    }

    .prizes-mini-table th, .prizes-mini-table td {
        padding: 8px 6px;
        font-size: 11px;
    }

    /* Utolsó oszlop (nyeremény összegek) jobbra igazítása */
    .prizes-mini-table th:nth-child(3),
    .prizes-mini-table td:nth-child(3) {
        text-align: right;
    }

    .prizes-mini-table .prize-amount-val {
        font-size: 12px !important;
    }

    .prize-cat-badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .estimator-info-box {
        padding: 12px 14px !important;
        font-size: 11px !important;
        margin-bottom: 16px !important;
    }

    /* Élő becslés fejléc mobil elrendezés */
    .live-estimation-header {
        padding: 12px 16px !important;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px !important;
    }
}