.detail-workspace-command,
.composition-save-button,
.workspace-command {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid #605741;
  border-radius: 4px;
  background: #171715;
  color: #e9dec5;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}
.workspace-open-button { display: inline-flex; align-items: center; gap: 5px; color: #ead59f; }
.workspace-open-button:hover,
.detail-workspace-command:hover,
.composition-save-button:hover,
.workspace-command:hover { border-color: #b79350; background: #292116; }
.detail-workspace-command.is-active { border-color: #c89c47; color: #f1ca70; }
.detail-workspace-command:disabled,
.composition-save-button:disabled { cursor: default; opacity: .65; }
.composition-card-commands { display: grid; grid-template-columns: auto auto minmax(150px, 1fr); gap: 8px; padding: 0 16px 16px; }
.composition-card-commands .composition-entry-button { min-height: 34px; margin: 0; }

.personal-workspace { display: grid; gap: 18px; width: min(1180px, 100%); margin: 0 auto; padding: 20px 0 48px; }
.workspace-header { padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); }
.workspace-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 16px; }
.workspace-header > :not(.workspace-command) { grid-column: 1; }
.workspace-header > .workspace-command { grid-column: 2; grid-row: 1 / 4; align-self: center; }
.workspace-header h2 { margin: 3px 0 0; color: #f0d28a; font: 600 34px/1.15 serif; }
.workspace-description { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
.workspace-tabs { display: flex; gap: 0; border-bottom: 1px solid #4b4437; }
.workspace-tabs button { min-height: 42px; padding: 0 18px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #aaa294; cursor: pointer; font: inherit; }
.workspace-tabs button.is-active { border-bottom-color: #d1a852; color: #f0d28a; }
.workspace-notice { margin: 0; padding: 9px 12px; border-left: 3px solid #c89c47; background: #1a1813; color: #dfd3bc; }
.workspace-list { display: grid; gap: 10px; }
.workspace-deck-card { padding: 16px; border: 1px solid #444038; border-radius: 6px; background: #151617; }
.workspace-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.workspace-card-heading h3 { margin: 3px 0 0; color: #ead09a; font: 600 23px/1.2 serif; }
.workspace-card-eyebrow { color: #aaa08f; font-size: 11px; font-weight: 700; }
.workspace-card-actions { display: flex; gap: 7px; }
.workspace-command.is-danger { color: #dca19a; }
.workspace-card-heroes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.workspace-card-hero { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 3px 10px; min-width: 0; }
.workspace-card-hero > img,
.workspace-card-hero > .portrait-fallback { grid-row: 1 / 3; width: 54px; height: 70px; object-fit: cover; border: 1px solid #735d36; }
.workspace-card-hero strong,
.workspace-card-hero span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-card-hero strong { align-self: end; color: #e9e0d2; }
.workspace-card-hero span { color: var(--muted); font-size: 12px; }
.workspace-command.is-primary { border-color: #9a7536; background: #352711; color: #f1cf82; }

.personal-deck-editor,
.workspace-data-manager { padding: 16px; border: 1px solid #49443a; border-radius: 6px; background: #151617; }
.workspace-editor-heading h3,
.workspace-data-manager h3 { margin: 0; color: #ead09a; font: 600 22px/1.2 serif; }
.workspace-editor-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.workspace-editor-basics { display: grid; grid-template-columns: minmax(180px, 1fr) 150px minmax(240px, 2fr); gap: 12px; margin-top: 16px; }
.workspace-editor-field { display: grid; gap: 5px; color: #bdb2a2; font-size: 12px; }
.workspace-editor-field input,
.workspace-editor-field select,
.workspace-editor-field textarea,
.workspace-editor-slot select {
  width: 100%; min-width: 0; min-height: 38px; padding: 7px 9px; border: 1px solid #565047; border-radius: 4px; background: #101112; color: #eee4d4; font: inherit;
}
.workspace-editor-field textarea { min-height: 74px; resize: vertical; }
.workspace-editor-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.workspace-editor-slot { min-width: 0; margin: 0; padding: 12px; border: 1px solid #3e3c37; }
.workspace-editor-slot legend { padding: 0 6px; color: #d6b976; font-weight: 700; }
.workspace-editor-slot .workspace-editor-field + .workspace-editor-field { margin-top: 9px; }
.workspace-editor-error { margin: 12px 0 0; color: #e69a91; }
.workspace-editor-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.workspace-data-manager { margin-top: 12px; }
.workspace-data-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.workspace-file-button { min-height: 34px; padding: 5px 10px; display: inline-flex; align-items: center; border: 1px solid #605741; border-radius: 4px; background: #171715; color: #e9dec5; cursor: pointer; }
.workspace-file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.workspace-import-preview { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.workspace-import-preview strong { color: #ead09a; }
.workspace-import-preview span { color: var(--muted); }
.workspace-overwrite-control { display: inline-flex; align-items: center; gap: 6px; color: #c7bdad; font-size: 13px; }

.personal-comparison { display: grid; gap: 16px; }
.personal-comparison-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.personal-comparison-select { display: grid; gap: 5px; color: #bdb2a2; font-size: 12px; }
.personal-comparison-select select { min-height: 40px; padding: 7px 10px; border: 1px solid #565047; border-radius: 4px; background: #151617; color: #eee4d4; font: inherit; }
.personal-comparison-explanation { margin: 0; padding: 9px 12px; border-left: 3px solid #8d7547; background: #181713; color: #bdb3a4; font-size: 12px; }
.personal-comparison-difference { margin: 0; padding: 10px 14px; border-left: 3px solid #c89c47; background: #1a1813; color: #f0d28a; font-weight: 700; }
.personal-comparison-lineups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #46423a; }
.personal-comparison-lineup { min-width: 0; padding: 14px; }
.personal-comparison-lineup + .personal-comparison-lineup { border-left: 1px solid #46423a; }
.personal-comparison-lineup h3,
.personal-similar-builds h3 { margin: 0 0 12px; color: #ead09a; font: 600 20px/1.2 serif; }
.personal-comparison-heroes { display: grid; gap: 10px; }
.personal-comparison-hero { display: grid; grid-template-columns: 48px minmax(90px, auto) minmax(0, 1fr); align-items: center; gap: 9px; }
.personal-comparison-hero > img,
.personal-comparison-hero > .portrait-fallback { width: 48px; height: 62px; object-fit: cover; border: 1px solid #735d36; }
.personal-comparison-hero > strong { color: #e7ded0; }
.personal-comparison-tactics { display: grid; gap: 4px; }
.personal-comparison-tactics span { padding-left: 8px; border-left: 2px solid #705e3d; color: #bfb5a5; font-size: 12px; }
.personal-comparison-tactics span.is-same { border-color: #5eac78; color: #8ed39d; }
.personal-comparison-tactics span.is-different { border-color: #b9605d; color: #d8aaa5; }
.personal-comparison-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #46423a; }
.personal-comparison-stat { min-width: 0; padding: 13px; border-right: 1px solid #46423a; }
.personal-comparison-stat:last-child { border-right: 0; }
.personal-comparison-stat h3 { margin: 0 0 8px; color: #bdb2a2; font-size: 13px; }
.personal-comparison-stat > strong { display: block; color: #7bc889; font-size: 22px; }
.personal-comparison-stat > strong.is-danger { color: #dc7f78; }
.personal-comparison-stat > strong.is-favorable { color: #7bc889; }
.personal-comparison-stat .personal-opponent-rate { color: #d8aaa5; }
.personal-comparison-stat > strong.is-empty { color: #aaa294; font-size: 17px; }
.personal-comparison-stat > span,
.personal-comparison-stat > small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.personal-comparison-stat > small.sample-low { color: #d9ad5f; }
.personal-similar-builds { padding-top: 4px; }
.personal-similar-row { width: 100%; min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: #d8d0c3; cursor: pointer; text-align: left; font: inherit; }
.personal-similar-row:hover { background: #1d1a14; }
.personal-similar-row strong { color: #ead09a; }
.personal-similar-row span { color: var(--muted); font-size: 13px; }
.personal-comparison-filter { margin: 0; color: #9f978b; font-size: 12px; }
.personal-export-controls { padding-top: 14px; border-top: 1px solid var(--line); }
.personal-export-controls h3 { margin: 0 0 10px; color: #ead09a; font: 600 20px/1.2 serif; }
.personal-export-controls textarea { width: 100%; min-height: 78px; padding: 9px 10px; border: 1px solid #565047; border-radius: 4px; background: #151617; color: #eee4d4; resize: vertical; font: inherit; }
.personal-export-privacy { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: #bdb2a2; font-size: 13px; }
.personal-export-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.personal-records { display: grid; gap: 14px; }
.personal-dashboard-title { margin: 0; color: #ead09a; font: 600 26px/1.2 serif; }
.personal-record-controls { display: grid; gap: 10px; }
.personal-record-controls > select { width: min(320px, 100%); min-height: 38px; padding: 7px 9px; border: 1px solid #565047; border-radius: 4px; background: #151617; color: #eee4d4; font: inherit; }
.personal-profile-form { display: grid; grid-template-columns: minmax(140px, .7fr) minmax(180px, 1fr) minmax(160px, .8fr) auto auto; align-items: end; gap: 8px; padding: 12px; border: 1px solid #46423a; background: #151617; }
.personal-profile-field { display: grid; gap: 5px; color: #bdb2a2; font-size: 12px; }
.personal-profile-field input { min-width: 0; min-height: 36px; padding: 6px 8px; border: 1px solid #565047; border-radius: 4px; background: #101112; color: #eee4d4; font: inherit; }
.personal-profile-candidates { grid-column: 1 / -1; margin: 3px 0 0; color: #c6b78e; font-size: 12px; }
.personal-record-filter { margin: 0; color: #9f978b; font-size: 12px; }
.personal-record-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #46423a; }
.personal-record-summary > div { padding: 12px; border-right: 1px solid #46423a; }
.personal-record-summary > div:last-child { border-right: 0; }
.personal-record-summary span { display: block; color: var(--muted); font-size: 12px; }
.personal-record-summary strong { display: block; margin-top: 4px; color: #ead09a; font-size: 18px; }
.personal-record-import { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #49443a; background: #171713; }
.personal-record-import span { color: var(--muted); font-size: 12px; }
.personal-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.personal-dashboard-panel { min-width: 0; padding: 13px; border: 1px solid #46423a; background: #141515; }
.personal-dashboard-panel h3 { margin: 0 0 8px; color: #ead09a; font: 600 18px/1.2 serif; }
.personal-dashboard-panel p { margin: 5px 0; color: #bdb3a4; font-size: 13px; }
.personal-record-decks h3 { margin: 0 0 8px; color: #ead09a; font: 600 20px/1.2 serif; }
.personal-record-deck { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.personal-record-deck > div:first-child { min-width: 0; display: grid; gap: 3px; }
.personal-record-deck strong { color: #ead09a; font-size: 17px; }
.personal-record-deck span { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.personal-record-actions { display: flex; gap: 6px; }

@media (max-width: 640px) {
  .composition-card-commands { grid-template-columns: 1fr 1fr; }
  .composition-card-commands .composition-entry-button { grid-column: 1 / -1; }
  .workspace-card-heroes { grid-template-columns: 1fr; }
  .workspace-tabs button { flex: 1; min-width: 0; padding-inline: 5px; }
  .workspace-editor-basics,
  .workspace-editor-slots { grid-template-columns: 1fr; }
  .workspace-import-preview { grid-template-columns: 1fr; }
  .personal-comparison-controls,
  .personal-comparison-lineups,
  .personal-comparison-stats { grid-template-columns: 1fr; }
  .personal-comparison-lineup + .personal-comparison-lineup { border-top: 1px solid #46423a; border-left: 0; }
  .personal-comparison-stat { border-right: 0; border-bottom: 1px solid #46423a; }
  .personal-comparison-stat:last-child { border-bottom: 0; }
  .personal-similar-row { grid-template-columns: 1fr; gap: 3px; }
  .personal-profile-form,
  .personal-record-summary { grid-template-columns: 1fr; }
  .personal-dashboard-grid { grid-template-columns: 1fr; }
  .personal-record-import { align-items: stretch; flex-direction: column; }
  .personal-record-summary > div { border-right: 0; border-bottom: 1px solid #46423a; }
  .personal-record-summary > div:last-child { border-bottom: 0; }
  .personal-record-deck { grid-template-columns: 1fr; }
  .personal-record-actions { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .workspace-open-button { min-width: 36px; padding-inline: 9px; }
  .workspace-open-button span:last-child { display: none; }
  .topbar-nav { gap: 5px; }
  .hub-link, .overview-open-button, .drawer-open-button, .global-settings-open-button { padding-inline: 6px; font-size: 13px; }
  .detail-workspace-command { flex: 1 1 120px; }
  .workspace-card-heading { align-items: stretch; flex-direction: column; }
  .workspace-header { grid-template-columns: 1fr; }
  .workspace-header > .workspace-command { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
  .workspace-card-actions { justify-content: flex-end; }
}


/* Personal dashboard and observed-build picker */
.personal-record-deck {
  grid-template-columns: minmax(150px, .75fr) minmax(420px, 2fr) auto;
  padding: 14px 0;
}
.personal-record-deck-identity { min-width: 0; display: grid; align-content: center; gap: 3px; }
.personal-record-deck-identity > strong { color: #ead09a; font-size: 18px; }
.personal-record-deck-identity > span,
.personal-record-deck-identity > small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.personal-record-lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.personal-record-hero { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 2px 8px; min-width: 0; }
.personal-record-hero > img,
.personal-record-hero > .portrait-fallback { grid-row: 1 / 3; width: 42px; height: 54px; object-fit: cover; border: 1px solid #705b34; }
.personal-record-hero > strong,
.personal-record-hero > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personal-record-hero > strong { align-self: end; color: #e8dfd2; font-size: 13px; }
.personal-record-hero > span { align-self: start; color: #b7ad9d; font-size: 11px; }
.personal-alliance-record,
.personal-recent-battle { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 7px 0; border-bottom: 1px solid #34332f; }
.personal-alliance-record:last-child,
.personal-recent-battle:last-child { border-bottom: 0; }
.personal-alliance-record strong { color: #ead09a; }
.personal-alliance-record span { color: #ded5c8; font-size: 13px; }
.personal-alliance-record small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.personal-recent-battle > span { min-width: 38px; font-size: 12px; font-weight: 700; }
.personal-recent-battle > span.outcome-win { color: #79c88a; }
.personal-recent-battle > span.outcome-loss { color: #dc7f78; }
.personal-recent-battle > span.outcome-draw { color: #d5ad62; }
.personal-recent-player { min-width: 0; padding: 4px 0; border: 0; background: transparent; color: #e5d7bc; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.personal-recent-player:hover { color: #f1ca70; text-decoration: underline; }
.personal-recent-player:disabled { color: var(--muted); cursor: default; text-decoration: none; }

.personal-build-picker { position: relative; }
.personal-build-picker-details { position: relative; }
.personal-build-picker-summary { min-height: 52px; padding: 6px 36px 6px 10px; display: flex; align-items: center; gap: 10px; border: 1px solid #565047; border-radius: 4px; background: #151617; color: #eee4d4; cursor: pointer; list-style: none; }
.personal-build-picker-summary::-webkit-details-marker { display: none; }
.personal-build-picker-summary::after { content: '⌄'; position: absolute; right: 13px; color: #d0b16b; font-size: 18px; }
.personal-build-picker-placeholder { color: #aaa294; }
.personal-build-picker-selected-copy { min-width: 0; display: grid; gap: 2px; }
.personal-build-picker-selected-copy strong { color: #f0cf83; font-size: 15px; }
.personal-build-picker-selected-copy small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.personal-build-picker-panel { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: min(720px, 92vw); padding: 10px; border: 1px solid #77643f; background: #101112; box-shadow: 0 16px 36px #000b; }
.personal-build-picker-search { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #565047; background: #181919; color: #f2e7d5; font: inherit; }
.personal-build-picker-list { max-height: 460px; margin-top: 8px; overflow-y: auto; }
.personal-build-picker-row { width: 100%; min-width: 0; padding: 9px 8px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 0; border-bottom: 1px solid #34332f; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.personal-build-picker-row:hover,
.personal-build-picker-row.is-selected { background: #211d15; }
.personal-build-picker-portraits { display: flex; flex: 0 0 auto; }
.personal-build-picker-portraits > img,
.personal-build-picker-portraits > .portrait-fallback { width: 34px; height: 44px; object-fit: cover; border: 1px solid #6d5934; }
.personal-build-picker-portraits > * + * { margin-left: -5px; }
.personal-build-picker-copy { min-width: 0; display: grid; gap: 2px; }
.personal-build-picker-title { display: flex; align-items: center; gap: 7px; }
.personal-build-picker-title strong { color: #edca77; font-size: 16px; }
.personal-build-ranked { padding: 1px 5px; border: 1px solid #806735; color: #d8ba75; font-size: 10px; }
.personal-build-picker-copy > span,
.personal-build-picker-copy > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personal-build-picker-copy > span { color: #d5ccbe; font-size: 12px; }
.personal-build-picker-copy > small { color: #9f978b; font-size: 11px; }
.personal-build-observations { color: #bdb3a4; font-size: 12px; white-space: nowrap; }

@media (max-width: 760px) {
  .personal-record-deck { grid-template-columns: 1fr; }
  .personal-record-lineup { grid-template-columns: 1fr; }
  .personal-record-hero { grid-template-columns: 38px minmax(0, 1fr); }
  .personal-record-hero > img,
  .personal-record-hero > .portrait-fallback { width: 38px; height: 49px; }
  .personal-build-picker-panel { position: fixed; z-index: 50; inset: 112px 10px 12px; width: auto; }
  .personal-build-picker-list { max-height: calc(100vh - 190px); }
  .personal-build-picker-row { grid-template-columns: auto minmax(0, 1fr); }
  .personal-build-observations { display: none; }
}

/* Expanded personal deck editor and saved deck detail */
.workspace-editor-basics-expanded { grid-template-columns: minmax(160px, 1fr) minmax(140px, .7fr) 130px minmax(240px, 1.5fr); }
.workspace-editor-slots-expanded { grid-template-columns: 1fr; gap: 14px; }
.workspace-editor-hero-card { padding: 0; overflow: hidden; border-color: #514934; background: #121313; }
.workspace-editor-hero-heading { min-height: 88px; padding: 12px 14px; display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 12px; border-bottom: 1px solid #403c32; background: #181714; }
.workspace-editor-hero-heading .workspace-card-eyebrow { font-size: 12px; }
.workspace-choice-button { width: 100%; min-width: 0; min-height: 64px; padding: 7px 10px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid #5b513d; border-radius: 4px; background: #101112; color: inherit; text-align: left; cursor: pointer; }
.workspace-choice-button:hover { border-color: #b28b43; background: #1d1a14; }
.workspace-choice-button > img,
.workspace-choice-button > .portrait-fallback { width: 42px; height: 54px; object-fit: cover; border: 1px solid #765f36; }
.workspace-choice-button > .tactic-icon,
.workspace-choice-button > .tactic-icon-fallback { width: 42px; height: 42px; }
.workspace-choice-copy { min-width: 0; display: grid; gap: 3px; }
.workspace-choice-copy strong { overflow: hidden; color: #ebd39b; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-choice-copy small { overflow: hidden; color: #a99f8f; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-choice-arrow { color: #d2a852; font-size: 24px; }
.workspace-editor-empty-hero { margin: 0; padding: 22px 14px; color: #9f978b; }
.workspace-editor-quick-grid { padding: 12px 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.workspace-editor-section { padding: 12px 14px; border-top: 1px solid #383631; }
.workspace-editor-section h4 { margin: 0 0 10px; color: #d9b86f; font: 600 16px/1.2 serif; }
.workspace-editor-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #3d3b36; }
.workspace-editor-stat-row { min-width: 0; padding: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; border-right: 1px solid #3d3b36; }
.workspace-editor-stat-row:last-child { border-right: 0; }
.workspace-editor-stat-row > strong { grid-column: 1 / -1; color: #e6dccb; }
.workspace-editor-stat-row .workspace-editor-field span { font-size: 10px; }
.workspace-editor-tactic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.workspace-editor-warbooks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.workspace-editor-warbook,
.workspace-editor-item { padding: 10px; display: grid; gap: 8px; border: 1px solid #3f3c35; background: #151515; }
.workspace-editor-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.workspace-picker-dialog { width: min(780px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 28px)); padding: 0; border: 1px solid #80683c; background: #101112; color: #e8dfd0; box-shadow: 0 24px 70px #000d; }
.workspace-picker-dialog::backdrop { background: #050606d9; }
.workspace-picker-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr); max-height: inherit; }
.workspace-picker-heading { padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #484132; }
.workspace-picker-heading h4 { margin: 0; color: #efd28b; font: 600 22px/1.2 serif; }
.workspace-picker-search { min-height: 44px; margin: 12px 14px 6px; padding: 8px 11px; border: 1px solid #5b554b; background: #181919; color: #f0e7d9; font: inherit; }
.workspace-picker-list { max-height: 570px; padding: 6px 14px 14px; overflow-y: auto; }
.workspace-picker-row { width: 100%; min-height: 66px; padding: 8px 10px; display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 11px; border: 0; border-bottom: 1px solid #35332e; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.workspace-picker-row:hover,
.workspace-picker-row.is-selected { background: #211d15; }
.workspace-picker-row > img,
.workspace-picker-row > .portrait-fallback { width: 46px; height: 58px; object-fit: cover; border: 1px solid #735d36; }
.workspace-picker-row > .tactic-icon,
.workspace-picker-row > .tactic-icon-fallback { width: 44px; height: 44px; }
.workspace-picker-copy { min-width: 0; display: grid; gap: 4px; }
.workspace-picker-copy strong { color: #ecd08e; font-size: 16px; }
.workspace-picker-copy small { color: #aaa193; font-size: 12px; }
.workspace-deck-card { padding: 0; overflow: hidden; }
.workspace-deck-card-open { width: 100%; padding: 16px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.workspace-deck-card-open:hover { background: #1c1a15; }
.workspace-deck-card-open .workspace-card-heroes { margin-top: 14px; }
.workspace-card-open-hint { color: #cfa854; font-size: 12px; }
.workspace-card-actions-bar { justify-content: flex-end; padding: 10px 16px; border-top: 1px solid #39362f; background: #121313; }
.workspace-saved-detail { display: grid; gap: 16px; }
.workspace-saved-detail-header { padding-bottom: 14px; display: flex; align-items: start; justify-content: space-between; gap: 16px; border-bottom: 1px solid #504837; }
.workspace-saved-detail-header h3 { margin: 4px 0 0; color: #efd18a; font: 600 30px/1.15 serif; }
.workspace-saved-detail-header p { margin: 7px 0 0; color: #aaa193; }
.workspace-saved-heroes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #49443a; }
.workspace-saved-hero { min-width: 0; padding: 14px; }
.workspace-saved-hero + .workspace-saved-hero { border-left: 1px solid #49443a; }
.workspace-saved-hero-identity { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 12px; }
.workspace-saved-hero-identity > img,
.workspace-saved-hero-identity > .portrait-fallback { width: 74px; height: 96px; object-fit: cover; border: 1px solid #765f36; }
.workspace-saved-hero-identity h4 { margin: 4px 0 0; color: #eee2ce; font: 600 24px/1.15 serif; }
.workspace-saved-hero-identity p { margin: 6px 0 0; color: #aca293; font-size: 12px; }
.workspace-saved-stats { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #3f3c36; }
.workspace-saved-stats > div { padding: 8px 10px; display: grid; grid-template-columns: 1fr auto; border-right: 1px solid #3f3c36; border-bottom: 1px solid #3f3c36; }
.workspace-saved-stats > div:nth-child(2n) { border-right: 0; }
.workspace-saved-stats > div:nth-last-child(-n+2) { border-bottom: 0; }
.workspace-saved-stats span { color: #aaa193; font-size: 11px; }
.workspace-saved-stats strong { color: #f0e4d1; }
.workspace-saved-stats small { grid-column: 1 / -1; color: #74bd86; font-size: 10px; }
.workspace-saved-group { margin-top: 15px; }
.workspace-saved-group h5 { margin: 0 0 7px; padding-bottom: 6px; border-bottom: 1px solid #3d3932; color: #d7b66d; font-size: 14px; }
.workspace-saved-tactics,
.workspace-saved-books,
.workspace-saved-gear { display: grid; gap: 7px; }
.workspace-saved-tactic { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 8px; }
.workspace-saved-tactic > img,
.workspace-saved-tactic > .tactic-icon-fallback { width: 38px; height: 38px; }
.workspace-saved-tactic > span,
.workspace-saved-books > div { min-width: 0; display: grid; gap: 2px; }
.workspace-saved-tactic strong,
.workspace-saved-books strong,
.workspace-saved-gear strong { color: #e7ddcf; font-size: 12px; }
.workspace-saved-tactic small,
.workspace-saved-books span,
.workspace-saved-gear small { color: #9f9688; font-size: 10px; }
.workspace-saved-gear > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 8px; }
.workspace-saved-gear > div > span { grid-row: 1 / 3; color: #bcae94; font-size: 11px; }
.personal-recent-copy { min-width: 0; display: grid; justify-items: end; gap: 3px; }
.personal-recent-matchup { max-width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto minmax(0, 1fr); align-items: center; gap: 5px; }
.personal-recent-matchup strong { color: #d8b86e; font-size: 11px; white-space: nowrap; }
.personal-recent-matchup span { overflow: hidden; color: #948c80; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.personal-recent-matchup b { color: #b5914d; font-weight: 400; }

@media (max-width: 900px) {
  .workspace-editor-basics-expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-editor-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-editor-stat-row:nth-child(2) { border-right: 0; }
  .workspace-editor-stat-row:nth-child(-n+2) { border-bottom: 1px solid #3d3b36; }
  .workspace-saved-heroes { grid-template-columns: 1fr; }
  .workspace-saved-hero + .workspace-saved-hero { border-top: 1px solid #49443a; border-left: 0; }
}
@media (max-width: 640px) {
  .workspace-editor-basics-expanded,
  .workspace-editor-quick-grid,
  .workspace-editor-tactic-grid,
  .workspace-editor-warbooks,
  .workspace-editor-items,
  .workspace-editor-stat-grid { grid-template-columns: 1fr; }
  .workspace-editor-hero-heading { grid-template-columns: 1fr; }
  .workspace-editor-stat-row { border-right: 0; border-bottom: 1px solid #3d3b36; }
  .workspace-saved-detail-header { flex-direction: column; }
  .workspace-saved-detail-header .workspace-card-actions { width: 100%; flex-wrap: wrap; }
  .personal-recent-matchup { grid-template-columns: auto minmax(0, 1fr); }
  .personal-recent-matchup b { display: none; }
}
.workspace-editor-tactic-box { min-width: 0; padding: 9px; border: 1px solid #403c34; background: #141515; }
.workspace-editor-tactic-details { margin-top: 8px; display: grid; grid-template-columns: 80px 110px minmax(100px, .7fr) minmax(160px, 1.3fr); gap: 7px; }
@media (max-width: 640px) { .workspace-editor-tactic-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Personal workspace refactor: compact profile controls and bilateral recent battles. */
.personal-record-controls { grid-template-columns: minmax(180px, 320px) auto; align-items: center; }
.personal-profile-editor { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.personal-profile-editor > h4 { grid-column: 1 / -1; margin: 0 0 4px; color: #ead09a; font: 600 20px/1.2 serif; }
.personal-profile-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.personal-recent-battle { grid-template-columns: 1fr; align-items: stretch; }
.personal-recent-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.personal-recent-heading > span { font-size: 12px; font-weight: 700; }
.personal-recent-heading > time { color: #8f887d; font-size: 10px; }
.personal-recent-own-player { color: #b8ae9e; font-size: 11px; }
.personal-build-picker-selected-tactics { max-width: 46rem; }
.workspace-command:disabled { cursor: default; opacity: .55; }