:root { --ink: #18211d; --muted: #78827c; --line: #e4e8e2; --green: #156f4e; --green-dark: #0c4b36; --lime: #d9f26a; --orange: #ee8d45; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #f4f6f2; font-family: Manrope, sans-serif; font-size: 13px; }
button, select, input { font: inherit; } button { cursor: pointer; }
.app-shell { min-height: 100vh; display: flex; }.sidebar { width: 235px; padding: 31px 19px 22px; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; }.brand-mark { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 800; letter-spacing: -0.5px; margin: 0 12px 52px; }.brand-dot { width: 17px; height: 17px; border-radius: 50%; background: var(--lime); position: relative; }.brand-dot:after { content: ''; position: absolute; width: 5px; height: 5px; background: var(--green-dark); border-radius: 50%; top: 6px; left: 6px; }.workspace-label, .section-kicker, .eyebrow { font: 500 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: 1px; color: #a1aaa3; }.workspace-label { margin: 0 13px 15px; }.main-nav { display: grid; gap: 6px; }.nav-item { color: #68736c; text-decoration: none; padding: 11px 13px; border-radius: 7px; display: flex; align-items: center; gap: 12px; font-weight: 600; }.nav-item.active { color: var(--green-dark); background: #eef8e8; }.nav-icon { width: 15px; text-align: center; color: #9aa39c; font-size: 17px; }.active .nav-icon { color: var(--green); }.sidebar-bottom { margin-top: auto; display: grid; gap: 19px; }.model-status { display: flex; gap: 9px; align-items: center; border-top: 1px solid var(--line); padding: 20px 10px 0; }.status-pulse { width: 8px; height: 8px; border-radius: 50%; background: #52b66a; box-shadow: 0 0 0 4px #e7f5e5; }.model-status strong, .profile strong { display: block; font-size: 11px; }.model-status small, .profile small { display: block; color: #9ca49e; font-size: 10px; margin-top: 3px; }.profile { border-top: 1px solid var(--line); padding: 17px 6px 0; display: flex; align-items: center; gap: 9px; }.avatar { width: 29px; height: 29px; display: grid; place-items: center; background: #dce6df; color: var(--green-dark); border-radius: 50%; font-size: 10px; font-weight: 800; }.more { color: #aab2ac; margin-left: auto; letter-spacing: 2px; }
.main-content { flex: 1; max-width: 1480px; padding: 31px 46px 23px; margin: 0 auto; }.topbar, .match-strip, .panel-heading, .rec-top, .rec-title-row, .rec-footer, .page-footer { display: flex; align-items: center; justify-content: space-between; }.topbar { margin-bottom: 29px; }.eyebrow { margin: 0 0 8px; }.live-tag { background: #e4f7d2; color: #4a7b3d; font: 500 9px Manrope; letter-spacing: .5px; padding: 3px 6px; border-radius: 3px; margin-left: 5px; vertical-align: 1px; } h1, h2, h3, p { margin: 0; } h1 { font-size: 28px; line-height: 1; letter-spacing: -1.3px; } h2 { font-size: 17px; letter-spacing: -.5px; margin-top: 6px; }.top-actions { display: flex; align-items: center; gap: 20px; }.icon-button { border: 0; background: none; font-size: 25px; color: #68736c; position: relative; }.notification-dot { width: 5px; height: 5px; background: var(--orange); border-radius: 50%; position: absolute; top: 3px; right: 1px; }.help-button { border: 0; background: none; color: #758079; font-size: 11px; font-weight: 700; }.help-button:first-letter { border: 1px solid #cad0cb; border-radius: 50%; padding: 0 4px; }
.match-strip { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 17px 22px; margin-bottom: 24px; box-shadow: 0 3px 12px #294c2d05; }.fixture { display: flex; align-items: center; gap: 10px; min-width: 155px; }.away-fixture { justify-content: flex-end; text-align: right; }.team-badge { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 800; }.home-badge { background: var(--green); }.away-badge { background: #d18b4b; }.fixture strong { display: block; font-size: 12px; }.fixture small, .match-time small { display: block; color: #9aa39c; font-size: 10px; margin-top: 3px; }.score { font-size: 21px; font-weight: 800; margin-left: 16px; }.away-fixture .score { margin: 0 16px 0 0; }.match-time { text-align: center; border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0 29px; }.match-time span { font: 500 13px 'DM Mono'; color: var(--orange); }.match-context { border-left: 1px solid var(--line); padding-left: 23px; display: flex; gap: 10px; align-items: center; margin-left: 21px; }.context-icon { color: var(--green); font-size: 19px; }.match-context small { display: block; color: #9aa39c; font-size: 10px; }.match-context strong { display: block; font-size: 11px; margin-top: 3px; }
.content-grid { display: grid; grid-template-columns: minmax(550px, 1.5fr) minmax(350px, .85fr); gap: 24px; }.workspace-panel, .recommendations-panel { background: #fff; border: 1px solid var(--line); border-radius: 9px; }.workspace-panel { padding: 25px 27px 22px; }.recommendations-panel { padding: 25px 25px 22px; }.panel-heading { align-items: flex-start; margin-bottom: 22px; }.pitch-tools { display: flex; gap: 5px; }.tool-button { padding: 7px 10px; border: 1px solid transparent; border-radius: 5px; background: #f5f7f3; color: #8b958e; font-size: 11px; }.tool-button.active { color: var(--green-dark); border-color: #cbe6af; background: #f4fbe9; }.pitch-wrap { border: 1px solid #d6e3d2; border-radius: 5px; overflow: hidden; background: #ddebd7; }.pitch { height: 425px; position: relative; overflow: hidden; background: repeating-linear-gradient(90deg, #dbead4 0, #dbead4 13%, #d7e7d0 13%, #d7e7d0 26%); cursor: crosshair; }.pitch:before { content: ''; position: absolute; inset: 18px; border: 2px solid #fff9; border-radius: 2px; }.pitch-line { position: absolute; background: #fff9; }.halfway { top: 18px; bottom: 18px; left: 50%; width: 2px; }.pitch-circle { position: absolute; width: 136px; height: 136px; border: 2px solid #fff9; border-radius: 50%; left: calc(50% - 68px); top: calc(50% - 68px); }.pitch-spot { position: absolute; width: 5px; height: 5px; background: #fff; border-radius: 50%; top: calc(50% - 2px); left: calc(50% - 2px); }.penalty-box { position: absolute; top: 25%; height: 50%; width: 15%; border: 2px solid #fff9; }.left-box { left: 18px; border-left: 0; }.right-box { right: 18px; border-right: 0; }.six-yard { position: absolute; top: 39%; height: 22%; width: 7%; border: 2px solid #fff9; }.left-six { left: 18px; border-left: 0; }.right-six { right: 18px; border-right: 0; }.goal { position: absolute; top: 45%; height: 10%; width: 9px; border: 2px solid #fff9; }.left-goal { left: 9px; border-left: 0; }.right-goal { right: 9px; border-right: 0; }.player-marker, .ball-marker { position: absolute; transform: translate(-50%, -50%); z-index: 2; }.player-marker { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--green); border: 2px solid #fff; font: 500 10px 'DM Mono'; box-shadow: 0 2px 5px #163d2e44; }.ball-marker { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }.pitch-hint { position: absolute; bottom: 27px; left: 50%; transform: translateX(-50%); color: #527453; font-size: 10px; background: #ffffffa8; padding: 6px 10px; border-radius: 4px; pointer-events: none; }.pitch-caption { display: flex; gap: 17px; align-items: center; color: #758079; font-size: 10px; padding: 10px 2px 9px; }.legend-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; margin-right: 5px; }.player-legend { background: var(--green); }.ball-legend { background: white; border: 1px solid var(--ink); }.caption-note { margin-left: auto; color: #a0aaa2; }.configuration-row { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; }.configuration-row label { display: grid; gap: 7px; color: #8a948d; font-size: 10px; }.configuration-row select { color: var(--ink); border: 1px solid #dfe4de; border-radius: 4px; background: #fcfdfb; padding: 9px 10px; font-size: 11px; outline: none; }.range-value { display: flex; align-items: center; gap: 9px; border: 1px solid #dfe4de; padding: 4px 9px; border-radius: 4px; }.range-value input { width: 100%; accent-color: var(--green); }.range-value span { color: var(--green); font: 500 10px 'DM Mono'; }.primary-action { width: 100%; margin-top: 20px; border: 0; border-radius: 5px; padding: 13px; color: #fff; background: var(--green-dark); font-size: 12px; font-weight: 700; text-align: left; }.primary-action:hover { background: #176347; }.spark { color: var(--lime); margin-right: 8px; }.arrow { float: right; font-size: 17px; line-height: 12px; }
.recommendations-heading { margin-bottom: 9px; }.model-badge { font: 500 9px 'DM Mono'; color: #9aa49e; background: #f3f5f1; padding: 5px 7px; border-radius: 3px; }.model-badge b { color: var(--green); font-weight: 500; }.panel-intro { color: #8c968f; font-size: 11px; line-height: 1.6; max-width: 325px; margin-bottom: 18px; }.recommendation-list { display: grid; gap: 9px; }.recommendation { border: 1px solid var(--line); border-radius: 6px; padding: 14px 14px 12px; }.recommendation.featured { border-color: #a7d17f; background: #fbfdf7; }.rec-top { margin-bottom: 10px; }.rank { color: #a4ada6; font: 500 10px 'DM Mono'; }.confidence { color: var(--green); background: #e9f5dc; padding: 4px 6px; border-radius: 3px; font-size: 9px; }.confidence.medium { color: #a57632; background: #fff4db; }.confidence.low { color: #9b6951; background: #fff0e9; }.rec-title-row { align-items: flex-end; }.rec-title-row h3 { font-size: 12px; margin-bottom: 4px; }.rec-title-row p { color: #939c95; font-size: 10px; }.probability { font-size: 24px; line-height: 1; letter-spacing: -1px; }.probability small { font-size: 12px; margin-left: 1px; }.probability-bar { height: 4px; background: #e9eee7; margin: 14px 0 11px; border-radius: 2px; overflow: hidden; }.probability-bar span { display: block; height: 100%; background: var(--green); border-radius: 2px; }.recommendation:not(.featured) .probability-bar span { background: #97b77a; }.rec-footer { color: #9aa39d; font-size: 9px; }.rec-footer b { color: #4c5e53; font-weight: 700; margin-left: 3px; }.low-risk { color: var(--green) !important; }.medium-risk { color: #b27b2f !important; }.high-risk { color: #b56d49 !important; }.insight { display: flex; gap: 10px; margin-top: 15px; padding: 13px; background: #f4f7ef; border-radius: 5px; }.insight-icon { color: var(--green); }.insight strong { font-size: 10px; }.insight p { color: #7f8c82; font-size: 10px; line-height: 1.55; margin-top: 4px; }.page-footer { color: #9da69f; font-size: 9px; margin-top: 17px; }.page-footer b { margin: 0 7px; color: #c0c7c1; }.keyboard-hint kbd { font: 9px 'DM Mono'; border: 1px solid #dfe4df; background: #fff; padding: 2px 4px; border-radius: 3px; margin-left: 3px; }
@media (max-width: 1050px) { .sidebar { width: 190px; }.main-content { padding: 27px 25px; }.content-grid { grid-template-columns: 1fr; }.recommendation-list { grid-template-columns: repeat(3, 1fr); }.insight { margin-top: 13px; } }
@media (max-width: 700px) { .sidebar { display: none; }.main-content { padding: 22px 14px; }.match-strip { gap: 10px; padding: 13px; }.match-context { display: none; }.fixture { min-width: 0; }.match-time { padding: 0 10px; }.content-grid { gap: 15px; }.workspace-panel, .recommendations-panel { padding: 18px 15px; }.pitch { height: 330px; }.configuration-row { grid-template-columns: 1fr; }.recommendation-list { grid-template-columns: 1fr; }.page-footer { display: none; }.help-button span { display: none; }.panel-heading { gap: 10px; }.tool-button span { display: none; } }
.action-row { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; margin-top: 20px; }.action-row .primary-action { margin-top: 0; }.secondary-action { border: 1px solid #dfe4de; background: #fff; border-radius: 5px; color: #68736c; padding: 12px 13px; font-size: 11px; font-weight: 700; white-space: nowrap; }.secondary-action:hover { border-color: #b9ceb0; color: var(--green-dark); }.saved-count { margin-left: auto; min-width: 18px; padding: 2px 5px; border-radius: 9px; background: #f0f3ef; color: #89948d; font: 500 9px 'DM Mono'; text-align: center; }.marker-layer { position: absolute; inset: 0; pointer-events: none; }
@media (max-width: 700px) { .action-row { grid-template-columns: 1fr 1fr; }.action-row .primary-action { grid-column: 1 / -1; }.match-settings { grid-template-columns: 1fr 1fr; }.match-settings label:last-child { grid-column: 1 / -1; } }
.profile, .nav-button { width: 100%; border: 0; text-align: left; font: inherit; cursor: pointer; }.nav-button { background: transparent; }.recommendation { cursor: pointer; position: relative; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }.recommendation:hover, .recommendation:focus-visible { border-color: #a7d17f; box-shadow: 0 6px 16px #294c2d0d; transform: translateY(-1px); outline: none; }.rec-action { display: block; color: var(--green); font-size: 9px; font-weight: 700; margin-top: 10px; }.modal-dialog { width: min(520px, calc(100vw - 28px)); border: 1px solid var(--line); border-radius: 9px; padding: 24px; color: var(--ink); box-shadow: 0 24px 80px #16251d2b; }.modal-dialog::backdrop { background: #18211d55; backdrop-filter: blur(3px); }.modal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }.modal-header h2 { margin-top: 6px; }.modal-close { border: 0; background: #f3f6f2; border-radius: 50%; color: #728077; width: 28px; height: 28px; font-size: 20px; line-height: 1; }.account-form { display: grid; gap: 14px; }.account-form label { display: grid; gap: 7px; color: #89948d; font-size: 10px; }.account-form input { border: 1px solid #dfe4de; border-radius: 4px; padding: 10px; color: var(--ink); outline-color: #b8d48e; }.account-form .primary-action { margin-top: 5px; }.modal-intro, .help-copy p { color: #8c968f; font-size: 11px; line-height: 1.6; }.modal-intro { margin: -5px 0 18px; }.help-copy { display: grid; gap: 13px; }.help-copy strong { color: var(--ink); }.saved-dialog { width: min(600px, calc(100vw - 28px)); }.saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 360px; overflow: auto; }.saved-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 12px; }.saved-list strong { display: block; font-size: 11px; }.saved-list small { display: block; color: #9ca59f; font-size: 9px; margin-top: 4px; }.saved-list li > span { display: flex; gap: 6px; }.load-scenario, .delete-scenario { border: 1px solid #dfe4de; border-radius: 4px; padding: 7px 9px; background: #fff; color: var(--green-dark); font-size: 10px; font-weight: 700; }.delete-scenario { color: #ae6d53; font-size: 15px; line-height: 10px; }.empty-state { justify-content: center !important; color: #9aa49d; font-size: 11px; padding: 30px !important; }.animation-dialog { width: min(780px, calc(100vw - 28px)); }.animation-layout { display: grid; grid-template-columns: minmax(300px, 1.2fr) minmax(190px, .8fr); gap: 21px; align-items: center; }.animation-pitch { height: 285px; position: relative; overflow: hidden; border-radius: 5px; border: 2px solid #fff9; background: repeating-linear-gradient(90deg, #dbead4 0, #dbead4 13%, #d7e7d0 13%, #d7e7d0 26%); box-shadow: inset 0 0 0 1px #9aba9a; }.animation-pitch:before { content: ''; position: absolute; inset: 14px; border: 2px solid #fff9; }.animation-halfway { position: absolute; top: 14px; bottom: 14px; left: 50%; width: 2px; background: #fff9; }.animation-ball, .animation-player, .animation-target { position: absolute; transform: translate(-50%, -50%); z-index: 2; }.animation-ball { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }.animation-player { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: var(--green); border: 2px solid #fff; color: #fff; font: 500 10px 'DM Mono'; box-shadow: 0 2px 5px #163d2e44; }.animation-target { width: 22px; height: 22px; border: 2px dashed var(--orange); border-radius: 50%; }.animation-copy { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }.animation-explanation { color: #728078; font-size: 11px; line-height: 1.65; margin-bottom: 18px; }.animation-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }.animation-steps li { display: flex; align-items: center; gap: 9px; color: #526158; font-size: 10px; }.animation-steps li span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #eef7e5; color: var(--green); font: 500 10px 'DM Mono'; }
.account-status { color: #8c968f; font-size: 10px; line-height: 1.4; }
.auth-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: -5px 0 17px; background: #f3f6f2; border-radius: 5px; }.auth-tab { border: 0; border-radius: 4px; padding: 8px; background: transparent; color: #8b958e; font-size: 10px; font-weight: 700; }.auth-tab.active { background: #fff; color: var(--green-dark); box-shadow: 0 1px 4px #294c2d12; }.guest-status { color: #8c968f; font-size: 10px; line-height: 1.5; margin: -2px 0 1px; }.guest-status[hidden] { display: none; }
.match-settings { display: grid; grid-template-columns: 1fr 1fr 130px; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 12px 15px; margin-bottom: 24px; }.match-settings label { display: grid; gap: 6px; color: #8a948d; font-size: 10px; }.match-settings input { min-width: 0; border: 1px solid #dfe4de; border-radius: 4px; background: #fcfdfb; color: var(--ink); padding: 8px 9px; font-size: 11px; outline-color: #b8d48e; }.logout-action { width: 100%; color: #a85f49; }.logout-action[hidden] { display: none; }
.opponent-marker { background: #bd7047; }.opponent-legend { background: #bd7047; }.erase-brush { position: absolute; width: 52px; height: 52px; transform: translate(-50%, -50%); border: 1px solid #bd7047; border-radius: 50%; background: #bd704722; pointer-events: none; z-index: 5; }.erase-brush[hidden] { display: none; }
.theme-button { border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--muted); padding: 7px 9px; font-size: 10px; font-weight: 700; }.theme-button:hover { color: var(--ink); border-color: #a7d17f; }.rec-reason { display: grid; grid-template-columns: auto 1fr; gap: 5px 8px; margin: 13px 0; padding: 10px; border-left: 2px solid #d5e8b3; background: #f7faf3; color: #738078; font-size: 9px; line-height: 1.45; }.rec-reason strong { color: var(--green-dark); font-size: 9px; }.rec-reason span { min-width: 0; }
html[data-theme="dark"] { --ink: #edf3ed; --muted: #a5b2aa; --line: #35433c; --green: #7fca9d; --green-dark: #b7e6c2; --lime: #d9f26a; --orange: #f4a367; color-scheme: dark; } html[data-theme="dark"] body { background: #111914; } html[data-theme="dark"] .sidebar, html[data-theme="dark"] .match-strip, html[data-theme="dark"] .workspace-panel, html[data-theme="dark"] .recommendations-panel, html[data-theme="dark"] .modal-dialog, html[data-theme="dark"] .match-settings { background: #1a251f; color: var(--ink); } html[data-theme="dark"] .nav-item.active { background: #263b2d; } html[data-theme="dark"] .model-status, html[data-theme="dark"] .profile { border-color: var(--line); } html[data-theme="dark"] .tool-button, html[data-theme="dark"] .secondary-action, html[data-theme="dark"] .match-settings input, html[data-theme="dark"] .account-form input, html[data-theme="dark"] .auth-mode, html[data-theme="dark"] .modal-close { background: #25332b; color: var(--ink); border-color: var(--line); } html[data-theme="dark"] .recommendation { background: #1a251f; border-color: var(--line); } html[data-theme="dark"] .recommendation.featured { background: #213126; border-color: #557b55; } html[data-theme="dark"] .rec-reason { background: #223128; border-color: #719c68; color: #b1c1b5; } html[data-theme="dark"] .insight { background: #24342a; } html[data-theme="dark"] .model-badge, html[data-theme="dark"] .saved-count { background: #26352d; } html[data-theme="dark"] .auth-tab.active { background: #1a251f; color: var(--green-dark); } html[data-theme="dark"] .live-tag { background: #30452a; color: #b9da9c; }
@media (max-width: 700px) { .animation-layout { grid-template-columns: 1fr; }.animation-pitch { height: 230px; }.saved-list li { align-items: flex-start; }.profile { padding-left: 6px; } }
/* Final readability and pitch treatment. */
.pitch, .animation-pitch { background: repeating-linear-gradient(90deg, #2f7d32 0, #2f7d32 13%, #377f39 13%, #377f39 26%); }
 .auth-status { border: 1px solid #cbd5e1; border-radius: 999px; padding: 6px 9px; color: #475569; background: #f8fafc; font-size: 10px; font-weight: 700; }.auth-status.signed-in { color: #166534; border-color: #86efac; background: #f0fdf4; }.auth-status.guest { color: #64748b; }
html[data-theme="dark"] .auth-status { border-color: #475569; background: #1e293b; color: #cbd5e1; } html[data-theme="dark"] .auth-status.signed-in { color: #bbf7d0; border-color: #22c55e; background: #14532d; }
html[data-theme="dark"] .configuration-row select, html[data-theme="dark"] .range-value, html[data-theme="dark"] .range-value input { background: #1e293b; color: #f8fafc; border-color: #475569; } html[data-theme="dark"] .configuration-row select option { background: #1e293b; color: #f8fafc; } html[data-theme="dark"] .range-value span { color: #bfdbfe; }
html[data-theme="dark"] .pitch, html[data-theme="dark"] .animation-pitch { background: repeating-linear-gradient(90deg, #2f7d32 0, #2f7d32 13%, #377f39 13%, #377f39 26%); }
html[data-theme="dark"] { --ink: #eef2f7; --muted: #a8b3c0; --line: #36424f; --green: #69bdd8; --green-dark: #b9e7f0; --lime: #f2c75c; --orange: #ff9f68; } html[data-theme="dark"] body { background: #10151c; } html[data-theme="dark"] .sidebar, html[data-theme="dark"] .match-strip, html[data-theme="dark"] .workspace-panel, html[data-theme="dark"] .recommendations-panel, html[data-theme="dark"] .modal-dialog, html[data-theme="dark"] .match-settings { background: #1a222c; } html[data-theme="dark"] .nav-item.active { background: #253541; color: #b9e7f0; } html[data-theme="dark"] .nav-icon, html[data-theme="dark"] .nav-item { color: #a8b3c0; } html[data-theme="dark"] .active .nav-icon { color: #69bdd8; } html[data-theme="dark"] .model-status, html[data-theme="dark"] .profile { border-color: #36424f; } html[data-theme="dark"] .tool-button, html[data-theme="dark"] .secondary-action, html[data-theme="dark"] .match-settings input, html[data-theme="dark"] .account-form input, html[data-theme="dark"] .auth-mode, html[data-theme="dark"] .modal-close { background: #242e39; color: #eef2f7; border-color: #40505f; } html[data-theme="dark"] .tool-button.active { background: #294451; border-color: #69bdd8; color: #c5edf4; } html[data-theme="dark"] .recommendation { background: #1a222c; border-color: #36424f; } html[data-theme="dark"] .recommendation.featured { background: #21313a; border-color: #568b9b; } html[data-theme="dark"] .rec-reason { background: #202d37; border-color: #6a9cac; color: #b7c5d0; } html[data-theme="dark"] .insight { background: #202c36; } html[data-theme="dark"] .model-badge, html[data-theme="dark"] .saved-count { background: #27333f; } html[data-theme="dark"] .auth-tab.active { background: #1a222c; color: #b9e7f0; } html[data-theme="dark"] .live-tag { background: #4b4023; color: #f4d57c; } html[data-theme="dark"] .home-badge { background: #2c91b1; } html[data-theme="dark"] .away-badge { background: #bd7b4d; } html[data-theme="dark"] .status-pulse { background: #69bdd8; box-shadow: 0 0 0 4px #27424c; } html[data-theme="dark"] .avatar { background: #2d4050; color: #c5edf4; }
/* Final monochrome theme: strong ink, restrained surfaces, and visible edges. */
:root { --ink: #111; --muted: #555; --line: #b7b7b3; --green: #111; --green-dark: #000; --lime: #d8d8d4; --orange: #3c3c3c; }
body { background: #eeeeeb; color: #111; }
.sidebar, .match-strip, .workspace-panel, .recommendations-panel, .match-settings { border-color: #b1b1ad; }
.sidebar { background: #fafaf8; }.match-strip, .workspace-panel, .recommendations-panel, .match-settings { background: #fdfdfb; }.nav-item.active { background: #e2e2df; color: #000; }.nav-icon, .nav-item { color: #444; }.active .nav-icon { color: #000; }.status-pulse { background: #222; box-shadow: 0 0 0 4px #dededb; }.avatar { background: #d0d0cc; color: #111; }.home-badge { background: #111; }.away-badge { background: #6b6b68; }.match-time span { color: #222; }.context-icon { color: #111; }.tool-button { background: #e9e9e6; color: #444; border-color: #c3c3bf; }.tool-button.active { background: #111; border-color: #111; color: #fff; }.pitch-wrap { border-color: #9d9d99; }.recommendation { border-color: #b7b7b3; background: #fdfdfb; }.recommendation.featured { border-color: #666; background: #f0f0ed; }.probability-bar { background: #d2d2ce; }.probability-bar span, .recommendation:not(.featured) .probability-bar span { background: #111; }.confidence, .confidence.medium, .confidence.low { color: #222; background: #e2e2df; }.insight, .rec-reason { background: #e9e9e6; border-color: #777; }.rec-reason strong, .rec-action { color: #111; }.secondary-action, .match-settings input, .account-form input { border-color: #a8a8a4; background: #fff; color: #111; }.model-badge, .saved-count { background: #e5e5e1; color: #333; }.live-tag { background: #deded9; color: #222; }.theme-button { border-color: #999; color: #222; }.opponent-marker, .opponent-legend { background: #70706c; }.player-legend { background: #111; }.erase-brush { border-color: #111; background: #1112; }
html[data-theme="dark"] { --ink: #f2f2f0; --muted: #a6a6a2; --line: #41413e; --green: #f2f2f0; --green-dark: #fff; --lime: #d8d8d4; --orange: #c8c8c2; }
html[data-theme="dark"] body { background: #050505; color: #f2f2f0; }.sidebar, html[data-theme="dark"] .sidebar, html[data-theme="dark"] .match-strip, html[data-theme="dark"] .workspace-panel, html[data-theme="dark"] .recommendations-panel, html[data-theme="dark"] .modal-dialog, html[data-theme="dark"] .match-settings { background: #0d0d0d; border-color: #3d3d3a; }.nav-item.active, html[data-theme="dark"] .nav-item.active { background: #242422; color: #fff; }.nav-icon, .nav-item, html[data-theme="dark"] .nav-icon, html[data-theme="dark"] .nav-item { color: #bdbdb8; }.active .nav-icon, html[data-theme="dark"] .active .nav-icon { color: #fff; }.model-status, .profile, html[data-theme="dark"] .model-status, html[data-theme="dark"] .profile { border-color: #3d3d3a; }.status-pulse { background: #eee; box-shadow: 0 0 0 4px #292927; }.avatar { background: #30302d; color: #fff; }.home-badge { background: #f2f2f0; color: #111; }.away-badge { background: #70706c; }.tool-button, html[data-theme="dark"] .tool-button { background: #1d1d1b; border-color: #444440; color: #bdbdb8; }.tool-button.active, html[data-theme="dark"] .tool-button.active { background: #f2f2f0; border-color: #f2f2f0; color: #111; }.pitch-wrap { border-color: #666661; }.recommendation, html[data-theme="dark"] .recommendation { background: #0d0d0d; border-color: #41413e; }.recommendation.featured, html[data-theme="dark"] .recommendation.featured { background: #191917; border-color: #777772; }.confidence, .confidence.medium, .confidence.low { background: #292927; color: #f2f2f0; }.probability-bar { background: #373733; }.probability-bar span, .recommendation:not(.featured) .probability-bar span { background: #f2f2f0; }.insight, .rec-reason, html[data-theme="dark"] .insight, html[data-theme="dark"] .rec-reason { background: #191917; border-color: #777772; color: #c8c8c2; }.rec-reason strong, .rec-action { color: #fff; }.secondary-action, .match-settings input, .account-form input, html[data-theme="dark"] .secondary-action, html[data-theme="dark"] .match-settings input, html[data-theme="dark"] .account-form input { background: #171715; border-color: #555550; color: #f2f2f0; }.model-badge, .saved-count { background: #252522; color: #c8c8c2; }.live-tag { background: #30302a; color: #f2f2f0; }.theme-button { border-color: #666661; color: #f2f2f0; }.player-legend { background: #f2f2f0; }.opponent-marker, .opponent-legend { background: #777772; }.erase-brush { border-color: #f2f2f0; background: #f2f2f022; }
/* Final standard palette: slate surfaces, blue actions, orange opposition. */
:root { --ink: #0f172a; --muted: #64748b; --line: #cbd5e1; --green: #2563eb; --green-dark: #1d4ed8; --lime: #dbeafe; --orange: #f97316; }
body { background: #f1f5f9; color: #0f172a; }.sidebar, .match-strip, .workspace-panel, .recommendations-panel, .match-settings { background: #fff; border-color: #cbd5e1; }.nav-item, .nav-icon { color: #475569; }.nav-item.active { background: #eff6ff; color: #1d4ed8; }.active .nav-icon { color: #2563eb; }.status-pulse { background: #22c55e; box-shadow: 0 0 0 4px #dcfce7; }.avatar { background: #dbeafe; color: #1d4ed8; }.home-badge { background: #2563eb; }.away-badge { background: #f97316; }.tool-button { background: #f8fafc; border-color: #cbd5e1; color: #475569; }.tool-button.active { background: #2563eb; border-color: #2563eb; color: #fff; }.pitch-wrap { border-color: #94a3b8; }.recommendation { background: #fff; border-color: #cbd5e1; }.recommendation.featured { background: #f8fbff; border-color: #93c5fd; }.confidence { background: #dbeafe; color: #1d4ed8; }.confidence.medium { background: #ffedd5; color: #c2410c; }.confidence.low { background: #f1f5f9; color: #475569; }.probability-bar { background: #e2e8f0; }.probability-bar span, .recommendation:not(.featured) .probability-bar span { background: #2563eb; }.insight, .rec-reason { background: #f8fafc; border-color: #94a3b8; color: #475569; }.rec-reason strong, .rec-action { color: #1d4ed8; }.secondary-action, .match-settings input, .account-form input { background: #fff; border-color: #94a3b8; color: #0f172a; }.model-badge, .saved-count { background: #e2e8f0; color: #475569; }.live-tag { background: #dcfce7; color: #166534; }.theme-button { border-color: #94a3b8; color: #334155; }.player-legend { background: #2563eb; }.opponent-marker, .opponent-legend { background: #f97316; }.erase-brush { border-color: #0f172a; background: #0f172a22; }
html[data-theme="dark"] { --ink: #f8fafc; --muted: #94a3b8; --line: #334155; --green: #60a5fa; --green-dark: #93c5fd; --lime: #1e3a8a; --orange: #fb923c; }
html[data-theme="dark"] body { background: #0f172a; color: #f8fafc; } html[data-theme="dark"] .sidebar, html[data-theme="dark"] .match-strip, html[data-theme="dark"] .workspace-panel, html[data-theme="dark"] .recommendations-panel, html[data-theme="dark"] .modal-dialog, html[data-theme="dark"] .match-settings { background: #111827; border-color: #334155; } html[data-theme="dark"] .nav-item, html[data-theme="dark"] .nav-icon { color: #cbd5e1; } html[data-theme="dark"] .nav-item.active { background: #1e293b; color: #bfdbfe; } html[data-theme="dark"] .active .nav-icon { color: #60a5fa; } html[data-theme="dark"] .status-pulse { background: #4ade80; box-shadow: 0 0 0 4px #14532d; } html[data-theme="dark"] .avatar { background: #1e3a8a; color: #dbeafe; } html[data-theme="dark"] .home-badge { background: #60a5fa; color: #0f172a; } html[data-theme="dark"] .away-badge { background: #fb923c; color: #0f172a; } html[data-theme="dark"] .tool-button { background: #1e293b; border-color: #475569; color: #cbd5e1; } html[data-theme="dark"] .tool-button.active { background: #2563eb; border-color: #60a5fa; color: #fff; } html[data-theme="dark"] .recommendation { background: #111827; border-color: #334155; } html[data-theme="dark"] .recommendation.featured { background: #172554; border-color: #3b82f6; } html[data-theme="dark"] .confidence { background: #1e3a8a; color: #bfdbfe; } html[data-theme="dark"] .confidence.medium { background: #7c2d12; color: #fed7aa; } html[data-theme="dark"] .confidence.low { background: #334155; color: #e2e8f0; } html[data-theme="dark"] .probability-bar { background: #334155; } html[data-theme="dark"] .probability-bar span, html[data-theme="dark"] .recommendation:not(.featured) .probability-bar span { background: #60a5fa; } html[data-theme="dark"] .insight, html[data-theme="dark"] .rec-reason { background: #1e293b; border-color: #475569; color: #cbd5e1; } html[data-theme="dark"] .rec-reason strong, html[data-theme="dark"] .rec-action { color: #93c5fd; } html[data-theme="dark"] .secondary-action, html[data-theme="dark"] .match-settings input, html[data-theme="dark"] .account-form input { background: #1e293b; border-color: #475569; color: #f8fafc; } html[data-theme="dark"] .model-badge, html[data-theme="dark"] .saved-count { background: #334155; color: #cbd5e1; } html[data-theme="dark"] .live-tag { background: #14532d; color: #bbf7d0; } html[data-theme="dark"] .theme-button { border-color: #64748b; color: #e2e8f0; } html[data-theme="dark"] .player-legend { background: #60a5fa; } html[data-theme="dark"] .opponent-marker, html[data-theme="dark"] .opponent-legend { background: #fb923c; } html[data-theme="dark"] .erase-brush { border-color: #f8fafc; background: #f8fafc22; }
.pitch { touch-action: none; }
.marker-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.annotation-pin { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #facc15; color: #422006; font-size: 12px; font-weight: 800; box-shadow: 0 1px 5px #0006; pointer-events: auto; }
.player-marker, .ball-marker { pointer-events: auto; cursor: grab; }
.player-marker:focus-visible, .ball-marker:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pitch-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.defensive-line { position: absolute; top: 18px; bottom: 18px; width: 2px; background: #f97316; box-shadow: 0 0 0 4px #f9731633; z-index: 2; }
.pitch-toolbar, .context-row, .picks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.pitch-toolbar label, .context-row label { display: grid; gap: 4px; color: #64748b; font-size: 10px; }
.pitch-toolbar select, .pitch-toolbar button, .overlay-toggle, .context-row input { border: 1px solid var(--line); background: #fff; border-radius: 4px; padding: 7px 8px; color: var(--ink); font-size: 10px; font-weight: 700; }
.overlay-toggle[aria-pressed="true"] { background: #2563eb; color: #fff; border-color: #2563eb; }
.notes-field { display: grid; gap: 6px; color: #64748b; font-size: 10px; margin: 8px 0 12px; }
.notes-field textarea, .comment-form textarea { min-height: 64px; border: 1px solid var(--line); border-radius: 4px; padding: 8px; font: inherit; color: var(--ink); }
.picks { font-size: 10px; color: #64748b; }
.picks span { background: #f8fafc; border: 1px solid var(--line); border-radius: 999px; padding: 6px 8px; }
.influence { margin-top: 8px; }
html[data-theme="dark"] .context-row input,
html[data-theme="dark"] .pitch-toolbar select,
html[data-theme="dark"] .notes-field textarea,
html[data-theme="dark"] .comment-form textarea,
html[data-theme="dark"] .compare-controls select {
  background: #1e293b;
  color: #f8fafc;
  border-color: #475569;
  color-scheme: dark;
}
html[data-theme="dark"] select option { background: #1e293b; color: #f8fafc; }
html[data-theme="dark"] .banner,
html[data-theme="dark"] .compare-output {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #475569;
}
html[data-theme="dark"] .error-banner { background: #431f16; color: #ffedd5; border-color: #9a3412; }
html[data-theme="dark"] .banner button { background: #334155; color: #f8fafc; border-color: #64748b; }
.banner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #eff6ff; border: 1px solid #93c5fd; border-radius: 8px; padding: 10px 12px; margin-bottom: 16px; font-size: 12px; }
.error-banner { background: #fff7ed; border-color: #fdba74; }
.banner button, .text-button { border: 1px solid #93c5fd; background: #fff; border-radius: 4px; padding: 6px 8px; font-weight: 700; }
.text-button { border: 0; background: transparent; }
.loading-veil { position: fixed; inset: 0; display: grid; place-items: center; background: #0f172a55; color: #fff; font-weight: 800; z-index: 40; }
.loading-veil[hidden], .banner[hidden] { display: none; }
.compare-controls { display: flex; gap: 8px; margin-bottom: 12px; }
.compare-output { background: #f8fafc; border: 1px solid var(--line); border-radius: 6px; padding: 12px; white-space: pre-wrap; font: 11px 'DM Mono', monospace; max-height: 320px; overflow: auto; }
.shortcut-list kbd { font: 10px 'DM Mono', monospace; border: 1px solid var(--line); padding: 2px 5px; border-radius: 3px; margin-right: 6px; }
.animation-opponent { background: #f97316; }
.match-settings { grid-template-columns: repeat(3, 1fr); }
.action-row { grid-template-columns: auto auto auto auto 1fr; }
@media (max-width: 700px) {
  .pitch { height: 360px; }
  .player-marker, .animation-player { width: 34px; height: 34px; font-size: 12px; }
  .ball-marker, .animation-ball { width: 16px; height: 16px; }
  .pitch-toolbar, .context-row { grid-template-columns: 1fr 1fr; display: grid; }
  .action-row { grid-template-columns: 1fr 1fr; }
  .match-settings { grid-template-columns: 1fr 1fr; }
}