body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  background-color: #f0f4f8; /* Light blue-gray background */
  color: #334155; /* Slate-700 for text */
}

.panel {
  border: 1px solid #cbd5e1; /* Slate-300 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.preview-panel {
    border-left: 5px solid #0ea5e9; /* Sky-500 accent */
}

.input-placeholder,
textarea.input-placeholder {
  border: 1px dashed #94a3b8; /* Slate-400 */
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 0.375rem;
  background-color: #f8fafc; /* Slate-50 */
  color: #475569; /* Slate-600 */
  font-size: 0.9rem;
}
.input-placeholder:focus {
  outline: 2px solid #38bdf8; /* Sky-500 focus */
  border-style: solid;
}

select.input-placeholder {
    appearance: none; /* Remove default arrow for better Tailwind styling */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}


.button-placeholder-primary {
  background-color: #0ea5e9; /* Sky-500 */
  color: white;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}
.button-placeholder-primary:hover {
  background-color: #0284c7; /* Sky-600 */
}

.button-placeholder-secondary {
  background-color: #e2e8f0; /* Slate-200 */
  color: #334155; /* Slate-700 */
  padding: 0.6rem 1rem;
  border: 1px solid #cbd5e1; /* Slate-300 */
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}
.button-placeholder-secondary:hover {
  background-color: #cbd5e1; /* Slate-300 */
}


.form-section {
  padding: 1rem;
  border: 1px solid #e2e8f0; /* Slate-200 */
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  background-color: #f8fafc; /* Slate-50 */
}
.form-section h3 {
    border-bottom: 1px solid #e2e8f0; /* Slate-200 */
    padding-bottom: 0.5rem;
}

.tab-button {
  border: 1px solid transparent;
  border-bottom: none;
  color: #475569; /* Slate-600 */
  background-color: #f1f5f9; /* Slate-100 */
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}
.tab-button.active-tab {
  background-color: white;
  color: #0ea5e9; /* Sky-500 */
  border-color: #e2e8f0; /* Slate-200 */
  border-bottom: 1px solid white;
  position: relative;
  top: 1px;
  font-weight: 600;
}
.tab-button:hover:not(.active-tab) {
    background-color: #e2e8f0; /* Slate-200 */
}

.tab-content.hidden {
  display: none;
}

.preview-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b; /* Slate-800 */
  border-bottom: 2px solid #0ea5e9; /* Sky-500 */
  padding-bottom: 0.25rem;
  margin-bottom: 0.75rem;
}

.placeholder-text {
    /* For elements within the preview that are just for show */
    opacity: 0.8;
}

.skill-tag-placeholder {
    display: inline-block;
    background-color: #bae6fd; /* Sky-200 */
    color: #0369a1; /* Sky-700 */
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* pill shape */
    font-size: 0.8rem;
    margin: 0.2rem;
}

.wireframe-notice {
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
    background-color: #f0f4f8; /* Light blue-gray */
    color: #475569; /* Slate-600 */
    border: 1px dashed #94a3b8; /* Slate-400 */
    border-radius: 0.375rem;
    font-size: 0.85rem;
}