/* resources.css — style lokalne panelu z jednostkami względnymi */

.tabs {
  display: flex;
  gap: 0.625rem; /* 10px */
  margin-bottom: 1.125rem; /* 18px */
  justify-content: center;
}

.tab-btn {
  padding: 0.5rem 0.875rem; /* 8px 14px */
  border: 0.0625rem solid rgba(255,255,255,0.05); /* 1px */
  border-radius: 0.5rem; /* 8px */
  background: var(--surface-2);
  color: #d8e6f2;
  cursor: pointer;
  transition: background 0.2s;
}

.tab-btn.active {
  background: var(--accent-2);
  color: #032;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* Inputy i pola */
.form-group {
  margin-bottom: 0.875rem; /* 14px */
  display: flex;
  flex-direction: column;
}

.input {
  background: var(--surface-2);
  border: 0.0625rem solid rgba(255,255,255,0.06);
  color: #e6eef6;
  padding: 0.5rem 0.625rem; /* 8px 10px */
  border-radius: 0.5rem; /* 8px */
}

.prompt-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 12px */
}

.promptbox {
  border: 0.0625rem solid rgba(255,255,255,0.06);
  border-radius: 0.625rem; /* 10px */
  padding: 0.625rem; /* 10px */
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px */
}

.promptbox textarea {
  width: 100%;
  background: var(--card);
  border-radius: 0.375rem; /* 6px */
  border: 0.0625rem solid rgba(255,255,255,0.05);
  color: #e6eef6;
  padding: 0.375rem 0.5rem; /* 6px 8px */
  resize: vertical;
}

.promptbox .row {
  justify-content: space-between;
}

.prompt-name {
  background: var(--card);
  border: 0.0625rem solid rgba(255,255,255,0.05);
  border-radius: 0.375rem; /* 6px */
  color: #e6eef6;
  padding: 0.375rem 0.5rem; /* 6px 8px */
  width: 100%;
}

.btn-bar {
  justify-content: flex-end;
  margin-top: 0.625rem; /* 10px */
}

hr {
  border: none;
  border-top: 0.0625rem solid rgba(255,255,255,0.05); /* 1px */
  margin: 0.75rem 0; /* 12px */
}