.my-races { margin: 1.5rem 0; border: 1px solid var(--border); border-radius: var(--radius-xl, 14px); background: var(--card); color: var(--foreground); padding: 1.25rem; }
.my-races button, .my-races input { font: inherit; }
.my-races button { cursor: pointer; }
.my-races button:disabled { cursor: default; opacity: .45; }
.my-races button:focus-visible, .mr-search-field:focus-within { outline: 2px solid var(--ring); outline-offset: 3px; }
.mr-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.my-races h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .95rem; font-weight: 600; letter-spacing: -.015em; }
.my-races h2 > svg { color: var(--muted-foreground); }
.mr-heading-row p { margin: .3rem 0 0; font-size: .8rem; color: var(--muted-foreground); }
.mr-count { display: inline-flex; align-items: baseline; gap: .2rem; margin-left: .1rem; padding: .15rem .45rem; border-radius: 6px; background: var(--muted); font-size: .7rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mr-count > span { color: var(--muted-foreground); font-weight: 400; }
.my-races .mr-action { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 34px; padding: .4rem .65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--foreground); font-size: .775rem; font-weight: 500; white-space: nowrap; transition: background .15s, border-color .15s; }
.mr-action:hover:not(:disabled) { background: var(--muted); }
.mr-action > svg { color: var(--muted-foreground); flex: none; }
.mr-shared { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem; margin: 0 0 1rem; padding: .7rem .8rem; border-radius: 8px; background: var(--muted); font-size: .8rem; color: var(--muted-foreground); }
.mr-shared[hidden] { display: none; }
.mr-picker { position: relative; }
.mr-search-label { display: block; margin: 0 0 .4rem; font-size: .75rem; font-weight: 600; }
.mr-search-field { display: flex; align-items: center; gap: .65rem; min-height: 46px; border: 1px solid var(--border); border-radius: 9px; background: var(--background); padding: 0 .8rem; transition: border-color .15s; }
.mr-search-field > svg { flex: none; color: var(--muted-foreground); }
.mr-search-field input { flex: 1; min-width: 0; width: 100%; height: 44px; border: 0; border-radius: 0; padding: 0; background: transparent; color: var(--foreground); font-size: .875rem; outline: none; box-shadow: none; }
.mr-search-field input::placeholder { color: var(--muted-foreground); opacity: .8; }
.mr-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.mr-search-clear { display: grid; place-items: center; flex: none; width: 25px; height: 25px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted-foreground); }
.mr-search-clear:hover { color: var(--foreground); background: var(--muted); }
.mr-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--popover, var(--card)); box-shadow: 0 10px 28px rgb(0 0 0 / .12), 0 2px 6px rgb(0 0 0 / .04); }
.mr-results-heading { display: flex; justify-content: space-between; gap: .5rem; padding: .65rem .8rem .55rem; font-size: .675rem; font-weight: 600; color: var(--muted-foreground); }
.mr-results-heading > span { font-weight: 400; }
#mr-results { max-height: 340px; overflow-y: auto; padding: 0 .3rem .3rem; overscroll-behavior: contain; }
.mr-result { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 58px; border: 0; border-radius: 7px; padding: .55rem .5rem; background: transparent; color: var(--foreground); text-align: left; }
.mr-result:hover:not(:disabled), .mr-result.is-active:not(:disabled) { background: var(--muted); }
.mr-result-state { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 7px; color: var(--muted-foreground); background: var(--card); font-size: .65rem; font-weight: 600; }
.mr-result-copy { display: grid; flex: 1; min-width: 0; gap: .15rem; }
.mr-result-name { font-size: .825rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-result-meta { font-size: .675rem; color: var(--muted-foreground); }
.mr-result-meta > span { padding: 0 .15rem; }
.mr-result-add { display: inline-flex; align-items: center; gap: .2rem; flex: none; font-size: .7rem; color: var(--muted-foreground); }
.mr-no-results { display: grid; justify-items: center; gap: .45rem; padding: 1.5rem .9rem 1.75rem; text-align: center; color: var(--muted-foreground); }
.mr-no-results strong { font-size: .825rem; font-weight: 500; color: var(--foreground); }
.mr-no-results p { margin: 0; font-size: .75rem; }
.mr-limit { margin: 0; border-top: 1px solid var(--border); padding: .65rem .8rem; color: var(--muted-foreground); font-size: .75rem; }
.mr-selected { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1rem 0; }
.mr-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 30px; max-width: 100%; border: 1px solid var(--border); border-radius: 7px; background: color-mix(in oklab, var(--muted) 45%, var(--card)); padding: .2rem .25rem .2rem .5rem; font-size: .75rem; }
.mr-chip > svg { flex: none; color: #ca9900; fill: currentColor; stroke-width: 1.5; }
.mr-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-chip > button { display: grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted-foreground); }
.mr-chip > button:hover { background: var(--muted); color: var(--foreground); }
.mr-selected-empty { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .2rem 0; color: var(--muted-foreground); }
.mr-selected-empty > svg { flex: none; opacity: .7; }
.mr-selected-empty p { margin: 0; font-size: .8rem; }
.mr-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; border-top: 1px solid var(--border); padding-top: .9rem; }
.mr-saved-note { font-size: .7rem; color: var(--muted-foreground); }
.my-races .mr-clear { margin-left: auto; min-height: 34px; padding: .35rem .25rem; border: 0; border-radius: 5px; background: transparent; color: var(--muted-foreground); font-size: .75rem; }
.mr-clear:hover:not(:disabled) { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
#board > p { padding: 1rem; }
#mr-status { margin: 0; overflow-wrap: anywhere; font-size: .75rem; color: var(--muted-foreground); }
#mr-status:not(:empty) { margin-top: .75rem; }
@media (max-width: 540px) {
  .my-races { padding: 1rem; }
  .mr-heading-row { gap: .5rem; align-items: flex-start; }
  .mr-heading-row p { max-width: 14rem; font-size: .75rem; }
  .my-races .mr-share { font-size: 0; gap: 0; width: 34px; padding: 0; }
  .mr-share svg { width: 16px; height: 16px; }
  .mr-search-field { padding: 0 .7rem; }
  .mr-search-field input { font-size: 16px; }
  .mr-result { min-height: 60px; gap: .5rem; }
  .mr-result-add span { display: none; }
  .mr-selected { gap: .4rem; }
  .mr-chip { font-size: .725rem; }
  .mr-saved-note { display: none; }
}
@media (prefers-reduced-motion: reduce) { .my-races * { transition: none !important; } }