.lab-quick-menu[hidden] { display: none; }
.lab-quick-menu { position: fixed; z-index: 2000; padding: 4px; background: #fff; border: 1px solid #b9cbd1; border-radius: 6px; box-shadow: 0 12px 28px rgba(19, 38, 45, .22); }
.lab-quick-menu button { min-width: 140px; padding: 10px 14px; border: 0; background: #f0f8f6; color: #12665f; font-weight: 800; cursor: pointer; }
.lab-shell { max-width: 1260px; margin: 0 auto; padding: 28px 20px 70px; color: #243438; }
.lab-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid #cad8d8; }
.lab-eyebrow { color: #407c76; font-size: 11px; font-weight: 800; }
.lab-heading h2 { margin: 2px 0 0; font-size: 32px; line-height: 1; }
.lab-back { padding: 9px 12px; border: 1px solid #b8c9ca; border-radius: 5px; background: #fff; color: #244d4b; font-weight: 700; cursor: pointer; }
.lab-searchbar { display: flex; align-items: center; gap: 12px; padding: 18px 0; }
.lab-searchbar input { width: min(100%, 500px); min-width: 0; height: 42px; padding: 0 13px; border: 1px solid #aebfc2; border-radius: 5px; background: #fff; color: #23363d; font: inherit; }
.lab-kind-filter { display: inline-flex; flex: 0 0 auto; border: 1px solid #b8c9ca; border-radius: 5px; overflow: hidden; }
.lab-kind-filter button { min-width: 58px; height: 40px; padding: 0 12px; border: 0; border-right: 1px solid #b8c9ca; background: #fff; color: #51666b; font-weight: 700; cursor: pointer; }
.lab-kind-filter button:last-child { border-right: 0; }
.lab-kind-filter button.is-active { background: #166e65; color: #fff; }
.lab-workspace { display: grid; grid-template-columns: minmax(235px, 330px) minmax(0, 1fr); gap: 26px; align-items: start; }
.lab-footer { display: flex; justify-content: center; margin-top: 28px; }
.lab-results-wrap { border-right: 1px solid #d8e2e2; padding-right: 16px; }
.lab-results-count { padding: 4px 0 10px; color: #597174; font-size: 12px; font-weight: 800; }
.lab-results { display: grid; gap: 2px; max-height: min(72vh, 800px); overflow: auto; }
.lab-result { display: flex; width: 100%; min-height: 58px; align-items: center; gap: 10px; padding: 6px 8px; text-align: left; border: 1px solid transparent; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
.lab-result:hover, .lab-result:focus-visible { background: #eff7f5; }
.lab-result.is-selected { border-color: #9dc9c0; background: #e8f3f0; }
.lab-result img { width: 42px; height: 42px; flex: 0 0 42px; object-fit: contain; image-rendering: pixelated; }
.lab-result-copy { min-width: 0; display: grid; gap: 3px; }
.lab-result-copy strong, .lab-result-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-result-copy strong { font-size: 13px; }
.lab-result-copy small { color: #63777a; font-size: 11px; }
.lab-result-stamp { margin-left: auto; color: #a56224; font-size: 12px; font-weight: 900; }
.lab-more { padding: 13px; border: 0; background: #eef4f3; color: #326861; font-weight: 700; cursor: pointer; }
.lab-detail { min-width: 0; }
.lab-empty { padding: 34px 12px; color: #6c7d80; text-align: center; }
.lab-item-heading { display: grid; grid-template-columns: 112px minmax(0, 1fr) 62px; align-items: center; gap: 16px; padding: 8px 0 22px; border-bottom: 1px solid #d8e2e2; }
.lab-item-image { display: grid; place-items: center; width: 112px; height: 112px; background: #f2f5f4; border: 1px solid #e0e7e5; }
.lab-item-image img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; }
.lab-item-heading-copy { min-width: 0; }
.lab-item-heading-copy h3 { margin: 5px 0; font-size: clamp(18px, 2vw, 25px); line-height: 1.25; overflow-wrap: anywhere; }
.lab-item-code { color: #536b6e; font-size: 13px; font-weight: 700; }
.lab-variant { margin-top: 8px; padding: 5px 8px; border: 1px solid #afc5c2; border-radius: 4px; background: #fff; color: #166e65; font-size: 12px; cursor: pointer; }
.lab-stamp { display: flex; justify-content: end; }
.lab-stamp .list-stamp { margin: 0; }
.lab-info-section { padding: 20px 0; border-bottom: 1px solid #d8e2e2; }
.lab-info-section h4 { margin: 0 0 14px; color: #2d484b; font-size: 14px; }
.lab-boardgame-more-button { border-color: #2d484b; background: #2d484b; color: #fff; font-size: 20px; line-height: 1; }
.lab-boardgame-more-button:focus-visible { outline: 2px solid #247b70; outline-offset: 3px; }
.lab-modes[hidden] { display: none; }
.lab-meta { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.lab-meta-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid #edf0ef; font-size: 13px; }
.lab-meta-row dt { color: #687b7d; }
.lab-meta-row dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.lab-modes { display: grid; grid-template-columns: minmax(0, 1fr); }
.lab-mode { display: flex; flex-wrap: wrap; min-height: 48px; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px solid #edf0ef; font-size: 12px; }
.lab-mode span { color: #5c7072; font-weight: 800; }
.lab-mode strong { margin-left: auto; color: #186c62; text-align: right; }
.lab-mode .lab-overheat-detail { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0 4px; }
.lab-overheat-detail small { font-size: inherit; white-space: nowrap; }
.lab-overheat-detail small + small::before { content: '· '; }
.lab-mode .lab-relic-detail, .lab-mode .lab-blossom-detail { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.lab-relic-glyph { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; }
.lab-mode.is-banned strong { color: #a26864; }
.lab-mode button { padding: 5px 7px; border: 1px solid #9dc6c0; border-radius: 4px; background: #eaf5f2; color: #116960; font-size: 11px; font-weight: 800; cursor: pointer; }
body.theme-dark .lab-shell { color: #e9e7e2; }
body.theme-dark .lab-quick-menu, body.theme-dark .lab-searchbar input, body.theme-dark .lab-back, body.theme-dark .lab-kind-filter button, body.theme-dark .lab-variant { background: #17242c; color: #e9e7e2; border-color: #465c60; }
body.theme-dark .lab-kind-filter button.is-active { background: #247b70; }
body.theme-dark .lab-result:hover, body.theme-dark .lab-result.is-selected, body.theme-dark .lab-item-image { background: #24363a; }
body.theme-dark .lab-result-copy small, body.theme-dark .lab-item-code, body.theme-dark .lab-mode span { color: #b4c5c5; }
body.theme-dark .lab-meta-row, body.theme-dark .lab-mode, body.theme-dark .lab-info-section, body.theme-dark .lab-item-heading, body.theme-dark .lab-heading, body.theme-dark .lab-results-wrap { border-color: #40565a; }
body.theme-dark .lab-heading h2, body.theme-dark .lab-item-heading-copy h3,
body.theme-dark .lab-info-section h4, body.theme-dark .lab-result-copy strong,
body.theme-dark .lab-meta-row dd { color: #f2f8f7; }
body.theme-dark .lab-eyebrow, body.theme-dark .lab-results-count,
body.theme-dark .lab-meta-row dt, body.theme-dark .lab-mode span,
body.theme-dark .lab-item-code, body.theme-dark .lab-result-copy small,
body.theme-dark .lab-empty { color: #c4d9d7; }
body.theme-dark .lab-mode strong { color: #a4f3d8; }
body.theme-dark .lab-mode.is-banned strong { color: #ffb8aa; }
body.theme-dark .lab-mode button, body.theme-dark .lab-quick-menu button,
body.theme-dark .lab-variant { background: #193d3b; color: #e0fff3; border-color: #6baba2; }
body.theme-dark .lab-result-stamp { color: #f9cb84; }
body.theme-dark .lab-result.is-selected { border-color: #77b9ae; }
@media (max-width: 750px) {
    .lab-shell { padding: 18px 12px 50px; }
    .lab-heading h2 { font-size: 27px; }
    .lab-searchbar { flex-wrap: wrap; }
    .lab-searchbar input { width: 100%; box-sizing: border-box; }
    .lab-kind-filter { width: 100%; box-sizing: border-box; }
    .lab-kind-filter button { flex: 1 1 0; min-width: 0; }
    .lab-workspace { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .lab-results-wrap { border-right: 0; border-bottom: 1px solid #d8e2e2; padding: 0 0 12px; }
    .lab-results { max-height: 235px; }
    .lab-meta, .lab-modes { grid-template-columns: minmax(0, 1fr); }
    .lab-item-heading { grid-template-columns: 84px minmax(0, 1fr) 44px; gap: 10px; }
    .lab-item-image { width: 84px; height: 84px; }
    .lab-mode.has-overheat-analysis { flex-wrap: nowrap; }
    .lab-mode.has-overheat-analysis > span { flex: 0 0 85px; }
    .lab-mode .lab-overheat-detail { display: grid; gap: 2px; min-width: 0; }
    .lab-overheat-detail small + small::before { content: none; }
}