/* Shared, restrained workspace surfaces for native-tab WebViews and the web.
   Each color rule targets a named UI component; gate badges and charts keep
   their own data colors. */
.mp-workspace .mp-page { padding-top: 20px; }
.mp-workspace .mp-screen-header {
    padding: 22px 24px;
    border: 1px solid var(--mp-border);
    border-radius: 14px;
    background: var(--mp-surface);
    color: var(--mp-ink);
    box-shadow: none;
}
.mp-workspace .mp-screen-header h1 {
    margin-bottom: 8px;
    color: var(--mp-ink);
    font-size: 24px;
    line-height: 1.35;
    font-weight: 750;
    letter-spacing: -.025em;
}
.mp-workspace .mp-screen-description { color: var(--mp-muted); font-size: 14px; line-height: 1.65; }
.mp-workspace .mp-screen-header strong { color: var(--mp-ink); }
.mp-workspace .mp-heading-icon { color: var(--mp-primary); }
.mp-workspace .mp-screen-header h1 > .fas { color: var(--mp-primary); }
.mp-workspace .mp-panel {
    border: 1px solid var(--mp-border);
    border-radius: 14px;
    background: var(--mp-surface);
    box-shadow: none;
}
.mp-workspace .mp-page :is(select, input[type='text'], input[type='search'], input[type='number'], input[type='date']) { min-height: 44px; }
.mp-workspace .mp-filter-chip { min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px; }
.mp-workspace .mp-label { background: var(--mp-primary-soft); color: var(--mp-primary); }
.mp-workspace .mp-action { min-height: 44px; background: var(--mp-primary); color: #fff; background-image: none; box-shadow: none; }
.mp-workspace .mp-action:hover { background: var(--mp-primary-hover); }
.mp-workspace .mp-secondary-action { min-height: 44px; color: var(--mp-primary); background: var(--mp-primary-soft); box-shadow: none; }
.mp-workspace .mp-secondary-action:hover { background: #e0e8f7; }

/* Tool directory: content distinguishes the tools, rather than seven palettes. */
.mp-workspace .mp-directory-card { border: 1px solid var(--mp-border); border-radius: 14px; background: #fff; box-shadow: none; }
.mp-workspace .mp-directory-card:hover { border-color: #9cb4df; box-shadow: 0 3px 12px #17243a08; }
.mp-workspace .mp-directory-card-head { background: var(--mp-surface); border-color: var(--mp-border); }
.mp-workspace .mp-directory-icon { background: var(--mp-primary-soft); color: var(--mp-primary); background-image: none; }
.mp-workspace .mp-directory-icon i { color: var(--mp-primary); }
.mp-tools :is(.mp-directory-icon, .mp-label) { background: var(--mp-canvas); color: var(--mp-muted); }
.mp-tools .mp-directory-icon i { color: var(--mp-muted); }
.mp-tools .mp-directory-card h2 { color: var(--mp-ink); font-size: 17px; }
.mp-tools .mp-directory-card ul i { color: var(--mp-muted); }
.mp-tools .mp-directory-card-head + div { padding-top: 16px; }
.mp-tools .mp-directory-card .group-hover\:scale-110 { transform: none; }

/* Search: compact input and clear selected category at all phone widths. */
.mp-search .mp-search-field { display: flex; gap: 8px; }
.mp-search .mp-search-field input {
    min-width: 0;
    flex: 1;
    width: 100%;
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 16px;
    background: var(--mp-canvas);
}
.mp-search .mp-search-field button { flex: none; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.mp-search .mp-search-types { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-search .search-type-btn { min-height: 44px; padding: 9px 14px; background: #fff; border: 1px solid var(--mp-border); border-radius: 8px; color: var(--mp-muted); font-size: 14px; }
.mp-search .search-type-btn.active { background: var(--mp-primary); border-color: var(--mp-primary); color: #fff; }
.mp-search .mp-search-guide { background: var(--mp-canvas); background-image: none; border-color: var(--mp-border); text-align: left; }
.mp-search .mp-search-guide > div { width: 44px; height: 44px; margin-left: 0; background: var(--mp-surface); }
.mp-search .mp-search-guide i { color: var(--mp-muted); font-size: 21px; }
.mp-search .mp-search-guide h3 { color: var(--mp-ink); }
.mp-search .mp-search-guide p { color: var(--mp-muted); }
.mp-search .mp-record-link { background: #fff; background-image: none; color: var(--mp-ink); border: 1px solid var(--mp-border); box-shadow: none; }
.mp-search .mp-record-link p { color: var(--mp-muted); }
.mp-search .mp-record-link .relative > div:last-child { color: var(--mp-primary); }
.mp-search .mp-record-link i { color: var(--mp-primary); }
.mp-search .record-badge { animation: none; }
.mp-search :is(.type-badge-horse, .type-badge-jockey, .type-badge-trainer) { background: var(--mp-canvas); color: var(--mp-muted); border: 1px solid var(--mp-border); }
.mp-search .search-result-card:hover, .mp-search .info-card:hover { transform: none; box-shadow: 0 3px 12px #17243a08; }
.mp-search .loading-spinner { border-top-color: var(--mp-primary); }

/* Report metrics use ordered labels. Profit/loss and chart lines remain semantic. */
.mp-workspace .mp-stat-tile { border: 1px solid var(--mp-border); box-shadow: none; border-radius: 12px; }
.mp-workspace .mp-stat-tile > :is(h3, p.text-2xl) { color: var(--mp-ink); font-variant-numeric: tabular-nums; }
.mp-workspace .mp-stat-tile.mp-stat-tile--positive > h3 { color: var(--mp-success); }
.mp-workspace .mp-stat-tile.mp-stat-tile--warning > h3 { color: var(--mp-warning); }
.mp-workspace .mp-stat-tile.mp-stat-tile--negative > h3 { color: var(--mp-danger); }
.mp-hit-ratio .mp-highlight-record #heroOdds { color: var(--mp-ink); }
.mp-hit-ratio .mp-highlight-record .flex.items-end { align-items: center; flex-wrap: wrap; }
.mp-hit-ratio #daily-validation { border: 1px solid var(--mp-border); box-shadow: none; }
.mp-hit-ratio #daily-validation [role='tab'] { min-height: 44px; display: inline-flex; align-items: center; }
.mp-hit-ratio .mp-week-tabs a { min-width: 72px; }
.mp-hit-ratio .mp-record-history { border-color: var(--mp-border); }
.mp-hit-ratio .mp-record-value { color: var(--mp-ink); font-variant-numeric: tabular-nums; }
.mp-my-page .rel-follow { color: var(--mp-primary); background: var(--mp-primary-soft); }
.mp-my-page .rel-upset { color: var(--mp-warning); background: #faf4e8; }
.mp-my-page #favorites button { min-width: 44px; min-height: 44px; }
.mp-my-page .mp-screen-header > a { min-height: 44px; display: inline-flex; align-items: center; }

/* Content discovery: white navigation cards, data/photo overlays untouched. */
.mp-resources .mp-content-counts { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--mp-muted); font-size: 13px; }
.mp-resources .mp-content-counts strong { margin-left: 4px; color: var(--mp-primary); }
.mp-resources .mp-resource-nav { display: block; border: 1px solid var(--mp-border); background: #fff; color: var(--mp-ink); }
.mp-resources .mp-resource-nav:hover { border-color: #9cb4df; background: var(--mp-primary-soft); }
.mp-resources .mp-resource-nav > i:first-of-type { color: var(--mp-primary); font-size: 24px; }
.mp-resources .mp-resource-nav p { color: var(--mp-muted); }
.mp-resources .card-hover:hover { transform: none; }
.mp-resources .floating-badge { animation: none; }

/* Paid plans share the same surfaces. Pricing, benefits and purchase logic stay intact. */
.mp-subscription .mp-plan-surface { background: var(--mp-surface); background-image: none; border: 1px solid var(--mp-border); box-shadow: none; }
.mp-subscription .mp-plan-heading { background: var(--mp-primary-soft); background-image: none; color: var(--mp-ink); }
.mp-subscription .mp-plan-heading :is(h2,h3,p,span,i),
.mp-subscription .mp-plan-surface .mp-plan-light-text { color: var(--mp-ink); }
.mp-subscription .mp-plan-mark { background: var(--mp-primary-soft); background-image: none; color: var(--mp-primary); }
.mp-subscription .mp-plan-mark i { color: var(--mp-primary); }
.mp-subscription .mp-plan-status { color: var(--mp-primary); }
.mp-subscription .mp-plan-heading .border-t { border-color: var(--mp-border); }
.mp-subscription .mp-plan-heading .mp-action i { color: #fff; }
.mp-subscription .mp-plan-heading > button { color: var(--mp-ink); min-width: 44px; min-height: 44px; }
.mp-subscription .mp-plan-heading .mp-plan-badge { background: var(--mp-primary); color: #fff; box-shadow: none; }
.mp-subscription .mp-plan-badge i { color: #fff; }
.mp-subscription .mp-plan-card { transform: none; box-shadow: none; border-radius: 14px; }
.mp-subscription :is(.plan-tab, summary) { min-height: 44px; }
.mp-subscription .mp-action:hover { transform: none; }

/* Search result profiles share a header; podium and performance colors remain. */
.mp-profile .mp-profile-header { background: #fff; border-bottom: 1px solid var(--mp-border); color: var(--mp-ink); }
.mp-profile .mp-profile-header h1 { color: var(--mp-ink); font-size: 26px; }
.mp-profile .mp-profile-header p { color: var(--mp-muted); }
.mp-profile .mp-profile-header .text-white { color: var(--mp-ink); }
.mp-profile .mp-profile-header .bg-opacity-20 { background: var(--mp-primary-soft); }
.mp-profile .mp-profile-header > .flex { gap: 16px; flex-wrap: wrap; }
.mp-profile .mp-profile-header .space-x-3 { gap: 6px; flex-wrap: wrap; }
.mp-profile .mp-profile-header .space-x-3 > * { margin-left: 0; }
.mp-profile #favToggle { min-height: 44px; border: 1px solid var(--mp-border); }
.mp-profile #favToggle:not(.bg-amber-400) { color: var(--mp-primary); background: var(--mp-primary-soft); }
.mp-profile :is(.tab-btn, .fav-btn) { min-height: 44px; white-space: nowrap; }
.mp-profile .tab-btn.active { color: var(--mp-primary); border-color: var(--mp-primary); }
.mp-profile .mp-profile-stat { background: #fff; background-image: none; border: 1px solid var(--mp-border); box-shadow: none; }
.mp-profile .mp-profile-stat h3 { color: var(--mp-ink); }
.mp-profile .mp-profile-stat:hover { transform: none; }
.mp-profile .mp-profile-stats { border-bottom: 1px solid var(--mp-border); }

/* Supporting tools and articles follow the same component hierarchy. */
.mp-workspace .mp-info-banner { background: var(--mp-primary-soft); color: var(--mp-ink); background-image: none; }
.mp-workspace .mp-info-banner :is(h2,h3,p) { color: var(--mp-ink); }
.mp-workspace .mp-model-info { background: var(--mp-canvas); border: 1px solid var(--mp-border); }
.mp-workspace .mp-model-info h3 i { color: var(--mp-primary); }
.mp-workspace .mp-table-heading { background: var(--mp-primary-soft); background-image: none; }
.mp-workspace .mp-table-heading th { color: var(--mp-muted); }
.mp-workspace .mp-tool-section { background: var(--mp-canvas); border-color: var(--mp-border); }
.mp-workspace .mp-tool-section h2 i { color: var(--mp-primary); }
.mp-workspace :is(.mode-tab, .bet-type-btn, .category-btn) { min-height: 44px; }
.mp-workspace :is(.mode-tab, .bet-type-btn, .category-btn).active { color: #fff; background: var(--mp-primary); border-color: var(--mp-primary); }
.mp-workspace :is(.odds-input, .bet-slot):focus-within { border-color: var(--mp-primary); }
.mp-workspace .category-btn:not(.active) { background: var(--mp-canvas); color: var(--mp-muted); }
.mp-workspace .mp-content { --mc-ink: var(--mp-ink); --mc-muted: var(--mp-muted); --mc-line: var(--mp-border); --mc-gold: #c5d3ed; }
.mp-workspace .mc-hero { background: var(--mp-ink); border-radius: 14px; }
.mp-workspace .mp-content .mc-primary { background: var(--mp-primary); color: #fff; }
.mp-workspace .mp-content .mc-primary:hover { background: var(--mp-primary-hover); }
.mp-workspace .mc-card-visual { background: var(--mp-primary-soft); color: var(--mp-primary); }
.mp-workspace .mc-card:hover { transform: none; border-color: #9cb4df; }
.mp-workspace .mc-tabs a[aria-current='page'] { background: var(--mp-primary); color: #fff; }
.mp-workspace .mc-tabs a { min-height: 44px; display: inline-flex; align-items: center; }
.mp-workspace .mp-content :is(a,button,input):focus-visible { outline-color: var(--mp-primary); }
.mp-workspace .mp-content :is(.mc-prose a, .mc-app-screen) { color: var(--mp-primary); }
.mp-workspace :is(.mc-app-screen span, .mc-tags span, .mc-avatar) { background: var(--mp-primary-soft); color: var(--mp-primary); }
.mp-workspace :is(.mc-side-note, .mc-channel, .mc-prose blockquote) { background: var(--mp-primary-soft); }
.mp-workspace .mc-prose blockquote { border-color: var(--mp-primary); }
.mp-workspace .chart-page { --ink: var(--mp-ink); --muted: var(--mp-muted); --line: var(--mp-border); --accent: var(--mp-primary); }
.mp-workspace .chart-button { background: var(--mp-primary); min-height: 44px; }
.mp-workspace .chart-button.secondary { background: #fff; color: var(--mp-primary) !important; }
.mp-workspace .chart-chips :is(a,button) { min-height: 44px; }
.mp-workspace .chart-chips :is(a[aria-current='true'],button[aria-pressed='true']) { background: var(--mp-primary); color: #fff; }

@media (max-width: 640px) {
    .mp-workspace .mp-page { padding-top: 16px; }
    .mp-workspace .mp-screen-header { padding: 18px 16px; }
    .mp-workspace .mp-screen-header h1 { font-size: 22px; }
    .mp-search #initialState > section:first-child .grid { gap: 8px; }
    .mp-search .mp-search-guide { display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; align-items: center; padding: 12px; }
    .mp-search .mp-search-guide > div { grid-row: span 2; margin-bottom: 0; }
    .mp-search .mp-search-types { gap: 4px; }
    .mp-search .search-type-btn { padding: 9px 8px; flex: 1; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font-size: 13px; }
    .mp-search .search-type-btn i { margin-right: 4px; }
    .mp-hit-ratio .mp-highlight-record .ml-auto { margin-left: 0; }
    .mp-resources .mp-resource-nav { padding: 16px; }
    .mp-profile .mp-profile-header { padding: 18px 16px; }
    .mp-profile .mp-profile-header h1 { font-size: 22px; }
    .mp-profile .mp-profile-header > .flex > .text-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; text-align: left; }
    .mp-profile .mp-profile-header > .flex > .text-right > * { margin: 0; }
    .mp-subscription .mp-plan-heading { padding: 24px 16px; }
}
@media (max-width: 360px) {
    .mp-search .search-type-btn i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-workspace :is(.card-hover, .info-card, .result-animate) { animation: none; transition: none; transform: none; }
}

/* Color role contract: named roles, never palette-wide remapping.
   Success means completed/verified; general information is neutral. */
.mp-app .mp-text-success { color: var(--mp-success); }
.mp-app .mp-text-warning { color: var(--mp-warning); }
.mp-app .mp-text-danger { color: var(--mp-danger); }
.mp-app .mp-text-info { color: var(--mp-info); }
.mp-app .mp-state-success { color: var(--mp-success); background: var(--mp-success-soft); border-color: var(--mp-success); }
.mp-app .mp-toast-success { color: #fff; background: var(--mp-success); }
.mp-workspace :is(.mp-report-value, .mp-record-value) { color: var(--mp-ink); }
.mp-workspace .mp-report-description { color: var(--mp-muted); }
.mp-workspace .mp-heading-icon,
.mp-workspace .mp-screen-header h1 > .fas { color: var(--mp-muted); }
.mp-workspace .mp-guide-type-icon { color: var(--mp-muted); background: var(--mp-canvas); }
.mp-workspace .mp-secondary-action { border: 1px solid var(--mp-control-border); background: var(--mp-surface); }
.mp-workspace .mp-secondary-action:hover { border-color: var(--mp-primary); background: var(--mp-primary-soft); }
.mp-search .mp-search-field input,
.mp-search .search-type-btn { border-color: var(--mp-control-border); }
.mp-search .search-type-btn.active { border-color: var(--mp-primary); }
.mp-search .mp-search-section-icon { color: var(--mp-muted); background: var(--mp-canvas); }
.mp-search .mp-search-section-icon i { color: inherit; }
.mp-search .mp-ranking-link { border-color: var(--mp-border); box-shadow: none; }
.mp-search .mp-ranking-link .w-14 { color: var(--mp-muted); background: var(--mp-canvas); background-image: none; box-shadow: none; }
.mp-search .mp-ranking-link :is(.w-14 i, .fa-chevron-right) { color: var(--mp-muted); }
.mp-search .mp-ranking-link:hover :is(h3, .fa-chevron-right),
.mp-search .mp-quick-link:hover :is(i, p) { color: var(--mp-primary); }
.mp-search .mp-external-links { background: var(--mp-ink); background-image: none; }
.mp-search .mp-external-links a i { color: #fff; }
.mp-hit-ratio .mp-comparison-panel { color: var(--mp-ink); background: var(--mp-canvas); border-color: var(--mp-border); }
.mp-hit-ratio .mp-verified-row { background: var(--mp-success-soft); }
.mp-hit-ratio .mp-guide-type-icon i { color: var(--mp-muted); }
.mp-subscription .mp-current-subscription { border-color: var(--mp-border); }
.mp-subscription .mp-current-plan { background: var(--mp-primary-soft); border-color: var(--mp-primary); }
.mp-subscription .mp-current-plan p { color: var(--mp-primary); }
.mp-subscription .mp-benefit-icon { color: var(--mp-muted); }
.mp-subscription .mp-plan-status { color: var(--mp-ink); }
.mp-subscription .mp-plan-mark { color: var(--mp-muted); background: var(--mp-canvas); }
.mp-subscription .mp-plan-mark i { color: var(--mp-muted); }
.mp-subscription .mp-plan-heading .mp-action { color: #fff; }
.mp-app .mp-toast-danger { color: #fff; background: var(--mp-danger); }
.mp-app .mp-toast-warning { color: #fff; background: var(--mp-warning); }
.mp-app .mp-toast-info { color: #fff; background: var(--mp-info); }
.mp-workspace .mp-neutral-badge { color: var(--mp-muted); background: var(--mp-canvas); }
.mp-subscription .mp-plan-card--current { border-color: var(--mp-primary); }
.mp-subscription .mp-plan-link { color: var(--mp-primary); }
.mp-subscription .mp-action.mp-plan-link { color: #fff; }
.mp-resources .mp-resource-section-icon { color: var(--mp-muted); background: var(--mp-canvas); }
.mp-resources .mp-resource-section-icon i { color: inherit; }
.mp-subscription .mp-plan-value { color: var(--mp-ink); }
.mp-subscription a.mp-plan-link:hover { color: var(--mp-primary-hover); }
.mp-subscription a.mp-action.mp-plan-link:hover { color: #fff; }
.mp-app .mp-state-danger { color: var(--mp-danger); background: var(--mp-danger-soft); border-color: var(--mp-danger); }
.mp-app .mp-state-warning { color: var(--mp-warning); background: var(--mp-warning-soft); border-color: var(--mp-warning); }
.mp-app .mp-state-info { color: var(--mp-info); background: var(--mp-info-soft); border-color: var(--mp-info); }
.mp-app .mp-flash :is(p, svg, button) { color: inherit; }
.mp-app .mp-flash-dismiss { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 6px; }
.mp-app .mp-flash-dismiss:hover { background: var(--mp-surface); }
.mp-app .mp-state-pending { color: var(--mp-muted); background: var(--mp-neutral-soft); border-color: var(--mp-control-border); }