@charset "UTF-8";
#studio-module-navigation {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 12px;
}
#studio-module-navigation .studio-module-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  text-decoration: none;
  color: #666;
  border-radius: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
}
#studio-module-navigation .studio-module-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #333;
}
#studio-module-navigation .studio-module-button.active {
  background-color: #e8f5e9;
  color: #4caf50;
}
#studio-module-navigation .studio-module-button .material-symbols-outlined {
  font-size: 24px;
  margin-bottom: 4px;
}
#studio-module-navigation .studio-module-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#studio-create-wizard {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
#studio-create-wizard .wizard-step-container {
  display: none;
  flex-direction: column;
  height: 100%;
  padding: 30px;
  width: 100%;
}
#studio-create-wizard .wizard-step-container.active {
  display: flex;
}
#studio-create-wizard .wizard-step-container .wizard-step-header {
  margin-bottom: 30px;
}
#studio-create-wizard .wizard-step-container .wizard-step-header h2 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}
#studio-create-wizard .wizard-step-container .wizard-step-header p {
  font-size: 16px;
  color: #666;
  margin: 0;
}
#studio-create-wizard .wizard-step-container .wizard-step-content {
  flex: 1;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .words-input-container {
  margin-bottom: 30px;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .words-input-container #studio-create-words-input,
#studio-create-wizard .wizard-step-container .wizard-step-content .words-input-container #studio-create-description-input {
  width: 100%;
  padding: 20px;
  font-size: 24px;
  border-bottom: 2px solid #e0e0e0;
  background: white;
  transition: border-color 0.2s ease;
  outline: none;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .words-input-container #studio-create-words-input:focus,
#studio-create-wizard .wizard-step-container .wizard-step-content .words-input-container #studio-create-description-input:focus {
  border-color: #2196f3;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .words-input-container #studio-create-words-input[data-empty=true]:not(:focus)::before,
#studio-create-wizard .wizard-step-container .wizard-step-content .words-input-container #studio-create-description-input[data-empty=true]:not(:focus)::before {
  content: attr(placeholder);
  color: #999;
  font-style: italic;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .words-input-container #studio-create-words-input[data-empty=true]:focus::before,
#studio-create-wizard .wizard-step-container .wizard-step-content .words-input-container #studio-create-description-input[data-empty=true]:focus::before {
  content: "";
}
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-cards-container,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-cards-container,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-cards-container {
  display: grid;
  padding-top: 50px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
  position: relative;
  min-height: 80px;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card:hover,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card:hover,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card:hover {
  border-color: #2196f3;
  background: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card.selected,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card.selected,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card.selected {
  border-color: #2196f3;
  background: #e3f2fd;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card.selected .domain-card-check,
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card.selected .category-card-check,
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card.selected .roles-card-check,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card.selected .domain-card-check,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card.selected .category-card-check,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card.selected .roles-card-check,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card.selected .domain-card-check,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card.selected .category-card-check,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card.selected .roles-card-check {
  display: block;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card:focus,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card:focus,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card:focus {
  outline: none;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card .domain-card-content,
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card .category-card-content,
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card .roles-card-content,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card .domain-card-content,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card .category-card-content,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card .roles-card-content,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card .domain-card-content,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card .category-card-content,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card .roles-card-content {
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card .domain-card-content h3,
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card .category-card-content h3,
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card .roles-card-content h3,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card .domain-card-content h3,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card .category-card-content h3,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card .roles-card-content h3,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card .domain-card-content h3,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card .category-card-content h3,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card .roles-card-content h3 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card .domain-card-content p,
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card .category-card-content p,
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card .roles-card-content p,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card .domain-card-content p,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card .category-card-content p,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card .roles-card-content p,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card .domain-card-content p,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card .category-card-content p,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card .roles-card-content p {
  font-size: 12px;
  color: #666;
  margin: 8px 0 0 0;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card .domain-card-check,
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card .category-card-check,
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card .roles-card-check,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card .domain-card-check,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card .category-card-check,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card .roles-card-check,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card .domain-card-check,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card .category-card-check,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card .roles-card-check {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card .domain-card-check .material-symbols-outlined,
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card .category-card-check .material-symbols-outlined,
#studio-create-wizard .wizard-step-container .wizard-step-content .domain-card .roles-card-check .material-symbols-outlined,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card .domain-card-check .material-symbols-outlined,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card .category-card-check .material-symbols-outlined,
#studio-create-wizard .wizard-step-container .wizard-step-content .category-card .roles-card-check .material-symbols-outlined,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card .domain-card-check .material-symbols-outlined,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card .category-card-check .material-symbols-outlined,
#studio-create-wizard .wizard-step-container .wizard-step-content .roles-card .roles-card-check .material-symbols-outlined {
  font-size: 20px;
  color: #2196f3;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container {
  padding-top: 30px;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .language-triggers-grid {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .language-grid-header {
  display: grid;
  grid-template-columns: 1fr 1fr 80px;
  gap: 16px;
  padding: 12px 16px;
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .language-grid-header .grid-cell-header {
  font-weight: 600;
  font-size: 13px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .language-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr 80px;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .language-grid-row:hover {
  background: #f8f9fa;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .language-grid-row.hidden {
  display: none;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .language-grid-row .grid-cell {
  display: flex;
  align-items: center;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .language-grid-row .grid-cell-action {
  display: flex;
  align-items: center;
  justify-content: center;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .language-grid-row .language-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  transition: border-color 0.2s ease;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .language-grid-row .language-input:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .language-grid-row .language-input:required {
  border-left: 3px solid #2196f3;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .language-grid-row .row-label {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .language-grid-row .btn-remove-row {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #999;
  border-radius: 4px;
  transition: all 0.2s ease;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .language-grid-row .btn-remove-row:hover {
  background: #ffebee;
  color: #f44336;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .language-grid-row .btn-remove-row .material-symbols-outlined {
  font-size: 18px;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .add-row-container {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .add-row-container .btn-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: white;
  border: 2px dashed #ddd;
  border-radius: 4px;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .add-row-container .btn-add-row:hover:not(:disabled) {
  border-color: #2196f3;
  color: #2196f3;
  background: #f8f9fa;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .add-row-container .btn-add-row:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .add-row-container .btn-add-row .material-symbols-outlined {
  font-size: 20px;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .language-triggers-container .add-row-container .row-counter {
  font-size: 12px;
  color: #999;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .form-section {
  margin-bottom: 24px;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .form-section .form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .form-section .form-input,
#studio-create-wizard .wizard-step-container .wizard-step-content .form-section .form-textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  transition: border-color 0.2s ease;
}
#studio-create-wizard .wizard-step-container .wizard-step-content .form-section .form-input:focus,
#studio-create-wizard .wizard-step-container .wizard-step-content .form-section .form-textarea:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}
#studio-create-wizard .wizard-step-container .wizard-step-content .form-section .form-textarea {
  resize: vertical;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 13px;
}

.precision-rule-header {
  margin-bottom: 20px;
}
.precision-rule-header h4 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}
.precision-rule-header p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #666;
}
.precision-rule-header .rule-uri-display {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}
.precision-rule-header .rule-uri-display label {
  font-size: 12px;
  font-weight: 500;
  color: #666;
  flex-shrink: 0;
}
.precision-rule-header .rule-uri-display code {
  font-family: "Monaco", "Menlo", monospace;
  font-size: 13px;
  color: #2196f3;
  background: white;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
}

.precision-rule-items .precision-items-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}
.precision-rule-items .precision-items-list .precision-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  background: white;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-header .item-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #2196f3;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 500;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-header .btn-remove-item {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-header .btn-remove-item:hover {
  color: #f44336;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-header .btn-remove-item .material-symbols-outlined {
  font-size: 20px;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group label {
  font-size: 12px;
  font-weight: 500;
  color: #666;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group input[type=text] {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border-color 0.2s ease;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group input[type=text]:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group input[type=text][readonly] {
  background: #f5f5f5;
  color: #666;
  cursor: not-allowed;
  font-family: "Monaco", "Menlo", monospace;
  font-size: 12px;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group select {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group select:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group .command-type-radios {
  display: flex;
  gap: 20px;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group .command-type-radios .radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group .command-type-radios .radio-option input[type=radio] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: #2196f3;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group .command-type-radios .radio-option span {
  cursor: pointer;
  user-select: none;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group .command-type-radios .radio-option:hover {
  color: #2196f3;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group .event-type-radios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group .event-type-radios .radio-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group .event-type-radios .radio-option input[type=radio] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: #2196f3;
  margin-top: 2px;
  flex-shrink: 0;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group .event-type-radios .radio-option span {
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  display: block;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group .event-type-radios .radio-option small {
  display: block;
  font-size: 11px;
  color: #666;
  margin-top: 2px;
  font-weight: normal;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group .event-type-radios .radio-option:hover {
  background: #f8f9fa;
  border-color: #e0e0e0;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group .event-type-radios .radio-option:has(input:checked) {
  background: #e3f2fd;
  border-color: #2196f3;
}
.precision-rule-items .precision-items-list .precision-item .precision-item-fields .field-group.uri-preview .uri-display {
  padding: 8px 12px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-family: "Monaco", "Menlo", monospace;
  font-size: 12px;
  color: #666;
  word-break: break-all;
}
.precision-rule-items .btn-add-precision-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: white;
  border: 2px dashed #ddd;
  border-radius: 4px;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  justify-content: center;
}
.precision-rule-items .btn-add-precision-item:hover:not(:disabled) {
  border-color: #2196f3;
  color: #2196f3;
  background: #f8f9fa;
}
.precision-rule-items .btn-add-precision-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: #999;
}
.precision-rule-items .btn-add-precision-item .material-symbols-outlined {
  font-size: 20px;
}

.precision-steps-container .precision-rules-selector {
  margin-bottom: 32px;
}
.precision-steps-container .precision-rules-selector label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 12px;
  display: block;
}
.precision-steps-container .precision-rules-selector .precision-rules-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.precision-steps-container .precision-rules-selector .precision-rules-list .precision-rule-option {
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.precision-steps-container .precision-rules-selector .precision-rules-list .precision-rule-option:hover {
  border-color: #2196f3;
  background: #f8f9fa;
}
.precision-steps-container .precision-rules-selector .precision-rules-list .precision-rule-option.selected {
  border-color: #2196f3;
  background: #e3f2fd;
}
.precision-steps-container .precision-rules-selector .precision-rules-list .precision-rule-option .rule-option-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.precision-steps-container .precision-rules-selector .precision-rules-list .precision-rule-option .rule-option-header input[type=radio] {
  margin: 0;
}
.precision-steps-container .precision-rules-selector .precision-rules-list .precision-rule-option .rule-option-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}
.precision-steps-container .precision-rules-selector .precision-rules-list .precision-rule-option p {
  margin: 0;
  font-size: 14px;
  color: #666;
  padding-left: 28px;
}
.precision-steps-container .selected-rule-info {
  margin: 20px 0;
}
.precision-steps-container .selected-rule-info .rule-uri-display {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}
.precision-steps-container .selected-rule-info .rule-uri-display label {
  font-size: 12px;
  font-weight: 500;
  color: #666;
  flex-shrink: 0;
}
.precision-steps-container .selected-rule-info .rule-uri-display code {
  font-family: "Monaco", "Menlo", monospace;
  font-size: 13px;
  color: #2196f3;
  background: white;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
}
.precision-steps-container .precision-rule-configuration .precision-rule-header {
  margin-bottom: 24px;
}
.precision-steps-container .precision-rule-configuration .precision-rule-header h4 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 8px 0;
}
.precision-steps-container .precision-rule-configuration .precision-rule-header p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.precision-steps-container {
  padding-top: 30px;
}
.precision-steps-container .precision-steps-wrapper {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}
.precision-steps-container .precision-step {
  border-bottom: 1px solid #f0f0f0;
}
.precision-steps-container .precision-step:last-child {
  border-bottom: none;
}
.precision-steps-container .precision-step.hidden {
  display: none;
}
.precision-steps-container .precision-step .precision-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}
.precision-steps-container .precision-step .precision-step-header .step-number {
  font-weight: 600;
  font-size: 14px;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.precision-steps-container .precision-step .precision-step-header .btn-remove-step {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #999;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.precision-steps-container .precision-step .precision-step-header .btn-remove-step:hover {
  background: #ffebee;
  color: #f44336;
}
.precision-steps-container .precision-step .precision-step-header .btn-remove-step .material-symbols-outlined {
  font-size: 18px;
}
.precision-steps-container .precision-step .precision-step-content {
  padding: 16px;
}
.precision-steps-container .precision-step .precision-step-content .precision-question {
  margin-bottom: 20px;
}
.precision-steps-container .precision-step .precision-step-content .precision-question label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #666;
  margin-bottom: 8px;
}
.precision-steps-container .precision-step .precision-step-content .precision-question .precision-question-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  transition: border-color 0.2s ease;
}
.precision-steps-container .precision-step .precision-step-content .precision-question .precision-question-input:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}
.precision-steps-container .precision-step .precision-step-content .precision-question .precision-question-input:required {
  border-left: 3px solid #2196f3;
}
.precision-steps-container .precision-step .precision-step-content .precision-options label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #666;
  margin-bottom: 8px;
}
.precision-steps-container .precision-step .precision-step-content .precision-options .precision-option-type {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  margin-bottom: 16px;
  cursor: pointer;
}
.precision-steps-container .precision-step .precision-step-content .precision-options .precision-option-type:focus {
  outline: none;
  border-color: #2196f3;
}
.precision-steps-container .precision-step .precision-step-content .precision-options .precision-options-list .options-preview {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}
.precision-steps-container .precision-step .precision-step-content .precision-options .precision-options-list .options-preview .option-item {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
}
.precision-steps-container .precision-step .precision-step-content .precision-options .precision-options-list .options-preview .option-item:last-child {
  border-bottom: none;
}
.precision-steps-container .precision-step .precision-step-content .precision-options .precision-options-list .options-preview .option-item .option-label {
  font-weight: 500;
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}
.precision-steps-container .precision-step .precision-step-content .precision-options .precision-options-list .options-preview .option-item .option-uri {
  font-family: "Monaco", "Menlo", monospace;
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}
.precision-steps-container .precision-step .precision-step-content .precision-options .precision-options-list .options-preview .option-item .option-description {
  font-size: 12px;
  color: #999;
}
.precision-steps-container .precision-step .precision-step-content .precision-options .precision-options-list .custom-options-input .helper-text {
  font-size: 12px;
  color: #666;
  margin-bottom: 12px;
}
.precision-steps-container .precision-step .precision-step-content .precision-options .precision-options-list .custom-options-input .custom-option-row {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  gap: 8px;
  margin-bottom: 8px;
}
.precision-steps-container .precision-step .precision-step-content .precision-options .precision-options-list .custom-options-input .custom-option-row input {
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.precision-steps-container .precision-step .precision-step-content .precision-options .precision-options-list .custom-options-input .custom-option-row input:focus {
  outline: none;
  border-color: #2196f3;
}
.precision-steps-container .add-step-container {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.precision-steps-container .add-step-container .btn-add-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: white;
  border: 2px dashed #ddd;
  border-radius: 4px;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.precision-steps-container .add-step-container .btn-add-step:hover:not(:disabled) {
  border-color: #2196f3;
  color: #2196f3;
  background: #f8f9fa;
}
.precision-steps-container .add-step-container .btn-add-step:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.precision-steps-container .add-step-container .btn-add-step .material-symbols-outlined {
  font-size: 20px;
}
.precision-steps-container .add-step-container .step-counter {
  font-size: 12px;
  color: #999;
}

.radio-option-container {
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 10px 20px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
.radio-option-container:hover {
  background-color: #e8e8e8;
  border: 1px solid rgba(50, 150, 255, 0.2);
}
.radio-option-container .radio-option {
  cursor: pointer;
  display: flex;
  align-items: flex-start;
}
.radio-option-container .radio-option input[type=radio] {
  cursor: pointer;
  margin-right: 10px;
  margin-top: 3px;
}
.radio-option-container .radio-option .radio-label {
  cursor: pointer;
  font-weight: 500;
}
.radio-option-container .radio-description {
  font-size: 12px;
  margin-left: 26px;
  color: #666;
}
.radio-option-container:has(input[type=radio]:checked) {
  background-color: rgba(50, 150, 255, 0.1);
  border: 1px solid rgba(50, 150, 255, 0.3);
}
.radio-option-container.selected {
  background-color: rgba(50, 150, 255, 0.1);
  border: 1px solid rgba(50, 150, 255, 0.3);
}

.precision-config-container .rule-description {
  font-size: 12px;
}
.precision-config-container .precision-config-rule-global-header {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #888;
}
.precision-config-container .field-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.precision-config-container .field-group label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}
.precision-config-container .field-group input[type=text],
.precision-config-container .field-group input[type=number],
.precision-config-container .field-group textarea {
  background-color: #f5f5f5;
  border: none;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  padding: 10px;
  outline: none;
  transition: all 0.2s ease;
}
.precision-config-container .field-group input[type=text]:focus,
.precision-config-container .field-group input[type=number]:focus,
.precision-config-container .field-group textarea:focus {
  background-color: rgba(50, 150, 255, 0.05);
  border-bottom-color: rgb(50, 150, 255);
}
.precision-config-container .field-group input[type=text]::placeholder,
.precision-config-container .field-group input[type=number]::placeholder,
.precision-config-container .field-group textarea::placeholder {
  color: #999;
  font-style: italic;
}
.precision-config-container .field-group textarea {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}
.precision-config-container .field-group small {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
  font-style: italic;
}
.precision-config-container .field-group .system-warning-input {
  background-color: #f5f5f5;
  border: none;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  margin-bottom: 15px;
  margin-top: 15px;
  padding: 15px 10px;
  outline: none;
}
.precision-config-container .field-group .system-warning-input:focus {
  background-color: rgba(50, 150, 255, 0.15);
  border-bottom-color: rgb(50, 150, 255);
}
.precision-config-container .rule-info-badge {
  display: flex;
  flex-direction: column;
}
.precision-config-container .rule-info-badge code {
  font-family: "Fira Code", monospace;
  background-color: rgba(150, 150, 150, 0.1);
  color: rgb(50, 150, 255);
  font-size: 12px;
  font-weight: 500;
}
.precision-config-container .restriction-controls {
  margin-top: 20px;
}
.precision-config-container .restriction-controls h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}
.precision-config-container .restriction-controls .restriction-controls-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
  font-style: italic;
}
.precision-config-container .restriction-controls .restriction-cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.precision-config-container .restriction-controls .restriction-cards .restriction-card {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  transition: all 0.2s ease;
}
.precision-config-container .restriction-controls .restriction-cards .restriction-card:hover {
  background: #f0f0f0;
  border-color: #d0d0d0;
}
.precision-config-container .restriction-controls .restriction-cards .restriction-card .restriction-card-content {
  display: flex;
  align-items: center;
  gap: 15px;
}
.precision-config-container .restriction-controls .restriction-cards .restriction-card .restriction-card-content .material-symbols-outlined {
  font-size: 24px;
  color: #666;
}
.precision-config-container .restriction-controls .restriction-cards .restriction-card .restriction-card-content .restriction-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.precision-config-container .restriction-controls .restriction-cards .restriction-card .restriction-card-content .restriction-info .restriction-name {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}
.precision-config-container .restriction-controls .restriction-cards .restriction-card .restriction-card-content .restriction-info .restriction-id {
  font-size: 12px;
  color: #888;
  font-family: "Fira Code", monospace;
}
.precision-config-container .restriction-controls .restriction-cards .restriction-card .restriction-note {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: #999;
  font-style: italic;
}
.precision-config-container .toggle-field-container {
  margin-bottom: 20px;
}
.precision-config-container .toggle-field-container .toggle-field-header {
  margin-bottom: 10px;
}
.precision-config-container .toggle-field-container .toggle-field-header .toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.precision-config-container .toggle-field-container .toggle-field-content .toggle-switch-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 8px;
}
.precision-config-container .toggle-field-container .toggle-field-content .toggle-switch-wrapper .toggle-option-label {
  font-size: 13px;
  color: #999;
  transition: color 0.3s ease;
  min-width: 80px;
}
.precision-config-container .toggle-field-container .toggle-field-content .toggle-switch-wrapper .toggle-option-label:first-child {
  text-align: right;
}
.precision-config-container .toggle-field-container .toggle-field-content .toggle-switch-wrapper .toggle-option-label.active {
  color: #333;
  font-weight: 500;
}
.precision-config-container .toggle-field-container .toggle-field-content .toggle-description {
  font-size: 12px;
  color: #666;
  font-style: italic;
  padding: 8px;
  background: #f9f9f9;
  border-radius: 4px;
  margin-top: 8px;
}
.precision-config-container .toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  display: inline-block;
}
.precision-config-container .toggle-switch input[type=checkbox] {
  display: none;
}
.precision-config-container .toggle-switch .toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 12px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
.precision-config-container .toggle-switch .toggle-slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 0;
  background-color: #e3f2fd;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}
.precision-config-container .toggle-switch input:checked + .toggle-slider {
  background-color: rgb(50, 150, 255);
}
.precision-config-container .toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}
.precision-config-container .toggle-switch.disabled {
  opacity: 0.6;
}
.precision-config-container .toggle-switch.disabled .toggle-slider {
  cursor: not-allowed;
}
.precision-config-container .hover-tooltip-config {
  padding: 20px;
}
.precision-config-container .hover-tooltip-config .config-header {
  margin-bottom: 30px;
}
.precision-config-container .hover-tooltip-config .config-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #222;
}
.precision-config-container .hover-tooltip-config .config-header .config-description {
  font-size: 14px;
  color: #666;
}
.precision-config-container .hover-tooltip-config .hover-config-fields .content-type-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.precision-config-container .hover-tooltip-config .hover-config-fields .radio-option {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.precision-config-container .hover-tooltip-config .hover-config-fields .radio-option:hover {
  background-color: #f0f7ff;
  border-color: #3296ff;
}
.precision-config-container .hover-tooltip-config .hover-config-fields .radio-option input[type=radio] {
  margin-top: 2px;
  margin-right: 12px;
  cursor: pointer;
}
.precision-config-container .hover-tooltip-config .hover-config-fields .radio-option span {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  display: block;
  margin-bottom: 4px;
}
.precision-config-container .hover-tooltip-config .hover-config-fields .radio-option small {
  font-size: 12px;
  color: #666;
  display: block;
  margin-left: 24px;
}
.precision-config-container .hover-tooltip-config .hover-config-fields .radio-group {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.precision-config-container .hover-tooltip-config .hover-config-fields .radio-group .radio-option {
  flex-direction: row;
  align-items: center;
  padding: 8px 16px;
  background-color: #f9f9f9;
}
.precision-config-container .hover-tooltip-config .hover-config-fields .radio-group .radio-option input[type=radio] {
  margin-right: 8px;
  margin-top: 0;
}
.precision-config-container .hover-tooltip-config .hover-config-fields .radio-group .radio-option span {
  margin-bottom: 0;
}
.precision-config-container .hover-tooltip-config .hover-config-fields .radio-group .radio-option small {
  display: none;
}
.precision-config-container .loading-precision-config {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: #666;
}
.precision-config-container .loading-precision-config .material-symbols-outlined {
  font-size: 48px;
  margin-bottom: 16px;
}
.precision-config-container .loading-precision-config .material-symbols-outlined.rotating {
  animation: spin 1s linear infinite;
}
.precision-config-container .loading-precision-config p {
  font-size: 14px;
}
.precision-config-container .no-rule-selected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px;
  text-align: center;
}
.precision-config-container .no-rule-selected .material-symbols-outlined {
  font-size: 48px;
  color: #999;
  margin-bottom: 16px;
}
.precision-config-container .no-rule-selected h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}
.precision-config-container .no-rule-selected p {
  font-size: 14px;
  color: #666;
  margin-bottom: 24px;
}
.precision-config-container .no-rule-selected .btn-back-to-rule-selection {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: #3296ff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease;
}
.precision-config-container .no-rule-selected .btn-back-to-rule-selection:hover {
  background-color: #2580e0;
}
.precision-config-container .no-rule-selected .btn-back-to-rule-selection .material-symbols-outlined {
  font-size: 20px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.save-step-container {
  padding: 20px 0;
}
.save-step-container .validation-section {
  margin-bottom: 32px;
  display: none;
}
.save-step-container .validation-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}
.save-step-container .validation-section .validation-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  border: 2px solid #e0e0e0;
  background: #f8f9fa;
  margin-bottom: 16px;
}
.save-step-container .validation-section .validation-status .status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.save-step-container .validation-section .validation-status .status-icon .material-symbols-outlined {
  font-size: 24px;
}
.save-step-container .validation-section .validation-status .status-icon .material-symbols-outlined.rotating {
  animation: spin 1s linear infinite;
}
.save-step-container .validation-section .validation-status .status-icon .material-symbols-outlined.success {
  color: #4caf50;
}
.save-step-container .validation-section .validation-status .status-icon .material-symbols-outlined.error {
  color: #f44336;
}
.save-step-container .validation-section .validation-status .status-message {
  font-size: 14px;
  color: #666;
  flex: 1;
}
.save-step-container .validation-section .validation-status.valid {
  border-color: #4caf50;
  background: #e8f5e9;
}
.save-step-container .validation-section .validation-status.valid .status-message {
  color: #2e7d32;
}
.save-step-container .validation-section .validation-status.invalid {
  border-color: #f44336;
  background: #ffebee;
}
.save-step-container .validation-section .validation-status.invalid .status-message {
  color: #c62828;
}
.save-step-container .validation-section .validation-status.validating {
  border-color: #2196f3;
  background: #e3f2fd;
}
.save-step-container .validation-section .validation-status.validating .status-message {
  color: #1565c0;
}
.save-step-container .validation-section .validation-errors {
  background: #ffebee;
  border: 1px solid #ffcdd2;
  border-radius: 4px;
  padding: 16px;
  margin-top: 16px;
}
.save-step-container .validation-section .validation-errors h4 {
  font-size: 14px;
  font-weight: 600;
  color: #c62828;
  margin: 0 0 12px 0;
}
.save-step-container .validation-section .validation-errors ul {
  margin: 0;
  padding-left: 20px;
}
.save-step-container .validation-section .validation-errors ul li {
  color: #d32f2f;
  font-size: 13px;
  margin-bottom: 8px;
}
.save-step-container .validation-section .validation-errors ul li strong {
  color: #c62828;
}
.save-step-container .validation-section .validation-errors ul li small {
  color: #666;
  font-family: "Monaco", "Menlo", monospace;
  font-size: 11px;
}
.save-step-container .validation-info {
  font-size: 13px;
  color: #666;
  font-style: italic;
  margin: 8px 0 16px 0;
}
.save-step-container .save-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}
.save-step-container .save-actions button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.save-step-container .save-actions button .material-symbols-outlined {
  font-size: 20px;
}
.save-step-container .save-actions button .material-symbols-outlined.rotating {
  animation: spin 1s linear infinite;
}
.save-step-container .save-actions button.btn-validate {
  background: #2196f3;
  color: white;
}
.save-step-container .save-actions button.btn-validate:hover:not(:disabled) {
  background: #1976d2;
}
.save-step-container .save-actions button.btn-validate:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.save-step-container .save-actions button.btn-save-intent {
  background: #4caf50;
  color: white;
}
.save-step-container .save-actions button.btn-save-intent:hover:not(:disabled) {
  background: #388e3c;
}
.save-step-container .save-actions button.btn-save-intent:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.save-step-container .save-result .save-success,
.save-step-container .save-result .save-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px;
  border-radius: 8px;
}
.save-step-container .save-result .save-success .material-symbols-outlined,
.save-step-container .save-result .save-error .material-symbols-outlined {
  font-size: 48px;
  margin-bottom: 16px;
}
.save-step-container .save-result .save-success h3,
.save-step-container .save-result .save-error h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px 0;
}
.save-step-container .save-result .save-success p,
.save-step-container .save-result .save-error p {
  font-size: 14px;
  margin: 0 0 8px 0;
}
.save-step-container .save-result .save-success .redirect-message,
.save-step-container .save-result .save-error .redirect-message {
  font-size: 12px;
  color: #666;
  font-style: italic;
  margin-top: 16px;
}
.save-step-container .save-result .save-success {
  background: #e8f5e9;
  border: 2px solid #4caf50;
}
.save-step-container .save-result .save-success .material-symbols-outlined {
  color: #4caf50;
}
.save-step-container .save-result .save-success h3 {
  color: #2e7d32;
}
.save-step-container .save-result .save-error {
  background: #ffebee;
  border: 2px solid #f44336;
}
.save-step-container .save-result .save-error .material-symbols-outlined {
  color: #f44336;
}
.save-step-container .save-result .save-error h3 {
  color: #c62828;
}
.save-step-container .save-result .save-error p {
  color: #d32f2f;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.wizard-actions {
  padding-top: 30px;
  padding-bottom: 30px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.wizard-actions button {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.wizard-actions button.btn-primary {
  background: #2196F3;
  color: white;
}
.wizard-actions button.btn-primary:hover {
  background: #1976D2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.wizard-actions button.btn-secondary {
  background: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
}
.wizard-actions button.btn-secondary:hover {
  background: #e0e0e0;
}
.wizard-actions button.btn-save {
  background: #4CAF50;
  color: white;
}
.wizard-actions button.btn-save:hover {
  background: #388E3C;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.commands-method-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 20px 0;
}
.commands-method-container .method-card {
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  background: white;
}
.commands-method-container .method-card:hover {
  border-color: #2196F3;
  background: #f8f9fa;
}
.commands-method-container .method-card.selected {
  border-color: #2196F3;
  background: #e3f2fd;
}
.commands-method-container .method-card.selected .method-card-check {
  opacity: 1;
}
.commands-method-container .method-card .method-card-content h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 500;
  color: #333;
}
.commands-method-container .method-card .method-card-content p {
  margin: 0;
  font-size: 13px;
  color: #666;
}
.commands-method-container .method-card .method-card-check {
  position: absolute;
  top: 12px;
  right: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
  color: #2196F3;
}
.commands-method-container .method-card .method-card-check .material-symbols-outlined {
  font-size: 24px;
}

.commands-uri-container {
  padding: 20px 0;
}
.commands-uri-container .uri-input-wrapper #commands-uri-input {
  width: 100%;
  min-height: 60px;
  padding: 16px;
  font-size: 16px;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: white;
  transition: border-color 0.2s ease;
  outline: none;
}
.commands-uri-container .uri-input-wrapper #commands-uri-input:focus {
  border-color: #2196F3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}
.commands-uri-container .uri-input-wrapper #commands-uri-input:empty:before {
  content: attr(placeholder);
  color: #999;
  font-style: italic;
}

.commands-params-container {
  padding: 20px 0;
}
.commands-params-container .params-grid .params-grid-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 16px;
}
.commands-params-container .params-grid .params-grid-header .grid-column label {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.commands-params-container .params-grid .params-grid-rows .params-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
  margin-bottom: 12px;
  align-items: center;
  position: relative;
}
.commands-params-container .params-grid .params-grid-rows .params-grid-row.hidden {
  display: none;
}
.commands-params-container .params-grid .params-grid-rows .params-grid-row .grid-column input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  transition: border-color 0.2s ease;
}
.commands-params-container .params-grid .params-grid-rows .params-grid-row .grid-column input:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}
.commands-params-container .params-grid .params-grid-rows .params-grid-row .grid-column input::placeholder {
  color: #999;
  font-style: italic;
}
.commands-params-container .params-grid .params-grid-rows .params-grid-row .btn-remove-row {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: white;
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.commands-params-container .params-grid .params-grid-rows .params-grid-row .btn-remove-row:hover {
  border-color: #f44336;
  color: #f44336;
  background: #ffebee;
}
.commands-params-container .params-grid .params-grid-rows .params-grid-row .btn-remove-row .material-symbols-outlined {
  font-size: 18px;
}
.commands-params-container .params-grid .add-row-container {
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e0e0e0;
  margin-top: 16px;
}
.commands-params-container .params-grid .add-row-container .btn-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: white;
  border: 2px dashed #ddd;
  border-radius: 4px;
  color: #666;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.commands-params-container .params-grid .add-row-container .btn-add-row:hover:not(:disabled) {
  border-color: #2196F3;
  color: #2196F3;
  background: #f8f9fa;
}
.commands-params-container .params-grid .add-row-container .btn-add-row:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.commands-params-container .params-grid .add-row-container .btn-add-row .material-symbols-outlined {
  font-size: 20px;
}
.commands-params-container .params-grid .add-row-container .row-counter {
  font-size: 12px;
  color: #999;
}

.studio-create-input-elem.studio-create-input-error {
  background-color: rgba(255, 0, 0, 0.1) !important;
}

#studio-create-workflow {
  height: calc(100vh - 200px);
  overflow-y: auto;
}
#studio-create-workflow .studio-workflow-section {
  margin-bottom: 30px;
  background: white;
  overflow: hidden;
}
#studio-create-workflow .studio-workflow-section[data-section=intent] {
  border-left: 3px solid #4CAF50;
}
#studio-create-workflow .studio-workflow-section[data-section=command] {
  border-left: 3px solid #2196F3;
}
#studio-create-workflow .studio-workflow-section[data-section=precision] {
  border-left: 3px solid #FF9800;
}
#studio-create-workflow .studio-workflow-section[data-section=review] {
  border-left: 3px solid #9C27B0;
}
#studio-create-workflow .studio-workflow-section .studio-workflow-header {
  padding: 12px 16px;
  background: #f5f5f5;
  font-weight: 600;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}
#studio-create-workflow .studio-workflow-section .studio-workflow-header .material-symbols-outlined {
  font-size: 20px;
  opacity: 0.7;
}
#studio-create-workflow .studio-workflow-section .studio-workflow-steps {
  padding: 8px 0;
}
#studio-create-workflow .studio-workflow-section .studio-workflow-steps .studio-workflow-step {
  padding: 12px 16px;
  cursor: default;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  opacity: 0.6;
}
#studio-create-workflow .studio-workflow-section .studio-workflow-steps .studio-workflow-step.clickable {
  cursor: pointer;
  opacity: 1;
}
#studio-create-workflow .studio-workflow-section .studio-workflow-steps .studio-workflow-step.clickable:hover {
  background: #f8f9fa;
}
#studio-create-workflow .studio-workflow-section .studio-workflow-steps .studio-workflow-step.completed {
  opacity: 1;
}
#studio-create-workflow .studio-workflow-section .studio-workflow-steps .studio-workflow-step.completed .step-indicator {
  background: #4CAF50;
  border-color: #4CAF50;
}
#studio-create-workflow .studio-workflow-section .studio-workflow-steps .studio-workflow-step.completed .step-indicator::after {
  content: "✓";
  color: white;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#studio-create-workflow .studio-workflow-section .studio-workflow-steps .studio-workflow-step.active {
  background: #e3f2fd;
}
#studio-create-workflow .studio-workflow-section .studio-workflow-steps .studio-workflow-step.active .step-indicator {
  background: #2196F3;
  border-color: #2196F3;
}
#studio-create-workflow .studio-workflow-section .studio-workflow-steps .studio-workflow-step.active.completed .step-indicator {
  background: #4CAF50;
  border-color: #4CAF50;
}
#studio-create-workflow .studio-workflow-section .studio-workflow-steps .studio-workflow-step.active.completed .step-indicator::after {
  content: "✓";
}
#studio-create-workflow .studio-workflow-section .studio-workflow-steps .studio-workflow-step .step-indicator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #ddd;
  background: white;
  position: relative;
  flex-shrink: 0;
}
#studio-create-workflow .studio-workflow-section .studio-workflow-steps .studio-workflow-step .step-content {
  flex: 1;
}
#studio-create-workflow .studio-workflow-section .studio-workflow-steps .studio-workflow-step .step-content .step-title {
  font-weight: 500;
  font-size: 14px;
  color: #333;
  margin-bottom: 2px;
}
#studio-create-workflow .studio-workflow-section .studio-workflow-steps .studio-workflow-step .step-content .step-description {
  font-size: 12px;
  color: #666;
}

#left-column-wrapper:has(#studio-create-left-column) {
  min-width: 400px !important;
  height: calc(100vh - 80px);
  box-sizing: border-box;
}

#studio-create-left-column {
  height: calc(100vh - 80px);
  padding: 20px;
}
#studio-create-left-column #studio-create-left-header {
  margin-bottom: 24px;
}
#studio-create-left-column #studio-create-left-header .studio-create-header-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
#studio-create-left-column #studio-create-left-header .studio-create-header-title .material-symbols-outlined {
  margin-right: 8px;
  font-size: 24px;
}
#studio-create-left-column #studio-create-left-header .studio-create-header-subtitle {
  font-size: 14px;
  color: #666;
}
#studio-create-left-column #studio-create-left-content .studio-create-section {
  margin-bottom: 24px;
}
#studio-create-left-column #studio-create-left-content .studio-create-section .studio-create-section-title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
#studio-create-left-column #studio-create-left-content .studio-create-section .studio-create-items .studio-create-item {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  margin-bottom: 8px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
#studio-create-left-column #studio-create-left-content .studio-create-section .studio-create-items .studio-create-item:hover {
  background: #e9ecef;
  transform: translateX(4px);
}
#studio-create-left-column #studio-create-left-content .studio-create-section .studio-create-items .studio-create-item.active {
  background: #007bff;
  color: white;
}
#studio-create-left-column #studio-create-left-content .studio-create-section .studio-create-items .studio-create-item.active .studio-create-item-description {
  color: rgba(255, 255, 255, 0.9);
}
#studio-create-left-column #studio-create-left-content .studio-create-section .studio-create-items .studio-create-item .studio-create-item-icon {
  margin-right: 12px;
}
#studio-create-left-column #studio-create-left-content .studio-create-section .studio-create-items .studio-create-item .studio-create-item-icon .material-symbols-outlined {
  font-size: 24px;
  color: #007bff;
}
#studio-create-left-column #studio-create-left-content .studio-create-section .studio-create-items .studio-create-item.active .studio-create-item-icon .material-symbols-outlined {
  color: white;
}
#studio-create-left-column #studio-create-left-content .studio-create-section .studio-create-items .studio-create-item .studio-create-item-content {
  flex: 1;
}
#studio-create-left-column #studio-create-left-content .studio-create-section .studio-create-items .studio-create-item .studio-create-item-content .studio-create-item-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
#studio-create-left-column #studio-create-left-content .studio-create-section .studio-create-items .studio-create-item .studio-create-item-content .studio-create-item-description {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}