.fs-wrap { max-width: 640px; padding: 24px; }
.fs-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
.fs-desc { color: #6b7280; font-size: 0.9rem; margin-bottom: 24px; }

.fs-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 24px;
}

.fs-section-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 20px;
  color: #111827;
}

.fs-loading, .fs-error {
  color: #6b7280;
  font-size: 0.9rem;
  padding: 8px 0;
}
.fs-error { color: #dc2626; }

.fs-form { display: flex; flex-direction: column; gap: 20px; }

.fs-field { display: flex; flex-direction: column; gap: 6px; }
.fs-label { font-size: 0.875rem; font-weight: 500; color: #374151; }
.fs-input {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s;
}
.fs-input:focus { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,.15); }
.fs-hint { font-size: 0.8rem; color: #9ca3af; margin: 0; }

.fs-actions { display: flex; align-items: center; gap: 16px; }
.fs-btn-save {
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.fs-btn-save:hover { background: #4f46e5; }
.fs-btn-save:disabled { background: #a5b4fc; cursor: not-allowed; }

.fs-msg { font-size: 0.875rem; }
.fs-msg--ok { color: #16a34a; }
.fs-msg--err { color: #dc2626; }

/* ── 開発ツール ── */
.fs-dt-wrap {
  margin-top: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.fs-dt-header {
  background: #f3f4f6;
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
}

.fs-tabs {
  display: flex;
  gap: 0;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.fs-tab {
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.fs-tab:hover { color: #374151; }
.fs-tab--active {
  color: #6366f1;
  border-bottom-color: #6366f1;
  background: #fff;
}

.fs-tab-pane { background: #fff; }

.fs-dt-section { padding: 20px; }

.fs-dt-desc {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 20px;
  line-height: 1.6;
}
.fs-dt-desc code {
  background: #f3f4f6;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.fs-dt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.fs-dt-form { display: flex; flex-direction: column; gap: 0; }

.fs-required { color: #dc2626; font-size: 0.8rem; }

.fs-dt-result {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 16px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
}

.fs-dt-result-label {
  font-size: 0.8rem;
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
}

.fs-dt-result-code {
  flex: 1;
  font-size: 0.85rem;
  color: #166534;
  word-break: break-all;
}

.fs-dt-copy-btn {
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.8rem;
  color: #166534;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.fs-dt-copy-btn:hover { background: #bbf7d0; }