.tb-wrap { max-width: var(--container-wide); margin: 0 auto; padding: 32px 20px 60px; }
.tb-header { margin-bottom: 20px; }
.tb-title {
  font-family: var(--font-display); font-size: clamp(30px, 5.5vw, 42px);
  font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px;
}
.tb-sub { font-size: var(--text-base); color: var(--t2); max-width: 640px; margin-bottom: 16px; }
.tb-header-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.tb-warning-banner {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; margin-bottom: 16px;
  background: var(--warn-d); border: 1px solid var(--warn-b); border-radius: var(--radius);
  color: var(--warn); font-size: var(--text-sm); line-height: 1.5;
}

.tb-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.tb-slot { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }

.tb-pick-btn {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px; text-align: left;
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--t1);
  border-bottom: 1px solid var(--line); transition: background var(--transition);
}
.tb-pick-btn:hover { background: var(--surface2); }
.tb-pick-btn-empty { color: var(--t3); justify-content: center; padding: 26px 14px; font-weight: 400; }
.tb-pick-btn-types { margin-left: auto; display: flex; gap: 4px; }

.tb-slot-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.tb-row { display: flex; flex-direction: column; gap: 4px; }
.tb-row label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.tb-row select {
  background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--radius); padding: 9px 10px;
  font-size: var(--text-sm); color: var(--t1); min-height: 38px;
}
.tb-item-warning { font-size: var(--text-2xs); color: var(--danger); }

.tb-stats-total { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--t2); margin-bottom: 2px; }
.tb-stats-total.is-over { color: var(--danger); font-weight: 700; }
.tb-stat-row { display: flex; align-items: center; gap: 8px; }
.tb-stat-label { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--t3); width: 60px; flex-shrink: 0; }
.tb-stat-base { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--t3); width: 26px; text-align: right; flex-shrink: 0; }
.tb-stat-nature { width: 12px; flex-shrink: 0; text-align: center; font-weight: 700; font-size: var(--text-sm); }
.tb-stat-nature.up { color: var(--ok); }
.tb-stat-nature.down { color: var(--danger); }
.tb-stat-points {
  width: 50px; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--radius);
  padding: 6px 6px; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--t1); text-align: center;
}

.tb-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.tb-picker-search {
  width: 100%; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--radius);
  padding: 10px 12px; font-size: var(--text-base); color: var(--t1); margin-bottom: 10px;
}

.tb-save-label {
  display: block; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--t3); margin-bottom: 6px;
}
.tb-save-error { font-size: var(--text-sm); color: var(--danger); min-height: 18px; margin-bottom: 6px; }

/* Spam honeypot — off-screen, not display:none (some bots skip hidden
   fields but still fill in anything they can find in the DOM). Real users
   never see or reach it, so it should always be empty on submit. */
.tb-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }