.nav-link, .button, .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text);
  background: transparent;
  padding: 10px 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav-link:hover, .theme-toggle:hover { background: var(--surface-2); }
.nav-link[aria-current="page"] { color: var(--text); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.theme-toggle { margin-left: auto; color: var(--text-muted); }.save-status { color: var(--text-muted); font-size: 12px; white-space: nowrap; }.save-status[data-state="saved"] { color: var(--recommend); }.save-status[data-state="error"] { color: var(--warning); }

.panel, .entry-column {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-micro);
}
.panel { padding: 20px; }
.panel h2 { font-size: 22px; }
.panel p + p { margin-top: 12px; }

.entry-column { overflow: hidden; }
.entry-title { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--border); }
.entry-title h2 { font-size: 18px; }
.entry-count { color: var(--text-muted); font-size: 14px; }
.quick-opponent-search { display: grid; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.quick-opponent-search input { min-height: 44px; width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--surface-1); padding: 8px 10px; }
.quick-opponent-search input:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 1px; }
.quick-search-help, .quick-search-suggestion, .quick-search-status { min-height: 18px; color: var(--text-muted); font-size: 12px; }
.quick-search-suggestion { color: var(--accent-hover); }.quick-search-status:not(:empty) { color: var(--recommend); }
.slot-list { display: grid; gap: 8px; padding: 12px; }
.empty-slot {
  display: flex;
  align-items: center;
  min-height: 62px;
  width: 100%;
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: var(--surface-2);
  text-align: left;
}
.empty-slot:hover { border-color: var(--accent); color: var(--text); background: var(--surface-hover); }
.pokemon-card { position: relative; display: grid; width: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--surface-2); text-align: left; }
.pokemon-card[data-recommendation="true"] { border-color: var(--recommend); box-shadow: inset 0 0 18px var(--recommend-soft); }
.pokemon-card-select { display: flex; width: 100%; min-height: 74px; align-items: center; gap: 10px; border: 0; color: inherit; background: transparent; padding: 10px 54px 10px 10px; text-align: left; }.pokemon-card-select:hover, .pokemon-card-select[aria-selected="true"] { background: var(--surface-hover); }.pokemon-card-select[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--accent-soft); }
.pokemon-card-delete { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; color: var(--text-muted); background: transparent; font-size: 26px; line-height: 1; }.pokemon-card-delete:hover, .pokemon-card-delete:focus-visible { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); outline: none; }
.pokemon-marker { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--accent-hover); background: var(--accent-soft); font-weight: 700; }
.pokemon-card-details { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }
.pokemon-card-details small { color: var(--text-muted); }
.type-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.pokemon-card-metadata { display: flex; width: 100%; min-width: 0; align-items: center; gap: 6px; }.pokemon-card-metadata .type-badges { min-width: 0; }.opponent-threat-badges { display: flex; flex: 0 0 auto; margin-left: auto; gap: 3px; }.opponent-threat-badge { display: inline-flex; align-items: center; min-height: 20px; border: 1px solid color-mix(in srgb, var(--warning) 48%, var(--border)); border-radius: 5px; color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); padding: 1px 4px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.type-badge { padding: 2px 6px; border-radius: 6px; color: var(--text); background: rgba(148, 167, 189, 0.18); font-size: 12px; font-weight: 600; }
.type-badge[data-type="fire"] { background: rgba(239, 116, 116, 0.26); }.type-badge[data-type="water"] { background: rgba(83, 153, 230, 0.27); }.type-badge[data-type="grass"] { background: rgba(96, 183, 125, 0.26); }.type-badge[data-type="electric"] { background: rgba(244, 189, 97, 0.28); }.type-badge[data-type="dragon"], .type-badge[data-type="psychic"] { background: rgba(139, 124, 246, 0.27); }
.recommendation-info { display: grid; gap: 2px; border-top: 1px solid var(--border); padding: 8px 10px; background: color-mix(in srgb, var(--surface-1) 70%, transparent); font-size: 12px; }.recommendation-info strong { color: var(--recommend); font-size: 16px; }.recommendation-info span, .recommendation-info small { color: var(--text-muted); }.recommendation-info .best-candidate { width: fit-content; margin-top: 2px; border-radius: 6px; color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); padding: 2px 5px; }
.pokemon-card-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-top: 1px solid var(--border); padding: 6px; }.opponent-control { min-height: 36px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); background: var(--surface-1); font-size: 12px; text-align: left; padding: 6px; }.opponent-control:hover { color: var(--text); border-color: var(--accent); }
.matchup-panel { display: grid; align-content: start; gap: 14px; }.matchup-speed { color: var(--recommend); font-weight: 700; }
.assumption-note { color: var(--text-muted); font-size: 14px; }
.damage-list { display: grid; gap: 8px; }.damage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; background: var(--surface-2); }.damage-row > div { display: grid; gap: 2px; }.damage-row > div span { color: var(--text-muted); font-size: 12px; }.ko-label { color: var(--recommend); font-weight: 700; }.turn-order, .damage-assumption { grid-column: 1 / -1; color: var(--text-muted); font-size: 14px; }.damage-assumption { color: var(--warning); }.damage-row details { grid-column: 1 / -1; color: var(--text-muted); font-size: 14px; }.damage-row summary { cursor: pointer; }.damage-row details p { margin: 8px 0 0; }
.context-controls { display: grid; gap: 10px; border-top: 1px solid var(--border); padding-top: 16px; }.context-controls h2 { font-size: 17px; }.context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.context-field { display: grid; gap: 4px; color: var(--text-muted); font-size: 12px; font-weight: 600; }.context-field select { min-height: 36px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--surface-2); padding: 5px 7px; }.reset-context { width: fit-content; min-height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--surface-2); padding: 8px 12px; }
.audit-view { display: grid; gap: 16px; }.audit-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }.audit-summary-card { min-height: 112px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-1); padding: 14px; }.audit-summary-card[data-tone="warning"] { border-color: color-mix(in srgb, var(--warning) 42%, var(--border)); }.audit-summary-card[data-tone="recommend"] { border-color: color-mix(in srgb, var(--recommend) 42%, var(--border)); }.audit-summary-card h2 { font-size: 16px; }.audit-summary-card p { margin-top: 8px; color: var(--text-muted); font-size: 14px; }.audit-table-panel { overflow-x: auto; }.audit-table-panel h2 { font-size: 20px; }.audit-note { margin: 6px 0 12px; color: var(--text-muted); font-size: 14px; }.audit-table-panel table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; }.audit-table-panel th, .audit-table-panel td { border-bottom: 1px solid var(--border); padding: 10px; font-size: 14px; vertical-align: top; }.audit-table-panel th { color: var(--text-muted); font-weight: 600; }.audit-table-panel tr[data-status="gap"] td:last-child { color: var(--danger); font-weight: 700; }.audit-table-panel tr[data-status="covered"] td:last-child { color: var(--recommend); font-weight: 700; }
.settings-view { display: grid; max-width: 900px; gap: 16px; }.settings-view > h1 { font-size: 32px; }.settings-lead, .settings-note { color: var(--text-muted); }.settings-section { display: grid; gap: 14px; }.settings-section h2 { font-size: 20px; }.settings-field { display: grid; gap: 6px; max-width: 300px; color: var(--text-muted); font-size: 14px; font-weight: 600; }.settings-field select, .settings-field input { min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--surface-2); padding: 8px 10px; }.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.weight-total, .import-status { min-height: 20px; color: var(--text-muted); font-size: 14px; }.import-status[data-state="success"] { color: var(--recommend); }.import-status[data-state="error"] { color: var(--danger); }.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }.secondary-button, .danger-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--surface-2); padding: 8px 12px; font-weight: 600; }.secondary-button:hover { border-color: var(--accent); }.danger-button { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }.delete-dialog { width: min(440px, calc(100vw - 24px)); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); background: var(--surface-1); padding: 20px; }.delete-dialog::backdrop { background: rgba(3, 5, 9, 0.7); }.delete-dialog p { margin-top: 10px; color: var(--text-muted); }.dialog-actions { display: flex; justify-content: end; gap: 8px; margin-top: 20px; }
.team-slot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.team-editor { display: grid; gap: 20px; }
.team-control { min-height: 34px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); background: var(--surface-1); padding: 5px 7px; font-size: 12px; }.team-control:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }.team-control:disabled { cursor: not-allowed; opacity: 0.45; }.team-control:last-child { color: var(--danger); }
.team-form { display: grid; gap: 20px; }
.team-form h2 { font-size: 22px; }
.form-grid, .stat-input-grid, .move-input-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.form-field { display: grid; gap: 6px; color: var(--text-muted); font-size: 14px; font-weight: 600; }
.form-field input, .form-field select { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--surface-2); padding: 8px 10px; }
.team-form fieldset { margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.team-form legend { padding: 0 6px; color: var(--text); font-weight: 700; }
.stat-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.stat-summary span { display: grid; gap: 2px; padding: 10px; border-right: 1px solid var(--border); background: var(--surface-2); text-align: center; }
.stat-summary span:last-child { border-right: 0; }.stat-summary small { color: var(--text-muted); }.stat-summary strong { font-size: 18px; }
.form-errors { color: var(--danger); }.form-errors ul { margin: 0; padding-left: 20px; }
.form-help { margin: 0 0 12px; color: var(--text-muted); font-size: 14px; }
.form-status { color: var(--recommend); font-size: 14px; }.form-status[data-state="invalid"] { color: var(--warning); }
.pokemon-picker, .move-picker { width: min(520px, calc(100vw - 24px)); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); background: var(--surface-1); box-shadow: var(--shadow-subtle); padding: 20px; }
.pokemon-picker::backdrop, .move-picker::backdrop { background: rgba(3, 5, 9, 0.7); backdrop-filter: blur(2px); }
.picker-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.icon-button { min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--surface-2); padding: 8px 12px; }
.pokemon-picker input, .move-picker input { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--surface-2); padding: 10px 12px; }
.picker-help, .picker-empty { color: var(--text-muted); font-size: 14px; }
.picker-results { display: grid; gap: 6px; max-height: min(50vh, 400px); margin-top: 12px; overflow-y: auto; }
.picker-result { min-height: 44px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text); background: var(--surface-2); padding: 10px 12px; text-align: left; }
.picker-result:hover, .picker-result[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); }
.move-search-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; background: var(--surface-2); }
.move-search-label { color: var(--text-muted); font-size: 13px; font-weight: 700; }.move-search-value { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }.move-search-row .secondary-button { min-height: 38px; }.move-search-row .team-control { min-height: 38px; }
.slot-index { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-hover); font-size: 13px; font-weight: 700; }

.matchup-panel { min-height: 520px; }
.site-footer { display: grid; gap: 2px; border-top: 1px solid var(--border); margin-top: 4px; padding: 14px 2px 0; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }.site-footer a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }.site-footer a:hover, .site-footer a:focus-visible { color: var(--text); }.static-footer { margin-top: 20px; }.static-page { max-width: 920px; }.static-back-link { display: inline-flex; width: fit-content; margin-bottom: 16px; color: var(--accent-hover); text-decoration: none; }.static-back-link:hover, .static-back-link:focus-visible { color: var(--text); text-decoration: underline; }.static-article { display: grid; gap: 12px; }.static-article h1 { font-size: 32px; }.static-article h2 { margin-top: 10px; font-size: 21px; }.static-article p { color: var(--text-muted); line-height: 1.65; }.static-article a { color: var(--accent-hover); }.static-eyebrow { color: var(--accent-hover) !important; font-size: 14px; font-weight: 700; }
.status-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 6px 8px; border-radius: 6px; color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); font-size: 14px; }
.assumption-list { margin: 16px 0 0; padding-left: 20px; color: var(--text-muted); font-size: 14px; }
.empty-state { display: grid; min-height: 290px; place-content: center; gap: 12px; color: var(--text-muted); text-align: center; }
.empty-state strong { color: var(--text); font-size: 18px; }
.placeholder-label { display: inline-flex; width: fit-content; padding: 5px 8px; border-radius: 6px; color: var(--accent-hover); background: var(--accent-soft); font-size: 14px; font-weight: 600; }