/* TRYKER · shared component styles (toast, tabs, empty-state).
   Uses tokens from base.css where available. */

.tk-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(16px);
  max-width: min(92vw, 420px);
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(28, 28, 30, 0.92);
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 9999;
}
.tk-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.tk-toast.success { background: rgba(22, 101, 52, 0.95); }
.tk-toast.error { background: rgba(153, 27, 27, 0.95); }

.tk-tabs { display: flex; gap: 4px; overflow-x: auto; }
.tk-tab, .tk-tabs [data-tab] {
  padding: 10px 16px;
  border: 0;
  background: transparent;
  border-bottom: 2px solid transparent;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.tk-tabs [data-tab].active { border-bottom-color: currentColor; font-weight: 600; }
[data-panel][hidden] { display: none; }

.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: #6b7280;
}
.empty-state h3 { margin: 0 0 8px; font-size: 16px; color: inherit; }
.empty-state p { margin: 0; font-size: 14px; }