/* Malpago web + app WebView. Data colors (gate badges/charts) stay independent. */
/* BEGIN GENERATED COLOR TOKENS */
/* Source: malpago/docs/design/color-tokens.json. Do not edit this block.
   Regenerate from the app repo: python3 tool/design_review/sync_color_tokens.py */
:root {
    --mp-primary: #3157a4;
    --mp-focus: #3157a4;
    --mp-primary-rgb: 49 87 164;
    --mp-primary-hover: #244583;
    --mp-primary-hover-rgb: 36 69 131;
    --mp-primary-soft: #eff3fb;
    --mp-primary-soft-rgb: 239 243 251;
    --mp-primary-light: #8fa9d7;
    --mp-ink: #17243a;
    --mp-accent: #d8e4fa;
    --mp-info: #506887;
    --mp-info-tint: #a0b0c8;
    --mp-info-dark: #344c6b;
    --mp-canvas: #f6f7f9;
    --mp-surface: #ffffff;
    --mp-surface-variant: #edf0f4;
    --mp-neutral-soft: #edf0f4;
    --mp-muted: #596579;
    --mp-tertiary: #5f6e83;
    --mp-success: #237653;
    --mp-success-soft: #edf6f0;
    --mp-success-dark: #195c40;
    --mp-warning: #946200;
    --mp-warning-soft: #f7eedb;
    --mp-warning-dark: #795000;
    --mp-danger: #b5413a;
    --mp-danger-soft: #f9eae8;
    --mp-danger-dark: #96332e;
    --mp-info-soft: #eaf0f5;
    --mp-border: #dce1e8;
    --mp-control-border: #7d8898;
    --mp-disabled: #e7ebf0;
    --mp-disabled-text: #66758c;
}
/* END GENERATED COLOR TOKENS */

body.mp-app {
    background: var(--mp-canvas);
    color: var(--mp-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
}
.mp-app :is(button, a, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--mp-focus);
    outline-offset: 3px;
}
.mp-app input[type='checkbox'], .mp-app input[type='radio'] { accent-color: var(--mp-primary); }
.mp-app .mp-site-nav { border-bottom: 1px solid var(--mp-border); box-shadow: none; }
.mp-site-nav a, .mp-site-nav button { min-height: 44px; }
.mp-brand-mark { width: 36px; height: 36px; object-fit: cover; flex: none; border-radius: 28%; }
.mp-app #floating-app-cta img { border-radius: 28%; }
.mp-app-download-banner { background: var(--mp-primary-soft); border-top: 1px solid var(--mp-border); }
.mp-app-download-banner a { min-width: 44px; }
@media (min-width: 1024px) { .mp-brand-mark { width: 40px; height: 40px; } }
.mp-app .tier-badge-free { background: var(--mp-muted); }
.mp-app .tier-badge-premium { background: var(--mp-primary); }
.mp-app .tier-badge-vip { background: var(--mp-ink); }
.mp-app .mp-button-primary { background: var(--mp-primary); color: #fff; min-height: 44px; }
.mp-app .mp-button-primary:hover { background: var(--mp-primary-hover); }
.mp-app .mp-backbar { border-color: var(--mp-border); }
.mp-app .mp-backbar__btn { min-height: 44px; color: var(--mp-ink); }
.mp-app .mp-backbar__btn:hover, .mp-app .mp-backbar__btn:hover i { color: var(--mp-primary); }
.mp-embed .mp-page { padding-top: 16px; }
.mp-app .mapa-chat-btn, .mp-app .mapa-chat-widget .wh { background: var(--mp-primary); }
.mp-app .mapa-chat-btn .cb-pulse { animation: none; }
.mp-app .mapa-chat-widget .wmsg.user .wmsg-bubble,
.mp-app .mapa-chat-widget .w-send-btn,
.mp-app .mapa-chat-widget .w-quick-item:hover { background: var(--mp-primary); border-color: var(--mp-primary); }
.mp-app .mapa-chat-widget .w-send-btn:disabled { background: #dce3ee; }
.mp-app .mapa-chat-widget .w-welcome h4,
.mp-app .mapa-chat-widget .w-footer a { color: var(--mp-primary); }
.mp-app .mapa-chat-widget .w-textarea:focus { border-color: var(--mp-primary); }
.mp-app .mapa-chat-widget .wh-actions button,
.mp-app .mapa-chat-widget .w-send-btn,
.mp-app .mapa-chat-widget .w-attach-btn { min-width: 44px; min-height: 44px; }

/* Race detail: one action color, white surfaces, labels for prediction meaning. */
.mp-race-detail { font-variant-numeric: tabular-nums; }
.mp-race-detail .mp-race-hero { background: var(--mp-ink); }
.mp-race-detail .mp-pick-card { background: var(--mp-surface); border-color: var(--mp-border); }
.mp-race-detail .mp-pick-card--first { background: var(--mp-primary-soft); border-color: #a8bce2; }
.mp-race-detail .mp-guide { background: var(--mp-surface); color: var(--mp-muted); border-color: var(--mp-border); }
.mp-race-detail .mp-guide:hover { background: var(--mp-primary-soft); }
.mp-race-detail .mp-guide i { color: var(--mp-primary); }
.mp-race-detail .mp-decision-status { color: var(--mp-primary); background: var(--mp-primary-soft); }
.mp-race-detail .mp-decision-status--pass,
.mp-race-detail .mp-decision-status--finished,
.mp-race-detail .mp-decision-status--pending { color: var(--mp-muted); background: #eef1f3; }
.mp-race-detail .mp-decision-status--locked { color: var(--mp-warning); background: var(--mp-warning-soft); }
.mp-race-detail #race-detail-v3 :is(button, a:not(nav a)) { min-height: 44px; }
.mp-race-detail #race-detail-v3 .text-slate-400 { color: var(--mp-muted); }
.mp-race-detail #race-detail-v3 .mp-race-hero .text-slate-400 { color: #b5c6ce; }

.mp-race-detail :is(.view-mode-btn, .pred-filter-btn, .odds-subtab, .live-odds-tab, .user-odds-tab) {
    min-height: 44px;
    color: var(--mp-muted);
    background: var(--mp-surface);
    font-size: 13px;
}
.mp-race-detail :is(.view-mode-btn, .pred-filter-btn, .odds-subtab, .live-odds-tab, .user-odds-tab).active {
    color: #fff;
    background: var(--mp-primary);
    border-color: var(--mp-primary);
}
.mp-race-detail :is(#predictor-select, #version-display-btn, .marks-help-btn) { min-height: 44px; font-size: 14px; }
.mp-race-detail #version-display-btn { background: var(--mp-primary-soft); color: var(--mp-primary); border-color: var(--mp-border); }
.mp-race-detail #version-dropdown { border-color: var(--mp-border); }
.mp-race-detail .expert-marks-table { border: 1px solid var(--mp-border) !important; }
.mp-race-detail .expert-marks-table th { background: var(--mp-primary-soft); color: var(--mp-primary); border-color: var(--mp-border); }
.mp-race-detail .expert-prediction-table thead { background: var(--mp-ink); }
.mp-race-detail .expert-prediction-table .popularity-bar { background: var(--mp-primary); }
.mp-race-detail .mp-pick-heading { background: #eef1f3; }
.mp-race-detail .mp-pick-heading h3 { color: var(--mp-ink); }
.mp-race-detail .mp-pick-heading p { color: var(--mp-muted); }
.mp-race-detail .prediction-item { background: var(--mp-surface); border-color: var(--mp-border); background-image: none; }
.mp-race-detail .prediction-item[data-rank='1'] { background: var(--mp-primary-soft); border-color: #a8bce2; }
.mp-race-detail .mp-rank-badge { background: var(--mp-muted); background-image: none; }
.mp-race-detail .prediction-item[data-rank='1'] .mp-rank-badge { background: var(--mp-primary); }
.mp-race-detail .mp-result-row { background: var(--mp-surface); background-image: none; border: 1px solid var(--mp-border); }
.mp-race-detail .mp-result-row[data-rank='1'] { background: var(--mp-primary-soft); border-color: #a8bce2; }
.mp-race-detail .mp-result-row[data-rank='1'] .mp-rank-badge { background: var(--mp-primary); }
.mp-race-detail .mp-result-summary { background: var(--mp-canvas); border-color: var(--mp-border); }
.mp-race-detail .mp-predicted-number { background: var(--mp-primary-soft); color: var(--mp-primary); border-color: #c4d1e7; }
.mp-race-detail .fav-toggle { min-height: 44px; min-width: 44px; }
.mp-race-detail .mp-probability-bar { background: var(--mp-primary); background-image: none; }
.mp-race-detail .mp-section-toggle { min-height: 48px; background: #eef1f3; background-image: none; }
.mp-race-detail .mp-metric-card { background: var(--mp-canvas); background-image: none; border-color: var(--mp-border); }
.mp-race-detail .mp-metric-card > div { color: var(--mp-muted); }
.mp-race-detail .mp-metric-card > div[id] { color: var(--mp-ink); }
.mp-race-detail #expert-analysis-section { background: var(--mp-primary-soft); background-image: none; border-color: var(--mp-border); }
.mp-race-detail .prediction-lock-icon, .mp-race-detail .prediction-lock-count { color: var(--mp-primary); }
.mp-race-detail .prediction-lock-btn.primary { background: var(--mp-primary); }
.mp-race-detail .prediction-lock-btn.secondary { color: var(--mp-primary); border-color: var(--mp-primary); }
.mp-race-detail .prediction-lock-btn { min-height: 44px; }
.mp-race-detail .loading-spinner { border-top-color: var(--mp-primary); }

/* Metric ranks use the same ordered tint, keeping actual gate identities intact. */
.mp-race-detail #race-insights .ri-c1 { color: var(--mp-primary); }
.mp-race-detail #race-insights .ri-c3 { color: var(--mp-info); }
.mp-race-detail #race-insights .ri-m1 { background: #dce6f8; color: #244583; }
.mp-race-detail #race-insights .ri-m2 { background: #eff3fb; color: #3157a4; }
.mp-race-detail #race-insights .ri-m3 { background: #f4f6fb; color: #46658c; }
.mp-race-detail #race-insights .ri-hb:focus-visible { outline: 2px solid var(--mp-primary); }
.mp-app #ri-sheet .ri-close { min-height: 44px; background: var(--mp-primary); }

@media (max-width: 640px) {
    .mp-race-detail #race-detail-v3 .mp-race-hero > div { align-items: flex-start; flex-wrap: wrap; }
    .mp-race-detail #race-detail-v3 .mp-race-hero > div > :last-child { margin-left: auto; }
    .mp-race-detail .tab-nav::-webkit-scrollbar-track { background: var(--mp-surface); }
    .mp-race-detail .tab-nav::-webkit-scrollbar-thumb { background: #c4d1e7; }
    .mp-race-detail #best-predictions > .flex:first-child { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
    .mp-race-detail :is(#horses, #odds, #results) { padding: 16px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-app { scroll-behavior: auto; }
    .mp-race-detail :is(.tab-content, .prediction-content, .fade-in, .hover-card) { animation: none; transition: none; transform: none; }
}