.tbpkt-page { padding: 20px; color: #1f2937; }
.tbpkt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tbpkt-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tbpkt-progress { border-left: 4px solid #2563eb; background: #eff6ff; }
.tbpkt-progress.done { border-left-color: #16a34a; background: #f0fdf4; }
.tbpkt-progress.error { border-left-color: #dc2626; background: #fef2f2; }
.tbpkt-progress-grid { display: grid; grid-template-columns: minmax(160px, 1fr) repeat(4, minmax(90px, auto)); gap: 12px; align-items: center; }
.tbpkt-filters { display: grid; grid-template-columns: minmax(260px, 1fr) 180px 180px auto; gap: 10px; align-items: end; }
.tbpkt-table-wrap { overflow: auto; max-height: calc(100vh - 310px); min-height: 360px; }
.tbpkt-table { min-width: 1320px; border-collapse: separate; border-spacing: 0; }
.tbpkt-table thead th { position: sticky; top: 0; z-index: 3; }
.tbpkt-table td { vertical-align: top; }
.tbpkt-name { max-width: 320px; white-space: normal; line-height: 1.45; font-weight: 700; color: #111827; }
.tbpkt-description { max-width: 320px; white-space: normal; margin-top: 4px; color: #6b7280; font-size: 12px; line-height: 1.45; }
.tbpkt-time { line-height: 1.5; font-size: 12px; color: #4b5563; }
.tbpkt-rule { line-height: 1.6; }
.tbpkt-rule strong { color: #111827; }
.tbpkt-product-modal { width: min(1120px, calc(100vw - 40px)); max-width: 1120px; }
.tbpkt-batch-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; margin-top: 12px; }
.tbpkt-batch-item { border: 1px solid #dbeafe; background: #fff; border-radius: 6px; padding: 9px 10px; min-width: 0; }
.tbpkt-batch-item.failed { border-color: #fecaca; background: #fff7f7; }
.tbpkt-batch-item.succeeded { border-color: #bbf7d0; background: #f7fff9; }
.tbpkt-empty { padding: 56px 20px; text-align: center; color: #9ca3af; }
.tbpkt-debug-form { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 12px; align-items: end; }
.tbpkt-debug-error { margin-top: 12px; padding: 10px 12px; border: 1px solid #fecaca; border-radius: 6px; background: #fef2f2; color: #b91c1c; white-space: pre-wrap; }
.tbpkt-debug-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tbpkt-debug-stats > div { min-width: 0; padding: 10px; border: 1px solid #e5e7eb; border-radius: 6px; background: #f9fafb; }
.tbpkt-debug-stats span { display: block; margin-bottom: 5px; color: #6b7280; font-size: 12px; }
.tbpkt-debug-stats strong { display: block; overflow-wrap: anywhere; color: #111827; }
.tbpkt-debug-page details summary { cursor: pointer; color: #2563eb; font-weight: 600; }
.tbpkt-debug-json { max-height: 520px; overflow: auto; margin-top: 8px; padding: 12px; border-radius: 6px; background: #111827; color: #f9fafb; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .tbpkt-toolbar { align-items: flex-start; flex-direction: column; }
  .tbpkt-filters { grid-template-columns: 1fr; }
  .tbpkt-progress-grid { grid-template-columns: 1fr 1fr; }
  .tbpkt-debug-form, .tbpkt-debug-stats { grid-template-columns: 1fr; }
}